Fix networks crash (#6176)

* fix networks crash * remove duplicated walletconnect chain ids * use all supported chains for walletconnect * fix weird space on approval sheet * Update src/screens/WalletConnectApprovalSheet.tsx
rainbow-me · Oct 7, 2024 · 6767c83 · 6767c83
1 parent a0fb4f8
commit 6767c83
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 57 deletions.
diff --git a/src/chains/index.ts b/src/chains/index.ts
@@ -172,20 +172,6 @@ export const supportedTokenSearchChainIds = filterChainIdsByService(services =>
 
 export const supportedNftChainIds = filterChainIdsByService(services => services.nftProxy.enabled);
 
-export const supportedWalletConnectChainIds = [
-  ChainId.apechain,
-  ChainId.arbitrum,
-  ChainId.avalanche,
-  ChainId.base,
-  ChainId.blast,
-  ChainId.bsc,
-  ChainId.degen,
-  ChainId.mainnet,
-  ChainId.optimism,
-  ChainId.polygon,
-  ChainId.zora,
-];
-
 export const supportedFlashbotsChainIds = [ChainId.mainnet];
 
 export const shouldDefaultToFastGasChainIds = [ChainId.mainnet, ChainId.polygon, ChainId.goerli];

diff --git a/src/components/DappBrowser/control-panel/ControlPanel.tsx b/src/components/DappBrowser/control-panel/ControlPanel.tsx
@@ -62,7 +62,7 @@ import { swapsStore } from '@/state/swaps/swapsStore';
 import { userAssetsStore } from '@/state/assets/userAssets';
 import { greaterThan } from '@/helpers/utilities';
 import { ChainId } from '@/chains/types';
-import { chainsLabel, defaultChains, supportedWalletConnectChainIds } from '@/chains';
+import { chainsLabel, defaultChains } from '@/chains';
 
 const PAGES = {
   HOME: 'home',
@@ -183,8 +183,7 @@ export const ControlPanel = () => {
   const { testnetsEnabled } = store.getState().settings;
 
   const allNetworkItems = useMemo(() => {
-    const chains = supportedWalletConnectChainIds.map(chainId => defaultChains[chainId]);
-    return chains
+    return Object.values(defaultChains)
       .filter(({ testnet }) => testnetsEnabled || !testnet)
       .map(chain => {
         return {

diff --git a/src/components/expanded-state/swap-details/SwapDetailsExchangeRow.js b/src/components/expanded-state/swap-details/SwapDetailsExchangeRow.js
@@ -10,10 +10,10 @@ import { usePrevious, useStepper } from '@/hooks';
 import { ImgixImage } from '@/components/images';
 import { getExchangeIconUrl, magicMemo } from '@/utils';
 import { SocketBridges } from '@/references/swap/bridges';
-import { SUPPORTED_CHAINS } from '@/chains';
+import { defaultChains } from '@/chains';
 
 const parseExchangeName = name => {
-  const networks = SUPPORTED_CHAINS.map(network => network.name.toLowerCase());
+  const networks = Object.values(defaultChains).map(network => network.name.toLowerCase());
 
   const removeNetworks = name =>
     networks.some(network => name.toLowerCase().includes(network)) ? name.slice(name.indexOf('_') + 1, name.length) : name;

diff --git a/src/components/walletconnect-list/WalletConnectV2ListItem.tsx b/src/components/walletconnect-list/WalletConnectV2ListItem.tsx
@@ -25,7 +25,7 @@ import { Box, Inline } from '@/design-system';
 import ChainBadge from '@/components/coin-icon/ChainBadge';
 import { EthCoinIcon } from '../coin-icon/EthCoinIcon';
 import { ChainId } from '@/chains/types';
-import { supportedWalletConnectChainIds } from '@/chains';
+import { SUPPORTED_CHAIN_IDS } from '@/chains';
 
 const CONTAINER_PADDING = 15;
 const VENDOR_LOGO_ICON_SIZE = 50;
@@ -78,8 +78,7 @@ export function WalletConnectV2ListItem({ session, reload }: { session: SessionT
   const chains = useMemo(() => namespaces?.eip155?.chains || [], [namespaces]);
   const chainIds = useMemo(
     () =>
-      (chains?.map(chain => parseInt(chain.split(':')[1]))?.filter(chainId => supportedWalletConnectChainIds.includes(chainId)) ??
-        []) as ChainId[],
+      (chains?.map(chain => parseInt(chain.split(':')[1]))?.filter(chainId => SUPPORTED_CHAIN_IDS.includes(chainId)) ?? []) as ChainId[],
     [chains]
   );
 

diff --git a/src/helpers/walletConnectNetworks.ts b/src/helpers/walletConnectNetworks.ts
@@ -2,23 +2,24 @@ import store from '@/redux/store';
 import { showActionSheetWithOptions } from '@/utils';
 import * as i18n from '@/languages';
 import { ChainId } from '@/chains/types';
-import { chainsLabel, defaultChains, supportedWalletConnectChainIds } from '@/chains';
+import { chainsLabel, defaultChains } from '@/chains';
 import { isL2Chain } from '@/handlers/web3';
 import { MenuActionConfig } from 'react-native-ios-context-menu';
 
-const walletConnectChains = supportedWalletConnectChainIds.map(chainId => defaultChains[chainId]);
-
 const androidNetworkActions = () => {
   const { testnetsEnabled } = store.getState().settings;
-  return walletConnectChains.filter(({ testnet }) => testnetsEnabled || !testnet).map(chain => chain.id);
+  return Object.values(defaultChains)
+    .filter(chain => testnetsEnabled || !chain.testnet)
+    .map(chain => chain.id);
 };
 
 export const NETWORK_MENU_ACTION_KEY_FILTER = 'switch-to-network-';
 
 export const networksMenuItems: () => MenuActionConfig[] = () => {
   const { testnetsEnabled } = store.getState().settings;
-  return walletConnectChains
-    .filter(({ testnet }) => testnetsEnabled || !testnet)
+
+  return Object.values(defaultChains)
+    .filter(chain => testnetsEnabled || !chain.testnet)
     .map(chain => ({
       actionKey: `${NETWORK_MENU_ACTION_KEY_FILTER}${chain.id}`,
       actionTitle: chainsLabel[chain.id],
@@ -75,10 +76,10 @@ export const androidShowNetworksActionSheet = (callback: any) => {
       showSeparators: true,
       title: i18n.t(i18n.l.walletconnect.menu_options.available_networks),
     },
-    (idx: any) => {
+    (idx: number) => {
       if (idx !== undefined) {
         const networkActions = androidNetworkActions();
-        const chain = walletConnectChains.find(chain => chain.id === networkActions[idx]) || defaultChains[ChainId.mainnet];
+        const chain = defaultChains[networkActions[idx]] || defaultChains[ChainId.mainnet];
         callback({ chainId: chain.id });
       }
     }

diff --git a/src/redux/walletconnect.ts b/src/redux/walletconnect.ts
@@ -33,7 +33,7 @@ import { Verify } from '@walletconnect/types';
 import { RequestSource, handleWalletConnectRequest } from '@/utils/requestNavigationHandlers';
 import { ChainId } from '@/chains/types';
 import { Address } from 'viem';
-import { supportedWalletConnectChainIds } from '@/chains';
+import { SUPPORTED_CHAIN_IDS } from '@/chains';
 
 // -- Variables --------------------------------------- //
 let showRedirectSheetThreshold = 300;
@@ -458,7 +458,6 @@ const listenOnNewMessages =
 
       if (error) {
         analytics.track('Error on wc call_request', {
-          // @ts-ignore
           error,
           payload,
         });
@@ -478,7 +477,7 @@ const listenOnNewMessages =
         // @ts-expect-error "_chainId" is private.
         const currentChainId = Number(walletConnector._chainId);
         const numericChainId = Number(convertHexToString(chainId));
-        if (supportedWalletConnectChainIds.includes(numericChainId)) {
+        if (SUPPORTED_CHAIN_IDS.includes(numericChainId)) {
           dispatch(walletConnectSetPendingRedirect());
           Navigation.handleAction(Routes.WALLET_CONNECT_APPROVAL_SHEET, {
             callback: async (approved: boolean) => {

diff --git a/src/screens/WalletConnectApprovalSheet.tsx b/src/screens/WalletConnectApprovalSheet.tsx
@@ -30,8 +30,7 @@ import { InfoAlert } from '@/components/info-alert/info-alert';
 import { EthCoinIcon } from '@/components/coin-icon/EthCoinIcon';
 import { findWalletWithAccount } from '@/helpers/findWalletWithAccount';
 import { ChainId } from '@/chains/types';
-import { chainsLabel, chainsNativeAsset, defaultChains, supportedWalletConnectChainIds } from '@/chains';
-import { isL2Chain } from '@/handlers/web3';
+import { chainsLabel, chainsNativeAsset, defaultChains } from '@/chains';
 import { ThemeContextProps, useTheme } from '@/theme';
 import { noop } from 'lodash';
 import { RootStackParamList } from '@/navigation/types';
@@ -79,31 +78,14 @@ const NetworkPill = ({ chainIds }: { chainIds: ChainId[] }) => {
 
   const availableNetworkChainIds = useMemo(() => chainIds.sort(chainId => (chainId === ChainId.mainnet ? -1 : 1)), [chainIds]);
 
-  const walletConnectSupportedChains = supportedWalletConnectChainIds.map(chainId => defaultChains[chainId]);
-
-  const networkMenuItems = useMemo(() => {
-    walletConnectSupportedChains
-      .filter(({ id }) => chainIds.includes(id))
-      .map(chain => ({
-        actionKey: chain.id,
-        actionTitle: chainsLabel[chain.id],
-        icon: {
-          iconType: 'ASSET',
-          iconValue: `${isL2Chain({ chainId: chain.id }) ? `${chain.name}BadgeNoShadow` : 'ethereumBadge'}`,
-        },
-      }));
-  }, [chainIds, walletConnectSupportedChains]);
-
   if (availableNetworkChainIds.length === 0) return null;
 
   return (
     <ContextMenuButton
-      // @ts-expect-error overloaded props ContextMenuButton
-      menuConfig={{ menuItems: networkMenuItems, menuTitle: '' }}
+      menuConfig={{ menuItems: networksMenuItems(), menuTitle: '' }}
       isMenuPrimaryAction
       onPressMenuItem={noop}
       useActionSheetFallback={false}
-      width="100%"
     >
       <Box
         as={ButtonPressAnimation}
@@ -113,7 +95,7 @@ const NetworkPill = ({ chainIds }: { chainIds: ChainId[] }) => {
         paddingTop="8px"
         marginRight={{ custom: -2 }}
       >
-        <Box flexDirection="row" justifyContent="flex-end" alignItems="center" width="full">
+        <Box flexDirection="row" justifyContent="flex-end" alignItems="center">
           {availableNetworkChainIds.length > 1 ? (
             <>
               {availableNetworkChainIds.map((chainId, index) => {

diff --git a/src/walletConnect/index.tsx b/src/walletConnect/index.tsx
@@ -44,7 +44,7 @@ import { handleWalletConnectRequest } from '@/utils/requestNavigationHandlers';
 import { PerformanceMetrics } from '@/performance/tracking/types/PerformanceMetrics';
 import { PerformanceTracking } from '@/performance/tracking';
 import { ChainId } from '@/chains/types';
-import { supportedWalletConnectChainIds } from '@/chains';
+import { SUPPORTED_CHAIN_IDS } from '@/chains';
 
 const SUPPORTED_SESSION_EVENTS = ['chainChanged', 'accountsChanged'];
 
@@ -445,7 +445,7 @@ export async function onSessionProposal(proposal: WalletKitTypes.SessionProposal
 
     // we already checked for eip155 namespace above
     const chainIds = chains?.map(chain => parseInt(chain.split('eip155:')[1]));
-    const supportedChainIds = chainIds.filter(chainId => supportedWalletConnectChainIds.includes(chainId));
+    const supportedChainIds = chainIds.filter(chainId => SUPPORTED_CHAIN_IDS.includes(chainId));
 
     const peerMeta = proposer.metadata;
     const metadata = await fetchDappMetadata({ url: peerMeta.url, status: true });
@@ -486,7 +486,7 @@ export async function onSessionProposal(proposal: WalletKitTypes.SessionProposal
           const supportedEvents = requiredNamespaces?.eip155?.events || SUPPORTED_SESSION_EVENTS;
 
           /** @see https://chainagnostic.org/CAIPs/caip-2 */
-          const caip2ChainIds = supportedWalletConnectChainIds.map(id => `eip155:${id}`);
+          const caip2ChainIds = SUPPORTED_CHAIN_IDS.map(id => `eip155:${id}`);
           const namespaces = getApprovedNamespaces({
             proposal: proposal.params,
             supportedNamespaces: {