feat(ramps): adds a token selection ui for unified buy

app/components/Nav/Main/MainNavigator.js

@@ -60,6 +60,7 @@ import RampRoutes from '../../UI/Ramp/Aggregator/routes';
 import { RampType } from '../../UI/Ramp/Aggregator/types';
 import RampSettings from '../../UI/Ramp/Aggregator/Views/Settings';
 import RampActivationKeyForm from '../../UI/Ramp/Aggregator/Views/Settings/ActivationKeyForm';
+import RampTokenSelection from '../../UI/Ramp/components/TokenSelection';
 
 import DepositOrderDetails from '../../UI/Ramp/Deposit/Views/DepositOrderDetails/DepositOrderDetails';
 import DepositRoutes from '../../UI/Ramp/Deposit/routes';
@@ -1050,6 +1051,10 @@ const MainNavigator = () => {
         options={{ headerShown: false }}
       />
       <Stack.Screen name="PaymentRequestView" component={PaymentRequestView} />
+      <Stack.Screen
+        name={Routes.RAMP.TOKEN_SELECTION}
+        component={RampTokenSelection}
+      />
       <Stack.Screen name={Routes.RAMP.BUY}>
         {() => <RampRoutes rampType={RampType.BUY} />}
       </Stack.Screen>

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -132,6 +132,10 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
     component={[Function]}
     name="PaymentRequestView"
   />
+  <Screen
+    component={[Function]}
+    name="RampTokenSelection"
+  />
   <Screen
     name="RampBuy"
   />

app/components/UI/Ramp/Aggregator/routes/utils.ts

@@ -1,5 +1,6 @@
 import { RampIntent, RampType } from '../types';
 import Routes from '../../../../../constants/navigation/Routes';
+// import useRampsUnifiedV1Enabled from '../../hooks/useRampsUnifiedV1Enabled';
 
 function createRampNavigationDetails(rampType: RampType, intent?: RampIntent) {
   const route = rampType === RampType.BUY ? Routes.RAMP.BUY : Routes.RAMP.SELL;
@@ -19,6 +20,17 @@ function createRampNavigationDetails(rampType: RampType, intent?: RampIntent) {
 }
 
 export function createBuyNavigationDetails(intent?: RampIntent) {
+  // TODO: Use goToRamps hook for managing ramps navigation
+  // https://consensyssoftware.atlassian.net/browse/TRAM-2813
+  // const isRampsUnifiedV1Enabled = useRampsUnifiedV1Enabled();
+  // if (isRampsUnifiedV1Enabled) {
+  //   return [
+  //     Routes.RAMP.TOKEN_SELECTION,
+  //     {
+  //       rampType: 'BUY',
+  //     },
+  //   ];
+  // }
   return createRampNavigationDetails(RampType.BUY, intent);
 }
 

app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/TokenSelectorModal.tsx

@@ -5,6 +5,7 @@ import { CaipChainId } from '@metamask/utils';
 
 import NetworksFilterBar from '../../../components/NetworksFilterBar';
 import NetworksFilterSelector from '../../../components/NetworksFilterSelector/NetworksFilterSelector';
+import TokenListItem from '../../../../components/TokenListItem';
 
 import Text, {
   TextVariant,
@@ -14,15 +15,6 @@ import BottomSheet, {
 } from '../../../../../../../component-library/components/BottomSheets/BottomSheet';
 import BottomSheetHeader from '../../../../../../../component-library/components/BottomSheets/BottomSheetHeader';
 import ListItemSelect from '../../../../../../../component-library/components/List/ListItemSelect';
-import ListItemColumn, {
-  WidthType,
-} from '../../../../../../../component-library/components/List/ListItemColumn';
-import AvatarToken from '../../../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
-import { AvatarSize } from '../../../../../../../component-library/components/Avatars/Avatar';
-import BadgeNetwork from '../../../../../../../component-library/components/Badges/Badge/variants/BadgeNetwork';
-import BadgeWrapper, {
-  BadgePosition,
-} from '../../../../../../../component-library/components/Badges/BadgeWrapper';
 import TextFieldSearch from '../../../../../../../component-library/components/Form/TextFieldSearch';
 
 import styleSheet from './TokenSelectorModal.styles';
@@ -35,11 +27,9 @@ import {
   useParams,
 } from '../../../../../../../util/navigation/navUtils';
 import { useDepositCryptoCurrencyNetworkName } from '../../../hooks/useDepositCryptoCurrencyNetworkName';
-import { getNetworkImageSource } from '../../../../../../../util/networks';
 import { DepositCryptoCurrency } from '@consensys/native-ramps-sdk';
 import Routes from '../../../../../../../constants/navigation/Routes';
 import { strings } from '../../../../../../../../locales/i18n';
-import { DEPOSIT_NETWORKS_BY_CHAIN_ID } from '../../../constants/networks';
 import { useTheme } from '../../../../../../../util/theme';
 import useAnalytics from '../../../../hooks/useAnalytics';
 
@@ -138,48 +128,15 @@ function TokenSelectorModal() {
   }, [handleSearchTextChange]);
 
   const renderToken = useCallback(
-    ({ item: token }: { item: DepositCryptoCurrency }) => {
-      const networkName = getNetworkName(token.chainId);
-      const networkImageSource = getNetworkImageSource({
-        chainId: token.chainId,
-      });
-      const depositNetworkName =
-        DEPOSIT_NETWORKS_BY_CHAIN_ID[token.chainId]?.name;
-      return (
-        <ListItemSelect
-          isSelected={selectedCryptoCurrency?.assetId === token.assetId}
-          onPress={() => handleSelectAssetIdCallback(token.assetId)}
-          accessibilityRole="button"
-          accessible
-        >
-          <ListItemColumn widthType={WidthType.Auto}>
-            <BadgeWrapper
-              badgePosition={BadgePosition.BottomRight}
-              badgeElement={
-                <BadgeNetwork
-                  name={networkName}
-                  imageSource={networkImageSource}
-                />
-              }
-            >
-              <AvatarToken
-                name={token.name}
-                imageSource={{ uri: token.iconUrl }}
-                size={AvatarSize.Md}
-              />
-            </BadgeWrapper>
-          </ListItemColumn>
-          <ListItemColumn widthType={WidthType.Fill}>
-            <Text variant={TextVariant.BodyLGMedium}>{token.symbol}</Text>
-            <Text variant={TextVariant.BodyMD} color={colors.text.alternative}>
-              {depositNetworkName ?? networkName}
-            </Text>
-          </ListItemColumn>
-        </ListItemSelect>
-      );
-    },
+    ({ item: token }: { item: DepositCryptoCurrency }) => (
+      <TokenListItem
+        token={token}
+        isSelected={selectedCryptoCurrency?.assetId === token.assetId}
+        onPress={() => handleSelectAssetIdCallback(token.assetId)}
+        textColor={colors.text.alternative}
+      />
+    ),
     [
-      getNetworkName,
       colors.text.alternative,
       handleSelectAssetIdCallback,
       selectedCryptoCurrency?.assetId,

app/components/UI/Ramp/Deposit/components/NetworksFilterBar/NetworksFilterBar.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { CaipChainId } from '@metamask/utils';
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -22,11 +21,9 @@ import Icon, {
 
 import styleSheet from './NetworksFilterBar.styles';
 
-import { selectNetworkConfigurationsByCaipChainId } from '../../../../../../selectors/networkController';
 import { useStyles } from '../../../../../hooks/useStyles';
-import { DEPOSIT_NETWORKS_BY_CHAIN_ID } from '../../constants/networks';
 import { excludeFromArray } from '../../utils';
-import { getNetworkImageSource } from '../../../../../../util/networks';
+import { useTokenNetworkInfo } from '../../../hooks/useTokenNetworkInfo';
 import { useTheme } from '../../../../../../util/theme';
 import { strings } from '../../../../../../../locales/i18n';
 
@@ -45,29 +42,30 @@ function NetworksFilterBar({
 }: Readonly<NetworksFilterBarProps>) {
   const { styles } = useStyles(styleSheet, {});
   const { colors } = useTheme();
-
-  const allNetworkConfigurations = useSelector(
-    selectNetworkConfigurationsByCaipChainId,
-  );
+  const getTokenNetworkInfo = useTokenNetworkInfo();
 
   const allNetworksIcons = useMemo(() => {
     const headSize = 3;
     const reversedHead = networks.slice(0, headSize).reverse();
     return (
       <Box flexDirection={FlexDirection.RowReverse} gap={0}>
-        {reversedHead.map((chainId) => (
-          <AvatarNetwork
-            key={chainId}
-            imageSource={getNetworkImageSource({ chainId })}
-            name={allNetworkConfigurations[chainId]?.name}
-            size={AvatarSize.Xs}
-            style={styles.overlappedNetworkIcon}
-            includesBorder
-          />
-        ))}
+        {reversedHead.map((chainId) => {
+          const { depositNetworkName, networkName, networkImageSource } =
+            getTokenNetworkInfo(chainId);
+          return (
+            <AvatarNetwork
+              key={chainId}
+              imageSource={networkImageSource}
+              name={depositNetworkName ?? networkName}
+              size={AvatarSize.Xs}
+              style={styles.overlappedNetworkIcon}
+              includesBorder
+            />
+          );
+        })}
       </Box>
     );
-  }, [allNetworkConfigurations, styles.overlappedNetworkIcon, networks]);
+  }, [getTokenNetworkInfo, styles.overlappedNetworkIcon, networks]);
 
   return (
     <ScrollView
@@ -98,9 +96,9 @@ function NetworksFilterBar({
           />
           {networks.map((chainId) => {
             const isSelected = networkFilter.includes(chainId);
-            const networkName =
-              DEPOSIT_NETWORKS_BY_CHAIN_ID[chainId]?.name ??
-              allNetworkConfigurations[chainId]?.name;
+            const { depositNetworkName, networkName, networkImageSource } =
+              getTokenNetworkInfo(chainId);
+            const displayName = depositNetworkName ?? networkName;
             return (
               <Button
                 key={chainId}
@@ -113,16 +111,16 @@ function NetworksFilterBar({
                     {isSelected && (
                       <AvatarNetwork
                         key={chainId}
-                        imageSource={getNetworkImageSource({ chainId })}
-                        name={networkName}
+                        imageSource={networkImageSource}
+                        name={displayName}
                         size={AvatarSize.Xs}
                         style={styles.selectedNetworkIcon}
                       />
                     )}
                     <Text
                       color={isSelected ? TextColor.Inverse : TextColor.Default}
                     >
-                      {networkName}
+                      {displayName}
                     </Text>
                   </>
                 }

app/components/UI/Ramp/Deposit/components/NetworksFilterSelector/NetworksFilterSelector.tsx

@@ -2,7 +2,6 @@ import { CaipChainId } from '@metamask/utils';
 import React, { useCallback } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import { useSelector } from 'react-redux';
 
 import styleSheet from './NetworksFilterSelector.styles';
 
@@ -23,10 +22,8 @@ import Text, {
 } from '../../../../../../component-library/components/Texts/Text';
 
 import { useStyles } from '../../../../../hooks/useStyles';
-import { selectNetworkConfigurationsByCaipChainId } from '../../../../../../selectors/networkController';
 import { strings } from '../../../../../../../locales/i18n';
-import { getNetworkImageSource } from '../../../../../../util/networks';
-import { DEPOSIT_NETWORKS_BY_CHAIN_ID } from '../../constants/networks';
+import { useTokenNetworkInfo } from '../../../hooks/useTokenNetworkInfo';
 import { excludeFromArray } from '../../utils';
 
 interface NetworksFilterSelectorProps {
@@ -47,9 +44,7 @@ function NetworksFilterSelector({
     screenHeight,
   });
 
-  const allNetworkConfigurations = useSelector(
-    selectNetworkConfigurationsByCaipChainId,
-  );
+  const getTokenNetworkInfo = useTokenNetworkInfo();
 
   const handleNetworkOnPress = useCallback(
     (chainId: CaipChainId) => () => {
@@ -80,32 +75,31 @@ function NetworksFilterSelector({
       <FlatList
         style={styles.list}
         data={networks}
-        renderItem={({ item: chainId }) => (
-          <ListItemSelect onPress={handleNetworkOnPress(chainId)}>
-            <ListItemColumn>
-              <Checkbox
-                isChecked={networkFilter?.includes(chainId) ?? false}
-                onPress={handleNetworkOnPress(chainId)}
-              />
-            </ListItemColumn>
-            <ListItemColumn>
-              <AvatarNetwork
-                name={
-                  DEPOSIT_NETWORKS_BY_CHAIN_ID[chainId]?.name ??
-                  allNetworkConfigurations[chainId]?.name
-                }
-                imageSource={getNetworkImageSource({ chainId })}
-                size={AvatarSize.Md}
-              />
-            </ListItemColumn>
-            <ListItemColumn widthType={WidthType.Fill}>
-              <Text variant={TextVariant.BodyMD}>
-                {DEPOSIT_NETWORKS_BY_CHAIN_ID[chainId]?.name ??
-                  allNetworkConfigurations[chainId]?.name}
-              </Text>
-            </ListItemColumn>
-          </ListItemSelect>
-        )}
+        renderItem={({ item: chainId }) => {
+          const { depositNetworkName, networkName, networkImageSource } =
+            getTokenNetworkInfo(chainId);
+          const displayName = depositNetworkName ?? networkName;
+          return (
+            <ListItemSelect onPress={handleNetworkOnPress(chainId)}>
+              <ListItemColumn>
+                <Checkbox
+                  isChecked={networkFilter?.includes(chainId) ?? false}
+                  onPress={handleNetworkOnPress(chainId)}
+                />
+              </ListItemColumn>
+              <ListItemColumn>
+                <AvatarNetwork
+                  name={displayName}
+                  imageSource={networkImageSource}
+                  size={AvatarSize.Md}
+                />
+              </ListItemColumn>
+              <ListItemColumn widthType={WidthType.Fill}>
+                <Text variant={TextVariant.BodyMD}>{displayName}</Text>
+              </ListItemColumn>
+            </ListItemSelect>
+          );
+        }}
         keyExtractor={(item) => item}
       ></FlatList>
       <View style={styles.buttonContainer}>

app/components/UI/Ramp/Deposit/constants/index.ts

@@ -1 +1,2 @@
 export * from './constants.ts';
+export * from './mockCryptoCurrencies';

app/components/UI/Ramp/Deposit/constants/mockCryptoCurrencies.ts

@@ -0,0 +1,59 @@
+import { DepositCryptoCurrency } from '@consensys/native-ramps-sdk';
+
+export const MOCK_USDC_TOKEN: DepositCryptoCurrency = {
+  assetId: 'eip155:1/erc20:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+  chainId: 'eip155:1',
+  name: 'USD Coin',
+  symbol: 'USDC',
+  decimals: 6,
+  iconUrl:
+    'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48.png',
+};
+
+export const MOCK_USDT_TOKEN: DepositCryptoCurrency = {
+  assetId: 'eip155:1/erc20:0xdAC17F958D2ee523a2206206994597C13D831ec7',
+  chainId: 'eip155:1',
+  name: 'Tether USD',
+  symbol: 'USDT',
+  decimals: 6,
+  iconUrl:
+    'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xdAC17F958D2ee523a2206206994597C13D831ec7.png',
+};
+
+export const MOCK_BTC_TOKEN: DepositCryptoCurrency = {
+  assetId: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
+  chainId: 'bip122:000000000019d6689c085ae165831e93',
+  name: 'Bitcoin',
+  symbol: 'BTC',
+  decimals: 8,
+  iconUrl:
+    'https://static.cx.metamask.io/api/v2/tokenIcons/assets/bip122/000000000019d6689c085ae165831e93/slip44/0.png',
+};
+
+export const MOCK_ETH_TOKEN: DepositCryptoCurrency = {
+  assetId: 'eip155:1/slip44:60',
+  chainId: 'eip155:1',
+  name: 'Ethereum',
+  symbol: 'ETH',
+  decimals: 18,
+  iconUrl:
+    'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/slip44/60.png',
+};
+
+export const MOCK_USDC_SOLANA_TOKEN: DepositCryptoCurrency = {
+  assetId: 'solana:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+  name: 'USD Coin',
+  symbol: 'USDC',
+  decimals: 6,
+  iconUrl:
+    'https://static.cx.metamask.io/api/v2/tokenIcons/assets/solana/EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v.png',
+};
+
+export const MOCK_CRYPTOCURRENCIES: DepositCryptoCurrency[] = [
+  MOCK_USDC_TOKEN,
+  MOCK_USDT_TOKEN,
+  MOCK_BTC_TOKEN,
+  MOCK_ETH_TOKEN,
+  MOCK_USDC_SOLANA_TOKEN,
+];