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({
) : (