From df8af7762b603af41efa9ccda3079fa9bcbde780 Mon Sep 17 00:00:00 2001 From: Bruno Barbieri <1247834+brunobar79@users.noreply.github.com> Date: Fri, 8 Dec 2023 13:31:22 -0500 Subject: [PATCH] Fix custom networks assets (#1186) --- .../resources/assets/customNetworkAssets.ts | 23 ++++++++++---- .../popup/hooks/useUserAssetsBalance.ts | 31 ++++++++++++++++--- .../popup/hooks/useVisibleTokenCount.ts | 27 +++++++++++++++- src/entries/popup/pages/home/Tokens.tsx | 7 ++++- 4 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/core/resources/assets/customNetworkAssets.ts b/src/core/resources/assets/customNetworkAssets.ts index 6fd032f790..aa689734ba 100644 --- a/src/core/resources/assets/customNetworkAssets.ts +++ b/src/core/resources/assets/customNetworkAssets.ts @@ -35,6 +35,7 @@ import { } from '~/core/utils/chains'; import { isZero } from '~/core/utils/numbers'; import { RainbowError, logger } from '~/logger'; +import { ETH_MAINNET_ASSET } from '~/test/utils'; import { ASSETS_TIMEOUT_DURATION } from './assets'; @@ -133,7 +134,7 @@ export const getCustomChainIconUrl = ( const baseUrl = 'https://raw.githubusercontent.com/rainbow-me/assets/master/blockchains/'; - if (address === AddressZero) { + if (address === AddressZero || address === ETH_MAINNET_ASSET.address) { return `${baseUrl}${customChainIdsToAssetNames[chainId]}/info/logo.png`; } else { return `${baseUrl}${customChainIdsToAssetNames[chainId]}/assets/${address}/logo.png`; @@ -161,24 +162,26 @@ async function customNetworkAssetsFunction({ try { const assetsPromises = customChains.map(async (chain) => { const provider = getProvider({ chainId: chain.id }); + const nativeAssetAddress = + chain.id === ChainId.mainnet ? ETH_MAINNET_ASSET.address : AddressZero; const nativeAssetBalance = await provider.getBalance(address); const customNetworkNativeAssetParsed = nativeAssetBalance && !isZero(nativeAssetBalance.toString()) ? parseUserAssetBalances({ asset: { - address: AddressZero, + address: nativeAssetAddress, chainId: chain.id, chainName: chain.name as ChainName, isNativeAsset: true, name: chain.nativeCurrency.symbol, symbol: chain.nativeCurrency.symbol, - uniqueId: `${AddressZero}_${chain.id}`, + uniqueId: `${nativeAssetAddress}_${chain.id}`, decimals: 18, native: { price: undefined }, price: { value: 0 }, bridging: { isBridgeable: false, networks: [] }, - mainnetAddress: AddressZero as AddressOrEth, - icon_url: getCustomChainIconUrl(chain.id, AddressZero), + mainnetAddress: nativeAssetAddress as AddressOrEth, + icon_url: getCustomChainIconUrl(chain.id, nativeAssetAddress), }, currency, balance: nativeAssetBalance.toString(), @@ -246,6 +249,15 @@ async function customNetworkAssetsFunction({ allCustomNetworkAssets[i].native.price = parsedAsset.native.price; allCustomNetworkAssets[i].price = parsedAsset?.price as ZerionAssetPrice; + // Now we have the price, we have to calculate the native balance + if (allCustomNetworkAssets[i].isNativeAsset) { + const assetWithPriceAndNativeBalance = parseUserAssetBalances({ + asset: allCustomNetworkAssets[i], + currency, + balance: nativeAssetBalance.toString(), + }); + allCustomNetworkAssets[i] = assetWithPriceAndNativeBalance; + } } }); @@ -271,7 +283,6 @@ async function customNetworkAssetsFunction({ }, {} as Record, ); - return parsedAssetsDict; } catch (e) { logger.error(new RainbowError('customNetworkAssetsFunction: '), { diff --git a/src/entries/popup/hooks/useUserAssetsBalance.ts b/src/entries/popup/hooks/useUserAssetsBalance.ts index 4a3537ae56..0419a3777f 100644 --- a/src/entries/popup/hooks/useUserAssetsBalance.ts +++ b/src/entries/popup/hooks/useUserAssetsBalance.ts @@ -1,17 +1,18 @@ -import { useAccount } from 'wagmi'; +import { Address } from 'wagmi'; import { selectUserAssetsBalance, selectorFilterByUserChains, } from '~/core/resources/_selectors/assets'; import { useUserAssets } from '~/core/resources/assets'; -import { useCurrentCurrencyStore } from '~/core/state'; -import { convertAmountToNativeDisplay } from '~/core/utils/numbers'; +import { useCustomNetworkAssets } from '~/core/resources/assets/customNetworkAssets'; +import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state'; +import { add, convertAmountToNativeDisplay } from '~/core/utils/numbers'; export function useUserAssetsBalance() { - const { address } = useAccount(); + const { currentAddress: address } = useCurrentAddressStore(); const { currentCurrency: currency } = useCurrentCurrencyStore(); - const { data: totalAssetsBalance } = useUserAssets( + const { data: totalAssetsBalanceKnownNetworks } = useUserAssets( { address, currency, @@ -22,6 +23,26 @@ export function useUserAssetsBalance() { }, ); + const { data: totalAssetsBalanceCustomNetworks = [] } = + useCustomNetworkAssets( + { + address: address as Address, + currency, + }, + { + select: (data) => + selectorFilterByUserChains({ + data, + selector: selectUserAssetsBalance, + }), + }, + ); + + const totalAssetsBalance = add( + totalAssetsBalanceKnownNetworks as string, + totalAssetsBalanceCustomNetworks as string, + ); + return { amount: totalAssetsBalance, display: convertAmountToNativeDisplay(totalAssetsBalance || 0, currency), diff --git a/src/entries/popup/hooks/useVisibleTokenCount.ts b/src/entries/popup/hooks/useVisibleTokenCount.ts index e42834d927..c7f7c9032f 100644 --- a/src/entries/popup/hooks/useVisibleTokenCount.ts +++ b/src/entries/popup/hooks/useVisibleTokenCount.ts @@ -6,6 +6,7 @@ import { selectorFilterByUserChains, } from '~/core/resources/_selectors/assets'; import { useUserAssets } from '~/core/resources/assets'; +import { useCustomNetworkAssets } from '~/core/resources/assets/customNetworkAssets'; import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state'; import { useHideSmallBalancesStore } from '~/core/state/currentSettings/hideSmallBalances'; @@ -30,7 +31,31 @@ export const useVisibleTokenCount = () => { }, ); - const visibleTokenCount = useMemo(() => assets.length || 0, [assets.length]); + const { data: customNetworkAssets = [] } = useCustomNetworkAssets( + { + address: address, + currency: currentCurrency, + }, + { + select: (data) => + selectorFilterByUserChains({ + data, + selector: hideSmallBalances + ? selectUserAssetsFilteringSmallBalancesList + : selectUserAssetsList, + }), + }, + ); + + const allAssets = useMemo( + () => [...assets, ...customNetworkAssets], + [assets, customNetworkAssets], + ); + + const visibleTokenCount = useMemo( + () => allAssets.length || 0, + [allAssets.length], + ); return { visibleTokenCount }; }; diff --git a/src/entries/popup/pages/home/Tokens.tsx b/src/entries/popup/pages/home/Tokens.tsx index 16c3b6ec1c..f9a04d077e 100644 --- a/src/entries/popup/pages/home/Tokens.tsx +++ b/src/entries/popup/pages/home/Tokens.tsx @@ -123,7 +123,12 @@ export function Tokens() { ); const allAssets = useMemo( - () => [...assets, ...customNetworkAssets], + () => + [...assets, ...customNetworkAssets].sort( + (a: ParsedUserAsset, b: ParsedUserAsset) => + parseFloat(b?.native?.balance?.amount) - + parseFloat(a?.native?.balance?.amount), + ), [assets, customNetworkAssets], );