# @aptos-labs/wallet-adapter-react 中文文档

规范地址：https://npmcn.com/package/%40aptos-labs/wallet-adapter-react/

版本：8\.3\.3
npm 元数据更新时间：2026-03-28T07:35:31.793Z
中文译文更新时间：2026-11-06T13:07:03.372Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aptos-labs/wallet-adapter-react
原文对照：https://npmcn.com/package/%40aptos-labs/wallet-adapter-react/?lang=original
项目主页：https://github.com/aptos-labs/aptos-wallet-adapter
源码仓库：https://github.com/aptos-labs/aptos-wallet-adapter

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：283 kB，43 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-12-07T01:50:03.106Z
- 最新版本发布：2026-03-28T07:35:31.501Z
- 近 30 天下载量：20571（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：181（近 12 个月 32 个）

## 中文简介

Aptos 钱包适应器反应提供者

## 安装

```sh
npm install @aptos-labs/wallet-adapter-react
```

也可以使用：`pnpm add @aptos-labs/wallet-adapter-react`、`yarn add @aptos-labs/wallet-adapter-react`、`bun add @aptos-labs/wallet-adapter-react`

## README

> **_注:_** 此文档用于钱包适应器反应 `v4.0.0` 和上面完全兼容 Aptos 类型SDK V2. 钱包适配器反应 `v^3.*.*` 参考 [本指南](https://npmcn.com/package/%40aptos-labs/wallet-adapter-react/READMEV2.md)

# 钱包适配器反应提供者

Aptos 钱包适应器的反应提供者包

想要使用适配器的 Dapps 应当安装此软件包和其他支持的钱包包.

### 支助

反应提供者遵循 [钱包标准](https://github.com/aptos-labs/wallet-standard/tree/main) 并支持下列所需职能

##### [所需标准职能](https://github.com/aptos-labs/wallet-standard/blob/main/src/detect.ts#L16)

```
account
connect
disconnect
network
onAccountChange
onNetworkChange
signMessage
signTransaction
```

##### 其他职能

```
signAndSubmitTransaction
signMessageAndVerify
submitTransaction
```

### 使用量

#### 安装依赖关系

安装您想要包含在应用程序中的钱包依赖性 . 要做到这一点,你可以看看我们 [支持的钱包列表](https://github.com/aptos-labs/aptos-wallet-adapter#supported-wallet-packages)。每个钱包是 npm 软件包的链接,您可以从其中安装.

下一个,安装 `@aptos-labs/wallet-adapter-react`

```cli
pnpm i @aptos-labs/wallet-adapter-react
```

使用 npm 数据

```cli
npm i @aptos-labs/wallet-adapter-react
```

#### 导入依赖性

导入 `AptosWalletAdapterProvider`。 。 。 .

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

将您的应用程序与提供方包装, 传递相关的道具.

```tsx
import { Network } from "@aptos-labs/ts-sdk";

<AptosWalletAdapterProvider
  autoConnect={true}
  dappConfig={{ network: Network.MAINNET, aptosApiKey: "my-generated-api-key" }}
  onError={(error) => {
    console.log("error", error);
  }}
>
  <App />
</AptosWalletAdapterProvider>;
```

#### 可用的提供者道具

-   `autoConnect` - 道具表示该道具是否应该与之前连接的钱包自动连接.
-   `dappConfig` 用来初始化Dapp的配置.
    -   `network` - dapp的网络工作
    -   `aptosApiKey` - 从 [https://developers.aptoslabs.com/docs/api-访问](https://developers.aptoslabs.com/docs/api-access)
-   `onError` - 适配器投出错误时的回调函数起火
-   `optInWallets` -适配器默认情况下检测并添加了AIP-62标准钱包,有时您可能想要选择使用特定的钱包. 此道具允许您定义您想要支持的 AIP- 62 标准钱包 .

```tsx
<AptosWalletAdapterProvider
  ...
  optInWallets={["Petra"]}
  ...
>
  <App />
</AptosWalletAdapterProvider>
```

-   `disableTelemetry` - 一个布尔旗来禁用适配器遥测工具,默认是虚假的

```tsx
<AptosWalletAdapterProvider
  ...
  disableTelemetry={true}
  ...
>
  <App />
</AptosWalletAdapterProvider>
```

#### 使用钱包

在任何要使用钱包道具的页面上导入 `useWallet` 从 `@aptos-labs/wallet-adapter-react`

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

然后可以使用导出属性

```tsx
const {
  account,
  changeNetwork,
  connect,
  connected,
  disconnect,
  network,
  signAndSubmitTransaction,
  signMessage,
  signMessageAndVerify,
  signTransaction,
  submitTransaction,
  wallet,
  wallets,
} = useWallet();
```

#### 实例

##### 账户

```tsx
// The account address as a typed AccountAddress
<div>{account?.address.toString()}</div>
// The account public key as a typed PublicKey
<div>{account?.publicKey.toString()}</div>
```

##### 网络

```tsx
<div>{network?.name}</div>
```

##### 钱包

```tsx
<div>{wallet?.name}</div>
<div>{wallet?.icon}</div>
<div>{wallet?.url}</div>
```

##### 钱包

```tsx
{
  wallets.map((wallet) => <p>{wallet.name}</p>);
}
```

##### 连接( wallet Name

```tsx
const onConnect = async (walletName) => {
  await connect(walletName);
};

<button onClick={() => onConnect(wallet.name)}>{wallet.name}</button>;
```

##### 断开( )

```tsx
<button onClick={disconnect}>Disconnect</button>
```

##### 签名交接( 负载)

```tsx
const onSignAndSubmitTransaction = async () => {
  const response = await signAndSubmitTransaction({
    data: {
      function: "0x1::coin::transfer",
      typeArguments: [APTOS_COIN],
      functionArguments: [account.address, 1], // 1 is in Octas
    },
  });
  // if you want to wait for transaction
  try {
    await aptos.waitForTransaction({ transactionHash: response.hash });
  } catch (error) {
    console.error(error);
  }
};

<button onClick={onSignAndSubmitTransaction}>
  Sign and submit transaction
</button>;
```

##### 签名并提交 BCS 交易( 负载)

```tsx
const onSignAndSubmitBCSTransaction = async () => {
  const response = await signAndSubmitTransaction({
    data: {
      function: "0x1::coin::transfer",
      typeArguments: [parseTypeTag(APTOS_COIN)],
      functionArguments: [AccountAddress.from(account.address), new U64(1)],
    },
  });
  // if you want to wait for transaction
  try {
    await aptos.waitForTransaction({ transactionHash: response.hash });
  } catch (error) {
    console.error(error);
  }
};

<button onClick={onSignAndSubmitTransaction}>
  Sign and submit BCS transaction
</button>;
```

##### 信号( 有效载荷)

```tsx
const onSignMessage = async () => {
  const payload = {
    message: "Hello from Aptos Wallet Adapter",
    nonce: "random_string",
  };
  const response = await signMessage(payload);
};

<button onClick={onSignMessage}>Sign message</button>;
```

##### 签名交易( 负载QQ交易)

```tsx
const onSignTransaction = async () => {
  const payload: InputTransactionData = {
    data: {
      function: "0x1::coin::transfer",
      typeArguments: [APTOS_COIN],
      functionArguments: [account?.address.toString(), 1],
    },
  };
  const response = await signTransaction({
    transactionOrPayload: payload,
  });
};

const onSignRawTransaction = async () => {
  const aptosConfig = new AptosConfig({ network: Network.MAINNET });
  const aptos = new Aptos(aptosConfig);
  const transactionToSign = await aptos.transaction.build.simple({
    sender: account.address,
    data: {
      function: "0x1::coin::transfer",
      typeArguments: [APTOS_COIN],
      functionArguments: [account.address.toString(), 1],
    },
  });
  const response = await signTransaction({
    transactionOrPayload: transactionToSign,
  });
};

<button onClick={onSignTransaction}>Sign transaction</button>;
<button onClick={onSignRawTransaction}>Sign raw transaction</button>;
```

##### 签名 MessageAndVify( 载荷)

```tsx
const onSignMessageAndVerify = async () => {
  const payload = {
    message: "Hello from Aptos Wallet Adapter",
    nonce: "random_string",
  };
  const response = await signMessageAndVerify(payload);
};

<button onClick={onSignMessageAndVerify}>Sign message and verify</button>;
```

### 使用 UI 软件包( 建议)

作为钱包适配器Repo的一部分,我们提供一个连接UI包的钱包,提供钱包连接按钮和钱包选择模式.

可用的UI软件包是

-   [阴影/ ui](https://npmcn.com/package/apps/nextjs-example/README.md#use-shadcnui-wallet-selector-for-your-own-app)
-   [毛里求斯](https://npmcn.com/package/%40aptos-labs/wallet-adapter-mui-design/)

如果您想从应用程序中的现有组件和样式创建自己的钱包选择器UI, `@aptos-labs/wallet-adapter-react` 提供一系列无头组件和公用设施来简化此流程,以便您能够专注于写入CSS而不是执行业务逻辑. 详情请查看 [构建您的钱包选择器](https://npmcn.com/package/%40aptos-labs/wallet-adapter-react/docs/BYO-wallet-selector.md) 文档.

## 常见问题

### @aptos-labs/wallet-adapter-react 是什么？

Aptos 钱包适应器反应提供者

### 如何安装 @aptos-labs/wallet-adapter-react？

在项目目录运行 npm install @aptos-labs/wallet-adapter-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aptos-labs/wallet-adapter-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aptos-labs/wallet-adapter-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aptos-labs/wallet-adapter-react 可以商用吗？

@aptos-labs/wallet-adapter-react 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aptos-labs/wallet-adapter-react 的下载量有多少？

根据 npm 官方下载统计，@aptos-labs/wallet-adapter-react 在 2026/10/07 – 2026/11/05 这 30 天内被下载 20,571 次，日均约 686 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aptos-labs/wallet-adapter-react 还在维护吗？

最新版本 8\.3\.3 发布于 2026/03/28（7 个月前）；至今共发布 181 个版本，其中过去 12 个月发布了 32 个；首次发布于 2022/12/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。