fix exhausting deps

masa-finance · Mar 6, 2023 · e37ec2a · e37ec2a
1 parent 61e9f9d
commit e37ec2a
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 45 deletions.
diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx
@@ -86,6 +86,7 @@ export const MasaInterface = ({
     soulnames,
     forcedPage,
     forceNetwork,
+    currentNetwork,
   ]);
 
   return (

diff --git a/src/components/masa-interface/pages/connected/connected.tsx b/src/components/masa-interface/pages/connected/connected.tsx
@@ -17,7 +17,7 @@ export const InterfaceConnected = (): JSX.Element => {
     return () => {
       clearTimeout(timeout);
     };
-  }, [isLoading, closeModal]);
+  }, [isLoading, closeModal, isModalOpen]);
 
   if (isLoading) return <MasaLoading />;
 

diff --git a/src/components/masa-interface/pages/create-soulname/create-soulname.tsx b/src/components/masa-interface/pages/create-soulname/create-soulname.tsx
@@ -234,7 +234,7 @@ export const InterfaceCreateSoulname = (): JSX.Element => {
       <div style={{ width: '100%' }}>
         <button
           className="masa-button"
-          onClick={!!soulNameError ? () => setShowError(true) : handleMinting}
+          onClick={soulNameError ? () => setShowError(true) : handleMinting}
         >
           Register your domain
         </button>

diff --git a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx
@@ -16,9 +16,9 @@ export const InterfaceSwitchChain = (): JSX.Element => {
 
   const handleSwitch = useCallback(() => {
     if (networkData) {
-      switchNetwork?.(networkData.chainId);
+      switchNetwork?.(networkData.networkName);
     }
-  }, [switchNetwork, switchNetwork, networkData]);
+  }, [switchNetwork, networkData]);
 
   if (isLoading) return <MasaLoading />;
 

diff --git a/src/helpers/masa.ts b/src/helpers/masa.ts
@@ -3,10 +3,10 @@ import {
   Environment,
   environments,
   Masa,
+  NetworkName,
 } from '@masa-finance/masa-sdk';
 import { ethers, providers } from 'ethers';
 import { ArweaveConfig } from '../provider';
