#116 bug fixes and updates to contract context. Fix to EthersConnector signer bug

- signer should invalidate when chain is changed
- invalidation of old contract isntances
- key updates
- updates to validate adaptor
- fixes to sorting

Author: ShravanSunder

esbuild.config.js

@@ -1,7 +1,7 @@
-const esbuild = require('esbuild');
+import esbuild from 'esbuild';
 // Automatically exclude all node_modules from the bundled version
-const { nodeExternalsPlugin } = require('esbuild-node-externals');
-const path = require('path');
+import { nodeExternalsPlugin } from 'esbuild-node-externals';
+import path from 'path';
 
 function tsPathResolver(content) {
   const relativePath = path.relative(path.dirname(this.resourcePath), path.resolve(__dirname, '../src'));

package.json

@@ -1,11 +1,12 @@
 {
   "name": "eth-hooks",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "description": "A set of hooks to turbocharge buidling",
   "author": "Austin Griffith <[email protected]>",
   "repository": "https://github.com/austintgriffith/eth-hooks.git",
   "main": "index.js",
   "module": "index.js",
+  "type": "module",
   "types": "index.d.ts",
   "engines": {
     "node": ">=12",

src/context/app-contracts/contractsContextFactory.tsx

@@ -11,9 +11,10 @@ import React, {
   useRef,
 } from 'react';
 import { useQueryClient } from 'react-query';
+import invariant from 'ts-invariant';
 
 import { connectToContractWithAdaptor, useEthersContext } from '~~/context';
-import { invalidateCache, isValidEthersAdaptor, sortContractsByChainId } from '~~/functions';
+import { invalidateCache, isValidEthersAdaptor, sortContractsByChainId, sortContractsByName } from '~~/functions';
 import { TTypedContract, TEthersAdaptor, TConnectorList } from '~~/models';
 import { keyNamespace } from '~~/models/constants';
 import { TAppContractsContext, defaultAppContractsContext, TContractsByName } from '~~/models/contractContextTypes';
@@ -120,6 +121,21 @@ export const contractsContextFactory = <
     return newState;
   };
 
+  const removeInvalidContracts = (
+    state: TAppContractsContext<GContractNames>,
+    ethersAdaptor: TEthersAdaptor | undefined
+  ): TAppContractsContext<GContractNames> => {
+    if (ethersAdaptor?.chainId != null) {
+      const newState = cloneContextState(state);
+      const chainId = ethersAdaptor.chainId;
+      delete newState.contractsByChainId[chainId];
+
+      newState.contractsByName = sortContractsByName(newState.contractsByChainId);
+      return newState;
+    }
+    return state;
+  };
+
   /* *************** ******** ****************************************** */
   /* *************** Contract Action Helper Functions ****************** */
   /**
@@ -132,8 +148,11 @@ export const contractsContextFactory = <
     state: TAppContractsContext<GContractNames>,
     ethersAdaptor: TEthersAdaptor | undefined
   ): TAppContractsContext<GContractNames> => {
+    if (ethersAdaptor == null || !isValidEthersAdaptor(ethersAdaptor)) {
+      invariant.log('connectToAllContracts: Invalid ethers adaptor');
+      return removeInvalidContracts(state, ethersAdaptor);
+    }
     const newState = cloneContextState(state);
-    if (ethersAdaptor == null || !isValidEthersAdaptor(ethersAdaptor)) return newState;
 
     const { chainId, signer, provider } = ethersAdaptor;
     const providerOrSigner = signer ?? provider;
@@ -161,7 +180,10 @@ export const contractsContextFactory = <
     contractName: GContractNames,
     ethersAdaptor: TEthersAdaptor | undefined
   ): TAppContractsContext<GContractNames> => {
-    if (ethersAdaptor == null || !isValidEthersAdaptor(ethersAdaptor)) return state;
+    if (ethersAdaptor == null || !isValidEthersAdaptor(ethersAdaptor)) {
+      invariant.log('connectToAllContracts: Invalid ethers adaptor');
+      return removeInvalidContracts(state, ethersAdaptor);
+    }
 
     const newState = cloneContextState(state);
     const { chainId } = ethersAdaptor;
@@ -292,14 +314,15 @@ export const contractsContextFactory = <
   const useConnectAppContracts = (adaptor: TEthersAdaptor | undefined): void => {
     const actions = useAppContractsActions();
     const queryClient = useQueryClient();
+    const validAdaptorState = isValidEthersAdaptor(adaptor);
 
     const connect = useCallback(() => {
       if (adaptor?.chainId != null && actions != null) {
         invalidateCache(queryClient, keyNamespace.contracts);
         actions.dispatch({ type: 'CONNECT_TO_CONTRACTS_WITH_ADAPTOR', payload: { ethersAdaptor: adaptor } });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [adaptor?.provider, adaptor?.signer, adaptor?.chainId]);
+    }, [adaptor?.provider, adaptor?.signer, adaptor?.chainId, adaptor?.account, validAdaptorState]);
 
     useEffect(() => {
       void connect();

src/context/ethers/EthersAppContext.tsx

@@ -36,9 +36,9 @@ import { IEthersContext } from '~~/models/ethersAppContextTypes';
  */
 export const useEthersContext = (contextKey?: string): IEthersContext => {
   if (contextKey === 'primary') console.warn('Do not explicitly use primary contextKey, pass in undefined instead');
-
   const { connector, activate, library, account, deactivate, chainId, ...context } =
     useWeb3React<TEthersProvider>(contextKey);
+
   if (!(connector instanceof EthersModalConnector || connector instanceof AbstractConnector) && connector != null) {
     throw 'Connector is not a EthersModalConnector';
   }

src/context/ethers/connectors/EthersModalConnector.ts

@@ -125,9 +125,10 @@ export class EthersModalConnector extends AbstractConnector implements ICommonMo
 
   private handleChainChanged(chainId: number | string): void {
     this.log(`Handling chain changed to ${chainId}! updating providers`);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    this._signer = undefined;
     this.emitUpdate?.({ chainId, provider: this._providerBase });
     this.setEthersProvider();
+    void this.getSignerFromAccount();
     this.maybeReload();
   }
 
@@ -279,6 +280,12 @@ export class EthersModalConnector extends AbstractConnector implements ICommonMo
     return this._signer;
   }
 
+  public async getSignerFromAccount(): Promise<void> {
+    const account = await this.getAccount();
+    await this.setSignerFromAccount(account);
+    this.emitUpdate?.({ account });
+  }
+
   /**
    * #### Summary
    * Change the current signer and account used by the connector

src/functions/ethersHelpers.ts

@@ -62,8 +62,18 @@ export const isValidEthersContext = (ethersContext: IEthersContext | undefined):
 
 export const isValidEthersAdaptor = (ethersAdaptor: TEthersAdaptor | undefined): boolean => {
   if (ethersAdaptor != null && ethersAdaptor.chainId != null) {
-    if (ethersAdaptor.provider != null || (ethersAdaptor.signer != null && !!ethersAdaptor.account)) return true;
+    if (ethersAdaptor.provider != null && ethersAdaptor.provider?.network?.chainId === ethersAdaptor.chainId) {
+      return true;
+    } else if (
+      ethersAdaptor.signer != null &&
+      !!ethersAdaptor.account &&
+      (ethersAdaptor?.signer?.provider as TEthersProvider)?.network?.chainId === ethersAdaptor.chainId
+    ) {
+      return true;
+    }
   }
+
+  console.log('isValidEthersAdaptorπ', false, ethersAdaptor);
   return false;
 };
 

src/functions/index.ts

@@ -3,4 +3,4 @@ export * from './ethersHelpers';
 export * from './hookOptionsHelpers';
 export * from './keyHelpers';
 export * from './parseProviderOrSigner';
-export * from './sortContractsByChainId';
+export * from './sortContracts';

src/functions/keyHelpers.ts

@@ -19,29 +19,34 @@ export type TKeyTypes = {
   contractFunc?: string;
 };
 
-export const providerKey = (providerOrSigner: TEthersProviderOrSigner | undefined): Record<'provider', string> => {
-  if (providerOrSigner == null) return { provider: 'undefined provider' };
+export const providerKey = (
+  providerOrSigner: TEthersProviderOrSigner | undefined
+): Record<'provider' | 'signer', string> => {
+  if (providerOrSigner == null) return { provider: 'undefined provider', signer: 'undefined signer' };
 
   if (providerOrSigner instanceof Provider) {
     return {
       provider: `${providerOrSigner?.network?.chainId}_${
         providerOrSigner?.network?.name
       }_${providerOrSigner?.connection.url.substring(0, 25)}`,
+      signer: 'isProvider',
     };
   } else {
     const provider = providerOrSigner.provider as TEthersProvider;
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
     const signerStr: string = (providerOrSigner as any)?.address ?? '';
     if (provider && provider?.network) {
       return {
-        provider: `${provider?.network?.chainId}_${signerStr}_${
-          provider?.network?.name
-        }_${provider?.connection.url.substring(0, 25)}`,
+        signer: `isSigner_${providerOrSigner._isSigner}_${signerStr}`,
+        provider: `${provider?.network?.chainId}_${provider?.network?.name}_${provider?.connection.url.substring(
+          0,
+          25
+        )}`,
       };
     }
   }
 
-  return { provider: 'unknown provider' };
+  return { provider: 'unknown provider', signer: 'unknown signer' };
 };
 
 export const adaptorKey = (adaptor: TEthersAdaptor | undefined): Partial<Record<'adaptor' | 'provider', string>> => {
@@ -60,7 +65,7 @@ export const eventKey = (m: Event | TypedEvent<Result>): string => {
   return `${m.transactionHash}_${m.logIndex}`;
 };
 
-export const contractKey = (contract: BaseContract | undefined): Record<'contract', string> => {
+export const contractKey = (contract: BaseContract | undefined): Partial<Record<'contract' | 'provider', string>> => {
   if (contract == null) return { contract: 'undefined contract' };
 
   const address = contract.address;

src/functions/parseProviderOrSigner.ts

@@ -1,6 +1,7 @@
 import { JsonRpcProvider, StaticJsonRpcProvider, Web3Provider } from '@ethersproject/providers';
 import { ethers, Signer } from 'ethers';
 
+import { isValidEthersAdaptor } from '~~/functions';
 import { TEthersProviderOrSigner, TEthersProvider } from '~~/models';
 import { TEthersAdaptor } from '~~/models/ethersAppContextTypes';
 
@@ -23,10 +24,9 @@ export const parseProviderOrSigner = async (
   let account: string | undefined;
 
   if (
-    providerOrSigner &&
-    (providerOrSigner instanceof JsonRpcProvider ||
-      providerOrSigner instanceof Web3Provider ||
-      providerOrSigner instanceof StaticJsonRpcProvider)
+    providerOrSigner instanceof JsonRpcProvider ||
+    providerOrSigner instanceof Web3Provider ||
+    providerOrSigner instanceof StaticJsonRpcProvider
   ) {
     provider = providerOrSigner;
     providerNetwork = await providerOrSigner.getNetwork();
@@ -52,5 +52,8 @@ export const parseProviderOrSigner = async (
     chainId: providerNetwork?.chainId,
     account,
   } as const;
-  return result;
+
+  if (isValidEthersAdaptor(result)) return result;
+
+  return undefined;
 };

src/functions/sortContracts.tsx

@@ -0,0 +1,45 @@
+import { merge } from 'merge-anything';
+
+import { TContractsByName, TContractsByChainId } from '~~/models/contractContextTypes';
+
+export const sortContractsByChainId = <GContractNames extends string>(
+  contractsByName: TContractsByName<GContractNames>
+): TContractsByChainId<GContractNames> => {
+  let contractsByChainId: TContractsByChainId<GContractNames> = {} as TContractsByChainId<GContractNames>;
+
+  for (const nameStr in contractsByName) {
+    const name: GContractNames = nameStr;
+    for (const chainIdStr in contractsByName[name]) {
+      const chainId = parseInt(chainIdStr);
+      const data: TContractsByChainId<GContractNames> = {
+        [chainId]: { [name]: contractsByName[name][chainId] },
+      } as TContractsByChainId<GContractNames>;
+      const temp = contractsByChainId;
+      // @ts-ignore
+      contractsByChainId = merge(temp, data);
+    }
+  }
+
+  return contractsByChainId;
+};
+
+export const sortContractsByName = <GContractNames extends string>(
+  contractsByChainId: TContractsByChainId<GContractNames>
+): TContractsByName<GContractNames> => {
+  let contractsByName: TContractsByName<GContractNames> = {} as TContractsByName<GContractNames>;
+
+  for (const chainIdStr in contractsByChainId) {
+    const chainId = parseInt(chainIdStr);
+    for (const nameStr in contractsByChainId[chainId]) {
+      const name: GContractNames = nameStr;
+      const data: TContractsByName<GContractNames> = {
+        [name]: { [chainId]: contractsByChainId[chainId][name] },
+      } as TContractsByName<GContractNames>;
+      const temp = contractsByName;
+      // @ts-ignore
+      contractsByName = merge(temp, data);
+    }
+  }
+
+  return contractsByName;
+};

src/functions/sortContractsByChainId.tsx

@@ -1,7 +1,9 @@
+import { useEffect } from 'react';
 import { useQuery } from 'react-query';
 
 import {
   isAdaptorEqual,
+  isValidEthersAdaptor,
   mergeDefaultUpdateOptions,
   parseProviderOrSigner,
   providerKey,
@@ -42,5 +44,25 @@ export const useEthersAdaptorFromProviderOrSigners = (
     }
   );
 
+  const validAdaptorState = isValidEthersAdaptor(data);
+
+  // if the adaptor is not valid, refetch when the network is obtained
+  useEffect(() => {
+    if (data != null && !validAdaptorState) {
+      console.log('not valid');
+      if (data.provider) {
+        void data.provider
+          .getNetwork()
+          .then(() => refetch())
+          .catch();
+      } else if (data.signer && data.account) {
+        void data.signer.provider
+          ?.getNetwork()
+          .then(() => refetch())
+          .catch();
+      }
+    }
+  }, [data, refetch, validAdaptorState]);
+
   return [data, refetch];
 };

src/hooks/useEthersAdaptorFromProviderOrSigners.ts

@@ -34,12 +34,15 @@ export type TTypedContract<
   ? TypedContract
   : BaseContract;
 
-export type TContractsByName<GContractNames extends string> = {
-  [contractName in GContractNames]: { [chainId: number]: BaseContract | undefined };
-};
-export type TContractsByChainId<GContractNames extends string> = {
-  [chainId: number]: { [contractName in GContractNames]: BaseContract | undefined };
-};
+export type TContractsByName<GContractNames extends string> = Record<
+  GContractNames,
+  { [chainId: number]: BaseContract | undefined }
+>;
+
+export type TContractsByChainId<GContractNames extends string> = Record<
+  number,
+  { [contractName in GContractNames]: BaseContract | undefined }
+>;
 
 /**
  *