{"id":28363014,"url":"https://github.com/blockscout/app-sdk","last_synced_at":"2025-06-24T06:30:46.359Z","repository":{"id":291143915,"uuid":"976661352","full_name":"blockscout/app-sdk","owner":"blockscout","description":"Blockscout toolkit to build onchain apps","archived":false,"fork":false,"pushed_at":"2025-06-17T07:40:03.000Z","size":407,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-21T01:53:37.912Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blockscout.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-02T14:10:56.000Z","updated_at":"2025-06-21T00:28:04.000Z","dependencies_parsed_at":"2025-05-02T17:48:57.570Z","dependency_job_id":"4dcf36b6-2aa9-473b-9a1d-36910e0742f5","html_url":"https://github.com/blockscout/app-sdk","commit_stats":null,"previous_names":["blockscout/app-sdk"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/blockscout/app-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blockscout%2Fapp-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blockscout%2Fapp-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blockscout%2Fapp-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blockscout%2Fapp-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blockscout","download_url":"https://codeload.github.com/blockscout/app-sdk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blockscout%2Fapp-sdk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261049417,"owners_count":23102537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-28T17:11:48.268Z","updated_at":"2025-06-24T06:30:46.347Z","avatar_url":"https://github.com/blockscout.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blockscout UI SDK\n\nA React SDK for integrating Blockscout transaction notifications and transaction history into your dApp.\n\n## Features\n\n- Transaction Toast Notifications\n- Transaction History Popup\n- Transaction interpretation and summaries\n- Support for multiple chains\n- Mobile-responsive design\n\n## Installation\n\n```bash\nnpm install @blockscout/app-sdk\n# or\nyarn add @blockscout/app-sdk\n```\n\n## Usage\n\n### 1. Transaction Toast Notifications\n\nThe transaction toast feature provides real-time notifications for transaction status updates. It shows pending, success, and error states with detailed transaction information.\n\n#### Setup\n\nWrap your application with the `NotificationProvider`:\n\n```tsx\nimport { NotificationProvider } from \"@blockscout/app-sdk\";\n\nfunction App() {\n  return (\n    \u003cNotificationProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/NotificationProvider\u003e\n  );\n}\n```\n\n#### Using Transaction Toast\n\n```tsx\nimport { useNotification } from \"@blockscout/app-sdk\";\n\nfunction YourComponent() {\n  const { openTxToast } = useNotification();\n\n  const handleTransaction = async (txHash) =\u003e {\n    try {\n      // Your transaction logic here\n      await sendTransaction();\n\n      // Show transaction toast\n      openTxToast(\"1\", txHash); // '1' is the chain ID for Ethereum mainnet\n    } catch (error) {\n      console.error(\"Transaction failed:\", error);\n    }\n  };\n\n  return (\n    \u003cbutton onClick={() =\u003e handleTransaction(\"0x123...\")}\u003e\n      Send Transaction\n    \u003c/button\u003e\n  );\n}\n```\n\n### 2. Transaction History Popup\n\nThe transaction history popup allows users to view recent transactions for a specific address or all transactions on a chain.\n\n#### Setup\n\nWrap your application with the `TransactionPopupProvider`:\n\n```tsx\nimport { TransactionPopupProvider } from \"@blockscout/app-sdk\";\n\nfunction App() {\n  return (\n    \u003cTransactionPopupProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/TransactionPopupProvider\u003e\n  );\n}\n```\n\n#### Using Transaction Popup\n\n```tsx\nimport { useTransactionPopup } from \"@blockscout/app-sdk\";\n\nfunction YourComponent() {\n  const { openPopup } = useTransactionPopup();\n\n  // Show transactions for a specific address\n  const showAddressTransactions = () =\u003e {\n    openPopup({\n      chainId: \"1\", // Ethereum mainnet\n      address: \"0x123...\", // Optional: specific address\n    });\n  };\n\n  // Show all transactions for a chain\n  const showAllTransactions = () =\u003e {\n    openPopup({\n      chainId: \"1\", // Ethereum mainnet\n    });\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={showAddressTransactions}\u003e\n        View Address Transactions\n      \u003c/button\u003e\n      \u003cbutton onClick={showAllTransactions}\u003eView All Transactions\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Features\n\n### Transaction Toast\n\n- Real-time status updates (pending, success, error)\n- Transaction interpretation and summaries\n- Links to block explorer\n- Automatic status polling\n- Error handling with revert reasons\n\n### Transaction Popup\n\n- View recent transactions\n- Filter by address\n- Transaction status indicators\n- Transaction interpretation\n- Links to block explorer\n- Mobile-responsive design\n- Loading states and error handling\n\n## Chain Compatibility\n\nThe 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/).\n\nHere are some common supported chain IDs:\n\n- `1`: Ethereum Mainnet\n- `137`: Polygon Mainnet\n- `42161`: Arbitrum One\n- `10`: Optimism\n\n## API Reference\n\n### useNotification Hook\n\n```typescript\nconst { openTxToast } = useNotification();\n\n// Open a transaction toast\nopenTxToast(chainId: string, hash: string): Promise\u003cvoid\u003e\n```\n\n### useTransactionPopup Hook\n\n```typescript\nconst { openPopup } = useTransactionPopup();\n\n// Open transaction popup\nopenPopup(options: {\n  chainId: string;\n  address?: string;\n}): void\n```\n\n## Contributing\n\nThis project is currently closed for external contributions. We appreciate your interest, but we are not accepting pull requests at this time.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblockscout%2Fapp-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblockscout%2Fapp-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblockscout%2Fapp-sdk/lists"}