Fix custom networks assets

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<ChainId | number, ParsedAssetsDict>,
       );
-
     return parsedAssetsDict;
   } catch (e) {
     logger.error(new RainbowError('customNetworkAssetsFunction: '), {

src/entries/popup/hooks/useUserAssetsBalance.ts

@@ -1,17 +1,18 @@
-import { useAccount } from 'wagmi';
+import { Address, useAccount } from 'wagmi';
 
 import {
   selectUserAssetsBalance,
   selectorFilterByUserChains,
 } from '~/core/resources/_selectors/assets';
 import { useUserAssets } from '~/core/resources/assets';
+import { useCustomNetworkAssets } from '~/core/resources/assets/customNetworkAssets';
 import { useCurrentCurrencyStore } from '~/core/state';
-import { convertAmountToNativeDisplay } from '~/core/utils/numbers';
+import { add, convertAmountToNativeDisplay } from '~/core/utils/numbers';
 
 export function useUserAssetsBalance() {
   const { address } = useAccount();
   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),

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 };
 };

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],
   );