How do I get the address of the connected wallet with web3modal?

在使用Web3Modal来获取用户的钱包地址时，我们首先需要理解Web3Modal是一个允许开发者通过一种简单的方式，来连接到用户的不同区块链钱包的库。以下是使用Web3Modal来获取用户钱包地址的基本步骤：

步骤 1: 安装 Web3Modal

首先，你需要在你的项目中安装Web3Modal。这可以通过npm来实现：

bash
npm install web3modal

步骤 2: 引入依赖

在你的项目中引入Web3Modal以及一个Web3库（比如ethers.js或web3.js）。这里我们以ethers.js为例：

javascript
import Web3Modal from "web3modal";
import { ethers } from "ethers";

步骤 3: 初始化 Web3Modal

创建Web3Modal实例，并配置所支持的钱包（例如MetaMask, WalletConnect等）：

javascript
const providerOptions = {
  /* 配置不同的钱包选项 */
};

const web3Modal = new Web3Modal({
  network: "mainnet", // 可选的网络配置，比如 mainnet, ropsten, rinkeby 等
  cacheProvider: true, // 是否缓存用户选择的提供者
  providerOptions // 提供者选项
});

步骤 4: 连接钱包并获取账户

当用户需要连接钱包时，调用Web3Modal的connect方法来触发连接：

javascript
async function connectWallet() {
  try {
    const provider = await web3Modal.connect(); // 触发钱包连接
    const web3Provider = new ethers.providers.Web3Provider(provider);

    const signer = web3Provider.getSigner();
    const address = await signer.getAddress();
    
    console.log("Connected address:", address);
    return address;
  } catch (error) {
    console.error("Could not get a wallet connection", error);
    return null;
  }
}

示例

让我们通过一个简单的例子来说明。假设你在一个React应用中需要在用户点击按钮时连接钱包并显示钱包地址：

javascript
import React from 'react';
import Web3Modal from 'web3modal';
import { ethers } from 'ethers';

const web3Modal = new Web3Modal({
  network: "mainnet", // 可选
  cacheProvider: true,
});

function App() {
  const [address, setAddress] = React.useState("");

  async function handleConnect() {
    const provider = await web3Modal.connect();
    const web3Provider = new ethers.providers.Web3Provider(provider);
    const signer = web3Provider.getSigner();
    const addr = await signer.getAddress();
    setAddress(addr);
  }

  return (
    <div>
      <button onClick={handleConnect}>Connect Wallet</button>
      {address && <p>Connected Address: {address}</p>}
    </div>
  );
}

export default App;

在这个例子中，用户点击“Connect Wallet”按钮后，Web3Modal将弹出一个界面让用户选择和连接钱包。一旦钱包连接成功，我们就可以通过ethers.js获取到用户的钱包地址并显示出来。