OpenScan.AI SDK

Add the OpenScan.AI SDK into your app to provide interactivity and instant explorer feedback to your users.

Overview

The OpenScan.AI App SDK is a React toolkit designed to integrate OpenScan.AI transaction notifications and transaction history into your decentralized applications (dApps). It provides an easy-to-use interface for displaying transaction status updates and viewing transaction history with real-time updates and mobile-responsive design.

Key Features

  • Transaction Toast Notifications — Real-time transaction status updates with pending, success, and error states
  • Transaction History Popup — View recent transactions for specific addresses or entire chains
  • Transaction Interpretation — Detailed transaction summaries and interpretations
  • Multi-chain Support — Compatible with any blockchain that has an OpenScan.AI (or Blockscout-compatible) explorer instance
  • Mobile-responsive Design — Optimized for both desktop and mobile experiences

Installation

Install the SDK using npm or yarn:

Terminal window
npm install @openscan-ai/app-sdk
# or
yarn add @openscan-ai/app-sdk

Transaction Toast Notifications

The transaction toast feature provides real-time notifications for transaction status updates, showing pending, success, and error states with detailed transaction information.

Setup

Wrap your application with the NotificationProvider:

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


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

Usage

Use the useNotification hook to display transaction toasts:

import { useNotification } from "@openscan-ai/app-sdk";


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


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


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


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

Toast Features

  • Real-time status updates (pending, success, error)
  • Transaction interpretation and summaries
  • Links to block explorer
  • Automatic status polling
  • Error handling with revert reasons

Transaction History Popup

The transaction history popup allows users to view recent transactions for a specific address or all transactions on a chain.

Setup

Wrap your application with the TransactionPopupProvider:

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


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

Usage

Use the useTransactionPopup hook to open transaction history:

import { useTransactionPopup } from "@openscan-ai/app-sdk";


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


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


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


  return (
    <div>
      <button onClick={showAddressTransactions}>
        View Address Transactions
      </button>
      <button onClick={showAllTransactions}>View All Transactions</button>
    </div>
  );
}
  • View recent transactions
  • Filter by address
  • Transaction status indicators
  • Transaction interpretation
  • Links to block explorer
  • Mobile-responsive design
  • Loading states and error handling

Supported Chains

The SDK is compatible with any blockchain that has an OpenScan.AI (or Blockscout-compatible) explorer instance with API v2 support, including XDC Network at xdcscan.io.

Common Supported Chain IDs

  • 50 — XDC Network Mainnet
  • 51 — XDC Apothem Testnet

API Reference

useNotification Hook

const { openTxToast } = useNotification();


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

useTransactionPopup Hook

const { openPopup } = useTransactionPopup();


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

Complete Integration Example

Here’s a complete example showing how to integrate both features:

import React from "react";
import {
  NotificationProvider,
  TransactionPopupProvider,
  useNotification,
  useTransactionPopup,
} from "@openscan-ai/app-sdk";


function TransactionComponent() {
  const { openTxToast } = useNotification();
  const { openPopup } = useTransactionPopup();


  const sendTransaction = async () => {
    const txHash = "0x123..."; // Your transaction hash
    await openTxToast("50", txHash);
  };


  const viewHistory = () => {
    openPopup({
      chainId: "50",
      address: "0x456...", // Optional
    });
  };


  return (
    <div>
      <button onClick={sendTransaction}>Send Transaction</button>
      <button onClick={viewHistory}>View Transaction History</button>
    </div>
  );
}


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


export default App;
Edit page on github
MCP Server Docker Compose