钱包设置

如何将您的钱包连接到应用链并设计终端用户钱包的用户体验

设置您的钱包以与应用链交互非常简单。最简单的方法是使用您的应用链区块浏览器,它提供了一键添加网络到 MetaMask 或任何兼容 EVM 的钱包的选项。

将您的应用链添加到 MetaMask 或其他钱包

  1. 访问您的应用链区块浏览器(例如,https://explorer.your-appchain.syndicate.io)。
  2. 连接您的钱包。
  3. 点击“添加到 MetaMask”或“添加网络”按钮。
  4. 在您的钱包中批准网络添加。
  5. 通过点击钱包顶部的网络下拉菜单,在 MetaMask 中切换网络。MetaMask 将自动使用所选网络的正确 RPC、链 ID 和货币符号。
  6. 您可以在 MetaMask 的设置中“网络”选项下查看和管理您的网络。

有关在 MetaMask 中配置网络的更多信息,请参阅 MetaMask 网络配置指南

设计终端用户钱包用户体验

  1. 使用用户现有的钱包(WalletConnect、注入式钱包如 MetaMask、Coinbase Wallet 扩展)
  2. 完全通过嵌入式钱包提供商(例如 Para)将钱包抽象化,像我们在示例应用中所做的那样

1. 连接现有钱包

以下是使用 wagmi 配合 WalletConnect 和注入式钱包的最小设置。将 rpcUrlchainIdcurrency 替换为您的应用链值。

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 的客户端签署并发送交易到您的应用链。

请参阅示例应用指南中的完整演练:钱包设置(示例应用)