前面几篇文章把一个开发流程全都拆解完了，现在我们就可以开始写前端代码了，并与本也链进行交互了。

1. 唤起 MetaMask 钱包

找了一段唤起 MetaMask 插件的代码

const connectWallet = async () => {
  if (window.ethereum) {
    try {
      // 请求用户连接 MetaMask
      await window.ethereum.request({ method: 'eth_requestAccounts' })

      // 创建一个 provider，使用 MetaMask 提供的以太坊对象
      const provider = new ethers.BrowserProvider(window.ethereum)

      // 获取 signer (签名者)
      const signer = await provider.getSigner()

      // 获取连接的账户地址
      const userAddress = await signer.getAddress()

      // 将账户地址保存到 state 中
      setAccount(userAddress)
    } catch (error) {
      console.error('连接 MetaMask 失败:', error)
    }
  } else {
    alert('MetaMask 未安装，请先安装 MetaMask!')
  }
}