refactor(earn-types): combine withdraw actions and earn enter mode

src/analytics/Properties.tsx

@@ -54,12 +54,7 @@ import { ErrorMessages } from 'src/app/ErrorMessages'
 import { AddAssetsActionType } from 'src/components/AddAssetsBottomSheet'
 import { TokenPickerOrigin } from 'src/components/TokenBottomSheet'
 import { DappSection } from 'src/dapps/types'
-import {
-  BeforeDepositActionName,
-  EarnEnterMode,
-  SerializableRewardsInfo,
-  WithdrawActionName,
-} from 'src/earn/types'
+import { BeforeDepositActionName, EarnActiveAction, SerializableRewardsInfo } from 'src/earn/types'
 import { ProviderSelectionAnalyticsData } from 'src/fiatExchanges/types'
 import { CICOFlow, FiatExchangeFlow, PaymentMethod } from 'src/fiatExchanges/utils'
 import { HomeActionName, NotificationBannerCTATypes, NotificationType } from 'src/home/types'
@@ -595,7 +590,7 @@ interface SendEventsProperties {
     tokenId: string
     tokenAddress: string | null
     networkId: NetworkId | null
-    mode?: EarnEnterMode
+    mode?: EarnActiveAction
   }
   [SendEvents.swap_input_pressed]: {
     swapToLocalAmount: boolean
@@ -1559,7 +1554,7 @@ export interface EarnCommonProperties {
 
 interface EarnDepositProperties extends EarnCommonProperties {
   depositTokenAmount: string
-  mode: EarnEnterMode
+  mode: EarnActiveAction
   // the below are mainly for swap-deposit. For deposit, this would just be
   // same as the depositTokenAmount and depositTokenId
   fromTokenAmount: string
@@ -1604,7 +1599,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_enter_amount_continue_press]: {
     amountInUsd: string
     amountEnteredIn: AmountEnteredIn
-    mode: EarnEnterMode
+    mode: EarnActiveAction
     // For deposits these will be the same as the depositTokenId and depositTokenAmount
     // For swaps these will be the swapFromTokenId and swapFromTokenAmount
     // For withdrawals this will be in units of the depositToken
@@ -1647,7 +1642,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_pool_info_tap_safety_details]: EarnCommonProperties & {
     action: 'expand' | 'collapse'
   }
-  [EarnEvents.earn_select_withdraw_type]: EarnCommonProperties & { type: WithdrawActionName }
+  [EarnEvents.earn_select_withdraw_type]: EarnCommonProperties & { type: EarnActiveAction }
 }
 
 export type AnalyticsPropertiesList = AppEventsProperties &

src/analytics/types.ts

@@ -38,6 +38,7 @@ export type TransactionOrigin =
   | 'earn-deposit'
   | 'earn-swap-deposit'
   | 'earn-withdraw'
+  | 'earn-claim-rewards'
   | 'jumpstart-send'
   | 'jumpstart-claim'
   | 'wallet-connect'

src/earn/EarnConfirmationScreen.test.tsx

@@ -110,7 +110,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: { ...mockEarnPositions[0], balance: '10.75' },
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -171,7 +171,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: { ...mockEarnPositions[0], balance: '10.75' },
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -208,7 +208,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: mockEarnPositions[0],
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -238,7 +238,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: mockEarnPositions[0],
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -263,7 +263,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: { ...mockEarnPositions[0], balance: '10.75' },
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -313,7 +313,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: mockEarnPositions[0],
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -341,7 +341,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: mockEarnPositions[0],
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -381,7 +381,7 @@ describe('EarnConfirmationScreen', () => {
           component={EarnConfirmationScreen}
           params={{
             pool: mockEarnPositions[0],
-            mode: 'PartialWithdraw',
+            mode: 'withdraw',
           }}
         />
       </Provider>
@@ -390,9 +390,9 @@ describe('EarnConfirmationScreen', () => {
   })
 
   it.each([
-    ['Claim', 'earnFlow.collect.titleClaim'],
-    ['PartialWithdraw', 'earnFlow.collect.titleWithdraw'],
-    ['Exit', 'earnFlow.collect.titleCollect'],
+    ['claim-rewards', 'earnFlow.collect.titleClaim'],
+    ['withdraw', 'earnFlow.collect.titleWithdraw'],
+    ['exit', 'earnFlow.collect.titleCollect'],
   ])('shows correct header text for %s', async (mode, expectedHeader) => {
     const { getByText } = render(
       <Provider store={store}>

src/earn/EarnConfirmationScreen.tsx

@@ -13,7 +13,7 @@ import TokenIcon, { IconSize } from 'src/components/TokenIcon'
 import { usePrepareWithdrawAndClaimTransactions } from 'src/earn/hooks'
 import { withdrawStatusSelector } from 'src/earn/selectors'
 import { withdrawStart } from 'src/earn/slice'
-import { WithdrawActionName } from 'src/earn/types'
+import { EarnActiveAction } from 'src/earn/types'
 import { getEarnPositionBalanceValues, isGasSubsidizedForNetwork } from 'src/earn/utils'
 import { CICOFlow } from 'src/fiatExchanges/utils'
 import { navigate } from 'src/navigator/NavigationService'
@@ -74,6 +74,7 @@ export default function EarnConfirmationScreen({ route }: Props) {
     [withdrawToken, pool.pricePerShare, inputAmount]
   )
 
+  // Will need this to handle preparing a claim transaction, a withdrawal transaction and a withdrawal and claim transaction
   const {
     result: prepareTransactionsResult,
     loading: isPreparingTransactions,
@@ -211,9 +212,9 @@ export default function EarnConfirmationScreen({ route }: Props) {
         style={styles.button}
         size={BtnSizes.FULL}
         text={
-          mode === 'PartialWithdraw'
+          mode === 'withdraw'
             ? t('earnFlow.collect.ctaWithdraw')
-            : mode === 'Exit'
+            : mode === 'exit'
               ? t('earnFlow.collect.ctaExit')
               : t('earnFlow.collect.ctaReward')
         }
@@ -316,14 +317,14 @@ function GasFee({
   )
 }
 
-function Title({ mode }: { mode: WithdrawActionName }) {
+function Title({ mode }: { mode: EarnActiveAction }) {
   const { t } = useTranslation()
   switch (mode) {
-    case 'Claim':
+    case 'claim-rewards':
       return <Text style={styles.title}>{t('earnFlow.collect.titleClaim')}</Text>
-    case 'PartialWithdraw':
+    case 'withdraw':
       return <Text style={styles.title}>{t('earnFlow.collect.titleWithdraw')}</Text>
-    case 'Exit':
+    case 'exit':
     default:
       return <Text style={styles.title}>{t('earnFlow.collect.titleCollect')}</Text>
   }

src/earn/EarnDepositBottomSheet.test.tsx

@@ -7,6 +7,7 @@ import { EarnEvents } from 'src/analytics/Events'
 import { openUrl } from 'src/app/actions'
 import EarnDepositBottomSheet from 'src/earn/EarnDepositBottomSheet'
 import { depositStart } from 'src/earn/slice'
+import { EarnActiveAction } from 'src/earn/types'
 import * as earnUtils from 'src/earn/utils'
 import { NetworkId } from 'src/transactions/types'
 import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions'
@@ -57,13 +58,13 @@ const mockDepositProps = {
   inputAmount: new BigNumber(100),
   preparedTransaction: mockPreparedTransaction,
   pool: mockEarnPositions[0],
-  mode: 'deposit' as const,
+  mode: 'deposit' as EarnActiveAction,
   inputTokenId: mockArbUsdcTokenId,
 }
 
 const mockSwapDepositProps = {
   ...mockDepositProps,
-  mode: 'swap-deposit' as const,
+  mode: 'swap-deposit' as EarnActiveAction,
   inputTokenId: mockArbEthTokenId,
   inputAmount: new BigNumber(0.041),
   swapTransaction: {

src/earn/EarnDepositBottomSheet.tsx

@@ -11,7 +11,7 @@ import { LabelWithInfo } from 'src/components/LabelWithInfo'
 import TokenDisplay from 'src/components/TokenDisplay'
 import { depositStatusSelector } from 'src/earn/selectors'
 import { depositStart } from 'src/earn/slice'
-import { EarnEnterMode } from 'src/earn/types'
+import { EarnActiveAction } from 'src/earn/types'
 import {
   getSwapToAmountInDecimals,
   getTotalYieldRate,
@@ -50,7 +50,7 @@ export default function EarnDepositBottomSheet({
   inputTokenId: string
   inputAmount: BigNumber
   pool: EarnPosition
-  mode: EarnEnterMode
+  mode: EarnActiveAction
   swapTransaction?: SwapTransaction
 }) {
   const { t } = useTranslation()

src/earn/EarnEnterAmount.test.tsx

@@ -491,7 +491,7 @@ describe('EarnEnterAmount', () => {
 
       expect(navigate).toHaveBeenCalledWith(Screens.EarnConfirmationScreen, {
         pool: mockEarnPositions[0],
-        mode: 'PartialWithdraw',
+        mode: 'withdraw',
         inputAmount: '8',
         useMax: false,
       })

src/earn/EarnEnterAmount.tsx

@@ -106,6 +106,7 @@ function EarnEnterAmount({ route }: Props) {
       case 'withdraw':
         return [depositToken]
       case 'swap-deposit':
+      default:
         return eligibleSwappableTokens
     }
   }, [mode])
@@ -169,7 +170,8 @@ function EarnEnterAmount({ route }: Props) {
       feeCurrencies,
       pool,
       hooksApiUrl,
-      shortcutId: mode,
+      // Mode === shortcutId, except for exit which is withdraw
+      shortcutId: mode === 'exit' ? 'withdraw' : mode,
       useMax: maxPressed,
     })
   }
@@ -383,7 +385,7 @@ function EarnEnterAmount({ route }: Props) {
     if (isWithdrawal) {
       navigate(Screens.EarnConfirmationScreen, {
         pool,
-        mode: 'PartialWithdraw',
+        mode,
         inputAmount: tokenAmount.toString(),
         useMax: maxPressed,
       })

src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx

@@ -668,7 +668,7 @@ describe('EarnPoolInfoScreen', () => {
     })
     expect(navigate).toHaveBeenCalledWith(Screens.EarnConfirmationScreen, {
       pool: { ...mockEarnPositions[0], balance: '100' },
-      mode: 'Exit',
+      mode: 'exit',
     })
   })
   it('open WithdrawBottomSheet when Withdraw button pressed, check that expected options exist', () => {
@@ -694,9 +694,9 @@ describe('EarnPoolInfoScreen', () => {
     )
     fireEvent.press(getByTestId('WithdrawButton'))
     expect(getByTestId('Earn/WithdrawBottomSheet')).toBeVisible()
-    expect(getByTestId('Earn/ActionCard/PartialWithdraw')).toBeTruthy()
-    expect(getByTestId('Earn/ActionCard/Claim')).toBeTruthy()
-    expect(getByTestId('Earn/ActionCard/Exit')).toBeTruthy()
+    expect(getByTestId('Earn/ActionCard/withdraw')).toBeTruthy()
+    expect(getByTestId('Earn/ActionCard/claim-rewards')).toBeTruthy()
+    expect(getByTestId('Earn/ActionCard/exit')).toBeTruthy()
   })
 
   it('shows the daily yield rate when it is available', () => {

src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx

@@ -226,7 +226,7 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
     if (partialWithdrawalsEnabled) {
       withdrawBottomSheetRef.current?.snapToIndex(0)
     } else {
-      navigate(Screens.EarnConfirmationScreen, { pool, mode: 'Exit' })
+      navigate(Screens.EarnConfirmationScreen, { pool, mode: 'exit' })
     }
   }
 

src/earn/poolInfoScreen/WithdrawBottomSheet.test.tsx

@@ -55,10 +55,10 @@ describe('WithdrawBottomSheet', () => {
         />
       </Provider>
     )
-    expect(getByTestId('Earn/ActionCard/PartialWithdraw')).toBeTruthy()
-    fireEvent.press(getByTestId('Earn/ActionCard/PartialWithdraw'))
+    expect(getByTestId('Earn/ActionCard/withdraw')).toBeTruthy()
+    fireEvent.press(getByTestId('Earn/ActionCard/withdraw'))
     expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_select_withdraw_type, {
-      type: 'PartialWithdraw',
+      type: 'withdraw',
       providerId: mockEarnPositions[0].appId,
       poolId: mockEarnPositions[0].positionId,
       networkId: mockEarnPositions[0].networkId,
@@ -89,10 +89,10 @@ describe('WithdrawBottomSheet', () => {
         />
       </Provider>
     )
-    expect(getByTestId('Earn/ActionCard/Claim')).toBeTruthy()
-    fireEvent.press(getByTestId('Earn/ActionCard/Claim'))
+    expect(getByTestId('Earn/ActionCard/claim-rewards')).toBeTruthy()
+    fireEvent.press(getByTestId('Earn/ActionCard/claim-rewards'))
     expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_select_withdraw_type, {
-      type: 'Claim',
+      type: 'claim-rewards',
       providerId: mockEarnPositions[0].appId,
       poolId: mockEarnPositions[0].positionId,
       networkId: mockEarnPositions[0].networkId,
@@ -103,7 +103,7 @@ describe('WithdrawBottomSheet', () => {
         ...mockEarnPositions[0],
         balance: '100',
       },
-      mode: 'Claim',
+      mode: 'claim-rewards',
     })
   })
   it('tapping exit on WithdrawBottomSheet navigates to enter amount screen', () => {
@@ -119,10 +119,10 @@ describe('WithdrawBottomSheet', () => {
         />
       </Provider>
     )
-    expect(getByTestId('Earn/ActionCard/Exit')).toBeTruthy()
-    fireEvent.press(getByTestId('Earn/ActionCard/Exit'))
+    expect(getByTestId('Earn/ActionCard/exit')).toBeTruthy()
+    fireEvent.press(getByTestId('Earn/ActionCard/exit'))
     expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_select_withdraw_type, {
-      type: 'Exit',
+      type: 'exit',
       providerId: mockEarnPositions[0].appId,
       poolId: mockEarnPositions[0].positionId,
       networkId: mockEarnPositions[0].networkId,
@@ -133,7 +133,7 @@ describe('WithdrawBottomSheet', () => {
         ...mockEarnPositions[0],
         balance: '100',
       },
-      mode: 'Exit',
+      mode: 'exit',
     })
   })
   it('shows correct copy when ClaimType is Earnings', () => {