fixed: switching to networks was only possible if the network was "kn…

…own" to wagmi. We have a lot of networks that are not. This PR maps the supported networks from the sdk instead of load them individually.
masa-finance · Oct 18, 2023 · 209feaa · 209feaa
1 parent a5e857a
commit 209feaa
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 139 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -37,16 +37,27 @@ export interface MasaReactConfig {
 export const defaultConfig: Partial<MasaReactConfig> = {
   company: 'Masa',
   allowedNetworkNames: [
-    'ethereum',
+    // eth
     'goerli',
+    'ethereum',
+    // celo
     'alfajores',
     'celo',
+    // polygon
     'mumbai',
     'polygon',
+    // bsc
     'bsctest',
     'bsc',
+    // opbnb
+    'opbnbtest',
+    'opbnb',
+    // base
     'basegoerli',
     'base',
+    // scroll
+    'scrollsepolia',
+    'scroll',
   ],
   allowedWallets: ['metamask', 'valora', 'walletconnect'],
   masaConfig: {

diff --git a/src/masa.stories.tsx b/src/masa.stories.tsx
@@ -7,7 +7,6 @@ import { Button } from './ui';
 import './styles.scss';
 import './stories.scss';
 import 'react-json-view-lite/dist/index.css'; // eslint-disable-line import/no-extraneous-dependencies
-
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
 import MasaProvider from './masa-provider';
@@ -235,17 +234,27 @@ const TemplateNewMasaState = (props: Args) => (
       forceChain: 'base',
       // contractAddressOverrides: {},
       allowedNetworkNames: [
+        // eth
         'goerli',
         'ethereum',
+        // celo
         'alfajores',
         'celo',
+        // polygon
         'mumbai',
         'polygon',
+        // bsc
         'bsctest',
         'bsc',
-        'base',
+        // opbnb
+        'opbnbtest',
+        'opbnb',
+        // base
         'basegoerli',
-        'unknown',
+        'base',
+        // scroll
+        'scrollsepolia',
+        'scroll',
       ],
       masaConfig: {
         networkName: 'base',

diff --git a/src/masanew.stories.tsx b/src/masanew.stories.tsx
@@ -11,7 +11,6 @@ import './styles.scss';
 import './stories.scss';
 import { useConfig } from './base-provider';
 import 'react-json-view-lite/dist/index.css'; // eslint-disable-line import/no-extraneous-dependencies
-
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
 import { useMasaClient } from './masa-client/use-masa-client';
@@ -685,17 +684,27 @@ const TemplateNewMasaState = (props: Args) => (
       forceChain: 'base',
       // contractAddressOverrides: {},
       allowedNetworkNames: [
+        // eth
         'goerli',
         'ethereum',
+        // celo
         'alfajores',
         'celo',
+        // polygon
         'mumbai',
         'polygon',
+        // bsc
         'bsctest',
         'bsc',
-        'base',
+        // opbnb
+        'opbnbtest',
+        'opbnb',
+        // base
         'basegoerli',
-        'unknown',
+        'base',
+        // scroll
+        'scrollsepolia',
+        'scroll',
       ],
       masaConfig: {
         networkName: 'base',

diff --git a/src/wallet-client/constants.ts b/src/wallet-client/constants.ts
@@ -26,6 +26,7 @@ export const walletConnectorsList: Record<
       metaMaskWallet({ chains, projectId: PROJECT_ID }),
     ],
   }),
+
   valora: (chains: Chain[]) => ({
     groupName: 'Celo',
     wallets: [Valora({ chains, projectId: PROJECT_ID })],

diff --git a/src/wallet-client/network/use-network.ts b/src/wallet-client/network/use-network.ts
@@ -31,12 +31,12 @@ export const useNetwork = () => {
     setSwitchingToChain(null);
   }, []);
 
-  const availableChains = useMemo(
+  const availableChains: Chain[] = useMemo(
     () => connectors.flatMap((connector: Connector) => connector.chains),
     [connectors]
   );
 
-  const isSwitchingChain = useMemo(
+  const isSwitchingChain: boolean = useMemo(
     () => !!switchingToChain || isSwitchingWagmi,
     [switchingToChain, isSwitchingWagmi]
   );
@@ -57,9 +57,9 @@ export const useNetwork = () => {
   );
 
   const switchNetworkByName = useCallback(
-    (forcedNetworkParam: NetworkName) => {
+    (networkName: NetworkName) => {
       try {
-        const networkToSwitchTo = SupportedNetworks[forcedNetworkParam];
+        const networkToSwitchTo = SupportedNetworks[networkName];
         setSwitchingToChain(networkToSwitchTo?.chainId);
 
         if (networkToSwitchTo) {
@@ -72,7 +72,7 @@ export const useNetwork = () => {
         }
       } catch (error: unknown) {
         if (switchNetworkWagmi) stopSwitching();
-        throw error as Error;
+        throw error;
       }
     },
     [activeChain?.id, switchNetworkWagmi, stopSwitching]

diff --git a/src/wallet-client/utils.ts b/src/wallet-client/utils.ts
@@ -3,124 +3,69 @@ import {
   NetworkName,
   SupportedNetworks,
 } from '@masa-finance/masa-sdk';
-import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains';
-import {
-  base,
-  baseGoerli,
-  bsc,
-  bscTestnet,
-  Chain,
-  goerli,
-  mainnet as ethereum,
-  polygon,
-  polygonMumbai,
-  scrollSepolia,
-} from '@wagmi/chains';
-
-const rainbowkitChains = [
-  // eth
-  ethereum,
-  goerli,
-  // celo
-  Alfajores,
-  Celo,
-  // base
-  base,
-  baseGoerli,
-  // bsc
-  bsc,
-  bscTestnet,
-  // polygon
-  polygon,
-  polygonMumbai,
-  // scroll
-  scrollSepolia,
-];
-
-export type MasaNetworks = Partial<
-  { [key in NetworkName]: Network } & {
-    // todo: remove this hack! we dont know any network that is called this way.
-    // this is wagmi terminology
-    homestead: Network;
-  }
->;
-
-type NetworkNameWithHomestead = NetworkName | 'homestead';
+import { Chain } from '@wagmi/chains';
 
-export const correctNetworkListForWagmi = (networkList: NetworkName[]) => {
-  const networkListCorrectedForWagmi:
-    | Array<NetworkName | 'homestead'>
-    | undefined = networkList?.map((nl: NetworkName) => {
-    if (nl === 'ethereum') return 'homestead';
-    return nl;
-  });
-
-  return networkListCorrectedForWagmi;
+export const getWagmiNetworkName = (masaNetworkName?: NetworkName): string => {
+  if (masaNetworkName === 'ethereum') return 'homestead';
+  if (masaNetworkName === 'alfajores') return 'celo-alfajores';
+  return masaNetworkName as string;
 };
-export const getRainbowkitChains = (networkList?: NetworkName[]) => {
-  if (!networkList || (networkList && networkList.length === 0)) {
-    return rainbowkitChains;
-  }
 
-  const masaNetworksNew: MasaNetworks = {};
-
-  for (const networkName of Object.keys(SupportedNetworks)) {
-    if (networkName !== 'unknown' && networkName !== 'ethereum') {
-      masaNetworksNew[networkName] = SupportedNetworks[networkName] as Network;
-    }
+export const getMasaNetworkName = (
+  wagmiNetworkName: NetworkName | 'homestead' | 'celo-alfajores' | undefined
+): NetworkName => {
+  if (wagmiNetworkName === 'homestead') return 'ethereum';
+  if (wagmiNetworkName === 'celo-alfajores') return 'alfajores';
 
-    if (networkName === 'ethereum') {
-      masaNetworksNew.homestead = SupportedNetworks.ethereum as Network;
-    }
-  }
+  return wagmiNetworkName as NetworkName;
+};
 
-  // const supportedNetworkKeys = Object.keys(SupportedNetworks);
-  // for (const supportedNetworkKey of supportedNetworkKeys) {
-  //   const nw = SupportedNetworks[supportedNetworkKey];
-  //   console.log('BRUDER', nw);
-  // }
-
-  const masaNetworks: MasaNetworks = Object.keys(SupportedNetworks)
-    .filter((x: string) => x !== 'unknown') // remove unused network
-    .reduce(
-      (acc: MasaNetworks, val: string) => {
-        acc[val] = SupportedNetworks[val] as Network;
-        if (val === 'ethereum') {
-          // NOTE: ethereum is called homestead in wagmi so we have to adjust our networks a bit
-          acc.homestead = { ...(SupportedNetworks.ethereum as Network) };
-          acc.homestead.networkName = 'homestead' as NetworkName;
-        }
-        return acc;
+const rainbowkitChains: Chain[] = Object.keys(SupportedNetworks)
+  .filter((x: string) => x !== 'unknown') // remove unused network
+  .map((networkName: string) => {
+    const network: Network = SupportedNetworks[networkName] as Network;
+    return {
+      id: network.chainId,
+      name: network.chainName,
+      network: getWagmiNetworkName(network.networkName),
+      nativeCurrency: {
+        name: network.nativeCurrency?.symbol ?? 'ETH',
+        symbol: network.nativeCurrency?.symbol ?? 'ETH',
+        decimals: network.nativeCurrency?.decimals ?? 18,
       },
-      {
-        homestead: SupportedNetworks.ethereum as Network & {
-          networkName: NetworkName | 'homestead';
+      rpcUrls: {
+        default: {
+          http: [network.rpcUrls[0] ?? ''],
+          webSocket: network.rpcUrls[2] ? [network.rpcUrls[2]] : undefined,
         },
-      }
-    );
+        public: {
+          http: [network.rpcUrls[0] ?? ''],
+          webSocket: network.rpcUrls[2] ? [network.rpcUrls[2]] : undefined,
+        },
+      },
+      testnet: network.isTestnet,
+    };
+  });
 
-  const masaNetworkNames = Object.keys(masaNetworksNew);
+export const getRainbowkitChains = (networkNames?: NetworkName[]): Chain[] => {
+  if (!networkNames || (networkNames && networkNames.length === 0)) {
+    return rainbowkitChains;
+  }
 
-  const userNetworksFiltered = networkList.filter(
-    (networkName: NetworkNameWithHomestead) =>
-      masaNetworkNames.includes(
-        // NOTE: this is a hack to make sure we can use wagmi's homestead network
-        networkName === 'ethereum' ? 'homestead' : networkName
-      )
-  );
+  return networkNames
+    .map((networkName: NetworkName) => {
+      const network = SupportedNetworks[networkName];
 
-  const userNetworksMasa = userNetworksFiltered.map(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    (un: NetworkName) => masaNetworks[un]
-  );
-  const userNetworksRainbowkit = new Set(
-    userNetworksMasa.map((unm?: Network) => unm?.chainId)
-  );
-  const userChainsRainbowkit = rainbowkitChains.filter(
-    (rainbowkitChain: Chain) => userNetworksRainbowkit.has(rainbowkitChain.id)
-  );
+      console.log({ networkName });
+      if (network) {
+        return rainbowkitChains.find(
+          (chain: Chain) => chain.id === network.chainId
+        );
+      }
 
-  return userChainsRainbowkit;
+      return undefined;
+    })
+    .filter((chain: Chain | undefined) => !!chain) as Chain[];
 };
 
 export const getChainIdNetworkMap = (chains?: Chain[]) => {
@@ -135,33 +80,20 @@ export const getChainIdNetworkMap = (chains?: Chain[]) => {
   return chainIdNetworkMap;
 };
 
-export const getWagmiNetworkName = (masaNetworkName?: NetworkName) => {
-  if (masaNetworkName === 'ethereum') return 'homestead';
-  if (masaNetworkName === 'alfajores') return 'celo-alfajores';
-  return masaNetworkName;
-};
-
-export const getMasaNetworkName = (
-  wagmiNetworkName: NetworkName | 'homestead' | 'celo-alfajores' | undefined
-) => {
-  if (wagmiNetworkName === 'homestead') return 'ethereum';
-  if (wagmiNetworkName === 'celo-alfajores') return 'alfajores';
-
-  return wagmiNetworkName as NetworkName;
-};
-
 export const getChainsSortedByForcedNetwork = (
   chains: Chain[],
   forceChain?: NetworkName
 ) => {
   if (!forceChain) return chains;
+
   const singleChain = chains.filter(
-    (ch: Chain) => ch.network === getWagmiNetworkName(forceChain)
+    (chain: Chain) => chain.network === getWagmiNetworkName(forceChain)
   );
+
   const sortedChains = [
     ...singleChain,
     ...chains.filter(
-      (ch: Chain) => ch.network !== getWagmiNetworkName(forceChain)
+      (chain: Chain) => chain.network !== getWagmiNetworkName(forceChain)
     ),
   ];