fix: create signer just-in-time for transaction (#4587)

src/hooks/useLoadContractFromAddress.ts

@@ -3,7 +3,6 @@ import { Contract, ContractInterface } from 'ethers'
 import { isAddress } from 'ethers/lib/utils'
 import { useEffect, useState } from 'react'
 import { isZeroAddress } from 'utils/address'
-import { useWallet } from './Wallet'
 
 const isInputAddressValid = (
   address: string | undefined,
@@ -23,15 +22,13 @@ export const useLoadContractFromAddress = <ABI extends ContractInterface>({
 }) => {
   const [contract, setContract] = useState<Contract>()
 
-  const { signer } = useWallet()
-
   useEffect(() => {
     if (!abi || !isInputAddressValid(address)) {
       return setContract(undefined)
     }
 
-    setContract(new Contract(address, abi, signer ?? readProvider))
-  }, [address, abi, signer])
+    setContract(new Contract(address, abi, readProvider))
+  }, [address, abi])
 
   return contract
 }

src/hooks/useTransactor.ts

@@ -83,12 +83,13 @@ export type TransactorInstance<T = undefined> = (
 export function useTransactor(): Transactor | undefined {
   const { addTransaction } = useContext(TxHistoryContext)
 
-  const { chain, signer, userAddress } = useWallet()
+  const { chain, userAddress } = useWallet()
   const { chainUnsupported, isConnected, changeNetworks, connect } = useWallet()
+  const { signer } = useWallet()
 
   return useCallback(
     async (
-      contract: Contract,
+      _contract: Contract,
       functionName: string,
       args: unknown[],
       options?: TransactionOptions,
@@ -111,6 +112,15 @@ export function useTransactor(): Transactor | undefined {
         return false
       }
 
+      /**
+       * Create a new contract instance with the signer.
+       */
+      const contract = new Contract(
+        _contract.address,
+        _contract.interface,
+        signer,
+      )
+
       logTx({ functionName, contract, args, options })
 
       if (

src/packages/v2v3/contexts/Contracts/useV2V3ContractLoader.ts

@@ -20,12 +20,9 @@ export function useV2V3ContractLoader({ cv }: { cv: CV2V3 | undefined }) {
       try {
         const network = readNetwork.name
 
-        // Contracts can be used read-only without a signer, but require a signer to create transactions.
-        const signerOrProvider = signer ?? readProvider
-
         const contractLoaders = await Promise.all(
           Object.values(V2V3ContractName).map(contractName =>
-            loadV2V3Contract(contractName, network, signerOrProvider, cv),
+            loadV2V3Contract(contractName, network, readProvider, cv),
           ),
         )