https://github.com/blockscout/app-sdk
Blockscout toolkit to build onchain apps
https://github.com/blockscout/app-sdk
Last synced: 12 months ago
JSON representation
Blockscout toolkit to build onchain apps
- Host: GitHub
- URL: https://github.com/blockscout/app-sdk
- Owner: blockscout
- Created: 2025-05-02T14:10:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-17T07:40:03.000Z (about 1 year ago)
- Last Synced: 2025-06-21T01:53:37.912Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 397 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blockscout UI SDK
A React SDK for integrating Blockscout transaction notifications and transaction history into your dApp.
## Features
- Transaction Toast Notifications
- Transaction History Popup
- Transaction interpretation and summaries
- Support for multiple chains
- Mobile-responsive design
## Installation
```bash
npm install @blockscout/app-sdk
# or
yarn add @blockscout/app-sdk
```
## Usage
### 1. Transaction Toast Notifications
The transaction toast feature provides real-time notifications for transaction status updates. It shows pending, success, and error states with detailed transaction information.
#### Setup
Wrap your application with the `NotificationProvider`:
```tsx
import { NotificationProvider } from "@blockscout/app-sdk";
function App() {
return (
);
}
```
#### Using Transaction Toast
```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 (
handleTransaction("0x123...")}>
Send Transaction
);
}
```
### 2. 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`:
```tsx
import { TransactionPopupProvider } from "@blockscout/app-sdk";
function App() {
return (
);
}
```
#### Using Transaction Popup
```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 (
View Address Transactions
View All Transactions
);
}
```
## Features
### Transaction Toast
- Real-time status updates (pending, success, error)
- Transaction interpretation and summaries
- Links to block explorer
- Automatic status polling
- Error handling with revert reasons
### Transaction Popup
- View recent transactions
- Filter by address
- Transaction status indicators
- Transaction interpretation
- Links to block explorer
- Mobile-responsive design
- Loading states and error handling
## Chain Compatibility
The SDK is compatible with any blockchain that has a Blockscout explorer instance with API v2 support. These chains are listed in the [Chainscout](https://chains.blockscout.com/). To verify if your target chain is supported, visit our [compatibility checker](https://sdk-compatibility.blockscout.com/).
Here are some common supported chain IDs:
- `1`: Ethereum Mainnet
- `137`: Polygon Mainnet
- `42161`: Arbitrum One
- `10`: Optimism
## API Reference
### useNotification Hook
```typescript
const { openTxToast } = useNotification();
// Open a transaction toast
openTxToast(chainId: string, hash: string): Promise
```
### useTransactionPopup Hook
```typescript
const { openPopup } = useTransactionPopup();
// Open transaction popup
openPopup(options: {
chainId: string;
address?: string;
}): void
```
## Contributing
This project is currently closed for external contributions. We appreciate your interest, but we are not accepting pull requests at this time.
## License
MIT