Connect Wallet

Author of this section: @Fish, @ Xiaofu , @simple

connecting wallets is the most important interaction in DApp, and we'll guide you through this. wagmi and Ant Design Web3 to achieve the function of connecting wallets.

How a DApp connects to a wallet

in DApp, we need to connect the wallet to get the user's wallet address, and perform some operations that require the user's signature, such as sending transactions, signing messages, etc. There are many ways to connect wallets, usually in Ethereum there are three ways:

• the connection is established through a browser plug-in.
• The connection is established by accessing the DApp in the Wallet App.
• The connection is established through the WalletConnect protocol.

The first two are implemented for DApp through the interface that the wallet is injected into the browser running environment, while WalletConnect is implemented through the transfer of the server. The wallet injection interface also has two ways, one is through EIP-1193 to achieve, the other is through EIP-6963 To achieve. EIP-1193 is an early protocol and relatively simple, let's try this way to establish a connection with the wallet.

Register MetaMask wallet

MetaMask it is currently the most user wallet plug-in in the Ethereum ecosystem. It provides a simple way for users to manage their Ethereum assets in the browser, and is also a bridge for DApp to interact with the Ethereum network. If you haven't used it yet, you can use it download here install and complete the initial configuration by referring to the tutorial on the official website. You can also use other wallets. Such TokenPocket , imToken wait.

After completing the wallet installation, you can see the following page:

configure MetaMask wallet

we take MetaMask as an example, look at how to establish a connection with the MetaMask wallet.

import { http } from "wagmi";
- import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+ import { Mainnet, WagmiWeb3ConfigProvider, MetaMask } from '@ant-design/web3-wagmi';
- import { Address, NFTCard } from "@ant-design/web3";
+ import { Address, NFTCard, Connector, ConnectButton } from "@ant-design/web3";

export default function Web3() {
  return (
    <WagmiWeb3ConfigProvider
      chains={[Mainnet]}
      transports={{
        [Mainnet.id]: http(),
      }}
+     wallets={[MetaMask()]}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
        tokenId={641}
      />
+     <Connector>
+       <ConnectButton />
+     </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

The contents introduced therein are described as follows:

• metaMask: represents the Fox wallet, Ant Design Web3 supports a variety wallet , Convenient to configure according to needs.
• Connector : Connector, Connector provides a complete UI to connect the wallet.
• ConnectButton : Connect the button of the block chain wallet to match Connector components are used together.

This completes the function of connecting wallets. Click Connect Wallet and you can see the following page:

after the connection is completed, you can see the following page:

using the components provided by Ant Design Web3 can quickly realize the basic functions of DApp. Congratulations, we have realized the function of connecting wallets.