Replace assetType with network in getUrlForTrustIconFallback

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinBadge.tsx

@@ -12,52 +12,52 @@ import ZoraBadge from '@/assets/badges/zoraBadge.png';
 import ZoraBadgeDark from '@/assets/badges/zoraBadgeDark.png';
 import BaseBadge from '@/assets/badges/baseBadge.png';
 import BaseBadgeDark from '@/assets/badges/baseBadgeDark.png';
-import { AssetType } from '@/entities';
+import { Network } from '@/networks/types';
 
 interface FastChainBadgeProps {
-  assetType: AssetType;
+  network: Network;
   theme: any;
 }
 
 const AssetIconsByTheme: {
-  [key in AssetType]?: {
+  [key in Network]?: {
     dark: ImageSourcePropType;
     light: ImageSourcePropType;
   };
 } = {
-  [AssetType.arbitrum]: {
+  [Network.arbitrum]: {
     dark: ArbitrumBadgeDark,
     light: ArbitrumBadge,
   },
-  [AssetType.optimism]: {
+  [Network.optimism]: {
     dark: OptimismBadgeDark,
     light: OptimismBadge,
   },
-  [AssetType.polygon]: {
+  [Network.polygon]: {
     dark: PolygonBadgeDark,
     light: PolygonBadge,
   },
-  [AssetType.bsc]: {
+  [Network.bsc]: {
     dark: BscBadgeDark,
     light: BscBadge,
   },
-  [AssetType.zora]: {
+  [Network.zora]: {
     dark: ZoraBadgeDark,
     light: ZoraBadge,
   },
-  [AssetType.base]: {
+  [Network.base]: {
     dark: BaseBadgeDark,
     light: BaseBadge,
   },
 };
 
 export const FastChainBadge = React.memo(function FastChainBadge({
-  assetType,
+  network,
   theme,
 }: FastChainBadgeProps) {
   const { isDarkMode } = theme;
 
-  const source = AssetIconsByTheme[assetType]?.[isDarkMode ? 'dark' : 'light'];
+  const source = AssetIconsByTheme[network]?.[isDarkMode ? 'dark' : 'light'];
 
   if (!source) return null;
 

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx

@@ -6,15 +6,11 @@ import { FastChainBadge } from './FastCoinBadge';
 import { FastFallbackCoinIconImage } from './FastFallbackCoinIconImage';
 import ContractInteraction from '@/assets/contractInteraction.png';
 import EthIcon from '@/assets/eth-icon.png';
-import { AssetType } from '@/entities';
 import { useColorForAsset } from '@/hooks';
+import { Network } from '@/networks/types';
 import { borders, fonts } from '@/styles';
 import { ThemeContextProps } from '@/theme';
-import {
-  FallbackIcon as CoinIconTextFallback,
-  getTokenMetadata,
-  isETH,
-} from '@/utils';
+import { FallbackIcon as CoinIconTextFallback, isETH } from '@/utils';
 
 const fallbackTextStyles = {
   fontFamily: fonts.family.SFProRounded,
@@ -38,55 +34,54 @@ function formatSymbol(symbol: string) {
 /**
  * If mainnet asset is available, get the token under /ethereum/ (token) url.
  * Otherwise let it use whatever type it has
- * @param param0 - optional mainnetAddress, address and optional assetType
+ * @param param0 - optional mainnetAddress, address and network
  * @returns a proper type and address to use for the url
  */
-function resolveTypeAndAddress({
-  mainnetAddress,
+function resolveNetworkAndAddress({
   address,
-  assetType,
+  mainnetAddress,
+  network,
 }: {
   mainnetAddress?: string;
   address: string;
-  assetType?: AssetType;
+  network: Network;
 }) {
   if (mainnetAddress) {
     return {
       resolvedAddress: mainnetAddress,
-      resolvedType: AssetType.token,
+      resolvedNetwork: Network.mainnet,
     };
   }
 
   return {
     resolvedAddress: address,
-    resolvedType: assetType,
+    resolvedNetwork: network,
   };
 }
 
 export default React.memo(function FastCoinIcon({
   address,
   mainnetAddress,
+  network,
   symbol,
-  assetType,
   theme,
 }: {
   address: string;
   mainnetAddress?: string;
+  network: Network;
   symbol: string;
-  assetType?: AssetType;
   theme: ThemeContextProps;
 }) {
   const { colors } = theme;
 
-  const { resolvedType, resolvedAddress } = resolveTypeAndAddress({
+  const { resolvedNetwork, resolvedAddress } = resolveNetworkAndAddress({
     address,
-    assetType,
     mainnetAddress,
+    network,
   });
 
   const fallbackIconColor = useColorForAsset({
     address: resolvedAddress,
-    type: resolvedType,
   });
 
   const shadowColor = theme.isDarkMode ? colors.shadow : fallbackIconColor;
@@ -133,7 +128,7 @@ export default React.memo(function FastCoinIcon({
       ) : (
         <FastFallbackCoinIconImage
           address={resolvedAddress}
-          assetType={resolvedType}
+          network={resolvedNetwork}
           shadowColor={shadowColor}
           symbol={symbol}
           theme={theme}
@@ -151,7 +146,7 @@ export default React.memo(function FastCoinIcon({
         </FastFallbackCoinIconImage>
       )}
 
-      {assetType && <FastChainBadge assetType={assetType} theme={theme} />}
+      {network && <FastChainBadge network={network} theme={theme} />}
     </View>
   );
 });

src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { AssetType } from '@/entities';
+import { Network } from '@/networks/types';
 import { useForceUpdate } from '@/hooks';
 import { ImageWithCachedMetadata, ImgixImage } from '@/components/images';
 import { ThemeContextProps } from '@/theme';
@@ -17,21 +17,21 @@ const imagesCache: { [imageUrl: string]: keyof typeof ImageState } = {};
 export const FastFallbackCoinIconImage = React.memo(
   function FastFallbackCoinIconImage({
     address,
-    assetType,
+    network,
     symbol,
     shadowColor,
     theme,
     children,
   }: {
     theme: ThemeContextProps;
     address: string;
-    assetType?: AssetType;
+    network: Network;
     symbol: string;
     shadowColor: string;
     children: () => React.ReactNode;
   }) {
     const { colors } = theme;
-    const imageUrl = getUrlForTrustIconFallback(address, assetType)!;
+    const imageUrl = getUrlForTrustIconFallback(address, network)!;
 
     const key = `${symbol}-${imageUrl}`;
 

src/components/coin-icon/CoinIcon.tsx

@@ -1,20 +1,14 @@
-import { isNil } from 'lodash';
 import React, { useMemo } from 'react';
 import { View, ViewProps } from 'react-native';
 import ContractInteraction from '../../assets/contractInteraction.png';
 import { useTheme } from '../../theme/ThemeContext';
 import ChainBadge from './ChainBadge';
 import { CoinIconFallback } from './CoinIconFallback';
-import { AssetTypes } from '@/entities';
+import { Network } from '@/networks/types';
 import { useColorForAsset } from '@/hooks';
 import { ImgixImage } from '@/components/images';
 import styled from '@/styled-thing';
-import {
-  getTokenMetadata,
-  isETH,
-  magicMemo,
-  CoinIcon as ReactCoinIcon,
-} from '@/utils';
+import { isETH, magicMemo, CoinIcon as ReactCoinIcon } from '@/utils';
 import { ChainBadgeType } from '@/components/coin-icon/ChainBadgeSizeConfigs';
 
 export const CoinIconSize = 40;
@@ -59,7 +53,6 @@ const CoinIcon: React.FC<Props> = ({
 }) => {
   const color = useColorForAsset({
     address: mainnet_address || address,
-    type: mainnet_address ? AssetTypes.token : type,
   });
   const { colors, isDarkMode } = useTheme();
   const forceFallback = !isETH(mainnet_address || address);
@@ -85,8 +78,7 @@ const CoinIcon: React.FC<Props> = ({
           }
           size={size}
           symbol={symbol}
-          type={mainnet_address ? AssetTypes.token : type}
-          assetType={mainnet_address ? AssetTypes.token : type}
+          network={mainnet_address ? Network.mainnet : type}
           theme={theme}
         />
       ) : (

src/components/coin-icon/CoinIconFallback.js

@@ -31,8 +31,8 @@ const fallbackIconStyle = size => {
 export const CoinIconFallback = fallbackProps => {
   const {
     address,
-    assetType,
     height,
+    network,
     symbol,
     shadowColor,
     theme,
@@ -41,7 +41,7 @@ export const CoinIconFallback = fallbackProps => {
   } = fallbackProps;
 
   const { colors } = theme;
-  const imageUrl = getUrlForTrustIconFallback(address, assetType);
+  const imageUrl = getUrlForTrustIconFallback(address, network);
 
   const key = `${symbol}-${imageUrl}`;
 
@@ -50,7 +50,6 @@ export const CoinIconFallback = fallbackProps => {
 
   const fallbackIconColor = useColorForAsset({
     address,
-    assetType,
   });
 
   // we store data inside the object outside the component

src/utils/getUrlForTrustIconFallback.ts

@@ -1,16 +1,21 @@
-import { AssetType, EthereumAddress } from '@/entities';
+import { EthereumAddress } from '@/entities';
+import { Network } from '@/networks/types';
 
 export default function getUrlForTrustIconFallback(
   address: EthereumAddress,
-  type?: AssetType
+  network: Network
 ): string | null {
   if (!address) return null;
-  let network = 'ethereum';
-  if (type && type !== AssetType.token) {
-    network = type;
+  let networkPath = 'ethereum';
+  switch (network) {
+    case Network.mainnet:
+      networkPath = 'ethereum';
+      break;
+    case Network.bsc:
+      networkPath = 'smartchain';
+      break;
+    default:
+      networkPath = network;
   }
-  if (type && type === AssetType.bsc) {
-    network = 'smartchain';
-  }
-  return `https://rainbowme-res.cloudinary.com/image/upload/assets/${network}/${address}.png`;
+  return `https://rainbowme-res.cloudinary.com/image/upload/assets/${networkPath}/${address}.png`;
 }