Support connection chain

Author of this section: @Fish

in this lecture, we will support linking blocks through wallets. You can also refer to the previous basic courses. Connect Wallet learning.

Initialize Provider

we are based on ethereum adaptation of Ant Design Web3 to provide connection chain support for the components of the entire DApp, we need to wrap it at the outermost layer of the DApp. WagmiWeb3ConfigProvider , so you can get the chain data or call the contract in the DApp component.

In the basic course part, we have installed relevant dependencies. If you are learning based on newly created projects, you can also refer to Ant Design web3. Quick Start document installation-related dependencies:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

next, we are referring to Ant Design Web3 recommend configuration components/WtfLayout/index.tsx make the following modifications in:

import React from "react";
import Header from "./Header";
import styles from "./styles.module.css";
+ import {
+   MetaMask,
+   OkxWallet,
+   TokenPocket,
+   WagmiWeb3ConfigProvider,
+   WalletConnect,
+   Hardhat,
+   Mainnet,
+ } from "@ant-design/web3-wagmi";

interface WtfLayoutProps {
  children: React.ReactNode;
}

const WtfLayout: React.FC<WtfLayoutProps> = ({ children }) => {
  return (
+     <WagmiWeb3ConfigProvider
+       eip6963={{
+         autoAddInjectedWallets: true,
+       }}
+       ens
+       chains={[Mainnet, Hardhat]}
+       wallets={[
+         MetaMask(),
+         WalletConnect(),
+         TokenPocket({
+           group: "Popular",
+         }),
+         OkxWallet(),
+       ]}
+       walletConnect={{
+         projectId: "c07c0051c2055890eade3556618e38a6",
+       }}
+     >
      <div className={styles.layout}>
        <Header />
        {children}
      </div>
+     </WagmiWeb3ConfigProvider>
  );
};

export default WtfLayout;

In this configuration we support WalletConnect , supported based EIP6963 automatically detect wallets, support the display of ENS, and add some wallets by default. The specific configuration instructions are not specific here, you can either in the previous basic courses or Ant Design Web3 and wagmi learn in the document.

We also added Hardhat the local test chain facilitates subsequent debugging with contracts deployed in the local test chain.

Configure the ConnectButton

after configuring the Provider, we also need to configure ConnectButton next, please revise the style that we have already completed in the previous lecture. components/WtfLayout/Header.tsx file:

import Link from "next/link";
import { usePathname } from "next/navigation";
- import { ConnectButton } from "@ant-design/web3";
+ import { ConnectButton, Connector } from "@ant-design/web3";
import styles from "./styles.module.css";

export default function WtfHeader() {
  const pathname = usePathname();
  const isSwapPage = pathname === "/wtfswap";

  return (
    <div className={styles.header}>
      <div className={styles.title}>WTFSwap</div>
      <div className={styles.nav}>
        <Link
          href="/wtfswap"
          className={isSwapPage ? styles.active : undefined}
        >
          Swap
        </Link>
        <Link
          href="/wtfswap/pool"
          className={!isSwapPage ? styles.active : undefined}
        >
          Pool
        </Link>
      </div>
      <div>
+        <Connector
+           modalProps={{
+             mode: "simple",
+           }}
+         >
          <ConnectButton type="text" />
+         <Connector>
      </div>
    </div>
  );
}

we introduced Connector component, it reads WagmiWeb3ConfigProvider relevant information provided, passed ConnectButton, so that the connection button is no longer just a UI component, thus having the ability to connect the chain. In addition Connector component is integrated with ConnectModal components, such as the code example above, you can pass. modalProps to modify the relevant configuration, we modified mode for simple to make the pop-up window more concise, you can also try to modify and adjust the style yourself.