diff --git a/.env.dev b/.env.dev index 95c64b470e..5c4633047e 100644 --- a/.env.dev +++ b/.env.dev @@ -4,7 +4,7 @@ REACT_APP_FEATURE_FLAG_LENDING=enabled REACT_APP_FEATURE_FLAG_AMM=enabled REACT_APP_FEATURE_FLAG_WALLET=enabled REACT_APP_FEATURE_FLAG_BANXA=enabled -REACT_APP_FEATURE_FLAG_EARN_STRATEGIES=enabled +REACT_APP_FEATURE_FLAG_STRATEGIES=enabled /* DEVELOPMENT */ diff --git a/src/App.tsx b/src/App.tsx index 463f6f1528..a94a8a4eb2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,7 +26,7 @@ import TestnetBanner from './legacy-components/TestnetBanner'; import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge')); -const EarnStrategies = React.lazy(() => import(/* webpackChunkName: 'earn-strategies' */ '@/pages/EarnStrategies')); +const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer')); const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); @@ -51,7 +51,7 @@ const App = (): JSX.Element => { const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); - const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); + const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); // Loads the connection to the faucet - only for testnet purposes const loadFaucet = React.useCallback(async (): Promise => { @@ -214,9 +214,9 @@ const App = (): JSX.Element => { )} - {isEarnStrategiesEnabled && ( - - + {isStrategiesEnabled && ( + + )} diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index defab36d41..9e03c16050 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -75,7 +75,7 @@ "issue": "Issue", "redeem": "Redeem", "nav_bridge": "Bridge", - "nav_earn_strategies": "Earn Strategies", + "nav_strategies": "Strategies", "nav_transfer": "Transfer", "nav_lending": "Lending", "nav_swap": "Swap", @@ -633,7 +633,7 @@ "available_to_stake": "Available to stake", "voting_power_governance": "Voting Power {{token}}" }, - "earn_strategy": { + "strategy": { "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:", "update_position": "Update position" } diff --git a/src/lib/form/schemas/earn-strategy.ts b/src/lib/form/schemas/earn-strategy.ts deleted file mode 100644 index 75dd1f1b15..0000000000 --- a/src/lib/form/schemas/earn-strategy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { EarnStrategyFormType } from '@/pages/EarnStrategies/types/form'; - -import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; - -type EarnStrategyValidationParams = MaxAmountValidationParams & MinAmountValidationParams; - -const earnStrategySchema = ( - earnStrategyFormType: EarnStrategyFormType, - params: EarnStrategyValidationParams -): yup.ObjectSchema => { - return yup.object().shape({ - [earnStrategyFormType]: yup - .string() - .requiredAmount(earnStrategyFormType) - .maxAmount(params) - .minAmount(params, earnStrategyFormType) - }); -}; - -export { earnStrategySchema }; -export type { EarnStrategyValidationParams }; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index 87a172bab2..fac035a489 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -5,9 +5,9 @@ export type { WithdrawLiquidityPoolValidationParams } from './amm'; export { depositLiquidityPoolSchema, WITHDRAW_LIQUIDITY_POOL_FIELD, withdrawLiquidityPoolSchema } from './amm'; -export { earnStrategySchema } from './earn-strategy'; export type { LoanFormData, LoanValidationParams } from './loans'; export { loanSchema } from './loans'; +export { StrategySchema } from './strategy'; export type { SwapFormData, SwapValidationParams } from './swap'; export { SWAP_INPUT_AMOUNT_FIELD, diff --git a/src/lib/form/schemas/strategy.ts b/src/lib/form/schemas/strategy.ts new file mode 100644 index 0000000000..66a38c8ce0 --- /dev/null +++ b/src/lib/form/schemas/strategy.ts @@ -0,0 +1,21 @@ +import { StrategyFormType } from '@/pages/Strategies/types/form'; + +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +type StrategyValidationParams = MaxAmountValidationParams & MinAmountValidationParams; + +const StrategySchema = ( + StrategyFormType: StrategyFormType, + params: StrategyValidationParams +): yup.ObjectSchema => { + return yup.object().shape({ + [StrategyFormType]: yup + .string() + .requiredAmount(StrategyFormType) + .maxAmount(params) + .minAmount(params, StrategyFormType) + }); +}; + +export { StrategySchema }; +export type { StrategyValidationParams }; diff --git a/src/pages/EarnStrategies/EarnStrategies.tsx b/src/pages/EarnStrategies/EarnStrategies.tsx deleted file mode 100644 index bd1eac8fdc..0000000000 --- a/src/pages/EarnStrategies/EarnStrategies.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { withErrorBoundary } from 'react-error-boundary'; - -import ErrorFallback from '@/legacy-components/ErrorFallback'; - -import { EarnStrategyForm } from './components/EarnStrategyForm'; -import { StyledEarnStrategiesLayout } from './EarnStrategies.style'; - -const EarnStrategies = (): JSX.Element => { - return ( - - - - ); -}; - -export default withErrorBoundary(EarnStrategies, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/index.ts b/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/index.ts deleted file mode 100644 index aaedb7d4bb..0000000000 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EarnStrategyDepositForm } from './EarnStrategyDepositForm'; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/index.ts b/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/index.ts deleted file mode 100644 index aa5c13a062..0000000000 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EarnStrategyWithdrawalForm } from './EarnStrategyWithdrawalForm'; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/index.ts b/src/pages/EarnStrategies/components/EarnStrategyForm/index.ts deleted file mode 100644 index dd8d107bb2..0000000000 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EarnStrategyForm } from './EarnStrategyForm'; diff --git a/src/pages/EarnStrategies/components/index.ts b/src/pages/EarnStrategies/components/index.ts deleted file mode 100644 index dd8d107bb2..0000000000 --- a/src/pages/EarnStrategies/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EarnStrategyForm } from './EarnStrategyForm'; diff --git a/src/pages/EarnStrategies/index.tsx b/src/pages/EarnStrategies/index.tsx deleted file mode 100644 index 7a73a2c641..0000000000 --- a/src/pages/EarnStrategies/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import EarnStrategies from './EarnStrategies'; - -export default EarnStrategies; diff --git a/src/pages/EarnStrategies/types/form.ts b/src/pages/EarnStrategies/types/form.ts deleted file mode 100644 index c912d7e549..0000000000 --- a/src/pages/EarnStrategies/types/form.ts +++ /dev/null @@ -1,18 +0,0 @@ -type EarnStrategyFormType = 'deposit' | 'withdraw'; -type EarnStrategyRiskVariant = 'low' | 'high'; - -interface EarnStrategyDepositFormData { - deposit?: string; -} - -interface EarnStrategyWithdrawalFormData { - withdraw?: string; - withdrawAsWrapped?: boolean; -} - -export type { - EarnStrategyDepositFormData, - EarnStrategyFormType, - EarnStrategyRiskVariant, - EarnStrategyWithdrawalFormData -}; diff --git a/src/pages/EarnStrategies/EarnStrategies.style.tsx b/src/pages/Strategies/Strategies.style.tsx similarity index 74% rename from src/pages/EarnStrategies/EarnStrategies.style.tsx rename to src/pages/Strategies/Strategies.style.tsx index 8bc1b94263..a9bf6f17ea 100644 --- a/src/pages/EarnStrategies/EarnStrategies.style.tsx +++ b/src/pages/Strategies/Strategies.style.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { theme } from '@/component-library'; -const StyledEarnStrategiesLayout = styled.div` +const StyledStrategiesLayout = styled.div` display: grid; gap: ${theme.spacing.spacing6}; @media (min-width: 80em) { @@ -10,4 +10,4 @@ const StyledEarnStrategiesLayout = styled.div` padding: ${theme.spacing.spacing6}; `; -export { StyledEarnStrategiesLayout }; +export { StyledStrategiesLayout }; diff --git a/src/pages/Strategies/Strategies.tsx b/src/pages/Strategies/Strategies.tsx new file mode 100644 index 0000000000..88c8b90357 --- /dev/null +++ b/src/pages/Strategies/Strategies.tsx @@ -0,0 +1,21 @@ +import { withErrorBoundary } from 'react-error-boundary'; + +import ErrorFallback from '@/legacy-components/ErrorFallback'; + +import { StrategyForm } from './components/StrategyForm'; +import { StyledStrategiesLayout } from './Strategies.style'; + +const Strategies = (): JSX.Element => { + return ( + + + + ); +}; + +export default withErrorBoundary(Strategies, { + FallbackComponent: ErrorFallback, + onReset: () => { + window.location.reload(); + } +}); diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/EarnStrategyDepositForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx similarity index 69% rename from src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/EarnStrategyDepositForm.tsx rename to src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx index b0939fd093..ab318185af 100644 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/EarnStrategyDepositForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx @@ -6,24 +6,24 @@ import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/comm import { TokenInput } from '@/component-library'; import { AuthCTA } from '@/components'; import { TRANSACTION_FEE_AMOUNT, WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { earnStrategySchema, isFormDisabled, useForm } from '@/lib/form'; +import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { useTransaction } from '@/utils/hooks/transaction'; -import { EarnStrategyDepositFormData } from '../../../types/form'; -import { EarnStrategyFormBaseProps } from '../EarnStrategyForm'; -import { StyledEarnStrategyFormContent } from '../EarnStrategyForm.style'; -import { EarnStrategyFormFees } from '../EarnStrategyFormFees'; +import { StrategyDepositFormData } from '../../../types/form'; +import { StrategyFormBaseProps } from '../StrategyForm'; +import { StyledStrategyFormContent } from '../StrategyForm.style'; +import { StrategyFormFees } from '../StrategyFormFees'; -const EarnStrategyDepositForm = ({ riskVariant, hasActiveStrategy }: EarnStrategyFormBaseProps): JSX.Element => { +const StrategyDepositForm = ({ riskVariant, hasActiveStrategy }: StrategyFormBaseProps): JSX.Element => { const { getAvailableBalance } = useGetBalances(); const prices = useGetPrices(); const { t } = useTranslation(); // TODO: add transaction const transaction = useTransaction(); - const handleSubmit = (data: EarnStrategyDepositFormData) => { + const handleSubmit = (data: StrategyDepositFormData) => { // TODO: Execute transaction with params // transaction.execute(); console.log(`transaction should be executed with parameters: ${data}, ${riskVariant}`); @@ -32,9 +32,9 @@ const EarnStrategyDepositForm = ({ riskVariant, hasActiveStrategy }: EarnStrateg const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); const maxDepositAmount = getAvailableBalance(WRAPPED_TOKEN_SYMBOL) || newMonetaryAmount(0, WRAPPED_TOKEN); - const form = useForm({ + const form = useForm({ initialValues: { deposit: '' }, - validationSchema: earnStrategySchema('deposit', { maxAmount: maxDepositAmount, minAmount }), + validationSchema: StrategySchema('deposit', { maxAmount: maxDepositAmount, minAmount }), onSubmit: handleSubmit }); @@ -44,7 +44,7 @@ const EarnStrategyDepositForm = ({ riskVariant, hasActiveStrategy }: EarnStrateg return (
- + - + - {hasActiveStrategy ? t('earn_strategy.update_position') : t('deposit')} + {hasActiveStrategy ? t('strategy.update_position') : t('deposit')} - +
); }; -export { EarnStrategyDepositForm }; +export { StrategyDepositForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts new file mode 100644 index 0000000000..3cf5b84bea --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts @@ -0,0 +1 @@ +export { StrategyDepositForm } from './StrategyDepositForm'; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.style.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx similarity index 79% rename from src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.style.tsx rename to src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx index 4179c1e7a4..59c4bd98a5 100644 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.style.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import { Dl, Flex, theme } from '@/component-library'; -const StyledEarnStrategyForm = styled(Flex)` +const StyledStrategyForm = styled(Flex)` margin-top: ${theme.spacing.spacing8}; background: ${theme.colors.bgPrimary}; padding: ${theme.spacing.spacing6}; @@ -16,7 +16,7 @@ const StyledDl = styled(Dl)` border-radius: ${theme.rounded.rg}; `; -const StyledEarnStrategyFormContent = styled(Flex)` +const StyledStrategyFormContent = styled(Flex)` margin-top: ${theme.spacing.spacing8}; flex-direction: column; gap: ${theme.spacing.spacing8}; @@ -31,4 +31,4 @@ const StyledSwitchLabel = styled('label')` font-weight: ${theme.fontWeight.bold}; `; -export { StyledDl, StyledEarnStrategyForm, StyledEarnStrategyFormContent, StyledSwitchLabel }; +export { StyledDl, StyledStrategyForm, StyledStrategyFormContent, StyledSwitchLabel }; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx similarity index 56% rename from src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.tsx rename to src/pages/Strategies/components/StrategyForm/StrategyForm.tsx index 7f4ba377d5..4dee2206fa 100644 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx @@ -3,20 +3,20 @@ import { newMonetaryAmount } from '@interlay/interbtc-api'; import { Tabs, TabsItem } from '@/component-library'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { EarnStrategyFormType, EarnStrategyRiskVariant } from '../../types/form'; -import { EarnStrategyDepositForm } from './EarnStrategyDepositForm'; -import { StyledEarnStrategyForm } from './EarnStrategyForm.style'; -import { EarnStrategyWithdrawalForm } from './EarnStrategyWithdrawalForm'; +import { StrategyFormType, StrategyRiskVariant } from '../../types/form'; +import { StrategyDepositForm } from './StrategyDepositForm'; +import { StyledStrategyForm } from './StrategyForm.style'; +import { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; -interface EarnStrategyFormProps { - riskVariant: EarnStrategyRiskVariant; +interface StrategyFormProps { + riskVariant: StrategyRiskVariant; } -interface EarnStrategyFormBaseProps extends EarnStrategyFormProps { +interface StrategyFormBaseProps extends StrategyFormProps { hasActiveStrategy: boolean | undefined; } -type TabData = { type: EarnStrategyFormType; title: string }; +type TabData = { type: StrategyFormType; title: string }; const tabs: Array = [ { @@ -29,21 +29,21 @@ const tabs: Array = [ } ]; -const EarnStrategyForm = ({ riskVariant }: EarnStrategyFormProps): JSX.Element => { +const StrategyForm = ({ riskVariant }: StrategyFormProps): JSX.Element => { // TODO: replace with actually withdrawable amount once we know how to get that information, // for now it's statically set for display purposes const maxWithdrawableAmount = newMonetaryAmount(1.337, WRAPPED_TOKEN, true); const hasActiveStrategy = maxWithdrawableAmount && !maxWithdrawableAmount.isZero(); return ( - + {tabs.map(({ type, title }) => ( {type === 'deposit' ? ( - + ) : ( - ))} - + ); }; -export { EarnStrategyForm }; -export type { EarnStrategyFormBaseProps, EarnStrategyFormProps }; +export { StrategyForm }; +export type { StrategyFormBaseProps, StrategyFormProps }; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyFormFees.tsx b/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx similarity index 81% rename from src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyFormFees.tsx rename to src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx index 007867f302..13fd333592 100644 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyFormFees.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx @@ -7,13 +7,13 @@ import { Dd, DlGroup, Dt } from '@/component-library'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { StyledDl } from './EarnStrategyForm.style'; +import { StyledDl } from './StrategyForm.style'; -interface EarnStrategyFormFeesProps { +interface StrategyFormFeesProps { amount: MonetaryAmount; } -const EarnStrategyFormFees = ({ amount }: EarnStrategyFormFeesProps): JSX.Element => { +const StrategyFormFees = ({ amount }: StrategyFormFeesProps): JSX.Element => { const prices = useGetPrices(); const { t } = useTranslation(); @@ -32,4 +32,4 @@ const EarnStrategyFormFees = ({ amount }: EarnStrategyFormFeesProps): JSX.Elemen ); }; -export { EarnStrategyFormFees }; +export { StrategyFormFees }; diff --git a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/EarnStrategyWithdrawalForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx similarity index 73% rename from src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/EarnStrategyWithdrawalForm.tsx rename to src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx index 606fec950e..bcf30df624 100644 --- a/src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyWithdrawalForm/EarnStrategyWithdrawalForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx @@ -12,16 +12,16 @@ import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { earnStrategySchema, isFormDisabled, useForm } from '@/lib/form'; +import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { useTransaction } from '@/utils/hooks/transaction'; -import { EarnStrategyWithdrawalFormData } from '../../../types/form'; -import { EarnStrategyFormBaseProps } from '../EarnStrategyForm'; -import { StyledEarnStrategyFormContent, StyledSwitchLabel } from '../EarnStrategyForm.style'; -import { EarnStrategyFormFees } from '../EarnStrategyFormFees'; +import { StrategyWithdrawalFormData } from '../../../types/form'; +import { StrategyFormBaseProps } from '../StrategyForm'; +import { StyledStrategyFormContent, StyledSwitchLabel } from '../StrategyForm.style'; +import { StrategyFormFees } from '../StrategyFormFees'; -interface EarnStrategyWithdrawalFormProps extends EarnStrategyFormBaseProps { +interface StrategyWithdrawalFormProps extends StrategyFormBaseProps { maxWithdrawableAmount: MonetaryAmount | undefined; } @@ -33,7 +33,7 @@ const calculateReceivableAssets = ( return [amountToWithdraw]; } // TODO: do some magic calculation to get the receivable assets based on input amount here, - // or better move this computation to earn-strategy hook + // or better move this computation to strategy hook const mockedReceivableAssets = [ amountToWithdraw.div(1.2), newMonetaryAmount(amountToWithdraw.toBig().mul(213.2), RELAY_CHAIN_NATIVE_TOKEN, true) @@ -42,17 +42,17 @@ const calculateReceivableAssets = ( return mockedReceivableAssets; }; -const EarnStrategyWithdrawalForm = ({ +const StrategyWithdrawalForm = ({ riskVariant, hasActiveStrategy, maxWithdrawableAmount -}: EarnStrategyWithdrawalFormProps): JSX.Element => { +}: StrategyWithdrawalFormProps): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); // TODO: add transaction const transaction = useTransaction(); - const handleSubmit = (data: EarnStrategyWithdrawalFormData) => { + const handleSubmit = (data: StrategyWithdrawalFormData) => { // TODO: Execute transaction with params // transaction.execute() console.log(data, riskVariant); @@ -60,9 +60,9 @@ const EarnStrategyWithdrawalForm = ({ const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); - const form = useForm({ + const form = useForm({ initialValues: { withdraw: '', withdrawAsWrapped: true }, - validationSchema: earnStrategySchema('withdraw', { + validationSchema: StrategySchema('withdraw', { maxAmount: maxWithdrawableAmount || newMonetaryAmount(0, WRAPPED_TOKEN), minAmount }), @@ -76,7 +76,7 @@ const EarnStrategyWithdrawalForm = ({ return (
- + - {t('earn_strategy.withdraw_rewards_in_wrapped', { wrappedCurrencySymbol: WRAPPED_TOKEN_SYMBOL })}{' '} + {t('strategy.withdraw_rewards_in_wrapped', { wrappedCurrencySymbol: WRAPPED_TOKEN_SYMBOL })}{' '} - + - {hasActiveStrategy ? t('earn_strategy.update_position') : t('withdraw')} + {hasActiveStrategy ? t('strategy.update_position') : t('withdraw')} - +
); }; -export { EarnStrategyWithdrawalForm }; +export { StrategyWithdrawalForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts new file mode 100644 index 0000000000..26ff40f62c --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts @@ -0,0 +1 @@ +export { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; diff --git a/src/pages/Strategies/components/StrategyForm/index.ts b/src/pages/Strategies/components/StrategyForm/index.ts new file mode 100644 index 0000000000..2088c63879 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/index.ts @@ -0,0 +1 @@ +export { StrategyForm } from './StrategyForm'; diff --git a/src/pages/Strategies/components/index.ts b/src/pages/Strategies/components/index.ts new file mode 100644 index 0000000000..2088c63879 --- /dev/null +++ b/src/pages/Strategies/components/index.ts @@ -0,0 +1 @@ +export { StrategyForm } from './StrategyForm'; diff --git a/src/pages/Strategies/index.tsx b/src/pages/Strategies/index.tsx new file mode 100644 index 0000000000..617a2532db --- /dev/null +++ b/src/pages/Strategies/index.tsx @@ -0,0 +1,3 @@ +import Strategies from './Strategies'; + +export default Strategies; diff --git a/src/pages/Strategies/types/form.ts b/src/pages/Strategies/types/form.ts new file mode 100644 index 0000000000..c6b5d6bad5 --- /dev/null +++ b/src/pages/Strategies/types/form.ts @@ -0,0 +1,13 @@ +type StrategyFormType = 'deposit' | 'withdraw'; +type StrategyRiskVariant = 'low' | 'high'; + +interface StrategyDepositFormData { + deposit?: string; +} + +interface StrategyWithdrawalFormData { + withdraw?: string; + withdrawAsWrapped?: boolean; +} + +export type { StrategyDepositFormData, StrategyFormType, StrategyRiskVariant, StrategyWithdrawalFormData }; diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx index 54dabf7446..065c5be8e2 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx @@ -70,7 +70,7 @@ const Navigation = ({ const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); - const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); + const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const NAVIGATION_ITEMS = React.useMemo( () => [ @@ -81,10 +81,10 @@ const Navigation = ({ disabled: !isWalletEnabled }, { - name: 'nav_earn_strategies', - link: PAGES.EARN_STRATEGIES, + name: 'nav_strategies', + link: PAGES.STRATEGIES, icon: BanknotesIcon, - disabled: !isEarnStrategiesEnabled + disabled: !isStrategiesEnabled }, { name: 'nav_bridge', @@ -200,14 +200,7 @@ const Navigation = ({ } } ], - [ - isWalletEnabled, - isEarnStrategiesEnabled, - isLendingEnabled, - isAMMEnabled, - selectedAccount?.address, - vaultClientLoaded - ] + [isWalletEnabled, isStrategiesEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] ); return ( diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index fb189728c4..c6cd038371 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -12,7 +12,7 @@ const URL_PARAMETERS = Object.freeze({ const PAGES = Object.freeze({ HOME: '/', BRIDGE: '/bridge', - EARN_STRATEGIES: '/earn-strategies', + STRATEGIES: '/strategies', TRANSFER: '/transfer', TRANSACTIONS: '/transactions', TX: '/tx', diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 917bd3b3c8..94a1f979f0 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -3,7 +3,7 @@ enum FeatureFlags { AMM = 'amm', WALLET = 'wallet', BANXA = 'banxa', - EARN_STRATEGIES = 'earn-strategies', + STRATEGIES = 'strategies', GEOBLOCK = 'geoblock' } @@ -12,7 +12,7 @@ const featureFlags: Record = { [FeatureFlags.AMM]: process.env.REACT_APP_FEATURE_FLAG_AMM, [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, - [FeatureFlags.EARN_STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, + [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK };