反应连接 Metamask 并将签名者传递给多个合同

Question

我正在尝试弄清楚如何在多个 js 文件之间共享签名者。我有一个文件 walletConnect.js，我可以在其中连接到 Metamask 并获取 ERC20 代币合约。这很好用。

async function connect(){
  try{
    const accounts = await ethereum.request({
      method: "eth_requestAccounts",
    });
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();

    // ERC20 token contract
    const tokenContract = new ethers.Contract(
        tokenAddress,
        tokenAbi,
        signer
     );
  } catch (e) {
    console.log(e);
  }
}

然后我有另一个文件stake.js，我将代币存入合约

async function stakeToken() {
   try {
     const stakingContract = new ethers.Contract(
        contractAddress,
        contractAbi,
        signer
    );
    
    // approve contract
    await tokenContract.approve(stakingContract.address, maxAmount);

    // stake tokens
    await stakingContract.stakeTokens(
      tokenContract.address,
      amount
    );
  } catch (e) {
    console.log(e);
  }
}

如果我将所有代码都放在一个文件中，一切正常。我使用 useState 钩子，一切都很好。但是，我将有多个质押合约，我想将它们保存在单独的 javascript 文件中。有多个文件时如何操作？

Answer 1

我创建了一个像这样的钩子contracts.js

import { ethers } from "ethers";

export const useContract = (address, abi) => {
  try {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(address, abi, signer);
    return contract;
  } catch (e) {
    console.log(e);
    return false;
  }
};

现在我只需从任何脚本调用 useContract，它 returns 一个合同

const stakingContract = useContract(someAddress, someAbi);

这样我省去了很多冗余代码

反应连接 Metamask 并将签名者传递给多个合同

React connecting Metamask and passing signer to multiple contracts

javascript

reactjs

ethereum

solidity

next.js