chore: rename strategies feature (#1247)

.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 */
 

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<void> => {
@@ -214,9 +214,9 @@ const App = (): JSX.Element => {
                       <Wallet />
                     </Route>
                   )}
-                  {isEarnStrategiesEnabled && (
-                    <Route path={PAGES.EARN_STRATEGIES}>
-                      <EarnStrategies />
+                  {isStrategiesEnabled && (
+                    <Route path={PAGES.STRATEGIES}>
+                      <Strategies />
                     </Route>
                   )}
                   <Route path={PAGES.ACTIONS}>

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"
   }

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,

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<any> => {
+  return yup.object().shape({
+    [StrategyFormType]: yup
+      .string()
+      .requiredAmount(StrategyFormType)
+      .maxAmount(params)
+      .minAmount(params, StrategyFormType)
+  });
+};
+
+export { StrategySchema };
+export type { StrategyValidationParams };

src/pages/EarnStrategies/EarnStrategies.style.tsx → 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 };

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 (
+    <StyledStrategiesLayout>
+      <StrategyForm riskVariant='low' />
+    </StyledStrategiesLayout>
+  );
+};
+
+export default withErrorBoundary(Strategies, {
+  FallbackComponent: ErrorFallback,
+  onReset: () => {
+    window.location.reload();
+  }
+});

src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyDepositForm/EarnStrategyDepositForm.tsx → 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<EarnStrategyDepositFormData>({
+  const form = useForm<StrategyDepositFormData>({
     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 (
     <form onSubmit={form.handleSubmit}>
-      <StyledEarnStrategyFormContent>
+      <StyledStrategyFormContent>
         <TokenInput
           placeholder='0.00'
           ticker={WRAPPED_TOKEN_SYMBOL}
@@ -54,13 +54,13 @@ const EarnStrategyDepositForm = ({ riskVariant, hasActiveStrategy }: EarnStrateg
           valueUSD={inputUSDValue ?? undefined}
           {...mergeProps(form.getFieldProps('deposit'))}
         />
-        <EarnStrategyFormFees amount={TRANSACTION_FEE_AMOUNT} />
+        <StrategyFormFees amount={TRANSACTION_FEE_AMOUNT} />
         <AuthCTA type='submit' size='large' disabled={isSubmitButtonDisabled} loading={transaction.isLoading}>
-          {hasActiveStrategy ? t('earn_strategy.update_position') : t('deposit')}
+          {hasActiveStrategy ? t('strategy.update_position') : t('deposit')}
         </AuthCTA>
-      </StyledEarnStrategyFormContent>
+      </StyledStrategyFormContent>
     </form>
   );
 };
 
-export { EarnStrategyDepositForm };
+export { StrategyDepositForm };

src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts

@@ -0,0 +1 @@
+export { StrategyDepositForm } from './StrategyDepositForm';

src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.style.tsx → 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 };

src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyForm.tsx → 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<TabData> = [
   {
@@ -29,21 +29,21 @@ const tabs: Array<TabData> = [
   }
 ];
 
-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 (
-    <StyledEarnStrategyForm>
+    <StyledStrategyForm>
       <Tabs fullWidth size='large'>
         {tabs.map(({ type, title }) => (
           <TabsItem key={type} title={title}>
             {type === 'deposit' ? (
-              <EarnStrategyDepositForm key={type} riskVariant={riskVariant} hasActiveStrategy={hasActiveStrategy} />
+              <StrategyDepositForm key={type} riskVariant={riskVariant} hasActiveStrategy={hasActiveStrategy} />
             ) : (
-              <EarnStrategyWithdrawalForm
+              <StrategyWithdrawalForm
                 key={type}
                 riskVariant={riskVariant}
                 hasActiveStrategy={hasActiveStrategy}
@@ -53,9 +53,9 @@ const EarnStrategyForm = ({ riskVariant }: EarnStrategyFormProps): JSX.Element =
           </TabsItem>
         ))}
       </Tabs>
-    </StyledEarnStrategyForm>
+    </StyledStrategyForm>
   );
 };
 
-export { EarnStrategyForm };
-export type { EarnStrategyFormBaseProps, EarnStrategyFormProps };
+export { StrategyForm };
+export type { StrategyFormBaseProps, StrategyFormProps };

src/pages/EarnStrategies/components/EarnStrategyForm/EarnStrategyFormFees.tsx → 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<GovernanceCurrency>;
 }
 
-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 };