fix dapp interactions e2e

rainbow-me · Feb 14, 2025 · 47d3e82 · 47d3e82
1 parent 96bad47
commit 47d3e82
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 38 deletions.
diff --git a/src/core/resources/assets/userTestnetNativeAsset.ts b/src/core/resources/assets/userTestnetNativeAsset.ts
@@ -1,3 +1,4 @@
+import { ETH_ADDRESS } from '@rainbow-me/swaps';
 import { useQuery } from '@tanstack/react-query';
 import { Address } from 'viem';
 
@@ -19,9 +20,9 @@ const USER_ASSETS_REFETCH_INTERVAL = 60000;
 
 export const getNativeAssetMock = ({ chainId }: { chainId: ChainId }) => {
   const chain = getChain({ chainId });
-  const { address: nativeAssetAddress } = networkStore
-    .getState()
-    .getChainsNativeAsset()[chainId];
+  const nativeAssetAddress =
+    networkStore.getState().getChainsNativeAsset()[chainId]?.address ||
+    ETH_ADDRESS;
   const chainLabel = networkStore.getState().getChainsLabel()[chainId];
   const nativeAssetMock = {
     address: nativeAssetAddress as AddressOrEth,
@@ -43,7 +44,7 @@ export const getNativeAssetMock = ({ chainId }: { chainId: ChainId }) => {
       relative_change_24h: 0,
     },
     symbol: chain.nativeCurrency.symbol,
-    uniqueId: `native_asset_${chain.id}`,
+    uniqueId: `${nativeAssetAddress}_${chain.id}`,
   } satisfies ParsedUserAsset;
   return nativeAssetMock;
 };

diff --git a/src/core/utils/chains.ts b/src/core/utils/chains.ts
@@ -30,7 +30,7 @@ const getMainChainsHelper = (
       !allMainnetSupportedChainsOrCustomChains.find((c2) => c2.id === c.id),
   );
 
-  return [...allMainnetSupportedChainsOrCustomChains]
+  return allMainnetSupportedChainsOrCustomChains
     .map(mergedChainToViemChain)
     .concat(allCustomWagmiChains);
 };
@@ -89,7 +89,7 @@ export function isNativeAsset(address: AddressOrEth, chainId: ChainId) {
   }
 
   return isLowerCaseMatch(
-    networkStore.getState().getChainsNativeAsset()[chainId].address,
+    networkStore.getState().getChainsNativeAsset()[chainId]?.address,
     address,
   );
 }

