feat(earn): not enough gas error for collect screen (#5436)

### Description

Adds not enough gas error on collect screen which takes users to CICO on
press.

### Test plan

- [x] Unit tests added

### Related issues

- Part of ACT-1180

### Backwards compatibility

Yes

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

---------

Co-authored-by: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com>
Co-authored-by: Tom McGuire <mcgtom10@gmail.com>

locales/base/translation.json

@@ -2397,7 +2397,10 @@
       "fee": "Gas Fee",
       "cta": "Collect Earnings",
       "errorTitle": "Something went wrong",
-      "errorDescription": "Unable to fetch deposit details. Please try again."
+      "errorDescription": "Unable to fetch deposit details. Please try again.",
+      "noGasTitle": "You need more {{symbol}} to continue",
+      "noGasDescription": "Add {{symbol}} on {{network}} to cover your gas fees",
+      "noGasCta": "Buy {{symbol}} on {{network}}"
     },
     "transactionFeed": {
       "earnClaimTitle": "Collected",

src/analytics/Events.tsx

@@ -696,4 +696,5 @@ export enum EarnEvents {
   earn_withdraw_submit_success = 'earn_withdraw_submit_success',
   earn_withdraw_submit_error = 'earn_withdraw_submit_error',
   earn_withdraw_submit_cancel = 'earn_withdraw_submit_cancel',
+  earn_withdraw_add_gas_press = 'earn_withdraw_add_gas_press',
 }

src/analytics/Properties.tsx

@@ -1624,6 +1624,7 @@ interface EarnEventsProperties {
     error: string
   }
   [EarnEvents.earn_withdraw_submit_cancel]: EarnWithdrawProperties
+  [EarnEvents.earn_withdraw_add_gas_press]: { gasTokenId: string }
 }
 
 export type AnalyticsPropertiesList = AppEventsProperties &

src/analytics/docs.ts

@@ -611,6 +611,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [EarnEvents.earn_withdraw_submit_success]: `When the withdraw and claim transactions succeed`,
   [EarnEvents.earn_withdraw_submit_error]: `When the withdraw and claim transactions fail`,
   [EarnEvents.earn_withdraw_submit_cancel]: `When the user cancels the withdraw and claim transactions after submitting by cancelling PIN input`,
+  [EarnEvents.earn_withdraw_add_gas_press]: `When the user doesn't have enough for gas and clicks on the button to add gas token`,
 
   // Legacy event docs
   //  The below events had docs, but are no longer produced by the latest app version.

src/earn/EarnCollectScreen.test.tsx

@@ -8,6 +8,8 @@ import EarnCollectScreen from 'src/earn/EarnCollectScreen'
 import { fetchAavePoolInfo, fetchAaveRewards } from 'src/earn/poolInfo'
 import { prepareWithdrawAndClaimTransactions } from 'src/earn/prepareTransactions'
 import { withdrawStart } from 'src/earn/slice'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
 import { NetworkId } from 'src/transactions/types'
 import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions'
 import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization'
@@ -380,4 +382,46 @@ describe('EarnCollectScreen', () => {
     expect(getByTestId('EarnCollectScreen/CTA')).toBeDisabled()
     expect(getByTestId('EarnCollectScreen/CTA')).toContainElement(getByTestId('Button/Loading'))
   })
+
+  it('navigate and fire analytics on no gas CTA press', async () => {
+    jest.mocked(prepareWithdrawAndClaimTransactions).mockResolvedValue({
+      type: 'not-enough-balance-for-gas',
+      feeCurrencies: [mockPreparedTransaction.feeCurrency],
+    })
+
+    const { getByText, queryByTestId } = render(
+      <Provider store={store}>
+        <MockedNavigator
+          component={EarnCollectScreen}
+          params={{
+            depositTokenId: mockArbUsdcTokenId,
+            poolTokenId: networkConfig.aaveArbUsdcTokenId,
+          }}
+        />
+      </Provider>
+    )
+
+    await waitFor(() => {
+      expect(queryByTestId('EarnCollect/RewardsLoading')).toBeFalsy()
+    })
+    await waitFor(() => {
+      expect(queryByTestId('EarnCollect/ApyLoading')).toBeFalsy()
+    })
+
+    expect(
+      getByText('earnFlow.collect.noGasCta, {"symbol":"ETH","network":"Arbitrum Sepolia"}')
+    ).toBeTruthy()
+    fireEvent.press(
+      getByText('earnFlow.collect.noGasCta, {"symbol":"ETH","network":"Arbitrum Sepolia"}')
+    )
+
+    expect(navigate).toBeCalledWith(Screens.FiatExchangeAmount, {
+      flow: 'CashIn',
+      tokenId: mockArbEthTokenId,
+      tokenSymbol: 'ETH',
+    })
+    expect(ValoraAnalytics.track).toBeCalledWith(EarnEvents.earn_withdraw_add_gas_press, {
+      gasTokenId: mockArbEthTokenId,
+    })
+  })
 })

src/earn/EarnCollectScreen.tsx

@@ -13,9 +13,12 @@ import TokenIcon, { IconSize } from 'src/components/TokenIcon'
 import { useAavePoolInfo, useAaveRewardsInfoAndPrepareTransactions } from 'src/earn/hooks'
 import { withdrawStatusSelector } from 'src/earn/selectors'
 import { withdrawStart } from 'src/earn/slice'
+import { CICOFlow } from 'src/fiatExchanges/utils'
+import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import { useDispatch, useSelector } from 'src/redux/hooks'
+import { NETWORK_NAMES } from 'src/shared/conts'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
@@ -132,6 +135,31 @@ export default function EarnCollectScreen({ route }: Props) {
             style={styles.error}
           />
         )}
+        {asyncPreparedTransactions.result?.type === 'not-enough-balance-for-gas' && (
+          <InLineNotification
+            variant={NotificationVariant.Warning}
+            title={t('earnFlow.collect.noGasTitle', { symbol: feeCurrencies[0].symbol })}
+            description={t('earnFlow.collect.noGasDescription', {
+              symbol: feeCurrencies[0].symbol,
+              network: NETWORK_NAMES[depositToken.networkId],
+            })}
+            ctaLabel={t('earnFlow.collect.noGasCta', {
+              symbol: feeCurrencies[0].symbol,
+              network: NETWORK_NAMES[depositToken.networkId],
+            })}
+            onPressCta={() => {
+              ValoraAnalytics.track(EarnEvents.earn_withdraw_add_gas_press, {
+                gasTokenId: feeCurrencies[0].tokenId,
+              })
+              navigate(Screens.FiatExchangeAmount, {
+                tokenId: feeCurrencies[0].tokenId,
+                flow: CICOFlow.CashIn,
+                tokenSymbol: feeCurrencies[0].symbol,
+              })
+            }}
+            style={styles.error}
+          />
+        )}
       </ScrollView>
 
       <Button