# @blockscout/app-sdk 中文文档

规范地址：https://npmcn.com/package/%40blockscout/app-sdk/

版本：1\.0\.1
npm 元数据更新时间：2026-10-20T18:16:26.235Z
中文译文更新时间：2026-11-08T07:31:39.449Z
软件包许可：SEE LICENSE IN \./LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40blockscout/app-sdk
原文对照：https://npmcn.com/package/%40blockscout/app-sdk/?lang=original
项目主页：https://github.com/blockscout/app-sdk#readme
源码仓库：https://github.com/blockscout/app-sdk

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

- 包体积（解压后）：255 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：7 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2025-05-02T14:18:01.879Z
- 最新版本发布：2026-10-20T18:16:25.468Z
- 近 30 天下载量：2796（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 2 个）

## 中文简介

屏蔽集成的反应 SDK

## 安装

```sh
npm install @blockscout/app-sdk
```

也可以使用：`pnpm add @blockscout/app-sdk`、`yarn add @blockscout/app-sdk`、`bun add @blockscout/app-sdk`

## README

# 封锁 UI SDK

用于将 Blockscout 交易通知和交易历史整合到您的 dApp 中的 SDK 反应 .

## 特征

-   交易通知
-   交易历史弹出
-   交易口译和摘要
-   支持多个链条
-   移动式响应设计

## 安装

```bash
npm install @blockscout/app-sdk
# or
yarn add @blockscout/app-sdk
```

## 使用量

### 1\. 交易通知

交易吐司功能为交易状态更新提供实时通知. 它显示有详细交易信息的待决、成功和出错状态.

#### 设置

用 `NotificationProvider`数字 :

```tsx
import { NotificationProvider } from "@blockscout/app-sdk";

function App() {
  return (
    <NotificationProvider>
      <YourApp />
    </NotificationProvider>
  );
}
```

#### 使用交易工具

```tsx
import { useNotification } from "@blockscout/app-sdk";

function YourComponent() {
  const { openTxToast } = useNotification();

  const handleTransaction = async (txHash) => {
    try {
      // Your transaction logic here
      await sendTransaction();

      // Show transaction toast
      openTxToast("1", txHash); // '1' is the chain ID for Ethereum mainnet
    } catch (error) {
      console.error("Transaction failed:", error);
    }
  };

  return (
    <button onClick={() => handleTransaction("0x123...")}>
      Send Transaction
    </button>
  );
}
```

### 2\. 交易历史

交易历史弹出可以让用户查看最近的交易中某个特定地址或链上的所有交易.

#### 设置

用 `TransactionPopupProvider`数字 :

```tsx
import { TransactionPopupProvider } from "@blockscout/app-sdk";

function App() {
  return (
    <TransactionPopupProvider>
      <YourApp />
    </TransactionPopupProvider>
  );
}
```

#### 使用交易弹出

```tsx
import { useTransactionPopup } from "@blockscout/app-sdk";

function YourComponent() {
  const { openPopup } = useTransactionPopup();

  // Show transactions for a specific address
  const showAddressTransactions = () => {
    openPopup({
      chainId: "1", // Ethereum mainnet
      address: "0x123...", // Optional: specific address
    });
  };

  // Show all transactions for a chain
  const showAllTransactions = () => {
    openPopup({
      chainId: "1", // Ethereum mainnet
    });
  };

  return (
    <div>
      <button onClick={showAddressTransactions}>
        View Address Transactions
      </button>
      <button onClick={showAllTransactions}>View All Transactions</button>
    </div>
  );
}
```

## 特征

### 汇兑

-   实时状态更新( 待决、成功、出错)
-   交易口译和摘要
-   块浏览器的链接
-   自动状态投票
-   处理返回原因出错

### 交易弹出

-   查看最近的交易
-   通过地址过滤
-   交易状况指标
-   交易解释
-   块浏览器的链接
-   移动式响应设计
-   装入状态和错误处理

## 链式相容性

SDK与任何拥有Blockscout探索器实例的区块链兼容,支持API v2. 这些链条列于 [链断](https://chains.blockscout.com/)为了核实你的目标链是否得到支持,访问我们 [兼容性检查器](https://sdk-compatibility.blockscout.com/)。 。 。 .

以下是一些常用支持的链式ID:

-   `1`: 伊特鲁姆主网
-   `137`: 多边形主网
-   `42161`坐标: 1
-   `10`: 乐观

## API 参考

### 通知钩

```typescript
const { openTxToast } = useNotification();

// Open a transaction toast
openTxToast(chainId: string, hash: string): Promise<void>
```

### 使用 CranctionPopup 钩

```typescript
const { openPopup } = useTransactionPopup();

// Open transaction popup
openPopup(options: {
  chainId: string;
  address?: string;
}): void
```

## 捐款

该项目目前因外部捐款而关闭。 我们感谢你的关心,但我们目前不接受拉动请求.

## 许可证

[![License: Blockscout Software Licence](https://img.shields.io/badge/License-Blockscout%20Software%20Licence-blue.svg)](https://npmcn.com/package/%40blockscout/app-sdk/LICENSE)

这个项目根据Blockscout软件许可证获得许可. 见 [自由主义](https://npmcn.com/package/%40blockscout/app-sdk/LICENSE) 完整条件存档.

列入该储存库的第三方部件仍须遵守各自的许可证。 关于组件级许可条款,见依赖清单和捆绑的第三方通知.

## 常见问题

### @blockscout/app-sdk 是什么？

屏蔽集成的反应 SDK

### 如何安装 @blockscout/app-sdk？

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

### @blockscout/app-sdk 支持 TypeScript 吗？

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

### @blockscout/app-sdk 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @blockscout/app-sdk 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @blockscout/app-sdk 可以商用吗？

@blockscout/app-sdk 使用 SEE LICENSE IN \./LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @blockscout/app-sdk 的下载量有多少？

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

### @blockscout/app-sdk 还在维护吗？

最新版本 1\.0\.1 发布于 2026/10/21（18 天前）；至今共发布 23 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/05/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。