-import { getNetworkNameByChainId } from './networks';
 
 export const getWeb3Provider = (): providers.Web3Provider | undefined => {
   if (
@@ -24,31 +24,37 @@ export const getWeb3Provider = (): providers.Web3Provider | undefined => {
 export const createNewMasa = async ({
   signer,
   environmentName,
+  networkName,
   arweaveConfig,
   verbose,
 }: {
   signer: ethers.Signer | null;
   environmentName: string;
+  networkName?: NetworkName;
   arweaveConfig?: ArweaveConfig;
   verbose: boolean;
 }): Promise<Masa | undefined> => {
   const newSigner: ethers.Signer | null = signer
     ? signer
     : createRandomWallet(getWeb3Provider());
 
-  if (!newSigner) return;
+  if (!newSigner) {
+    console.error('Unable to create signer!');
+    return;
+  }
 
   const environment = environments.find(
     (environment: Environment) => environment.name === environmentName
   );
-  if (!environment) return;
-
-  const chainId: number = await newSigner.getChainId();
+  if (!environment) {
+    console.error(`Unable to find environment ${environmentName}`);
+    return;
+  }
 
   return new Masa({
     wallet: newSigner,
     apiUrl: environment.apiUrl,
-    defaultNetwork: getNetworkNameByChainId(chainId),
+    defaultNetwork: networkName,
     environment: environment.environment,
     arweave: {
       host: arweaveConfig?.host || 'arweave.net',

diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx
@@ -1,4 +1,4 @@
-import { EnvironmentName, Masa, NetworkName } from '@masa-finance/masa-sdk';
+import { EnvironmentName, Masa } from '@masa-finance/masa-sdk';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createNewMasa, SupportedNetworks } from '../helpers';
 import {
@@ -33,7 +33,6 @@ export interface MasaContextProviderProps extends MasaShape {
   environmentName?: EnvironmentNameEx;
   arweaveConfig?: ArweaveConfig;
   verbose?: boolean;
-  forceNetwork?: NetworkName;
 }
 
 export const MasaContextProvider = ({
@@ -118,13 +117,7 @@ export const MasaContextProvider = ({
     forcedPage,
     setForcedPage,
     openMintSoulnameModal,
-  } = useModal(
-    masaInstance,
-    isLoggedIn,
-    isConnected,
-    currentNetwork,
-    areScopesFullfiled
-  );
+  } = useModal(isLoggedIn, isConnected, areScopesFullfiled);
 
   // global loading flag
   const isLoading = useMemo(() => {
@@ -167,6 +160,7 @@ export const MasaContextProvider = ({
       const masa: Masa | undefined = await createNewMasa({
         signer: provider,
         environmentName,
+        networkName: currentNetwork?.networkName,
         arweaveConfig,
         verbose,
       });

diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts
@@ -102,6 +102,6 @@ export interface MasaShape {
   // network
   currentNetwork?: Network;
   SupportedNetworks?: Partial<{ [index in NetworkName]: Network }>;
-  switchNetwork?: (chainId: number) => void;
+  switchNetwork?: (networkName: NetworkName) => void;
   forceNetwork?: NetworkName;
 }
diff --git a/src/provider/modules/identity/identity.ts b/src/provider/modules/identity/identity.ts
@@ -53,7 +53,7 @@ export const useIdentity = (
   const handlePurchaseIdentity = useCallback(async () => {
     await masa?.identity.create();
     await queryClient.invalidateQueries('identity');
-  }, [masa, queryKey]);
+  }, [masa]);
 
   const handlePurchaseIdentityWithSoulname = useCallback(
     async (
@@ -70,7 +70,7 @@ export const useIdentity = (
 
       return !!result;
     },
-    [masa, queryKey]
+    [masa]
   );
 
   return {

diff --git a/src/provider/modules/modal/modal.ts b/src/provider/modules/modal/modal.ts
@@ -1,12 +1,8 @@
 import { useCallback, useState } from 'react';
-import { Masa } from '@masa-finance/masa-sdk';
-import { Network } from '../../../helpers';
 
 export const useModal = (
-  masa?: Masa,
   isLoggedIn?: boolean,
   isConnected?: boolean,
-  network?: Network,
   areScopesFullfiled?: boolean
 ): {
   isModalOpen: boolean;
@@ -42,8 +38,6 @@ export const useModal = (
       setModalOpen,
       isLoggedIn,
       isConnected,
-      network,
-      masa,
       areScopesFullfiled,
       forcedPage,
     ]

diff --git a/src/provider/modules/network/network.ts b/src/provider/modules/network/network.ts
@@ -5,12 +5,13 @@ import {
   Network,
   SupportedNetworks,
 } from '../../../helpers';
+import { NetworkName } from '@masa-finance/masa-sdk';
 
 export const useNetwork = (
   provider?: Wallet | Signer
 ): {
   addNetwork: (networkDetails: Network) => void;
-  switchNetwork: (chainId: number) => void;
+  switchNetwork: (networkName: NetworkName) => void;
   currentNetwork?: Network;
 } => {
   const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>();
@@ -39,28 +40,33 @@ export const useNetwork = (
     if (!provider) return;
 
     const chainId: number = await provider.getChainId();
+    const network = SupportedNetworks[getNetworkNameByChainId(chainId)];
 
-    const newNetwork = SupportedNetworks[getNetworkNameByChainId(chainId)];
-    console.log({ newNetwork });
+    console.log({ network });
 
-    setCurrentNetwork(newNetwork);
+    setCurrentNetwork(network);
   }, [provider]);
 
   const switchNetwork = useCallback(
-    async (chainId: number) => {
+    async (networkName: NetworkName) => {
+      const network = SupportedNetworks[networkName];
+
       try {
-        if (typeof window !== 'undefined') {
+        if (typeof window !== 'undefined' && network) {
           await window?.ethereum?.request({
             method: 'wallet_switchEthereumChain',
-            params: [{ chainId: utils.hexValue(chainId) }],
+            params: [
+              {
+                chainId: utils.hexValue(network.chainId),
+              },
+            ],
           });
-          console.log(`switched to chainId: ${chainId} successfully`);
+          console.log(`switched to network: ${networkName} successfully`);
         }
       } catch (err) {
         const error = err as { code: number };
         if (error.code === 4902) {
-          const newNetwork =
-            SupportedNetworks[getNetworkNameByChainId(chainId)];
+          const newNetwork = SupportedNetworks[networkName];
           if (newNetwork) {
             await addNetwork(newNetwork);
           }

diff --git a/src/provider/modules/soulnames/soulnames.ts b/src/provider/modules/soulnames/soulnames.ts
@@ -54,11 +54,11 @@ export const useSoulnames = (
         soulname,
         registrationPeriod
       );
-      await queryClient.invalidateQueries('soulnames');
+      await queryClient.invalidateQueries(['soulnames']);
 
       return !!result;
     },
-    [masa, queryKey]
+    [masa]
   );
 
   return {

diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
@@ -60,15 +60,19 @@ const Component = (): JSX.Element => {
       <button onClick={loadCR}>Invalidate Wallet</button>
       <button onClick={mintGreen}>Mint green</button>
 
-      <button onClick={(): void => switchNetwork?.(1)}>
+      <button onClick={(): void => switchNetwork?.('ethereum')}>
         Switch to Ethereum
       </button>
-      <button onClick={(): void => switchNetwork?.(5)}>Switch to Goerli</button>
-      <button onClick={(): void => switchNetwork?.(137)}>
+      <button onClick={(): void => switchNetwork?.('goerli')}>
+        Switch to Goerli
+      </button>
+      <button onClick={(): void => switchNetwork?.('polygon')}>
         Switch to Polygon
       </button>
-      <button onClick={(): void => switchNetwork?.(56)}>Switch to BSC</button>
-      <button onClick={(): void => switchNetwork?.(44787)}>
+      <button onClick={(): void => switchNetwork?.('bsc')}>
+        Switch to BSC
+      </button>
+      <button onClick={(): void => switchNetwork?.('alfajores')}>
         Switch to Alfajores
       </button>