fix(cash-in-bottom-sheet): only show when home is in focus

e2e/src/FiatConnectTransferOut.spec.js

@@ -18,10 +18,7 @@ describe('FiatConnect Transfer Out', () => {
   })
 
   const platform = device.getPlatform()
-  // disable test for android until we fix the bottom sheet issue
-  if (platform === 'ios') {
-    describe('Non KYC', fiatConnectNonKycTransferOut)
-  }
+  describe('Non KYC', fiatConnectNonKycTransferOut)
 
   // KYC test needs to be on iOS and needs Mock Provider info
   if (platform == 'ios' && MOCK_PROVIDER_BASE_URL && MOCK_PROVIDER_API_KEY) {

src/home/WalletHome.tsx

@@ -1,5 +1,6 @@
+import { useIsFocused } from '@react-navigation/native'
 import _ from 'lodash'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RefreshControl, RefreshControlProps, SectionList, StyleSheet } from 'react-native'
 import Animated from 'react-native-reanimated'
@@ -8,6 +9,7 @@
 import { showMessage } from 'src/alert/actions'
 import { AppState } from 'src/app/actions'
 import { appStateSelector, phoneNumberVerifiedSelector } from 'src/app/selectors'
+import QrScanButton from 'src/components/QrScanButton'
 import { HomeTokenBalance } from 'src/components/TokenBalance'
 import {
   ALERT_BANNER_DURATION,
@@ -37,12 +39,12 @@
 import TransactionFeed from 'src/transactions/feed/TransactionFeed'
 import { userInSanctionedCountrySelector } from 'src/utils/countryFeatures'
 import { checkContactsPermission } from 'src/utils/permissions'
-import QrScanButton from 'src/components/QrScanButton'
 
 const AnimatedSectionList = Animated.createAnimatedComponent(SectionList)
 
 function WalletHome() {
   const { t } = useTranslation()
+  const isFocused = useIsFocused()
 
   const appState = useSelector(appStateSelector)
   const isLoading = useSelector((state) => state.home.loading)
@@ -114,32 +116,6 @@
     dispatch(refreshAllBalances())
   }
 
-  const shouldShowCashInBottomSheet = () => {
-    // If user is in a sanctioned country do not show the cash in bottom sheet
-    if (userInSanctionedCountry) {
-      return false
-    }
-    // If there are no core tokens then we are either still loading or loading failed.
-    if (!coreTokenBalances.length) {
-      return false
-    }
-    const hasStable = !!coreTokenBalances.find(
-      (token) => token.balance.gte(STABLE_TRANSACTION_MIN_AMOUNT) && token.address !== celoAddress
-    )
-
-    const hasCelo =
-      coreTokenBalances
-        .find((token) => token.address === celoAddress)
-        ?.balance.isGreaterThan(CELO_TRANSACTION_MIN_AMOUNT) ?? false
-    const isAccountBalanceZero = hasStable === false && hasCelo === false
-
-    const { cashInBottomSheetEnabled } = getExperimentParams(
-      ExperimentConfigs[StatsigExperiments.CHOOSE_YOUR_ADVENTURE]
-    )
-
-    return cashInBottomSheetEnabled && isAccountBalanceZero
-  }
-
   const keyExtractor = (_item: any, index: number) => {
     return index.toString()
   }
@@ -179,6 +155,39 @@
     renderItem: () => <TransactionFeed key={'TransactionList'} />,
   })
 
+  // Cash In Bottom Sheet
+  const { cashInBottomSheetEnabled } = getExperimentParams(
+    ExperimentConfigs[StatsigExperiments.CHOOSE_YOUR_ADVENTURE]
+  )
+  const hasStable = !!coreTokenBalances.find(
+    (token) => token.balance.gte(STABLE_TRANSACTION_MIN_AMOUNT) && token.address !== celoAddress
+  )
+  const hasCelo =
+    coreTokenBalances
+      .find((token) => token.address === celoAddress)
+      ?.balance.isGreaterThan(CELO_TRANSACTION_MIN_AMOUNT) ?? false
+  const isAccountBalanceZero = hasStable === false && hasCelo === false
+
+  const WrappedCashInBottomSheet = useMemo(() => {
+    if (!isFocused) {
+      return null
+    }
+
+    if (!coreTokenBalances.length) {
+      return null
+    }
+
+    if (userInSanctionedCountry) {
+      return null
+    }
+
+    if (isAccountBalanceZero) {
+      return <CashInBottomSheet />
+    } else {
+      return null
+    }
+  }, [userInSanctionedCountry, cashInBottomSheetEnabled, isAccountBalanceZero, coreTokenBalances])
+
   return (
     <SafeAreaView
       testID="WalletHome"
@@ -207,7 +216,7 @@
         testID="WalletHome/SectionList"
       />
       {showHomeNavBar && <SendOrRequestBar />}
-      {shouldShowCashInBottomSheet() && <CashInBottomSheet />}
+      {WrappedCashInBottomSheet}
       {ConfirmOpenDappBottomSheet}
     </SafeAreaView>
   )