钱包设置

我们如何设置应用链钱包以便为终端用户提供无缝体验

Adrift 使用由 Para 提供支持的嵌入式钱包，使用户的注册和游戏体验更加顺畅。用户可以立即登录，无需浏览器扩展或助记词，并通过将钱包作为其身份和所有链上操作的签名，与应用链进行交互。

本指南解释了 Adrift 如何实现这一流程，以及如何为您的应用链项目构建类似的钱包用户体验。

注册流程

  • 提供者设置：

    • 应用程序被包裹在 ParaProvider 中（来自 @getpara/react-sdk），用于管理钱包状态和连接。
    • 提供者已为 Pacifica 应用链配置，并根据 Adrift 的品牌进行了定制。

  • 连接按钮：

    • ConnectWallet 组件会显示一个“登录”按钮（如果用户未连接），或者显示用户的地址（如果已连接）。
    • 点击按钮会打开 Para 模态框，用于注册（创建或连接嵌入式钱包）。

  • 用户体验：

    • 用户只需点击几下即可完成注册，无需助记词或扩展。
    • 钱包由 Para 嵌入并管理，但如果需要，可以导出或连接到外部钱包。
// Example: ParaProvider setup
<ParaProviderBase
  config={{ appName: "Adrift" }}
  externalWalletConfig={{ wallets: [], evmConnector: { config: { chains: [pacifica], ssr: true } } }}
  paraClientConfig={{ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY, env }}
  paraModalConfig={{ /* ...branding and UX options... */ }}
>
  {children}
</ParaProviderBase>

钱包即身份

  • 身份：

    • 每位用户在注册时都会分配一个兼容 EVM 的地址。
    • 该地址用作其在游戏中的唯一身份以及所有应用链交互的标识。
    • 应用程序使用 useAccount、useWallet 和 useMe 等钩子来访问当前用户的钱包和玩家数据。

  • 玩家数据：

    • 钱包地址用于获取和存储玩家状态（例如签到、状态、获胜/被淘汰等）。
// Example: Accessing the current user's wallet
const { embedded } = useAccount()
const { data: wallet } = useWallet()
const me = useMe() // gets player data for wallet address

交易签名与应用链操作

  • 交易流程：

    • 当用户执行某个操作（例如“签到”）时，应用会使用 Para 钱包对交易进行签名并将其发送到应用链。
    • 应用通过 Para 的集成，使用 viem 库创建一个用于签名的钱包客户端。

  • 签名示例：

    • 应用检查钱包余额、估算 gas，并使用嵌入式钱包发送交易。
    • 发送后，应用会轮询交易确认并更新用户界面。
// Example: Signing and sending a transaction
const { viemClient } = useViemClient({ walletClientConfig: { chain: pacifica, transport: http() } })
const tx = await viemClient.writeContract({
  address: gameData.address,
  abi: [parseAbiItem("function checkIn()")],
  functionName: "checkIn",
  chain: pacifica,
  account: viemClient.account,
  gas: gas * BigInt(2)
})

Adrift 中的关键文件与组件

通过遵循此模式，您可以为自己的应用链项目构建一个无缝的钱包用户体验，使用户的入门和链上操作尽可能简单。

Indexer

Adrift 索引器的工作原理、Adrift 应用如何使用它，以及它如何利用 Syndicate 的排序器设计。

On this page

注册流程
钱包即身份
交易签名与应用链操作
Adrift 中的关键文件与组件