在Conflux eSpace上集成WalletConnect 和Next.js 项目

本教程全面介绍了专门针对Conflux eSpace 网络，如何在 Next.js 项目中集成WalletConnect 和 Web3Modal。如需实际操作,可以查看GitHub仓库 web3modal-conflux-nextjs。

前提条件

在您的系统上安装了Node.js
拥有React and Next.js的基础知识
在Conflux eSpace网络上有账户

第1步: 设置你的Next.js项目

首先，如果还没有的话，请创建一个新的Next.js应用程序：

npx create-next-app web3modal-conflux-nextjs
cd web3modal-conflux-nextjs

在使用create-next-app设置Next.js项目时,会提示您选择一些配置选项。在本教程中，您可以继续使用设置中提供的所有默认设置。这将为您的项目配置最佳默认设置，适用于大多数应用程序，包括基本的文件结构和配置设置。

第2步：安装必要的软件包

Web3Modal SDK支持Wagmi，这将帮助您与钱包和智能合约进行交互。

npm install @web3modal/wagmi wagmi viem @tanstack/react-query

第3步：配置Wagmi

让我们为您的Wagmi设置一个单独的文件。因为这个函数需要同时在客户端和服务器上运行，所以它不应放置在包含'use client'指令的文件中。

在这个示例中, 我们将在我们的应用程序目录之外创建一个名为config/index.tsx的文件，并进行如下配置：

import { cookieStorage, createStorage } from "wagmi";
import { confluxESpace } from "wagmi/chains";

import { http, createConfig, WagmiProvider } from "wagmi";
import { walletConnect, injected, coinbaseWallet } from "wagmi/connectors";

// Get projectId at https://cloud.walletconnect.com
export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;

if (!projectId) throw new Error("Project ID is not defined");

const metadata = {
  name: "Web3Modal",
  description: "Web3Modal Example",
  url: "https://web3modal.com", // origin must match your domain & subdomain
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};

// Create wagmiConfig
export const config = createConfig({
  chains: [confluxESpace],
  transports: {
    [confluxESpace.id]: http(),
  },
  connectors: [
    walletConnect({ projectId, metadata, showQrModal: false }),
    injected({ shimDisconnect: true }),
    coinbaseWallet({
      appName: metadata.name,
      appLogoUrl: metadata.icons[0],
    }),
  ],
  ssr: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
});

为了让项目访问环境变量，比如projectId, 你需要再项目根目录下设置一个.env.local 文件。以下是如何操作：

创建一个名为.env.local的文件，并添加以下行 :

NEXT_PUBLIC_PROJECT_ID = your_project_id_here;

将your_project_id_here替换为你从https://cloud.walletconnect.com获取的实际项目ID。

关于如何获取 ProjectId 的详细信息，请参考这篇文章。

Step 4: Context Provider

我们现在将设置一个上下文提供者来封装我们的应用程序，并处理Web3Modal的初始化。重要的是要记住， createWeb3Modal应该从一个React 客户端组件文件中调用。

在本教程中，让我们在我们的主应用程序目录之外创建一个名为context/index.tsx的文件，并按照所述的配置实现。

"use client";

import React, { ReactNode } from "react";
import { config, projectId } from "@/config";

import { createWeb3Modal } from "@web3modal/wagmi/react";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { State, WagmiProvider } from "wagmi";

// Setup queryClient
const queryClient = new QueryClient();

if (!projectId) throw new Error("Project ID is not defined");

// Create modal
createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
  enableOnramp: true, // Optional - false as default
});

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

第 4 步：使用 Web3ModalProvider

在app/layout.tsx 文件中, 我们会将Web3ModalProvider 组件集成，并调用Wagmi的 cookieToInitialState功能。

从cookieToInitialState获得的initialState提供了将填充Wagmi存储的初步值，适用于服务器和客户端环境。

import "./globals.css";
import type { Metadata } from "next";
import { headers } from "next/headers";

import { cookieToInitialState } from "wagmi";

import { config } from "@/config";
import Web3ModalProvider from "@/context";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const initialState = cookieToInitialState(config, headers().get("cookie"));
  return (
    <html lang="en">
      <body>
        <Web3ModalProvider initialState={initialState}>
          {children}
        </Web3ModalProvider>
      </body>
    </html>
  );
}

第5步：连接Conflux eSpace 网络

在你的项目中创建一个新的组件 ConnectButton.tsx，用于打开 ConnectWallet 模态框。

"use client";

import { useWeb3Modal } from "@web3modal/wagmi/react";

export default function ConnectButton() {
  // 4. Use modal hook

  const { open } = useWeb3Modal();

  return (
    <div>
      <button
        onClick={() => open()}
        className="rounded-md border-black border-solid border-2 px-1"
      >
        Open Connect Modal
      </button>
    </div>
  );
}

在app/page.tsx或者其他组件中, 使用ConnectButton 组件来连接到Conflux eSpace上的钱包。

import Image from "next/image";
import ConnectButton from "@/component/ConnectButton";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <div className="flex flex-col items-center ">
        <div className="text-black font-bold text-xl dark:text-white py-20">
          Next.js Demo
        </div>
        <p className="pb-2 font-semibold">
          Using WalletConnect on Conflux eSpace
        </p>
        <ConnectButton />
      </div>
    </main>
  );
}

通过以上步骤，你现在已经建立了一个Next.js应用程序，可以通过WalletConnect和Web3Modal连接到Conflux eSpace网络上。此设置允许用户直接从他们的网络浏览器安全地与区块链进行交互。

前提条件​

第1步: 设置你的Next.js项目​

第2步：安装必要的软件包​

第3步：配置Wagmi​

Step 4: Context Provider​

第 4 步：使用 Web3ModalProvider​

第5步：连接Conflux eSpace 网络​