Update local cache state updates in FastFallbackCoinIconImage and rem…

…ove react-coin-icon usage inFastFallbackCoinIconImage
rainbow-me · Nov 14, 2023 · b6c78c3 · b6c78c3
1 parent 6572139
commit b6c78c3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 51 deletions.
diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-// @ts-expect-error // no declaration for this yet
-import * as CoinIconsImages from 'react-coin-icon/lib/pngs';
 import { Image, StyleSheet, View } from 'react-native';
 import { FastChainBadge } from './FastCoinBadge';
 import { FastFallbackCoinIconImage } from './FastFallbackCoinIconImage';
@@ -25,12 +23,6 @@ const fallbackIconStyle = {
   position: 'absolute',
 };
 
-function formatSymbol(symbol: string) {
-  return symbol
-    ? symbol.charAt(0).toUpperCase() + symbol.slice(1).toLowerCase()
-    : '';
-}
-
 /**
  * If mainnet asset is available, get the token under /ethereum/ (token) url.
  * Otherwise let it use whatever type it has
@@ -85,14 +77,7 @@ export default React.memo(function FastCoinIcon({
   });
 
   const shadowColor = theme.isDarkMode ? colors.shadow : fallbackIconColor;
-
   const eth = isETH(resolvedAddress);
-
-  const formattedSymbol = formatSymbol(symbol);
-
-  const shouldRenderFallback = !eth;
-  const shouldRenderLocalCoinIconImage =
-    !shouldRenderFallback && !!CoinIconsImages[formattedSymbol];
   const shouldRenderContract = symbol === 'contract';
 
   return (
@@ -108,21 +93,6 @@ export default React.memo(function FastCoinIcon({
         >
           <Image source={EthIcon} style={sx.coinIconFallback} />
         </View>
-      ) : shouldRenderLocalCoinIconImage ? (
-        <View
-          style={[
-            sx.coinIconFallback,
-            sx.reactCoinIconContainer,
-            sx.withShadow,
-            { shadowColor },
-          ]}
-        >
-          <Image
-            resizeMode="contain"
-            source={CoinIconsImages[formattedSymbol]}
-            style={sx.reactCoinIconImage}
-          />
-        </View>
       ) : shouldRenderContract ? (
         <Image source={ContractInteraction} style={sx.contract} />
       ) : (
@@ -172,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/FastFallbackCoinIconImage.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx
@@ -1,7 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Network } from '@/networks/types';
-import { useForceUpdate } from '@/hooks';
 import { ImageWithCachedMetadata, ImgixImage } from '@/components/images';
 import { ThemeContextProps } from '@/theme';
 import { getUrlForTrustIconFallback } from '@/utils';
@@ -35,38 +34,36 @@ export const FastFallbackCoinIconImage = React.memo(
 
     const key = `${symbol}-${imageUrl}`;
 
-    const shouldShowImage = imagesCache[key] !== ImageState.NOT_FOUND;
-    const isLoaded = imagesCache[key] === ImageState.LOADED;
+    const [cacheStatus, setCacheStatus] = useState<ImageState>(
+      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 => {
         const newError = err?.nativeEvent?.message?.includes('404')
           ? 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 (