钱包设置
如何将您的钱包连接到应用链并设计终端用户钱包的用户体验
设置您的钱包以与应用链交互非常简单。最简单的方法是使用您的应用链区块浏览器,它提供了一键添加网络到 MetaMask 或任何兼容 EVM 的钱包的选项。
将您的应用链添加到 MetaMask 或其他钱包
- 访问您的应用链区块浏览器(例如,
https://explorer.your-appchain.syndicate.io)。 - 连接您的钱包。
- 点击“添加到 MetaMask”或“添加网络”按钮。
- 在您的钱包中批准网络添加。
- 通过点击钱包顶部的网络下拉菜单,在 MetaMask 中切换网络。MetaMask 将自动使用所选网络的正确 RPC、链 ID 和货币符号。
- 您可以在 MetaMask 的设置中“网络”选项下查看和管理您的网络。
有关在 MetaMask 中配置网络的更多信息,请参阅 MetaMask 网络配置指南。
设计终端用户钱包用户体验
- 使用用户现有的钱包(WalletConnect、注入式钱包如 MetaMask、Coinbase Wallet 扩展)
- 完全通过嵌入式钱包提供商(例如 Para)将钱包抽象化,像我们在示例应用中所做的那样
1. 连接现有钱包
以下是使用 wagmi 配合 WalletConnect 和注入式钱包的最小设置。将 rpcUrl、chainId 和 currency 替换为您的应用链值。
const appchain = {
id: 12345, // your appchain id
name: "Your Appchain",
nativeCurrency: { name: "Token", symbol: "TOK", decimals: 18 },
rpcUrls: { default: { http: ["https://rpc.your-appchain.syndicate.io"] } },
};
const wagmiConfig = createConfig({
chains: [appchain],
transports: { [appchain.id]: http("https://rpc.your-appchain.syndicate.io") },
connectors: [
injected({ shimDisconnect: true }),
walletConnect({ projectId: "YOUR_WC_PROJECT_ID" }),
],
ssr: true,
});2. 嵌入式钱包
如果您更喜欢无扩展的无缝引导体验,请使用嵌入式钱包(例如 Para)。这就是示例应用(Adrift)引导用户的方式。
const appchain = {
id: 12345, // your appchain id
name: 'Your Appchain',
nativeCurrency: { name: 'Token', symbol: 'TOK', decimals: 18 },
rpcUrls: { default: { http: ['https://rpc.your-appchain.syndicate.io'] } },
}
<ParaProviderBase
config={{ appName: 'Your App' }}
externalWalletConfig={{
wallets: [],
evmConnector: { config: { chains: [appchain], ssr: true } },
}}
paraClientConfig={{ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY, env: 'production' }}
>
{children}
</ParaProviderBase>连接后,使用 viem 来自 Para 的客户端签署并发送交易到您的应用链。
请参阅示例应用指南中的完整演练:钱包设置(示例应用)