TypeScript SDK: 钱包适配器 (React)

目的

指导如何在React中使用@aptos-labs/wallet-adapter-react实现钱包连接和前端交易提交。最终用户通过浏览器钱包（Petra、Nightly等）签署交易——绝不使用原始私钥。

必须遵循

1. 1. 使用@aptos-labs/wallet-adapter-react进行前端钱包集成——这是标准的React适配器。
2. 用AptosWalletAdapterProvider包裹应用根组件——所有useWallet()调用都需要此上下文。
3. 使用useWallet()钩子在React组件中访问钱包功能。
4. 在前端使用钱包适配器的signAndSubmitTransaction（来自useWallet()）——而不是SDK直接提供的aptos.signAndSubmitTransaction。
5. 提交后始终调用aptos.waitForTransaction({ transactionHash })——钱包在交易被接受时返回，而非已提交时。

严禁事项

1. 1. 不要在浏览器/前端使用Account.generate()或原始私钥——为最终用户使用钱包适配器。
2. 不要在React组件中使用SDK的aptos.signAndSubmitTransaction——使用useWallet()中钱包适配器的版本。
3. 不要硬编码钱包名称——使用useWallet()中的wallets数组获取动态列表。

安装

bash
npm install @aptos-labs/wallet-adapter-react

现代AIP-62标准钱包（Petra、Nightly等）会自动检测，无需额外安装包。旧版钱包需要单独安装其插件包。

提供者设置

用AptosWalletAdapterProvider包裹应用根组件：

tsx
// main.tsx 或 App.tsx
import { AptosWalletAdapterProvider } from @aptos-labs/wallet-adapter-react;
import { Network } from @aptos-labs/ts-sdk;

function App() {
return (
autoConnect={true}
dappConfig={{
network: Network.TESTNET
}}
onError={(error) => console.error(钱包错误:, error)}
>


);
}

useWallet() 钩子

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

function MyComponent() {
const {
account, // 当前连接账户 { address, publicKey }
connected, // 布尔值：是否已连接钱包？
wallet, // 当前钱包信息 { name, icon, url }
wallets, // 可用钱包数组
connect, // (walletName) => Promise
disconnect, // () => Promise
signAndSubmitTransaction, // 提交入口函数调用（在前端使用此方法）
signTransaction, // 仅签名不提交
submitTransaction, // 提交已签名的交易
signMessage, // 签名任意消息
signMessageAndVerify, // 签名并验证消息
changeNetwork, // 切换网络（并非所有钱包支持）
network // 当前网络信息
} = useWallet();
}

前端交易模式

使用带InputTransactionData的类型化负载：

tsx
// entry-functions/increment.ts
import { InputTransactionData } from @aptos-labs/wallet-adapter-react;
import { MODULE_ADDRESS } from ../lib/aptos;

export function buildIncrementPayload(): InputTransactionData {
return {
data: {
function: ${MODULE_ADDRESS}::counter::increment,
functionArguments: []
}
};
}

tsx
// components/IncrementButton.tsx
import { useWallet } from @aptos-labs/wallet-adapter-react;
import { aptos } from ../lib/aptos;
import { buildIncrementPayload } from ../entry-functions/increment;

function IncrementButton() {
const { signAndSubmitTransaction } = useWallet();

const handleClick = async () => {
try {
const response = await signAndSubmitTransaction(buildIncrementPayload());
await aptos.waitForTransaction({
transactionHash: response.hash
});
} catch (error) {
console.error(交易失败:, error);
}
};

return 增加;
}

钱包连接UI

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

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

if (!connected) {
return (

return (

常见错误

参考

• - 钱包适配器: https://aptos.dev/build/sdks/wallet-adapter/dapp
• 模式: TYPESCRIPTSDK.md
• 相关: ts-sdk-transactions, ts-sdk-client,