feat(earn): Review and deposit updates - gas subsidy (#5452)

### Description

Adds copy and strikethrough gas fee if gas is subsidized

### Test plan

Unit test added.

Feature gate false (no change):

![false](https://github.com/valora-inc/wallet/assets/140328381/57adf70b-b20f-4154-b895-f59baaab1a56)

Feature gate true (strikethrough value, show copy):

![true](https://github.com/valora-inc/wallet/assets/140328381/09f9a08f-b54a-452c-b5f8-a2d112c5d156)

### Related issues

- Fixes #ACT-1195

### 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)

locales/base/translation.json

@@ -2354,6 +2354,7 @@
     }
   },
   "earnFlow": {
+    "gasSubsidized": "Valora's covering gas for this transaction!",
     "addCryptoBottomSheet": {
       "title": "Add {{tokenSymbol}} on {{tokenNetwork}}",
       "description": "Once you add tokens you'll have to come back to finish depositing into a pool.",

src/earn/EarnDepositBottomSheet.test.tsx

@@ -8,8 +8,8 @@ import EarnDepositBottomSheet from 'src/earn/EarnDepositBottomSheet'
 import { PROVIDER_ID } from 'src/earn/constants'
 import { depositStart } from 'src/earn/slice'
 import { navigate } from 'src/navigator/NavigationService'
-import { getDynamicConfigParams } from 'src/statsig'
-import { StatsigDynamicConfigs } from 'src/statsig/types'
+import { getDynamicConfigParams, getFeatureGate } from 'src/statsig'
+import { StatsigDynamicConfigs, StatsigFeatureGates } from 'src/statsig/types'
 import { NetworkId } from 'src/transactions/types'
 import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions'
 import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization'
@@ -71,10 +71,11 @@ describe('EarnDepositBottomSheet', () => {
           return defaultValues
       }
     })
+    jest.mocked(getFeatureGate).mockReturnValue(false)
   })
 
   it('renders all elements', () => {
-    const { getByTestId, getByText } = render(
+    const { getByTestId, queryByTestId, getByText } = render(
       <Provider store={createMockStore({ tokens: { tokenBalances: mockTokenBalances } })}>
         <EarnDepositBottomSheet
           forwardedRef={{ current: null }}
@@ -88,6 +89,8 @@ describe('EarnDepositBottomSheet', () => {
     expect(getByText('earnFlow.depositBottomSheet.title')).toBeTruthy()
     expect(getByText('earnFlow.depositBottomSheet.description')).toBeTruthy()
 
+    expect(queryByTestId('EarnDeposit/GasSubsidized')).toBeFalsy()
+
     expect(getByText('earnFlow.depositBottomSheet.amount')).toBeTruthy()
     expect(getByTestId('EarnDeposit/Amount')).toHaveTextContent('100.00 ETH')
 
@@ -223,4 +226,26 @@ describe('EarnDepositBottomSheet', () => {
     expect(getByTestId('EarnDeposit/SecondaryCta')).toBeDisabled()
     expect(getByTestId('EarnDeposit/PrimaryCta')).toContainElement(getByTestId('Button/Loading'))
   })
+
+  it('shows gas subsidized copy if feature gate is set', () => {
+    jest
+      .mocked(getFeatureGate)
+      .mockImplementation(
+        (featureGateName) =>
+          featureGateName === StatsigFeatureGates.SUBSIDIZE_STABLECOIN_EARN_GAS_FEES
+      )
+    const { getByTestId } = render(
+      <Provider store={createMockStore({ tokens: { tokenBalances: mockTokenBalances } })}>
+        <EarnDepositBottomSheet
+          forwardedRef={{ current: null }}
+          amount={'100'}
+          tokenId={mockArbEthTokenId}
+          preparedTransaction={mockPreparedTransaction}
+          networkId={NetworkId['arbitrum-sepolia']}
+        />
+      </Provider>
+    )
+
+    expect(getByTestId('EarnDeposit/GasSubsidized')).toBeTruthy()
+  })
 })

src/earn/EarnDepositBottomSheet.tsx

@@ -19,9 +19,9 @@ import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { useSelector } from 'src/redux/hooks'
 import { NETWORK_NAMES } from 'src/shared/conts'
-import { getDynamicConfigParams } from 'src/statsig'
+import { getDynamicConfigParams, getFeatureGate } from 'src/statsig'
 import { DynamicConfigs } from 'src/statsig/constants'
-import { StatsigDynamicConfigs } from 'src/statsig/types'
+import { StatsigDynamicConfigs, StatsigFeatureGates } from 'src/statsig/types'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Shadow, Spacing, getShadowStyle } from 'src/styles/styles'
@@ -66,6 +66,8 @@ export default function EarnDepositBottomSheet({
     return null
   }
 
+  const isGasSubsidized = getFeatureGate(StatsigFeatureGates.SUBSIDIZE_STABLECOIN_EARN_GAS_FEES)
+
   const { providerName, providerLogoUrl, providerTermsAndConditionsUrl } = getDynamicConfigParams(
     DynamicConfigs[StatsigDynamicConfigs.EARN_STABLECOIN_CONFIG]
   )
@@ -121,9 +123,14 @@ export default function EarnDepositBottomSheet({
             testID="EarnDeposit/Fee"
             amount={estimatedFeeAmount}
             tokenId={feeCurrency.tokenId}
-            style={styles.value}
+            style={[styles.value, isGasSubsidized && { textDecorationLine: 'line-through' }]}
             showLocalAmount={false}
           />
+          {isGasSubsidized && (
+            <Text style={styles.gasSubsidized} testID={'EarnDeposit/GasSubsidized'}>
+              {t('earnFlow.gasSubsidized')}
+            </Text>
+          )}
         </LabelledItem>
         <LabelledItem label={t('earnFlow.depositBottomSheet.provider')}>
           <View style={styles.providerNameContainer}>
@@ -266,4 +273,8 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexBasis: 0,
   },
+  gasSubsidized: {
+    ...typeScale.labelXSmall,
+    color: Colors.primary,
+  },
 })