feat(earn): support partial withdrawals

locales/base/translation.json

@@ -2554,8 +2554,10 @@
     },
     "enterAmount": {
       "title": "How much would you like to deposit?",
+      "titleWithdraw": "How much would you like to withdraw?",
       "deposit": "Deposit",
       "fees": "Fees",
+      "available": "Available",
       "swap": "Swap",
       "earnUpToLabel": "You could earn up to:",
       "rateLabel": "Rate (est.)",
@@ -2576,6 +2578,7 @@
         "estNetworkFee": "Est. Network Fee",
         "maxNetworkFee": "Max Network Fee",
         "networkFeeDescription": "The network fee is required by the network to process the deposit transaction.",
+        "networkFeeDescriptionWithdrawal": "The network fee is required by the network to process the withdrawal transaction.",
         "networkSwapFeeDescription": "The network fee is required by the network to process the deposit transactions. The {{appName}} fee of {{appFeePercentage}}% is charged for your use of our product.",
         "appSwapFee": "{{appName}} Fee"
       },

src/analytics/Properties.tsx

@@ -54,7 +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, EarnDepositMode, SerializableRewardsInfo } from 'src/earn/types'
+import { BeforeDepositActionName, EarnEnterMode, 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'
@@ -590,6 +590,7 @@ interface SendEventsProperties {
     tokenId: string
     tokenAddress: string | null
     networkId: NetworkId | null
+    mode?: EarnEnterMode
   }
   [SendEvents.swap_input_pressed]: {
     swapToLocalAmount: boolean
@@ -1553,7 +1554,7 @@ export interface EarnCommonProperties {
 
 interface EarnDepositProperties extends EarnCommonProperties {
   depositTokenAmount: string
-  mode: EarnDepositMode
+  mode: EarnEnterMode
   // the below are mainly for swap-deposit. For deposit, this would just be
   // same as the depositTokenAmount and depositTokenId
   fromTokenAmount: string

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 { EarnDepositMode } from 'src/earn/types'
+import { EarnEnterMode } from 'src/earn/types'
 import {
   getSwapToAmountInDecimals,
   getTotalYieldRate,
@@ -50,7 +50,7 @@ export default function EarnDepositBottomSheet({
   inputTokenId: string
   inputAmount: BigNumber
   pool: EarnPosition
-  mode: EarnDepositMode
+  mode: EarnEnterMode
   swapTransaction?: SwapTransaction
 }) {
   const { t } = useTranslation()

src/earn/EarnEnterAmount.test.tsx

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { EarnEvents } from 'src/analytics/Events'
 import EarnEnterAmount from 'src/earn/EarnEnterAmount'
-import { usePrepareDepositTransactions } from 'src/earn/prepareTransactions'
+import { usePrepareTransactions } from 'src/earn/prepareTransactions'
 import { CICOFlow } from 'src/fiatExchanges/utils'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
@@ -21,6 +21,7 @@ import networkConfig from 'src/web3/networkConfig'
 import MockedNavigator from 'test/MockedNavigator'
 import { createMockStore } from 'test/utils'
 import {
+  mockAaveArbUsdcTokenId,
   mockAccount,
   mockArbArbTokenId,
   mockArbEthTokenId,
@@ -111,7 +112,8 @@ const mockSwapTransaction: SwapTransaction = {
 const store = createMockStore({
   tokens: {
     tokenBalances: {
-      [mockArbUsdcTokenId]: {
+      ...mockTokenBalances,
+      mockArbUsdcTokenId: {
         ...mockTokenBalances[mockArbUsdcTokenId],
         balance: '10',
       },
@@ -124,6 +126,10 @@ const store = createMockStore({
         minimumAppVersionToSwap: '1.0.0',
         balance: '1',
       },
+      mockAaveArbUsdcTokenId: {
+        ...mockTokenBalances[mockAaveArbUsdcTokenId],
+        balance: '10',
+      },
     },
   },
 })
@@ -140,7 +146,7 @@ describe('EarnEnterAmount', () => {
       .mocked(getNumberFormatSettings)
       .mockReturnValue({ decimalSeparator: '.', groupingSeparator: ',' })
     store.clearActions()
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: undefined,
       refreshPreparedTransactions: refreshPreparedTransactionsSpy,
       clearPreparedTransactions: jest.fn(),
@@ -187,11 +193,12 @@ describe('EarnEnterAmount', () => {
         hooksApiUrl: networkConfig.hooksApiUrl,
         feeCurrencies: mockFeeCurrencies,
         shortcutId: 'deposit',
+        useMax: false,
       })
     })
 
     it('should show tx details and handle navigating to the deposit bottom sheet', async () => {
-      jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+      jest.mocked(usePrepareTransactions).mockReturnValue({
         prepareTransactionsResult: {
           prepareTransactionsResult: mockPreparedTransaction,
           swapTransaction: undefined,
@@ -262,6 +269,7 @@ describe('EarnEnterAmount', () => {
       const store = createMockStore({
         tokens: {
           tokenBalances: {
+            ...mockTokenBalances,
             [mockArbUsdcTokenId]: {
               ...mockTokenBalances[mockArbUsdcTokenId],
               balance: '10',
@@ -314,11 +322,12 @@ describe('EarnEnterAmount', () => {
         hooksApiUrl: networkConfig.hooksApiUrl,
         feeCurrencies: mockFeeCurrencies,
         shortcutId: 'swap-deposit',
+        useMax: false,
       })
     })
 
     it('should show tx details and handle navigating to the deposit bottom sheet', async () => {
-      jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+      jest.mocked(usePrepareTransactions).mockReturnValue({
         prepareTransactionsResult: {
           prepareTransactionsResult: mockPreparedTransaction,
           swapTransaction: mockSwapTransaction,
@@ -372,9 +381,80 @@ describe('EarnEnterAmount', () => {
     })
   })
 
+  describe('withdraw', () => {
+    // Pool balance should be set to determine available withdrawal amount
+    const withdrawParams = { ...params, mode: 'withdraw' }
+
+    beforeEach(() => {
+      jest.clearAllMocks()
+      jest.mocked(usePrepareTransactions).mockReturnValue({
+        prepareTransactionsResult: {
+          prepareTransactionsResult: mockPreparedTransaction,
+          swapTransaction: undefined,
+        },
+        refreshPreparedTransactions: jest.fn(),
+        clearPreparedTransactions: jest.fn(),
+        prepareTransactionError: undefined,
+        isPreparingTransactions: false,
+      })
+    })
+    it('should show only the deposit token and not include the token dropdown', async () => {
+      const { getByTestId, queryByTestId } = render(
+        <Provider store={store}>
+          <MockedNavigator component={EarnEnterAmount} params={withdrawParams} />
+        </Provider>
+      )
+
+      expect(getByTestId('EarnEnterAmount/TokenSelect')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/TokenSelect')).toHaveTextContent('USDC')
+      expect(getByTestId('EarnEnterAmount/TokenSelect')).toBeDisabled()
+      expect(queryByTestId('downArrowIcon')).toBeFalsy()
+    })
+
+    it('should show tx details for withdrawal', async () => {
+      const { getByTestId, getByText } = render(
+        <Provider store={store}>
+          <MockedNavigator component={EarnEnterAmount} params={withdrawParams} />
+        </Provider>
+      )
+
+      fireEvent.changeText(getByTestId('EarnEnterAmount/TokenAmountInput'), '8')
+
+      await waitFor(() => expect(getByText('earnFlow.enterAmount.continue')).not.toBeDisabled())
+
+      expect(getByTestId('EarnEnterAmount/Withdraw/Crypto')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/Withdraw/Crypto')).toHaveTextContent('11.00 USDC')
+
+      expect(getByTestId('EarnEnterAmount/Withdraw/Fiat')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/Withdraw/Fiat')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/Withdraw/Fiat')).toHaveTextContent('₱14.63')
+
+      expect(getByTestId('EarnEnterAmount/Fees')).toBeTruthy()
+      expect(getByTestId('EarnEnterAmount/Fees')).toHaveTextContent('₱0.012')
+
+      fireEvent.press(getByText('earnFlow.enterAmount.continue'))
+
+      await waitFor(() => expect(AppAnalytics.track).toHaveBeenCalledTimes(1))
+      expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_enter_amount_continue_press, {
+        amountEnteredIn: 'token',
+        amountInUsd: '8.00',
+        networkId: NetworkId['arbitrum-sepolia'],
+        depositTokenId: mockArbUsdcTokenId,
+        providerId: mockEarnPositions[0].appId,
+        poolId: mockEarnPositions[0].positionId,
+        fromTokenId: 'arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216',
+        fromTokenAmount: '8',
+        depositTokenAmount: '8',
+        mode: 'withdraw',
+      })
+
+      //TODO(ACT-1389): check navigation to withdrawal confirmation screen
+    })
+  })
+
   // tests independent of deposit / swap-deposit
   it('should show a warning and not allow the user to continue if they input an amount greater than balance', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: {
         prepareTransactionsResult: mockPreparedTransaction,
         swapTransaction: undefined,
@@ -397,7 +477,7 @@ describe('EarnEnterAmount', () => {
   })
 
   it('should show loading spinner when preparing transaction', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: undefined,
       refreshPreparedTransactions: jest.fn(),
       clearPreparedTransactions: jest.fn(),
@@ -443,6 +523,7 @@ describe('EarnEnterAmount', () => {
     const mockStore = createMockStore({
       tokens: {
         tokenBalances: {
+          ...mockTokenBalances,
           [mockArbUsdcTokenId]: {
             ...mockTokenBalances[mockArbUsdcTokenId],
             balance: '100000.42',
@@ -469,7 +550,7 @@ describe('EarnEnterAmount', () => {
   })
 
   it('should track analytics and navigate correctly when tapping cta to add gas', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: {
         prepareTransactionsResult: mockPreparedTransactionNotEnough,
         swapTransaction: undefined,
@@ -506,7 +587,7 @@ describe('EarnEnterAmount', () => {
   })
 
   it('should show the FeeDetailsBottomSheet when the user taps the fee details icon', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: {
         prepareTransactionsResult: mockPreparedTransaction,
         swapTransaction: undefined,
@@ -531,7 +612,7 @@ describe('EarnEnterAmount', () => {
   })
 
   it('should show swap fees on the FeeDetailsBottomSheet when swap transaction is present', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: {
         prepareTransactionsResult: mockPreparedTransaction,
         swapTransaction: mockSwapTransaction,
@@ -562,7 +643,7 @@ describe('EarnEnterAmount', () => {
   })
 
   it('should display swap bottom sheet when the user taps the swap details icon', async () => {
-    jest.mocked(usePrepareDepositTransactions).mockReturnValue({
+    jest.mocked(usePrepareTransactions).mockReturnValue({
       prepareTransactionsResult: {
         prepareTransactionsResult: mockPreparedTransaction,
         swapTransaction: mockSwapTransaction,