From 1448e92be37da649402c2ca85b78cdfb00d7d820 Mon Sep 17 00:00:00 2001 From: jinchung Date: Sat, 21 Oct 2023 18:20:22 -0400 Subject: [PATCH 1/3] Replace assetType with network in getUrlForTrustIconFallback --- .../FastComponents/FastCoinBadge.tsx | 22 ++++++------ .../FastComponents/FastCoinIcon.tsx | 35 ++++++++----------- .../FastFallbackCoinIconImage.tsx | 8 ++--- src/components/coin-icon/CoinIcon.tsx | 14 ++------ src/components/coin-icon/CoinIconFallback.js | 5 ++- src/utils/getUrlForTrustIconFallback.ts | 23 +++++++----- 6 files changed, 49 insertions(+), 58 deletions(-) diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinBadge.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinBadge.tsx index f92e790a267..e5ff459bb09 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinBadge.tsx +++ b/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; diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx index 73a62443b35..47523b7a0f5 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx +++ b/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({ ) : ( )} - {assetType && } + {network && } ); }); diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx index 1c0336a3316..943b84ed099 100644 --- a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage.tsx +++ b/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,7 +17,7 @@ const imagesCache: { [imageUrl: string]: keyof typeof ImageState } = {}; export const FastFallbackCoinIconImage = React.memo( function FastFallbackCoinIconImage({ address, - assetType, + network, symbol, shadowColor, theme, @@ -25,13 +25,13 @@ export const FastFallbackCoinIconImage = React.memo( }: { 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}`; diff --git a/src/components/coin-icon/CoinIcon.tsx b/src/components/coin-icon/CoinIcon.tsx index de467b9d627..1ece2ee675a 100644 --- a/src/components/coin-icon/CoinIcon.tsx +++ b/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 = ({ }) => { 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 = ({ } size={size} symbol={symbol} - type={mainnet_address ? AssetTypes.token : type} - assetType={mainnet_address ? AssetTypes.token : type} + network={mainnet_address ? Network.mainnet : type} 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/utils/getUrlForTrustIconFallback.ts b/src/utils/getUrlForTrustIconFallback.ts index c1975dedf8c..8a64080887e 100644 --- a/src/utils/getUrlForTrustIconFallback.ts +++ b/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`; } From 65721391546ce3d33b27b16e890bb275614a8fc0 Mon Sep 17 00:00:00 2001 From: jinchung Date: Sat, 21 Oct 2023 19:02:34 -0400 Subject: [PATCH 2/3] Update components using FastCoinIcon to pass network instead of assetType --- .../FastComponents/FastBalanceCoinRow.tsx | 2 +- .../FastComponents/FastCurrencySelectionRow.tsx | 4 ++-- src/components/coin-icon/CoinIcon.tsx | 15 +++++++++++++-- .../coin-row/FastTransactionCoinRow.tsx | 4 ++-- src/components/exchange/ExchangeTokenRow.tsx | 4 ++-- 5 files changed, 20 insertions(+), 9 deletions(-) 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( = ({ const theme = useTheme(); + const network = mainnet_address + ? Network.mainnet + : type + ? ethereumUtils.getNetworkFromType(type) + : Network.mainnet; + return ( {isNotContractInteraction ? ( @@ -78,7 +89,7 @@ const CoinIcon: React.FC = ({ } size={size} symbol={symbol} - network={mainnet_address ? Network.mainnet : type} + network={network} theme={theme} /> ) : ( 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({ ) : ( Date: Mon, 13 Nov 2023 19:35:13 -0500 Subject: [PATCH 3/3] Update local cache state updates in FastFallbackCoinIconImage and remove react-coin-icon usage inFastFallbackCoinIconImage --- .../FastComponents/FastCoinIcon.tsx | 34 ------------------- .../FastFallbackCoinIconImage.tsx | 29 +++++++--------- 2 files changed, 12 insertions(+), 51 deletions(-) diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx index 47523b7a0f5..a60b131e8b3 100644 --- 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({ > - ) : shouldRenderLocalCoinIconImage ? ( - - - ) : shouldRenderContract ? ( ) : ( @@ -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 index 943b84ed099..9342296964e 100644 --- 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,22 +34,19 @@ 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(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 (