封锁 UI SDK

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

特征

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

安装

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

使用量

1. 交易通知

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

设置

用 NotificationProvider数字 :

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

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

使用交易工具

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数字 :

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

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

使用交易弹出

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. 这些链条列于 链断为了核实你的目标链是否得到支持,访问我们 兼容性检查器。 。 。 .

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

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

API 参考

通知钩

const { openTxToast } = useNotification();

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

使用 CranctionPopup 钩

const { openPopup } = useTransactionPopup();

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

捐款

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

许可证

这个项目根据Blockscout软件许可证获得许可. 见 自由主义 完整条件存档.

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