fix(earn): Fix Earn Deposit bottom sheet bug on Android (#6236)

### Description For [ACT-1398](https://linear.app/valora/issue/ACT-1398/android-pin-modal-display-obscured-earn-review-bottom-sheet). Fixes an issue where the deposit bottom sheet was obscuring the PIN entry screen. ### Test plan Unit and manual tested, see video below: https://github.com/user-attachments/assets/27140fb2-3ad5-4363-b458-7a4e8a7f1bb1 ### Related issues - Fixes #[issue number here] ### Backwards compatibility  ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [ ] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added) --------- Co-authored-by: Tom McGuire <[email protected]>
valora-inc · Dec 10, 2024 · bc07228 · bc07228
1 parent 9bec20a
commit bc07228
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/src/earn/EarnDepositBottomSheet.tsx b/src/earn/EarnDepositBottomSheet.tsx
@@ -129,6 +129,10 @@ export default function EarnDepositBottomSheet({
       })
     )
     AppAnalytics.track(EarnEvents.earn_deposit_complete, commonAnalyticsProperties)
+    // Dismiss the bottom sheet when transaction is submitted. This avoids a handful of issues,
+    // such as needing to manually dismiss the sheet for PIN entry, and the bottom sheet
+    // persisting onto the home screen.
+    forwardedRef.current?.close()
   }
 
   const onPressCancel = () => {

diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
@@ -35,6 +35,7 @@ import {
   mockTokenBalances,
   mockUSDCAddress,
 } from 'test/values'
+import { Status as EarnStatus } from 'src/earn/slice'
 
 jest.mock('src/earn/hooks')
 jest.mock('react-native-localize')
@@ -117,33 +118,40 @@ const mockSwapTransaction: SwapTransaction = {
   estimatedPriceImpact: '0.1',
 }
 
-const store = createMockStore({
-  tokens: {
-    tokenBalances: {
-      ...mockTokenBalances,
-      mockArbUsdcTokenId: {
-        ...mockTokenBalances[mockArbUsdcTokenId],
-        balance: '10',
-      },
-      mockArbEthTokenId: {
-        ...mockTokenBalances[mockArbEthTokenId],
-        balance: '1',
-      },
-      mockArbArbTokenId: {
-        ...mockTokenBalances[mockArbArbTokenId],
-        minimumAppVersionToSwap: '1.0.0',
-        balance: '1',
-      },
-      mockAaveArbUsdcTokenId: {
-        ...mockTokenBalances[mockAaveArbUsdcTokenId],
-        balance: '10',
+function createStore(depositStatus: EarnStatus = 'idle') {
+  return createMockStore({
+    tokens: {
+      tokenBalances: {
+        ...mockTokenBalances,
+        mockArbUsdcTokenId: {
+          ...mockTokenBalances[mockArbUsdcTokenId],
+          balance: '10',
+        },
+        mockArbEthTokenId: {
+          ...mockTokenBalances[mockArbEthTokenId],
+          balance: '1',
+        },
+        mockArbArbTokenId: {
+          ...mockTokenBalances[mockArbArbTokenId],
+          minimumAppVersionToSwap: '1.0.0',
+          balance: '1',
+        },
+        mockAaveArbUsdcTokenId: {
+          ...mockTokenBalances[mockAaveArbUsdcTokenId],
+          balance: '10',
+        },
       },
     },
-  },
-  positions: {
-    positions: [...mockPositions, ...mockRewardsPositions],
-  },
-})
+    positions: {
+      positions: [...mockPositions, ...mockRewardsPositions],
+    },
+    earn: {
+      depositStatus,
+    },
+  })
+}
+
+const store = createStore()
 
 const params = {
   pool: mockEarnPositions[0],
@@ -632,6 +640,22 @@ describe('EarnEnterAmount', () => {
     expect(getByTestId('EarnEnterAmount/Continue')).toBeDisabled()
   })
 
+  it('should show loading spinner when transaction submitted', async () => {
+    const mockStore = createStore('loading')
+    const { getByTestId } = render(
+      <Provider store={mockStore}>
+        <MockedNavigator component={EarnEnterAmount} params={params} />
+      </Provider>
+    )
+
+    await waitFor(() =>
+      expect(getByTestId('EarnEnterAmount/Continue')).toContainElement(
+        getByTestId('Button/Loading')
+      )
+    )
+    expect(getByTestId('EarnEnterAmount/Continue')).toBeDisabled()
+  })
+
   it('should show loading spinner when preparing transaction', async () => {
     jest.mocked(usePrepareEnterAmountTransactionsCallback).mockReturnValue({
       prepareTransactionsResult: undefined,

diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
@@ -49,6 +49,7 @@ import { parseInputAmount } from 'src/utils/parsing'
 import { getFeeCurrencyAndAmounts, PreparedTransactionsResult } from 'src/viem/prepareTransactions'
 import { walletAddressSelector } from 'src/web3/selectors'
 import { isAddress } from 'viem'
+import { depositStatusSelector } from 'src/earn/selectors'
 
 type Props = NativeStackScreenProps<StackParamList, Screens.EarnEnterAmount>
 
@@ -100,6 +101,11 @@ function EarnEnterAmount({ route }: Props) {
   const isWithdrawal = mode === 'withdraw'
   const { depositToken, withdrawToken, eligibleSwappableTokens } = useTokens({ pool })
 
+  // We do not need to check withdrawal status/show a spinner for a pending
+  // withdrawal, since withdrawals navigate to a separate confirmation screen.
+  const depositStatus = useSelector(depositStatusSelector)
+  const transactionSubmitted = depositStatus === 'loading'
+
   const availableInputTokens = useMemo(() => {
     switch (mode) {
       case 'deposit':
@@ -299,8 +305,10 @@ function EarnEnterAmount({ route }: Props) {
   )
 
   const disabled =
-    // Should disable if the user enters 0, has enough balance but the transaction is not possible, or does not have enough balance
-    !!tokenAmount?.isZero() || !transactionIsPossible
+    // Should disable if the user enters 0, has enough balance but the transaction
+    // is not possible, does not have enough balance, or if transaction is already
+    // submitted
+    !!tokenAmount?.isZero() || !transactionIsPossible || transactionSubmitted
 
   const onTokenAmountInputChange = (value: string) => {
     setSelectedPercentage(null)
@@ -549,7 +557,7 @@ function EarnEnterAmount({ route }: Props) {
           size={BtnSizes.FULL}
           disabled={disabled}
           style={styles.continueButton}
-          showLoading={isPreparingTransactions}
+          showLoading={isPreparingTransactions || transactionSubmitted}
           testID="EarnEnterAmount/Continue"
         />
       </KeyboardAwareScrollView>