SE-2 + Blockscout
Scaffold-ETH enhanced with Blockscout SDK, showcasing real-time blockchain transaction notification
Demo
About
This project combines Scaffold-ETH 2's robust development framework with Blockscout's powerful SDK to create an enhanced dApp development experience. Key features include: - Seamless integration with Scaffold-ETH's existing hooks and components. - Real-time blockchain transaction notification - An easy example for showing transaction history of connected address
How it's made
This project is built on Scaffold-ETH 2's foundation using Next.js, TypeScript, Wagmi, and RainbowKit. The core enhancement comes from integrating Blockscout's App SDK (@blockscout/app-sdk) to provide advanced blockchain exploration capabilities directly within the familiar Scaffold-ETH environment. Technical implementation: - Integrated Blockscout's useTransactionPopup hook from @blockscout/app-sdk for interactive transaction views - Leveraged Scaffold-ETH's existing useAccount and useTargetNetwork hooks for seamless wallet and network integration - Created a simple one-click transaction history feature that dynamically adapts to the connected wallet address and current network - Maintained full compatibility with all existing Scaffold-ETH components, including the Address component for consistent UI The integration demonstrates how external SDKs can enhance Scaffold-ETH without disrupting its core architecture. The useTransactionPopup hook automatically handles network detection and provides real-time transaction notifications, while the implementation remains clean and developer-friendly. Key technical highlights: - Dynamic network ID detection using targetNetwork.id for multi-chain compatibility - Address-specific transaction filtering using the connected wallet address - Minimal code footprint - the entire integration requires just a few lines of code - Responsive popup interface that works seamlessly across devices This approach showcases how developers can easily extend Scaffold-ETH's capabilities with specialized tools like Blockscout's SDK, creating a more comprehensive development and user experience without sacrificing simplicity.