feat(import-token): Add Import Token button, feature flagged (#4422)

### Description

Adds `Import Token` button in the Assets screen when
`show_import_tokens_flow` feature flag is on.

I'll add PRs for the Import Token screens afterwards.

### Test plan

Screenshots of before (feature flag is not set or is `false`) and after
(flag is `true`).

| Before | After | After (Larger Text) |
| -- | -- | -- |
|
![image](https://github.com/valora-inc/wallet/assets/147835134/e45d03fb-f4e4-432d-a137-d884f15a5c2b)
|
![image](https://github.com/valora-inc/wallet/assets/147835134/f76670ee-e633-41cf-ab1c-8f9d2289379b)
|
![image](https://github.com/valora-inc/wallet/assets/147835134/c6e57d20-ae62-4235-bf30-973f63beac74)
|


### Related issues

- Starts RET-893

### Backwards compatibility

This adds a button for now for a new flow, no breaking changes.

locales/base/translation.json

@@ -1847,7 +1847,8 @@
       "tokens": "Tokens",
       "collectibles": "Collectibles",
       "dappPositions": "Dapp Positions"
-    }
+    },
+    "importToken": "Import"
   },
   "notificationCenterSpotlight": {
     "message": "Introducing a new way to claim rewards, view alerts, and see updates in one place",

src/statsig/constants.ts

@@ -42,6 +42,7 @@ export const FeatureGates = {
   [StatsigFeatureGates.USE_VIEM_FOR_WALLETCONNECT_TRANSACTIONS]: false,
   [StatsigFeatureGates.USE_NEW_RECIPIENT_SCREEN]: false,
   [StatsigFeatureGates.USE_NEW_SEND_FLOW]: false,
+  [StatsigFeatureGates.SHOW_IMPORT_TOKENS_FLOW]: false,
   [StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE]: false,
 }
 

src/statsig/types.ts

@@ -40,6 +40,7 @@ export enum StatsigFeatureGates {
   USE_VIEM_FOR_WALLETCONNECT_TRANSACTIONS = 'use_viem_for_walletconnect_transactions',
   USE_NEW_RECIPIENT_SCREEN = 'use_new_recipient_screen',
   USE_NEW_SEND_FLOW = 'use_new_send_flow',
+  SHOW_IMPORT_TOKENS_FLOW = 'show_import_tokens_flow',
   SHOW_HIDE_HOME_BALANCES_TOGGLE = 'show_hide_home_balances_toggle',
 }
 

src/tokens/Assets.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react-native'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
-import { navigate } from 'src/navigator/NavigationService'
+import { navigate, navigateBack } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { getDynamicConfigParams, getFeatureGate } from 'src/statsig'
 import { StatsigFeatureGates } from 'src/statsig/types'
@@ -99,6 +99,7 @@ const storeWithNfts = {
 describe('AssetsScreen', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    jest.mocked(getFeatureGate).mockRestore()
   })
 
   it('renders tokens and collectibles tabs when positions is disabled', () => {
@@ -336,6 +337,40 @@ describe('AssetsScreen', () => {
     expect(navigate).toHaveBeenCalledWith(Screens.DappShortcutsRewards)
   })
 
+  it('does not render Import Token when feature flag is off', () => {
+    const store = createMockStore(storeWithPositions)
+
+    const component = (
+      <Provider store={store}>
+        <MockedNavigator component={AssetsScreen} />
+      </Provider>
+    )
+    const { queryByText } = render(component)
+    const button = queryByText('assets.importToken')
+
+    expect(button).toBeNull()
+  })
+
+  it('clicking Import Token opens a screen', () => {
+    jest
+      .mocked(getFeatureGate)
+      .mockImplementation(
+        (gate: StatsigFeatureGates) => gate === StatsigFeatureGates.SHOW_IMPORT_TOKENS_FLOW
+      )
+    const store = createMockStore(storeWithPositions)
+
+    const component = (
+      <Provider store={store}>
+        <MockedNavigator component={AssetsScreen} />
+      </Provider>
+    )
+    const { getByText } = render(component)
+    const button = getByText('assets.importToken')
+    fireEvent.press(button)
+
+    expect(navigateBack).toHaveBeenCalled()
+  })
+
   it('displays tokens with balance and ones marked with showZeroBalance in the expected order', () => {
     jest.mocked(getDynamicConfigParams).mockReturnValueOnce({
       showBalances: [NetworkId['celo-alfajores'], NetworkId['ethereum-sepolia']],

src/tokens/Assets.tsx

@@ -1,6 +1,6 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import BigNumber from 'bignumber.js'
-import React, { useMemo, useState } from 'react'
+import React, { useLayoutEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   LayoutChangeEvent,
@@ -27,9 +27,10 @@ import ImageErrorIcon from 'src/icons/ImageErrorIcon'
 import { useDollarsToLocalAmount } from 'src/localCurrency/hooks'
 import { getLocalCurrencySymbol } from 'src/localCurrency/selectors'
 import { headerWithBackButton } from 'src/navigator/Headers'
-import { navigate } from 'src/navigator/NavigationService'
+import { navigate, navigateBack } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader'
+import { TopBarTextButton } from 'src/navigator/TopBarButton'
 import { StackParamList } from 'src/navigator/types'
 import NftMedia from 'src/nfts/NftMedia'
 import NftsLoadError from 'src/nfts/NftsLoadError'
@@ -221,6 +222,19 @@ function AssetsScreen({ navigation, route }: Props) {
     }
   }, [footerPosition.value])
 
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        getFeatureGate(StatsigFeatureGates.SHOW_IMPORT_TOKENS_FLOW) && (
+          <TopBarTextButton
+            onPress={navigateBack}
+            title={t('assets.importToken')}
+            style={styles.topBarTextButton}
+          />
+        ),
+    })
+  }, [navigation])
+
   useScrollAwareHeader({
     navigation,
     title: t('totalAssets'),
@@ -572,6 +586,10 @@ const styles = StyleSheet.create({
     ...typeScale.labelMedium,
     color: Colors.dark,
   },
+  topBarTextButton: {
+    ...typeScale.bodyMedium,
+    paddingRight: Spacing.Smallest8,
+  },
   nftsPairingContainer: {
     flexDirection: 'row',
     gap: Spacing.Regular16,