♻️ strategies: add strategies

exactly · Sep 26, 2023 · ee407cb · ee407cb
1 parent d815333
commit ee407cb
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 11 deletions.
diff --git a/components/strategies/StrategyRowCard/index.tsx b/components/strategies/StrategyRowCard/index.tsx
@@ -35,7 +35,7 @@ const StrategyRowCard: FC<Props> = ({ title, description, button, tags, imgPath,
           </Typography>
         )}
         {imgPath && (
-          <Image src={imgPath} alt="strategy" width={20} height={20} style={{ maxWidth: '100%', height: 'auto' }} />
+          <Image src={imgPath} alt="strategy" width={24} height={24} style={{ maxWidth: '100%', height: 'auto' }} />
         )}
         <Typography component="h3" fontSize={16} fontWeight={700}>
           {title}

diff --git a/components/strategies/StrategyTag/index.tsx b/components/strategies/StrategyTag/index.tsx
@@ -15,7 +15,7 @@ const StrategyTag: FC<StrategyTagProps> = ({ text, prefix, size = 'medium' }) =>
       justifyContent="center"
       gap={1}
       borderRadius="4px"
-      border={({ palette }) => `1px solid ${palette.grey[500]}`}
+      border={({ palette }) => `1px solid ${palette.grey[300]}`}
       px={1}
       minWidth={size === 'small' ? 96 : 168}
     >

diff --git a/pages/strategies.tsx b/pages/strategies.tsx
@@ -1,34 +1,66 @@
 import React from 'react';
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Divider, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
 import { usePageView } from 'hooks/useAnalytics';
-import { useStartLeverager } from 'hooks/useActionButton';
+import { useStartDebtManagerButton, useStartLeverager } from 'hooks/useActionButton';
 import StrategyRowCard from 'components/strategies/StrategyRowCard';
+import Link from 'next/link';
+import useRouter from 'hooks/useRouter';
 
 const FeaturedStrategies = dynamic(() => import('components/strategies/FeaturedStrategies'));
 
 const Strategies: NextPage = () => {
   usePageView('/strategies', 'Strategies');
   const { t } = useTranslation();
+  const { query } = useRouter();
   const { startLeverager } = useStartLeverager();
+  const { startDebtManager } = useStartDebtManagerButton();
 
   const exactlyStrategies = [
     {
       title: t('Maximize your yield'),
       description: t('Amplify gains or mitigate risk with the power of leverage and deleverage in your investments.'),
       tags: [
         { prefix: t('up to'), text: '48.16 APR' },
-        { text: 'Advanced', size: 'small' as const },
+        { text: t('Advanced'), size: 'small' as const },
       ],
       button: (
         <Button fullWidth variant="contained" onClick={() => startLeverager()}>
           {t('Leverage')}
         </Button>
       ),
     },
+    {
+      title: t('Reduce Exposure'),
+      description: t('Reduce your risk by decreasing your investment exposure and borrowing less.'),
+      tags: [
+        { prefix: t('Health Factor'), text: '2.010' },
+        { text: t('Advanced'), size: 'small' as const },
+      ],
+      button: (
+        <Button fullWidth variant="contained" onClick={() => startLeverager()}>
+          {t('Deleverage')}
+        </Button>
+      ),
+    },
+    {
+      title: t('Refinance Loans'),
+      description: t(
+        'Seamlessly transfer your debt positions between different pools or convert from fixed to variable rates, and vice versa.',
+      ),
+      tags: [
+        { prefix: t('FROM'), text: '1.83% APR' },
+        { text: t('Basic'), size: 'small' as const },
+      ],
+      button: (
+        <Button fullWidth variant="contained" onClick={() => startDebtManager({})}>
+          {t('Rollover')}
+        </Button>
+      ),
+    },
   ];
 
   const thirdPartStrategies = [
@@ -37,15 +69,50 @@ const Strategies: NextPage = () => {
       description: t('Deposit EXA on Extra Finance and earn interest on it.'),
       tags: [
         { prefix: t('up to'), text: '48.16 APR' },
-        { text: 'Basic', size: 'small' as const },
+        { text: t('Basic'), size: 'small' as const },
       ],
       button: (
-        <a href="https://app.extrafi.io/lend/EXA" target="_blank" rel="noreferrer noopener">
+        <a href="https://app.extrafi.io/lend/EXA" target="_blank" rel="noreferrer noopener" style={{ width: '100%' }}>
           <Button fullWidth variant="contained">
             {t('Go to Extra Finance')}
           </Button>
         </a>
       ),
+      imgPath: '/img/assets/EXTRA.svg',
+    },
+    {
+      title: t('Provide Liquidity on Velodrome'),
+      description: t('Provide liquidity to the EXA/wETH pool.'),
+      tags: [
+        { prefix: t('up to'), text: '48.16 APR' },
+        { text: t('Basic'), size: 'small' as const },
+      ],
+      button: (
+        <a
+          href="https://velodrome.finance/deposit?token0=0x1e925de1c68ef83bd98ee3e130ef14a50309c01b&token1=eth"
+          target="_blank"
+          rel="noreferrer noopener"
+          style={{ width: '100%' }}
+        >
+          <Button fullWidth variant="contained">
+            {t('Go to Velodrome')}
+          </Button>
+        </a>
+      ),
+      imgPath: '/img/assets/VELO.svg',
+    },
+    {
+      title: t('Bridge & Swap with Socket'),
+      description: t('Seamlessly bridge and swap assets to OP Mainnet from many different networks.'),
+      tags: [{ text: t('Cross Network') }, { text: t('Basic'), size: 'small' as const }],
+      button: (
+        <Link href={{ pathname: `/bridge`, query }} style={{ width: '100%' }}>
+          <Button fullWidth variant="contained">
+            {t('Bridge & Swap')}
+          </Button>
+        </Link>
+      ),
+      imgPath: '/img/strategies/socket-logo.svg',
     },
   ];
 
@@ -75,8 +142,11 @@ const Strategies: NextPage = () => {
             borderRadius="8px"
             boxShadow={({ palette }) => (palette.mode === 'light' ? '0px 3px 4px 0px rgba(97, 102, 107, 0.25)' : '')}
           >
-            {exactlyStrategies.map((strategy) => (
-              <StrategyRowCard key={strategy.title} {...strategy} />
+            {exactlyStrategies.map((strategy, i) => (
+              <>
+                <StrategyRowCard key={strategy.title} {...strategy} />
+                {i !== exactlyStrategies.length - 1 && <Divider key={`divider_${i}`} flexItem />}
+              </>
             ))}
           </Box>
         </Box>
@@ -94,8 +164,11 @@ const Strategies: NextPage = () => {
             borderRadius="8px"
             boxShadow={({ palette }) => (palette.mode === 'light' ? '0px 3px 4px 0px rgba(97, 102, 107, 0.25)' : '')}
           >
-            {thirdPartStrategies.map((strategy) => (
-              <StrategyRowCard key={strategy.title} {...strategy} />
+            {thirdPartStrategies.map((strategy, i) => (
+              <>
+                <StrategyRowCard key={strategy.title} {...strategy} />
+                {i !== exactlyStrategies.length - 1 && <Divider key={`divider_${i}`} flexItem />}
+              </>
             ))}
           </Box>
         </Box>

diff --git a/public/img/strategies/socket-logo.svg b/public/img/strategies/socket-logo.svg