diff --git a/src/core/utils/userChains.ts b/src/core/utils/userChains.ts
@@ -7,7 +7,12 @@ export const sortNetworks = (order: number[], chains: Chain[]) => {
     .getState()
     .getBackendChainIdsByMainnetId();
   const allChainsOrder = order
-    ?.map((chainId) => chainIdsBasedOnMainnetId[chainId] || [chainId])
+    ?.map((chainId) => {
+      if (chainIdsBasedOnMainnetId[chainId]) {
+        return [...chainIdsBasedOnMainnetId[chainId], chainId];
+      }
+      return [chainId];
+    })
     ?.flat();
   const ordered = chains.sort((a, b) => {
     const aIndex = allChainsOrder.indexOf(a.id);

diff --git a/src/entries/popup/hooks/swap/useSwapInputs.ts b/src/entries/popup/hooks/swap/useSwapInputs.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { ETH_ADDRESS } from '~/core/references';
 import { networkStore } from '~/core/state/networks/networks';
 import { usePopupInstanceStore } from '~/core/state/popupInstances';
 import { ParsedSearchAsset } from '~/core/types/assets';
@@ -330,7 +331,8 @@ export const useSwapInputs = ({
       if (!supportedChain) return null;
 
       if (!isNativeAsset(asset.address, chainId)) {
-        const chainNativeAddress = nativeAssetsAddresses[chainId].address;
+        const chainNativeAddress =
+          nativeAssetsAddresses[chainId]?.address || ETH_ADDRESS;
         // Return native asset for this chain
         return {
           uniqueId: `${chainNativeAddress}_${chainId}`,

diff --git a/src/entries/popup/hooks/useNativeAsset.ts b/src/entries/popup/hooks/useNativeAsset.ts
@@ -9,7 +9,7 @@ import { ChainId } from '~/core/types/chains';
 
 export const useNativeAsset = ({ chainId }: { chainId: ChainId }) => {
   const nativeAssetAddress = networkStore(
-    (state) => state.getChainsNativeAsset()[chainId].address || ETH_ADDRESS,
+    (state) => state.getChainsNativeAsset()[chainId]?.address || ETH_ADDRESS,
   );
   const { currentCurrency } = useCurrentCurrencyStore();
 
@@ -25,7 +25,7 @@ export const useNativeAsset = ({ chainId }: { chainId: ChainId }) => {
 export const fetchNativeAsset = async ({ chainId }: { chainId: ChainId }) => {
   const currentCurrency = currentCurrencyStore.getState().currentCurrency;
   const nativeAssetAddress =
-    networkStore.getState().getChainsNativeAsset()[chainId].address ||
+    networkStore.getState().getChainsNativeAsset()[chainId]?.address ||
     ETH_ADDRESS;
   return await fetchExternalToken({
     address: nativeAssetAddress,

diff --git a/src/entries/popup/hooks/useNativeAssetForNetwork.ts b/src/entries/popup/hooks/useNativeAssetForNetwork.ts
@@ -9,7 +9,7 @@ export const getNetworkNativeAssetUniqueId = ({
   chainId?: ChainId;
 }): UniqueId => {
   const nativeAssetAddress =
-    networkStore.getState().getChainsNativeAsset()[chainId].address ||
+    networkStore.getState().getChainsNativeAsset()[chainId]?.address ||
     ETH_ADDRESS;
   return `${nativeAssetAddress}_${chainId}`;
 };
diff --git a/src/entries/popup/hooks/useUserChains.ts b/src/entries/popup/hooks/useUserChains.ts
@@ -7,42 +7,64 @@ import { sortNetworks } from '~/core/utils/userChains';
 
 const IS_TESTING = process.env.IS_TESTING === 'true';
 
+const checkIfTesting = (chainId: ChainId, testnetMode: boolean) => {
+  if (IS_TESTING) {
+    return testnetMode
+      ? chainId === ChainId.hardhatOptimism
+      : chainId === ChainId.hardhat;
+  }
+  return false;
+};
+
 export const useUserChains = () => {
-  const { enabledChainIds, chainOrder } = networkStore.getState();
+  const { enabledChainIds, chainOrder } = networkStore((state) => ({
+    enabledChainIds: state.enabledChainIds,
+    chainOrder: state.chainOrder,
+  }));
   const { testnetMode } = useTestnetModeStore();
-  const supportedChains = networkStore((state) =>
-    state.getAllChainsSortedByOrder(testnetMode),
-  );
-  const chainIdsBasedOnMainnetId = networkStore((state) =>
+
+  const allSupportedChains = networkStore((state) => state.getAllChains(true));
+  const chainIdsByMainnetId = networkStore((state) =>
     state.getBackendChainIdsByMainnetId(),
   );
 
-  const chains = useMemo(() => {
-    const allAvailableUserChains = Array.from(enabledChainIds)
-      .map((chainId) => chainIdsBasedOnMainnetId[chainId] || [chainId])
+  const availableChains = useMemo(() => {
+    const disabledChains = Object.values(allSupportedChains).filter(
+      (chain) => !enabledChainIds.has(chain.id),
+    );
+    const allDisabledChains = disabledChains
+      .filter(
+        (chain) =>
+          chain.id !== ChainId.hardhat && chain.id !== ChainId.hardhatOptimism,
+      )
+      .map((chain) => {
+        if (chainIdsByMainnetId[chain.id]) {
+          return [...chainIdsByMainnetId[chain.id], chain.id];
+        }
+        return [chain.id];
+      })
       .flat();
 
-    const checkIfTesting = (chainId: ChainId) => {
-      if (IS_TESTING) {
-        return testnetMode
-          ? chainId === ChainId.hardhatOptimism
-          : chainId === ChainId.hardhat;
-      }
-      return false;
-    };
-
-    const chains = supportedChains.filter(
-      ({ id }) => !allAvailableUserChains.includes(id) || checkIfTesting(id),
+    const chains = Object.values(allSupportedChains).filter(
+      (chain) =>
+        (checkIfTesting(chain.id, testnetMode) ||
+          !allDisabledChains.includes(chain.id)) &&
+        (testnetMode
+          ? !!chain.testnet
+          : !chain.testnet ||
+            (IS_TESTING &&
+              (chain.id === ChainId.hardhat ||
+                chain.id === ChainId.hardhatOptimism))),
     );
 
     return sortNetworks(chainOrder, chains);
   }, [
+    testnetMode,
     enabledChainIds,
-    chainIdsBasedOnMainnetId,
     chainOrder,
-    testnetMode,
-    supportedChains,
+    chainIdsByMainnetId,
+    allSupportedChains,
   ]);
 
-  return { chains };
+  return { chains: availableChains };
 };
diff --git a/src/entries/popup/pages/messages/SendTransaction/index.tsx b/src/entries/popup/pages/messages/SendTransaction/index.tsx
@@ -212,7 +212,7 @@ export function SendTransaction({
         activeSession?.chainId,
       );
       selectAssetAddressAndChain(
-        chainsNativeAsset[activeChainId].address as AddressOrEth,
+        chainsNativeAsset[activeChainId]?.address as AddressOrEth,
         activeChainId,
       );
     }

diff --git a/src/entries/popup/pages/settings/customChain/index.tsx b/src/entries/popup/pages/settings/customChain/index.tsx
@@ -235,9 +235,9 @@ export function SettingsCustomChain() {
 
   const addCustomRpc = useCallback(async () => {
     const rpcUrl = customRPC.rpcUrl;
-    const chainId = customRPC.chainId || chainMetadata?.chainId;
-    const name = customRPC.name;
-    const symbol = customRPC.symbol;
+    const chainId = customRPC.chainId || chainMetadata?.chainId || chain?.id;
+    const name = customRPC.name || chain?.name;
+    const symbol = customRPC.symbol || chain?.nativeCurrency.symbol;
     const valid = validateAddCustomRpc();
 
     if (valid && rpcUrl && chainId && name && symbol) {
@@ -272,6 +272,7 @@ export function SettingsCustomChain() {
       navigate(-1);
     }
   }, [
+    chain,
     chainMetadata?.chainId,
     customRPC,
     navigate,