EN

Multiple Chains

Author of this section: @LiKang

in addition to the main network and test network, Ethernet Square also has a rich L2 ecology. For some Dapps, different chains may need to be connected. This talk will guide developers on how to connect multiple chains in a DApp.

Multi-chain

DApp support multi-chain refers to the ability to run on or interact with multiple blockchain platforms. This means that Dapps are not limited to a single blockchain ecosystem, but can span different blockchains and take advantage of the characteristics and advantages of each platform to provide a wider range of functions, a better user experience or higher efficiency. Users can use assets on one blockchain to operate on another blockchain. For example, users can transfer tokens on a blockchain to another blockchain through cross-chain technologies (such as blockchain bridges), and Dapps can identify and use these assets on both chains. Different blockchain platforms have different technical characteristics and advantages, such as transaction speed and fees. Each chain has its own user community, and supporting multiple chains can also help Dapps gather users from these different communities.

Implementation

implementing DApp support for multi-chain usually requires developers to use some specific technologies and tools, such as cross-chain bridges, intelligent contract multi-version management, and possible inter-chain communication protocols. While this may add complexity to development and maintenance, more and more Dapps are choosing to support multiple blockchains, given the diversity and scalability benefits it brings.

Code

we take a multi-chain NFT contract as an example. In order for NFT to support multi-chain, the following techniques or methods are usually required:

  1. Cross-Chain Bridge: This is one of the most common methods, cross-chain bridges allow the transfer of assets between different blockchains. Through such a bridge, NFT can be "wrapped" from one chain and transferred to another chain, and users can use the corresponding "wrapped" assets on the Target chain.
  2. Side chain: The side chain is the auxiliary chain of the main chain, which can be used to extend the function of the main chain. NFT can be transferred between the main chain and its side chains, thereby enabling liquidity between multiple associated blockchains.
  3. Cross-chain protocols: Cross-chain protocols such as Cosmos or Polkadot are designed to create an interoperable ecosystem between different blockchains. With these protocols, NFT can move easily between compatible blockchain networks.
  4. Multi-chain smart contracts: Some NFT projects have developed smart contracts that can run on multiple blockchains. These contracts ensure that even if NFT is on different blockchains, its attributes and ownership records are still consistent.
  5. Distributed Identity and metadata storage service: for example, a distributed File storage System such as IPFS(InterPlanetary File System) is used to store NFT metadata or content. This ensures that while the NFT token itself may exist on different blockchains, its linked content is uniform and persistent.

In the front fourth talk and fifth talk we have learned about contract calls and event monitoring, so we will continue to learn to support multi-chain on this basis. The modified code is as follows: 

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

const config = createConfig({
- chains: [mainnet, sepolia],
+ chains: [mainnet, sepolia, polygon],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
+   [polygon.id]: http(),
  },
  connectors: [
    injected({
      target: "metaMask",
    }),
  ],
});

+ const contractInfo = [
+  {
+    id:1,
+    name: "Ethereum",
+    contractAddress: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+  }, {
+    id:5,
+    name: "Sepolia",
+    contractAddress: "0x418325c3979b7f8a17678ec2463a74355bdbe72c"
+  }, {
+    id:137,
+    name: "Polygon",
+    contractAddress: "0x418325c3979b7f8a17678ec2463a74355bdbe72c"
+  }
+ ]

const CallTest = () => {
  const { account } = useAccount();
+ const { chain } = useProvider();
  const result = useReadContract({
    abi: [
      {
        type: "function",
        name: "balanceOf",
        stateMutability: "view",
        inputs: [{ name: "account", type: "address" }],
        outputs: [{ type: "uint256" }],
      },
    ],
-   // Sepolia test contract 0x418325c3979b7f8a17678ec2463a74355bdbe72c
-   address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+   address: contractInfo.find((item) => item.id === chain?.id)?.contractAddress as `0x${string}`,
    functionName: "balanceOf",
    args: [account?.address as `0x${string}`],
  });
  const { writeContract } = useWriteContract();

  return (
    <div>
      {result.data?.toString()}
      <Button
        onClick={() => {
          writeContract(
            {
              abi: [
                {
                  type: "function",
                  name: "mint",
                  stateMutability: "payable",
                  inputs: [
                    {
                      internalType: "uint256",
                      name: "quantity",
                      type: "uint256",
                    },
                  ],
                  outputs: [],
                },
              ],
-             address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+             address: contractInfo.find((item) => item.id === chain?.id)?.contractAddress as `0x${string}`,
              functionName: "mint",
              args: [1],
              value: parseEther("0.01"),
            },
            {
              onSuccess: () => {
                message.success("Mint Success");
              },
              onError: (err) => {
                message.error(err.message);
              },
            }
          );
        }}
      >
        mint
      </Button>
    </div>
  );
};

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

when we click on the chain switch Polygon , you can see the following pop-up window:

@ant-design/web3 provided useProvider , you can get the information of the current chain, we can find out what we are in by switching the chain ID contractInfo the contract address of the different chains stored in the, to get the balance and click. mint buttons to different chains and corresponding contract addresses.