如何在Next.js项目中使用Web3Modal获取已连接钱包的地址

问题根因 #

signer._address是ethers库的内部私有属性，在signer实例创建完成时不会立刻同步赋值，因此直接读取会返回null，本身就不属于推荐的外部调用方式。

具体修改 #

你可以主动调用signer提供的标准异步方法getAddress()获取钱包地址，建议单独把地址存入state方便渲染，修改后代码如下：

const Home: NextPage = () => {
  // 单独存储钱包地址，渲染时直接读取同步值
  const [walletAddress, setWalletAddress] = useState<string | null>(null)

  async function connect() {
    const web3Modal = new Web3Modal()
    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)
    const signer = provider.getSigner()
    // 异步调用标准API获取地址
    const address = await signer.getAddress()
    setWalletAddress(address)
  }

  return (
    <div className="flex justify-center">
      <button onClick={() => connect()}>Connect wallet</button>
      { walletAddress && (
        <h3>wallet connected: {walletAddress}</h3>
      )}
    </div>
  )
}

额外优化建议 #

• 不要调用任何ethers实例带下划线前缀的属性，这类都是内部属性，不同版本实现逻辑可能变化，兼容性没有保障
• 可以把web3Modal实例提到组件外部初始化，避免每次点击连接按钮都重复创建实例，减少不必要的性能开销

内容的提问来源于stack exchange，提问作者ste