diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx index 7967ba91228..edaa91a98bf 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx +++ b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx @@ -140,7 +140,7 @@ const MemoizedBalanceCoinRow = React.memo( - ) : shouldRenderLocalCoinIconImage ? ( - - - ) : shouldRenderContract ? ( ) : ( )} - {assetType && } + {network && } ); }); @@ -177,10 +142,6 @@ const sx = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - reactCoinIconImage: { - height: '100%', - width: '100%', - }, withShadow: { elevation: 6, shadowOffset: { diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx index 0f04e6c0efe..38170e4ace3 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx +++ b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx @@ -14,7 +14,7 @@ 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 '@/helpers'; +import { Network } from '@/networks/types'; import { useAccountAsset } from '@/hooks'; import { colors, fonts, fontWithWidth, getFontSize } from '@/styles'; import { deviceUtils, ethereumUtils } from '@/utils'; @@ -151,7 +151,7 @@ export default React.memo(function FastCurrencySelectionRow({ React.ReactNode; }) { const { colors } = theme; - const imageUrl = getUrlForTrustIconFallback(address, assetType)!; + const imageUrl = getUrlForTrustIconFallback(address, network)!; const key = `${symbol}-${imageUrl}`; - const shouldShowImage = imagesCache[key] !== ImageState.NOT_FOUND; - const isLoaded = imagesCache[key] === ImageState.LOADED; + const [cacheStatus, setCacheStatus] = useState(imagesCache[key]); - // we store data inside the object outside the component - // so we can share it between component instances - // but we still want the component to pick up new changes - const forceUpdate = useForceUpdate(); + const shouldShowImage = cacheStatus !== ImageState.NOT_FOUND; + const isLoaded = cacheStatus === ImageState.LOADED; const onLoad = useCallback(() => { - if (imagesCache[key] === ImageState.LOADED) { + if (isLoaded) { return; } - imagesCache[key] = ImageState.LOADED; - forceUpdate(); - }, [key, forceUpdate]); + setCacheStatus(ImageState.LOADED); + }, [key, isLoaded]); + const onError = useCallback( // @ts-expect-error passed to an untyped JS component err => { @@ -58,15 +54,14 @@ export const FastFallbackCoinIconImage = React.memo( ? ImageState.NOT_FOUND : ImageState.ERROR; - if (imagesCache[key] === newError) { + if (cacheStatus === newError) { return; - } else { - imagesCache[key] = newError; } - forceUpdate(); + imagesCache[key] = newError; + setCacheStatus(newError); }, - [key, forceUpdate] + [cacheStatus, key] ); return ( diff --git a/src/components/coin-icon/CoinIcon.tsx b/src/components/coin-icon/CoinIcon.tsx index de467b9d627..ce787640f06 100644 --- a/src/components/coin-icon/CoinIcon.tsx +++ b/src/components/coin-icon/CoinIcon.tsx @@ -1,16 +1,15 @@ -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, + ethereumUtils, isETH, magicMemo, CoinIcon as ReactCoinIcon, @@ -59,7 +58,6 @@ const CoinIcon: React.FC = ({ }) => { const color = useColorForAsset({ address: mainnet_address || address, - type: mainnet_address ? AssetTypes.token : type, }); const { colors, isDarkMode } = useTheme(); const forceFallback = !isETH(mainnet_address || address); @@ -69,6 +67,12 @@ const CoinIcon: React.FC = ({ const theme = useTheme(); + const network = mainnet_address + ? Network.mainnet + : type + ? ethereumUtils.getNetworkFromType(type) + : Network.mainnet; + return ( {isNotContractInteraction ? ( @@ -85,8 +89,7 @@ const CoinIcon: React.FC = ({ } size={size} symbol={symbol} - type={mainnet_address ? AssetTypes.token : type} - assetType={mainnet_address ? AssetTypes.token : type} + network={network} theme={theme} /> ) : ( diff --git a/src/components/coin-icon/CoinIconFallback.js b/src/components/coin-icon/CoinIconFallback.js index be9fd6c9665..4bc8dea489c 100644 --- a/src/components/coin-icon/CoinIconFallback.js +++ b/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 diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx index 19511125b42..db7d0343e1f 100644 --- a/src/components/coin-row/FastTransactionCoinRow.tsx +++ b/src/components/coin-row/FastTransactionCoinRow.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback } from 'react'; import { StyleSheet, View } from 'react-native'; import { ButtonPressAnimation } from '../animations'; import FastCoinIcon from '../asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon'; @@ -154,7 +154,7 @@ export default React.memo(function TransactionCoinRow({ ) : (