WalletConnect

Author of this section: @Fish

this talk will show you how to use WalletConnect to connect the mobile APP wallet, which is essential to improve the user experience of DApp.

What is WalletConnect

in the previous courses, we realized the wallet in the form of DApp connection browser plug-in, but many times users want to use the wallet application on the mobile phone to connect to the DApp opened on the computer, or hope to connect to the wallet on the mobile phone when the mobile phone browser accesses the DApp.

Because this scenario is not in the browser of the PC, it is impossible to connect the wallet through the browser plug-in, while the WalletConnect protocol is a way to establish the connection between the wallet and DApp through the transfer of the server.

WalletConnect is an open source protocol supported and developed by the WalletConnect Foundation, a non-profit organization of the same name. Through this protocol, users can connect to DApp with mobile wallet application without installing browser plug-ins.

What is the principle of WalletConnect?

Let's first look at the protocol of WalletConnect, which actually corresponds to an EIP protocol behind it. EIP-1328 .

request       = "wc" ":" topic [ "@" version ][ "?" parameters ]
topic         = STRING
version       = 1*DIGIT
parameters    = parameter *( "&" parameter )
parameter     = key "=" value
key           = STRING
value         = STRING

This is a URI specification, the specific content, 1.0 and 2.0 parameters are different.

The 2.0 parameters are as follows:

• symKey symmetric key used to encrypt messages over the relay
• methods supported jsonrpc methods
• relay-protocol transport protocol for the relay message service
• relay-data (optional) : Data used to relay message protocols, which may be configuration information required by some protocols.
• expiryTimestamp (optional) : The time when the pairing expires, which is usually the expiration time of the relay service symmetric key

A specific example is as follows:

wc:02c2d94b12d9fde35a149a3620544892b98ea14d45832c9bbd903af9d57d3ea9@2?expiryTimestamp=1710298160&relay-protocol=irn&symKey=8327616fa992557f5d125fe5397116c73ace7f368ac6183724052b1bcb917414

among them relay-protocol represents what protocol is used, usually irn . It represents a agreement . Let's try what happens when we connect wallets based on this protocol.

If you observe the DApp network request when connecting through WalletConnect, you will find that the browser will look like wss://relay.walletconnect.com address to send the request.

This request is sent through the WebSocket protocol, which is a two-way communication protocol, so it can realize two-way communication. This request is forwarded through WalletConnect's relay server, thus realizing the connection between the wallet and the DApp. wss://relay.walletconnect.com the address is irn the default address of the protocol. You can also refer to the official documentation of WalletConnect to build your own relay server.

From EIP-1328 from a definition perspective, the WalletConnect 2.0 is a very flexible protocol that simply defines a URI specification. But specific irn the protocol contains more details, such as the format of the message, the encryption method of the message, the transmission protocol of the message, and so on. Most of the wallets are currently supported. irn protocol, so usually we also use that protocol to establish a connection. But when we mention the WalletConnect protocol, it may often include irn content of the Agreement. The protocol itself is more complicated, but for Dapps, it is usually not necessary to care about it. Next, let's take a look at how to support WalletConnect in Dapps.

How to use WalletConnect

Next, we'll guide you through using WalletConnect to connect your wallet in the DApp of this course.

Pass in wagmi SDK integrated with WalletConnect built-in support for WalletConnect, we combine Ant Design Web3 to provide ConnectModal components can be easily connected to WalletConnect.

First we need to add in wagmi's configuration walletConnect .

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

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
+    walletConnect({
+      projectId: 'c07c0051c2055890eade3556618e38a6',
+      showQrModal: false,
+    }),
  ],
});

In the above code projectId it is the test project ID provided by Ant Design web3. in actual projects, you need https://cloud.walletconnect.com/ apply for your own ID. showQrModal the configuration is to close the default popup window of ConnectModal to avoid duplicate popup windows.

Added walletConnect After that, it can be used directly. Ant Design Web3 will automatically detect whether the Wallet supports WalletConnect. If so, it will display a two-dimensional code in ConnectModal without installing a plug-in wallet for users to scan the code for connection.

You can also continue to add a separate WalletConnect wallet option:

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>
  );
}

complete code you can in web3.tsx found in.