chore: replace genericAssets

src/components/asset-list/RecyclerAssetList2/WrappedNFT.tsx

@@ -21,7 +21,7 @@ export default React.memo(function WrappedNFT({
   placement: 'left' | 'right';
   externalAddress?: string;
 }) {
-  const assetCollectible = useCollectible({ uniqueId }, externalAddress);
+  const assetCollectible = useCollectible(uniqueId, externalAddress);
 
   const asset = useMemo(
     () => ({

src/components/cards/EthCard.tsx

@@ -7,28 +7,26 @@ import {
   Bleed,
 } from '@/design-system';
 import { useTheme } from '@/theme';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { GenericCard } from './GenericCard';
 import { ButtonPressAnimation } from '../animations';
 import {
   useAccountSettings,
   useChartThrottledPoints,
   useColorForAsset,
-  useGenericAsset,
   useWallets,
 } from '@/hooks';
 import { useRemoteConfig } from '@/model/remoteConfig';
-import { deviceUtils, ethereumUtils } from '@/utils';
+import { deviceUtils } from '@/utils';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import { analyticsV2 } from '@/analytics';
-import { ETH_ADDRESS, ETH_SYMBOL } from '@/references';
+import { ETH_ADDRESS } from '@/references';
 import {
   ChartPath,
   ChartPathProvider,
 } from '@/react-native-animated-charts/src';
 import { CoinIcon } from '../coin-icon';
-import { AssetType } from '@/entities';
 import Labels from '../value-chart/ExtremeLabels';
 import showWalletErrorAlert from '@/helpers/support';
 import { IS_IOS } from '@/env';
@@ -38,15 +36,31 @@ import { useAccountAccentColor } from '@/hooks/useAccountAccentColor';
 import { useRoute } from '@react-navigation/native';
 import * as i18n from '@/languages';
 import { ButtonPressAnimationTouchEvent } from '@/components/animations/ButtonPressAnimation/types';
+import { useExternalToken } from '@/resources/assets/externalAssetsQuery';
+import assetTypes from '@/entities/assetTypes';
+import { Network } from '@/networks/types';
+import { getUniqueId } from '@/utils/ethereumUtils';
 
 export const ETH_CARD_HEIGHT = 284.3;
 
 export const EthCard = () => {
-  const { accountAddress, nativeCurrency } = useAccountSettings();
+  const { nativeCurrency } = useAccountSettings();
   const { colors, isDarkMode } = useTheme();
   const { navigate } = useNavigation();
   const { isDamaged } = useWallets();
-  const genericAsset = useGenericAsset(ETH_ADDRESS);
+  const { data: externalEthAsset } = useExternalToken({
+    address: ETH_ADDRESS,
+    network: Network.mainnet,
+    currency: nativeCurrency,
+  });
+
+  const ethAsset = {
+    ...externalEthAsset,
+    address: ETH_ADDRESS,
+    network: Network.mainnet,
+    uniqueId: getUniqueId(ETH_ADDRESS, Network.mainnet),
+  };
+
   const { loaded: accentColorLoaded } = useAccountAccentColor();
   const { name: routeName } = useRoute();
   const cardType = 'stretch';
@@ -69,62 +83,52 @@ export const EthCard = () => {
         routeName,
       });
     },
-    [accountAddress, isDamaged, navigate, routeName]
+    [isDamaged, navigate, routeName]
   );
 
-  const assetWithPrice = useMemo(() => {
-    return {
-      ...ethereumUtils.formatGenericAsset(genericAsset, nativeCurrency),
-      address: ETH_ADDRESS,
-      symbol: ETH_SYMBOL,
-    };
-  }, [genericAsset, nativeCurrency]);
-
   const handleAssetPress = useCallback(() => {
     navigate(Routes.EXPANDED_ASSET_SHEET, {
-      asset: assetWithPrice,
+      asset: ethAsset,
       type: 'token',
     });
     analyticsV2.track(analyticsV2.event.cardPressed, {
       cardName: 'EthCard',
       routeName,
       cardType,
     });
-  }, [assetWithPrice, navigate, routeName]);
+  }, [ethAsset, navigate, routeName]);
 
   let colorForAsset = useColorForAsset(
     {
-      address: assetWithPrice.address,
-      mainnet_address: assetWithPrice?.mainnet_address,
-      type: assetWithPrice?.mainnet_address
-        ? AssetType.token
-        : assetWithPrice.type,
+      address: ETH_ADDRESS,
+      mainnet_address: ETH_ADDRESS,
+      type: assetTypes.token,
     },
-    assetWithPrice?.address ? undefined : colors.appleBlue
+    colors.appleBlue
   );
 
-  if (isDarkMode && assetWithPrice?.address === ETH_ADDRESS) {
+  if (isDarkMode) {
     colorForAsset = colors.whiteLabel;
   }
 
   const { throttledData } = useChartThrottledPoints({
-    asset: assetWithPrice,
+    asset: ethAsset,
   });
 
   const CHART_WIDTH = deviceUtils.dimensions.width - 80;
   const CHART_HEIGHT = 80;
 
   let isNegativePriceChange = false;
-  if (assetWithPrice.native.change[0] === '-') {
+  if (ethAsset?.native?.change[0] === '-') {
     isNegativePriceChange = true;
   }
   const priceChangeDisplay = isNegativePriceChange
-    ? assetWithPrice.native.change.substring(1)
-    : assetWithPrice.native.change;
+    ? ethAsset?.native?.change.substring(1)
+    : ethAsset?.native?.change;
 
   const priceChangeColor = isNegativePriceChange ? colors.red : colors.green;
 
-  const loadedPrice = accentColorLoaded && assetWithPrice.native.change;
+  const loadedPrice = accentColorLoaded && ethAsset?.native?.change;
   const loadedChart = throttledData?.points.length && loadedPrice;
 
   const [noChartData, setNoChartData] = useState(false);
@@ -170,17 +174,17 @@ export const EthCard = () => {
                 ) : (
                   <>
                     <CoinIcon
-                      address={assetWithPrice.address}
+                      address={ETH_ADDRESS}
                       size={20}
-                      symbol={assetWithPrice.symbol}
-                      network={assetWithPrice.network}
+                      symbol={ethAsset.symbol}
+                      network={Network.mainnet}
                     />
                     <Text
                       size="17pt"
                       color={{ custom: colorForAsset }}
                       weight="heavy"
                     >
-                      {assetWithPrice.name}
+                      {ethAsset?.name}
                     </Text>
                   </>
                 )}
@@ -228,7 +232,7 @@ export const EthCard = () => {
             </Box>
           ) : (
             <Text size="26pt" color={{ custom: colorForAsset }} weight="heavy">
-              {assetWithPrice.native.price.display}
+              {ethAsset?.native?.price.display}
             </Text>
           )}
         </Stack>

src/components/cards/MintsCard/CollectionCell.tsx

@@ -193,6 +193,8 @@ export function CollectionCell({
             symbol={currency.symbol}
             style={{ marginRight: 4, marginVertical: -4 }}
             network={getNetworkFromChainId(collection.chainId)}
+            mainnet_address={currency?.mainnetAddress}
+            ignoreBadge
           />
         )}
         <View style={{ width: NFT_IMAGE_SIZE - 16 }}>

src/components/coin-icon/CoinIcon.tsx

@@ -83,7 +83,7 @@ const CoinIcon: React.FC<Props> = ({
           }
           size={size}
           symbol={symbol}
-          network={network}
+          network={mainnet_address ? Network.mainnet : network}
           theme={theme}
         />
       ) : (

src/components/exchange/ExchangeTokenRow.tsx

@@ -4,7 +4,7 @@ import { Box, Column, Columns, Inline, Stack, Text } from '@/design-system';
 import { isNativeAsset } from '@/handlers/assets';
 import { Network } from '@/networks/types';
 import { useAsset, useDimensions } from '@/hooks';
-import { ethereumUtils } from '@/utils';
+
 import FastCoinIcon from '../asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon';
 import { ButtonPressAnimation } from '../animations';
 import { FloatingEmojis } from '../floating-emojis';
@@ -20,7 +20,6 @@ interface ExchangeTokenRowProps {
 
 export default React.memo(function ExchangeTokenRow({
   item: {
-    uniqueId,
     showBalance,
     showFavoriteButton,
     onPress,
@@ -36,17 +35,11 @@ export default React.memo(function ExchangeTokenRow({
     testID,
     network,
     disabled,
-    decimals,
   },
 }: ExchangeTokenRowProps) {
   const { width: deviceWidth } = useDimensions();
   const item = useAsset({
-    uniqueId,
-    mainnet_address,
-    symbol,
     address,
-    name,
-    decimals,
     network,
   });
 

src/components/expanded-state/UniqueTokenExpandedState.tsx

@@ -66,6 +66,7 @@ import { ENS_RECORDS, REGISTRATION_MODES } from '@/helpers/ens';
 import {
   useAccountProfile,
   useBooleanState,
+  useCollectible,
   useDimensions,
   useENSProfile,
   useENSRegistration,
@@ -242,16 +243,18 @@ const getIsSupportedOnRainbowWeb = (network: Network) => {
 };
 
 const UniqueTokenExpandedState = ({
-  asset,
+  asset: passedAsset,
   external,
 }: UniqueTokenExpandedStateProps) => {
-  const isSupportedOnRainbowWeb = getIsSupportedOnRainbowWeb(asset.network);
-
   const { accountAddress } = useAccountProfile();
   const { height: deviceHeight, width: deviceWidth } = useDimensions();
   const { navigate, setOptions } = useNavigation();
   const { colors, isDarkMode } = useTheme();
   const { isReadOnlyWallet } = useWallets();
+  const collecible = useCollectible(passedAsset?.uniqueId);
+  const asset = external ? passedAsset : collecible;
+
+  const isSupportedOnRainbowWeb = getIsSupportedOnRainbowWeb(asset.network);
 
   const [
     isRefreshMetadataToastActive,