diff --git a/components/strategies/StrategyRowCard/index.tsx b/components/strategies/StrategyRowCard/index.tsx index 77a08a9c0..0d165f091 100644 --- a/components/strategies/StrategyRowCard/index.tsx +++ b/components/strategies/StrategyRowCard/index.tsx @@ -35,7 +35,7 @@ const StrategyRowCard: FC = ({ title, description, button, tags, imgPath, )} {imgPath && ( - strategy + strategy )} {title} diff --git a/components/strategies/StrategyTag/index.tsx b/components/strategies/StrategyTag/index.tsx index 1ea8e93c1..43ac3669f 100644 --- a/components/strategies/StrategyTag/index.tsx +++ b/components/strategies/StrategyTag/index.tsx @@ -15,7 +15,7 @@ const StrategyTag: FC = ({ 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 index 664f364a7..1f237be8e 100644 --- a/pages/strategies.tsx +++ b/pages/strategies.tsx @@ -1,19 +1,23 @@ 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 = [ { @@ -21,7 +25,7 @@ const Strategies: NextPage = () => { 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: ( ), }, + { + 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: ( + + ), + }, + { + 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: ( + + ), + }, ]; 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: ( - + ), + 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: ( + + + + ), + 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: ( + + + + ), + 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) => ( - + {exactlyStrategies.map((strategy, i) => ( + <> + + {i !== exactlyStrategies.length - 1 && } + ))} @@ -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) => ( - + {thirdPartStrategies.map((strategy, i) => ( + <> + + {i !== exactlyStrategies.length - 1 && } + ))} diff --git a/public/img/strategies/socket-logo.svg b/public/img/strategies/socket-logo.svg new file mode 100644 index 000000000..42e1565fd --- /dev/null +++ b/public/img/strategies/socket-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +