use custom networks assets (#1120)

src/core/resources/assets/assetMetadata.ts

@@ -0,0 +1,84 @@
+import { isValidAddress } from '@ethereumjs/util';
+import { useQuery } from '@tanstack/react-query';
+import { getProvider } from '@wagmi/core';
+import { Address } from 'wagmi';
+
+import {
+  QueryConfig,
+  QueryFunctionArgs,
+  QueryFunctionResult,
+  createQueryKey,
+} from '~/core/react-query';
+import { getAssetMetadata } from '~/core/utils/assets';
+
+// ///////////////////////////////////////////////
+// Query Types
+
+type AssetMetadataArgs = {
+  assetAddress?: Address;
+  chainId: number;
+};
+
+// ///////////////////////////////////////////////
+// Query Key
+
+export const assetMetadataQueryKey = ({
+  assetAddress,
+  chainId,
+}: AssetMetadataArgs) =>
+  createQueryKey(
+    'assetMetadata',
+    { assetAddress, chainId },
+    { persisterVersion: 1 },
+  );
+
+type AssetMetadataQueryKey = ReturnType<typeof assetMetadataQueryKey>;
+
+// ///////////////////////////////////////////////
+// Query Function
+
+async function assetMetadataQueryFunction({
+  queryKey: [{ assetAddress, chainId }],
+}: QueryFunctionArgs<typeof assetMetadataQueryKey>) {
+  if (assetAddress && isValidAddress(assetAddress)) {
+    const provider = getProvider({ chainId: Number(chainId) });
+    const metadata = await getAssetMetadata({
+      address: assetAddress,
+      provider,
+    });
+    return {
+      address: assetAddress,
+      symbol: metadata.symbol,
+      decimals: metadata.decimals,
+      name: metadata.name,
+    };
+  }
+}
+
+type AssetMetadataResult = QueryFunctionResult<
+  typeof assetMetadataQueryFunction
+>;
+
+// ///////////////////////////////////////////////
+// Query Hook
+
+export function useAssetMetadata(
+  { assetAddress, chainId }: AssetMetadataArgs,
+  config: QueryConfig<
+    AssetMetadataResult,
+    Error,
+    AssetMetadataResult,
+    AssetMetadataQueryKey
+  > = {},
+) {
+  return useQuery(
+    assetMetadataQueryKey({
+      assetAddress,
+      chainId,
+    }),
+    assetMetadataQueryFunction,
+    {
+      ...config,
+    },
+  );
+}

src/core/resources/assets/customNetworkAssets.ts

@@ -11,9 +11,18 @@ import {
   queryClient,
 } from '~/core/react-query';
 import { SupportedCurrencyKey } from '~/core/references';
-import { AddressOrEth, ParsedAssetsDictByChain } from '~/core/types/assets';
+import { customRPCAssetsStore } from '~/core/state/customRPCAssets';
+import {
+  AddressOrEth,
+  ParsedAssetsDict,
+  ParsedUserAsset,
+} from '~/core/types/assets';
 import { ChainId, ChainName } from '~/core/types/chains';
-import { parseUserAssetBalances } from '~/core/utils/assets';
+import {
+  extractFulfilledValue,
+  getAssetBalance,
+  parseUserAssetBalances,
+} from '~/core/utils/assets';
 import { getCustomChains } from '~/core/utils/chains';
 import { RainbowError, logger } from '~/logger';
 
@@ -24,24 +33,24 @@ export const CUSTOM_NETWORK_ASSETS_STALE_INTERVAL = 30000;
 // Query Types
 
 export type CustomNetworkAssetsArgs = {
-  address?: Address;
+  address: Address;
   currency: SupportedCurrencyKey;
 };
 
 type SetCustomNetworkAssetsArgs = {
-  address?: Address;
+  address: Address;
   currency: SupportedCurrencyKey;
   customNetworkAssets?: CustomNetworkAssetsResult;
 };
 
 type SetUserDefaultsArgs = {
-  address?: Address;
+  address: Address;
   currency: SupportedCurrencyKey;
   staleTime: number;
 };
 
 type FetchCustomNetworkAssetsArgs = {
-  address?: Address;
+  address: Address;
   currency: SupportedCurrencyKey;
 };
 
@@ -100,48 +109,87 @@ async function customNetworkAssetsFunction({
   const cache = queryClient.getQueryCache();
   const cachedCustomNetworkAssets = (cache.find(
     customNetworkAssetsKey({ address, currency }),
-  )?.state?.data || {}) as ParsedAssetsDictByChain;
+  )?.state?.data || {}) as Record<ChainId | number, ParsedAssetsDict>;
+  const { customChains } = getCustomChains();
+  if (customChains.length === 0) {
+    return cachedCustomNetworkAssets;
+  }
+  const { customRPCAssets } = customRPCAssetsStore.getState();
+
   try {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const parsedAssetsDict: ParsedAssetsDictByChain = {};
-    if (address) {
-      const { customChains } = getCustomChains();
-      if (customChains.length > 0) {
-        await Promise.all(
-          customChains.map(async (chain) => {
-            const provider = getProvider({ chainId: chain.id });
-            const nativeAssetBalance = await provider.getBalance(address);
-            const customNetworkNativeAssetParsed = parseUserAssetBalances({
-              asset: {
-                address: AddressZero,
-                chainId: chain.id,
-                chainName: chain.name as ChainName,
-                isNativeAsset: true,
-                name: chain.nativeCurrency.symbol,
-                symbol: chain.nativeCurrency.symbol,
-                uniqueId: `${AddressZero}_${chain.id}`,
-                decimals: 18,
-                native: { price: undefined },
-                bridging: { isBridgeable: false, networks: [] },
-                mainnetAddress: AddressZero as AddressOrEth,
-              },
-              currency,
-              balance: nativeAssetBalance.toString(), // FORMAT?
-            });
-
-            // TODO - add support for custom network tokens here (BX-1073)
-
-            parsedAssetsDict[chain.id as ChainId] = {
-              [customNetworkNativeAssetParsed.uniqueId]:
-                customNetworkNativeAssetParsed,
-            };
+    const assetsPromises = customChains.map(async (chain) => {
+      const provider = getProvider({ chainId: chain.id });
+      const nativeAssetBalance = await provider.getBalance(address);
+      const customNetworkNativeAssetParsed = parseUserAssetBalances({
+        asset: {
+          address: AddressZero,
+          chainId: chain.id,
+          chainName: chain.name as ChainName,
+          isNativeAsset: true,
+          name: chain.nativeCurrency.symbol,
+          symbol: chain.nativeCurrency.symbol,
+          uniqueId: `${AddressZero}_${chain.id}`,
+          decimals: 18,
+          native: { price: undefined },
+          bridging: { isBridgeable: false, networks: [] },
+          mainnetAddress: AddressZero as AddressOrEth,
+        },
+        currency,
+        balance: nativeAssetBalance.toString(),
+      });
+
+      const chainAssets = customRPCAssets[chain.id] || [];
+      const chainParsedAssetBalances = await Promise.allSettled(
+        chainAssets.map((asset) =>
+          getAssetBalance({
+            assetAddress: asset.address,
+            currentAddress: address,
+            provider,
           }),
-        );
-      }
-      return parsedAssetsDict;
-    }
-    return cachedCustomNetworkAssets;
+        ),
+      );
+
+      const chainParsedAssets = chainParsedAssetBalances.map((balance, i) => {
+        const fulfilledBalance = extractFulfilledValue(balance);
+        return parseUserAssetBalances({
+          asset: {
+            ...chainAssets[i],
+            chainId: chain.id,
+            chainName: chain.name as ChainName,
+            uniqueId: `${chainAssets[i].address}_${chain.id}`,
+            mainnetAddress: undefined,
+            isNativeAsset: false,
+            native: { price: undefined },
+          },
+          currency,
+          balance: fulfilledBalance || '0',
+        });
+      });
+
+      return {
+        chainId: chain.id,
+        assets: [customNetworkNativeAssetParsed, ...chainParsedAssets],
+      };
+    });
+    const assetsResults = (await Promise.allSettled(assetsPromises))
+      .map((assets) => extractFulfilledValue(assets))
+      .filter(Boolean);
+    const parsedAssetsDict: Record<ChainId | number, ParsedAssetsDict> =
+      assetsResults.reduce(
+        (acc, { chainId, assets }) => {
+          acc[Number(chainId)] = assets.reduce(
+            (chainAcc, asset) => {
+              chainAcc[asset.uniqueId] = asset;
+              return chainAcc;
+            },
+            {} as Record<string, ParsedUserAsset>,
+          );
+          return acc;
+        },
+        {} as Record<ChainId | number, ParsedAssetsDict>,
+      );
+
+    return parsedAssetsDict;
   } catch (e) {
     logger.error(new RainbowError('customNetworkAssetsFunction: '), {
       message: (e as Error)?.message,

src/core/state/customRPC/index.test.ts

@@ -5,7 +5,7 @@ import { ChainId } from '~/core/types/chains';
 
 import { customRPCsStore } from '.';
 
-// Dummy CustomRPC data
+// Dummy CustomChain data
 const TEST_RPC_1: Chain = {
   rpcUrls: {
     default: { http: ['http://test1.rpc'] },

src/core/types/assets.ts

@@ -65,7 +65,10 @@ export type ParsedSearchAsset = SearchAsset & ParsedUserAsset;
 
 export type ParsedAssetsDict = Record<UniqueId, ParsedUserAsset>;
 
-export type ParsedAssetsDictByChain = Record<ChainId, ParsedAssetsDict>;
+export type ParsedAssetsDictByChain = Record<
+  ChainId | number,
+  ParsedAssetsDict
+>;
 
 export interface ZerionAssetPrice {
   value: number;

src/core/utils/assets.ts

@@ -363,3 +363,50 @@ export const createAssetQuery = (
           .join(',')}
     }`;
 };
+
+export const getAssetMetadata = async ({
+  address,
+  provider,
+}: {
+  address: Address;
+  provider: Provider;
+}) => {
+  const contract = await getContract({
+    address,
+    abi: erc20ABI,
+    signerOrProvider: provider,
+  });
+  const [decimals, symbol, name] = await Promise.allSettled([
+    contract.decimals(),
+    contract.symbol(),
+    contract.name(),
+  ]);
+
+  return {
+    decimals: extractFulfilledValue<number>(decimals),
+    symbol: extractFulfilledValue<string>(symbol),
+    name: extractFulfilledValue<string>(name),
+  };
+};
+
+export const getAssetBalance = async ({
+  assetAddress,
+  currentAddress,
+  provider,
+}: {
+  assetAddress: Address;
+  currentAddress: Address;
+  provider: Provider;
+}) => {
+  const balance = await getContract({
+    address: assetAddress,
+    abi: erc20ABI,
+    signerOrProvider: provider,
+  }).balanceOf(currentAddress);
+
+  return balance.toString();
+};
+
+export const extractFulfilledValue = <T>(
+  result: PromiseSettledResult<T>,
+): T | undefined => (result.status === 'fulfilled' ? result.value : undefined);

src/entries/popup/App.tsx

@@ -58,6 +58,12 @@ export function App() {
     [customChains],
   );
 
+  React.useEffect(() => {
+    if (!isEqual(prevChains, customChains)) {
+      backgroundMessenger.send('rainbow_updateWagmiClient', null);
+    }
+  }, [prevChains, customChains]);
+
   React.useEffect(() => {
     // Disable analytics & sentry for e2e and dev mode
     if (process.env.IS_TESTING !== 'true' && process.env.IS_DEV !== 'true') {

src/entries/popup/Routes.tsx

@@ -56,8 +56,8 @@ import { SeedReveal } from './pages/seedReveal';
 import { SeedVerify } from './pages/seedVerify';
 import { Send } from './pages/send';
 import { Currency } from './pages/settings/currency';
-import { SettingsCustomRPC } from './pages/settings/customRPC';
-import { CustomRPC } from './pages/settings/customRPC/customRPC';
+import { SettingsCustomChain } from './pages/settings/customChain';
+import { CustomChain } from './pages/settings/customChain/customChain';
 import { Language } from './pages/settings/language';
 import { SettingsNetworks } from './pages/settings/networks';
 import { AutoLockTimer } from './pages/settings/privacy/autoLockTimer';
@@ -504,7 +504,7 @@ const ROUTE_DATA = [
         protectedRoute
         background="surfaceSecondary"
       >
-        <SettingsCustomRPC />
+        <SettingsCustomChain />
       </AnimatedRoute>
     ),
   },
@@ -519,7 +519,7 @@ const ROUTE_DATA = [
         protectedRoute
         background="surfaceSecondary"
       >
-        <CustomRPC />
+        <CustomChain />
       </AnimatedRoute>
     ),
   },

src/entries/popup/hooks/useCustomNetworkAsset.ts

@@ -1,16 +1,14 @@
-import { useAccount } from 'wagmi';
-
 import { selectUserAssetWithUniqueId } from '~/core/resources/_selectors/assets';
 import { useCustomNetworkAssets } from '~/core/resources/assets/customNetworkAssets';
-import { useCurrentCurrencyStore } from '~/core/state';
+import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state';
 import { UniqueId } from '~/core/types/assets';
 
 export function useCustomNetworkAsset(uniqueId?: UniqueId) {
-  const { address } = useAccount();
+  const { currentAddress } = useCurrentAddressStore();
   const { currentCurrency: currency } = useCurrentCurrencyStore();
   return useCustomNetworkAssets(
     {
-      address,
+      address: currentAddress,
       currency,
     },
     {