Web3实战:使用web3modalSDK实现钱包连接并部署在Vercel引言:在Web3的浪潮中,与用户钱包的无缝连接是构建引人入胜的dApp(去中心化应用)的关键。web3modal作为一个强大的库,为开发者提供了简单而优雅的方式,集成了多种钱包提供者,使得用户可以选择他们喜欢的方式来连接
在Web3的浪潮中,与用户钱包的无缝连接是构建引人入胜的dApp(去中心化应用)的关键。web3modal
作为一个强大的库,为开发者提供了简单而优雅的方式,集成了多种钱包提供者,使得用户可以选择他们喜欢的方式来连接他们的钱包。本文将引导你通过使用web3modal
SDK,在 Next.js
前端项目中实现一个连接钱包的功能,并将这个项目部署在Vercel上,让你的Web3应用触手可及。无论你是Web3的初学者还是经验丰富的开发者,本文都将为你提供实用的指导和启示。
layout.tsx
文件代码:import type { Metadata } from "next";
import { headers } from "next/headers";
import "./globals.css";
import { cookieToInitialState } from "wagmi";
import { config } from "@/config";
import Web3ModalProvider from "@/context";
import ConnectButton from "./ConnectButton";
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}>
<div className="absolute top-0 right-0 p-4">
<ConnectButton />
</div>
{children}
</Web3ModalProvider>
</body>
</html>
);
}
<Web3ModalProvider initialState={initialState}>{children}</Web3ModalProvider>
在前端开发中,使用像 Web3ModalProvider
这样的上下文提供者(provider)是为了在整个应用中管理和共享状态,特别是与区块链和Web3相关的状态。以下是具体原因:
Web3ModalProvider
?Web3ModalProvider
提供了一个上下文来管理与 Web3 连接相关的状态。这包括用户的钱包连接状态、账户信息、网络信息等。通过使用上下文提供者,可以在应用的任何地方访问这些状态,而无需通过层层的 props 传递。Web3ModalProvider
,这些组件可以轻松共享状态并保持同步。在上面的代码中,Web3ModalProvider
被用作顶级元素的嵌套提供者。这意味着它包裹了整个应用的 children
,使得所有子组件都能够访问和使用 Web3 的上下文。
initialState
是通过 cookieToInitialState(config, headers().get('cookie'))
初始化的。这允许提供者在创建时使用初始状态,例如用户的连接信息。
ConnectButton
被放置在右上角,通过 absolute
定位。这是为了在页面的固定位置显示连接按钮,方便用户随时连接他们的钱包
page.tsx
文件代码:import App from "@app/App";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 className="text-4xl font-bold underline">
Welcome to Web3
</h1>
<App />
</main>
);
}
App.tsx
文件代码:const App = () => {
return (
<div>App</div>
)
}
export default App
config/index.tsx
文件代码:import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
import { cookieStorage, createStorage } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
// Get projectId from 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
const chains = [mainnet, sepolia] as const
export const config = defaultWagmiConfig({
chains,
// transports: {
// [sepolia.id]: http()
// },
projectId,
metadata,
ssr: true,
storage: createStorage({
storage: cookieStorage
}),
})
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>
)
}
ConnectButton
文件代码:
export default function ConnectButton() {
return <w3m-button />
}
.env
文件中设置为NEXT_PUBLIC_PROJECT_ID
的值。Monica - ChatGPT4 驱动的 AI Copilot
浏览器扩展Fire Wallet
浏览器扩展AI 双语字幕&网页沉浸翻译 — Trancy 语言学习
浏览器扩展install
cssnano
cssnano
<https://web3walletconnect-m50mdpnqb-qiaopengjuns-projects.vercel.app/>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!