chore: coin icon refactor

src/components/L2Disclaimer.js

@@ -2,18 +2,15 @@ import React from 'react';
 import RadialGradient from 'react-native-radial-gradient';
 import Divider from './Divider';
 import ButtonPressAnimation from './animations/ButtonPressAnimation';
-import { CoinIcon } from './coin-icon';
 import ChainBadge from './coin-icon/ChainBadge';
 import { Column, Row } from './layout';
 import { Text } from './text';
-import { isL2Asset } from '@/handlers/assets';
-import { ETH_ADDRESS, ETH_SYMBOL } from '@/references';
 import { padding, position } from '@/styles';
 import { darkModeThemeColors } from '@/styles/colors';
-import { ethereumUtils } from '@/utils';
 import { getNetworkObj } from '@/networks';
 import * as lang from '@/languages';
 import { isL2Network } from '@/handlers/web3';
+import { EthCoinIcon } from './coin-icon/EthCoinIcon';
 
 const L2Disclaimer = ({
   network,
@@ -47,11 +44,7 @@ const L2Disclaimer = ({
         <Row borderRadius={16} marginHorizontal={marginHorizontal} style={padding.object(android ? 6 : 10, 10, android ? 6 : 10, 10)}>
           <RadialGradient {...radialGradientProps} borderRadius={16} radius={600} />
           <Column justify="center">
-            {isL2 ? (
-              <ChainBadge network={network} position="relative" size="small" forceDark={forceDarkMode} />
-            ) : (
-              <CoinIcon address={ETH_ADDRESS} size={20} symbol={ETH_SYMBOL} />
-            )}
+            {isL2 ? <ChainBadge network={network} position="relative" size="small" forceDark={forceDarkMode} /> : <EthCoinIcon size={20} />}
           </Column>
           <Column flex={1} justify="center" marginHorizontal={8}>
             <Text

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

@@ -5,11 +5,13 @@ import { Icon } from '../../../../components/icons';
 import { ButtonPressAnimation } from '../../../animations';
 
 import { ExtendedState } from '../core/RawRecyclerList';
-import FastCoinIcon from './FastCoinIcon';
+
 import { Text } from '@/design-system';
 import { useAccountAsset, useCoinListFinishEditingOptions } from '@/hooks';
 import Routes from '@/navigation/routesNames';
 import { borders, colors, padding, shadow } from '@/styles';
+import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
+import { ParsedAddressAsset } from '@/entities';
 
 interface CoinCheckButtonProps {
   isHidden: boolean;
@@ -63,7 +65,7 @@ interface MemoizedBalanceCoinRowProps {
 
 const MemoizedBalanceCoinRow = React.memo(
   ({ uniqueId, nativeCurrency, theme, navigate, nativeCurrencySymbol, isHidden, maybeCallback }: MemoizedBalanceCoinRowProps) => {
-    const item = useAccountAsset(uniqueId, nativeCurrency);
+    const item = useAccountAsset(uniqueId, nativeCurrency) as any;
 
     const handlePress = useCallback(() => {
       if (maybeCallback.current) {
@@ -94,12 +96,13 @@ const MemoizedBalanceCoinRow = React.memo(
         <ButtonPressAnimation onPress={handlePress} scaleTo={0.96} testID={`balance-coin-row-${item?.name}`}>
           <View style={[sx.container]}>
             <View style={sx.iconContainer}>
-              <FastCoinIcon
-                address={item?.address}
+              <RainbowCoinIcon
+                size={40}
+                icon={item?.icon_url}
                 network={item?.network}
-                mainnetAddress={item?.mainnet_address}
                 symbol={item?.symbol}
                 theme={theme}
+                colors={item?.colors}
               />
             </View>
 

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

@@ -10,14 +10,14 @@ import RadialGradient from 'react-native-radial-gradient';
 import { ButtonPressAnimation } from '../../../animations';
 import { CoinRowHeight } from '../../../coin-row';
 import { FloatingEmojis } from '../../../floating-emojis';
-import FastCoinIcon from './FastCoinIcon';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
 import { Text } from '@/design-system';
 import { isNativeAsset } from '@/handlers/assets';
 import { Network } from '@/networks/types';
-import { useAccountAsset } from '@/hooks';
 import { colors, fonts, fontWithWidth, getFontSize } from '@/styles';
 import { deviceUtils } from '@/utils';
+import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
+import { useExternalToken } from '@/resources/assets/externalAssetsQuery';
 
 const SafeRadialGradient = (IS_TESTING === 'true' ? View : RadialGradient) as typeof RadialGradient;
 
@@ -87,7 +87,8 @@ const deviceWidth = deviceUtils.dimensions.width;
 
 export default React.memo(function FastCurrencySelectionRow({
   item: {
-    uniqueId,
+    native,
+    balance,
     showBalance,
     showFavoriteButton,
     onPress,
@@ -99,7 +100,6 @@ export default React.memo(function FastCurrencySelectionRow({
     contextMenuProps,
     symbol,
     address,
-    mainnet_address,
     name,
     testID,
     network,
@@ -108,10 +108,9 @@ export default React.memo(function FastCurrencySelectionRow({
 }: FastCurrencySelectionRowProps) {
   const { colors } = theme;
 
-  // TODO https://github.com/rainbow-me/rainbow/pull/3313/files#r876259954
-  const item = useAccountAsset(uniqueId, nativeCurrency);
+  const { data: item } = useExternalToken({ address, network, currency: nativeCurrency });
   const rowTestID = `${testID}-exchange-coin-row-${symbol ?? item?.symbol ?? ''}-${network || Network.mainnet}`;
-  const isInfoButtonVisible = !item?.isNativeAsset || (!isNativeAsset(address ?? item?.address, network) && !showBalance);
+  const isInfoButtonVisible = !isNativeAsset(address, network) && !showBalance;
 
   return (
     <View style={sx.row}>
@@ -124,12 +123,13 @@ export default React.memo(function FastCurrencySelectionRow({
       >
         <View style={sx.rootContainer}>
           <View style={sx.iconContainer}>
-            <FastCoinIcon
-              address={address || item?.address}
-              network={favorite ? Network.mainnet : network}
-              mainnetAddress={mainnet_address ?? item?.mainnet_address}
-              symbol={symbol ?? item?.symbol}
+            <RainbowCoinIcon
+              size={40}
+              icon={item?.iconUrl || ''}
+              network={network}
+              symbol={item?.symbol || symbol}
               theme={theme}
+              colors={item?.colors || undefined}
             />
           </View>
           <View style={sx.innerContainer}>
@@ -163,10 +163,10 @@ export default React.memo(function FastCurrencySelectionRow({
             {showBalance && (
               <View style={[sx.column, sx.balanceColumn]}>
                 <Text align="right" color="primary (Deprecated)" size="16px / 22px (Deprecated)" weight="medium">
-                  {item?.native?.balance?.display ?? `${nativeCurrencySymbol}0.00`}
+                  {native?.balance?.display ?? `${nativeCurrencySymbol}0.00`}
                 </Text>
                 <Text align="right" color={{ custom: theme.colors.blueGreyDark50 }} size="14px / 19px (Deprecated)" weight="medium">
-                  {item?.balance?.display ?? ''}
+                  {balance?.display ?? ''}
                 </Text>
               </View>
             )}

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

@@ -3,7 +3,6 @@ import { StyleSheet, View } from 'react-native';
 import { Network } from '@/networks/types';
 import { ImageWithCachedMetadata, ImgixImage } from '@/components/images';
 import { ThemeContextProps } from '@/theme';
-import { getUrlForTrustIconFallback } from '@/utils';
 
 const ImageState = {
   ERROR: 'ERROR',
@@ -14,24 +13,23 @@ const ImageState = {
 const imagesCache: { [imageUrl: string]: keyof typeof ImageState } = {};
 
 export const FastFallbackCoinIconImage = React.memo(function FastFallbackCoinIconImage({
-  address,
-  network,
-  symbol,
+  size = 40,
+  icon,
   shadowColor,
   theme,
   children,
 }: {
+  size?: number;
+  icon?: string;
   theme: ThemeContextProps;
-  address: string;
   network: Network;
   symbol: string;
   shadowColor: string;
   children: () => React.ReactNode;
 }) {
   const { colors } = theme;
-  const imageUrl = getUrlForTrustIconFallback(address, network)!;
 
-  const key = `${symbol}-${imageUrl}`;
+  const key = `${icon}`;
 
   const [cacheStatus, setCacheStatus] = useState(imagesCache[key]);
 
@@ -62,15 +60,15 @@ export const FastFallbackCoinIconImage = React.memo(function FastFallbackCoinIco
   );
 
   return (
-    <View style={[sx.coinIconContainer, sx.withShadow, { shadowColor }]}>
+    <View style={[sx.coinIconContainer, sx.withShadow, { shadowColor, height: size, width: size }]}>
       {shouldShowImage && (
         <ImageWithCachedMetadata
           cache={ImgixImage.cacheControl.immutable}
-          imageUrl={imageUrl}
+          imageUrl={icon}
           onError={onError}
           onLoad={onLoad}
-          size={40}
-          style={[sx.coinIconFallback, isLoaded && { backgroundColor: colors.white }]}
+          size={size}
+          style={[sx.coinIconFallback, isLoaded && { backgroundColor: colors.white }, { height: size, width: size }]}
         />
       )}
 
@@ -83,26 +81,12 @@ const sx = StyleSheet.create({
   coinIconContainer: {
     alignItems: 'center',
     borderRadius: 20,
-    height: 40,
     justifyContent: 'center',
     overflow: 'visible',
-    width: 40,
   },
   coinIconFallback: {
     borderRadius: 20,
-    height: 40,
     overflow: 'hidden',
-    width: 40,
-  },
-  container: {
-    elevation: 6,
-    height: 59,
-    overflow: 'visible',
-    paddingTop: 9,
-  },
-  contract: {
-    height: 40,
-    width: 40,
   },
   fallbackWrapper: {
     left: 0,

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

@@ -26,7 +26,6 @@ export default React.memo(function WrappedNFT({
   const asset = useMemo(
     () => ({
       ...assetCollectible,
-      ...(IS_TESTING === 'true' ? { image_original_url: null, image_preview_url: null, image_url: null } : {}),
     }),
     [assetCollectible]
   );