DApp 开发 - 钱包连接

WalletConnect

很多时候用户希望使用手机上的钱包应用来连接电脑上打开的 DApp，又或者希望在手机浏览器访问 DApp 的时候也可以连接上手机上的钱包。

这种场景无法通过浏览器插件的方式来连接钱包，而 WalletConnect 协议则是一种通过服务端中转的方式来实现钱包和 DApp 建立连接。

WalletConnect 是由同名非盈利组织 WalletConnect 基金会支持开发的一套开源协议，通过这个协议，用户可以用手机钱包应用连接 DApp，不需要安装浏览器插件。

如何使用 WalletConnect

在 wagmi 中通过集成 WalletConnect 的 SDK 内置支持了 WalletConnect，我们结合 Ant Design Web3 提供的 ConnectModal 组件可以简单的接入 WalletConnect。

首先我们需要在 wagmi 的配置中添加 walletConnect。

import { injected, walletConnect } from "wagmi/connectors";

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(
      "https://api.zan.top/node/v1/eth/mainnet/4a75354145b5499a8abaf521f6cb15e1"
    ),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
    walletConnect({
      projectId: "c07c0051c2055890eade3556618e38a6",
      showQrModal: false,
    }),
  ],
});

上面代码中的 projectId 是 Ant Design Web3 提供的测试项目 ID，实际项目中你需要在 cloud.walletconnect.com/ 申请自己的 ID。showQrModal 配置是为了关闭 ConnectModal 的默认弹窗，避免出现重复的弹窗。

添加了 walletConnect 之后其实就可以直接使用了，Ant Design Web3 会自动检测到钱包是否支持 WalletConnect，如果支持的话就会在未安装插件钱包的情况下在 ConnectModal 中显示二维码出来，供用户扫码连接。

你也可以继续添加一个单独的 WalletConnect 的钱包选择：

import {
  Address,
  ConnectButton,
  Connector,
  NFTCard,
  useAccount,
} from "@ant-design/web3";
import {
  MetaMask,
  WagmiWeb3ConfigProvider,
+  WalletConnect,
} from "@ant-design/web3-wagmi";
import { Button, message } from "antd";
import { parseEther } from "viem";
import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
import { mainnet } from "wagmi/chains";
import { injected, walletConnect } from "wagmi/connectors";

//...

export default function Web3() {
  return (
    <WagmiWeb3ConfigProvider
      config={config}
-      wallets={[MetaMask()]}
+      wallets={[MetaMask(), WalletConnect()]}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
        tokenId={641}
      />
      <Connector>
        <ConnectButton />
      </Connector>
      <CallTest />
    </WagmiWeb3ConfigProvider>
  );
}

多链

签名