跳到主要内容

Aptos Wallet Adapter

Aptos Wallet Adapter 是 React 生态常用的钱包连接层。UKey Wallet 遵循 Wallet Standard，因此在浏览器环境可被 Adapter 自动发现，项目侧通常不需要为 UKey Wallet 编写额外注册代码。

ℹ️

只要用户环境中已安装或可访问 UKey Wallet，钱包列表中就会出现 UKey Wallet。你只需要渲染连接入口，并按 Adapter 返回的账户状态继续处理业务。

部署​

npm install @aptos-labs/wallet-adapter-react @aptos-labs/ts-sdk

基础设置​

在应用根组件外层挂载 AptosWalletAdapterProvider，让页面内组件都能通过 Hook 读取钱包状态：

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";

function AptosWalletShell() {
  return (
    <AptosWalletAdapterProvider autoConnect={true}>
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}

钱包连接​

基础连接按钮​

import { useWallet } from "@aptos-labs/wallet-adapter-react";

function AptosConnectPanel() {
  const { connect, disconnect, account, connected, wallets } = useWallet();

  if (connected && account) {
    return (
      <div>
        <p>
          已连接: {account.address.slice(0, 6)}...{account.address.slice(-4)}
        </p>
        <button onClick={disconnect}>断开连接</button>
      </div>
    );
  }

  return (
    <div>
      {wallets?.map((wallet) => (
        <button key={wallet.name} onClick={() => connect(wallet.name)}>
          <img src={wallet.icon} alt={wallet.name} width={24} />
          {wallet.name}
        </button>
      ))}
    </div>
  );
}

自定义钱包选择弹窗​

如果产品需要自己的视觉样式，可以读取 wallets 列表后自行渲染弹窗，再调用 connect(wallet.name) 完成连接：

import { useWallet } from "@aptos-labs/wallet-adapter-react";
import { useState } from "react";

function AptosWalletPicker() {
  const { wallets, connect } = useWallet();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>连接钱包</button>

      {isOpen && (
        <div className="modal">
          <h2>选择钱包</h2>
          {wallets?.map((wallet) => (
            <button
              key={wallet.name}
              onClick={() => {
                connect(wallet.name);
                setIsOpen(false);
              }}
            >
              <img src={wallet.icon} alt={wallet.name} width={24} />
              {wallet.name}
            </button>
          ))}
          <button onClick={() => setIsOpen(false)}>关闭</button>
        </div>
      )}
    </>
  );
}

交易项​

签名并确认提交交易​

import { useWallet } from "@aptos-labs/wallet-adapter-react";
import { Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";

function AptosTransferAction() {
  const { account, signAndSubmitTransaction } = useWallet();

  const config = new AptosConfig({ network: Network.MAINNET });
  const aptos = new Aptos(config);

  const handleTransfer = async () => {
    if (!account) return;

    const requestResult = await signAndSubmitTransaction({
      sender: account.address,
      data: {
        function: "0x1::aptos_account::transfer",
        functionArguments: [
          "0xdemo_receiver...", // 接收地址
          100000000, // 金额参考值，单位为 octas（1 APT = 100000000）
        ],
      },
    });

    // 等候交易确认
    const txResult = await aptos.waitForTransaction({
      transactionHash: requestResult.hash,
    });

    console.log("交易已完成确认:", txResult);
  };

  return <button onClick={handleTransfer}>转账 APT</button>;
}

签消息​

import { useWallet } from "@aptos-labs/wallet-adapter-react";

function AptosMessageSigner() {
  const { signMessage, account } = useWallet();

  const handleSign = async () => {
    const requestResult = await signMessage({
      message: "欢迎使用 UKey Wallet Demo!",
      nonce: crypto.randomUUID(),
    });

    console.log("生成的签名:", requestResult.signature);
    console.log("拼出的完整消息:", requestResult.fullMessage);
  };

  return <button onClick={handleSign}>签名消息</button>;
}

网络配置​

可以在 Provider 的 dappConfig 中指定默认网络和 API Key，确保钱包连接、交易构造和链上查询都指向同一个网络环境：

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { Network } from "@aptos-labs/ts-sdk";

function AptosNetworkShell() {
  return (
    <AptosWalletAdapterProvider
      autoConnect={true}
      dappConfig={{
        network: Network.MAINNET,
        // 可按需补充额外网络配置
        aptosApiKeys: {
          [Network.MAINNET]: "YOUR_API_KEY",
          [Network.TESTNET]: "YOUR_TESTNET_KEY",
        },
      }}
    >
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}

Hooks 速览​

Hook说明
useWallet()读取钱包状态与调用钱包能力的主 Hook
account当前已连接账户
connected是否已完成连接
wallets当前环境支持的钱包列表
connect(walletName)连接指定钱包
disconnect()断开当前连接
signAndSubmitTransaction(payload)签名并提交交易
signMessage(request)请求钱包签名消息
network当前网络环境信息

相关资源​