ICONBridge Scan

Dashboard
Message List
Message Detail

Inspiration

ICON Bridge is an early iteration of ICON’s cutting-edge interoperability product, BTP, which allows cross-chain transfers and integration with any blockchain that supports smart contracts.

When I came across the ICON Bridge, I realized that it needed a tool to track messages and transactions operated through.

What it does

ICONBridge Scan is an Explorer that allows users to look up relay messages and transactions being sent through ICON Bridge.

ICONBridge Scan is typically made of:

Indexer: that fetches the raw data from the on-chain, extracts, transforms, and stores it in the database in an efficient way to provide quick access to the blockchain data
API: an API that queries the database
Explorer: A frontend app that displays the data

How we built it

ICONBridge-Scan drawio

Build cronjobs to fetch raw data from ICON Tracker API and BscScan API.
Build a synchronized cronjob to collect/extract and transform raw data to unified data, and store data in a centralized database.
Expose API to provide data to client-side web app.
Utilizing NextJS framework, leveraging Server-Side Rendering to build modern web app displays data.

Challenges we ran into

The frontend app is developed on NextJS v13, a popular react framework with server-side rendering. The NextJS v13 had many changes from the previous version, I took much time to play with it.
The ICON Bridge testnet is not stable, and it takes much time to investigate the reasons.
Building a prototype requires knowledge in many fields frontend, backend, and blockchain.