Implement Explorer

[Arjentix]

🎯 Purpose

Implement explorer service

⚙️ Approach

• Used leptos Rust framework to imlement web backend and frontend for Explorer. This was chosen for several reasons:
  • Using Rust instead of traditional JS for such a thing lets us:
    • Share libraries
    • Have at least half-understandable code for us (considering our Rust expertise)
    • Not to introduce more stuff to install in CI and locally to support another language and framework
  • This is the most popular Rust web-ui framework
  • I had some little experience with it
• Implemented explorer_service crate using vibecoding but with a lot of guidance from my side. This it a fullstack app (backend + frontend) sharing the same code which is a huge selling point of leptos.
• Added mock-responses feature to indexer_service to have some data to show in UI
• You saw how the result look like in Discord message

🧪 How to Test

Step 1. Run Indexer Service

In 1'st terminal run:

RUST_LOG=debug cargo run --bin indexer_service --features mock-responses

Step 2. Option 1. Run Explorer Service natively

In 2'nd terminal run:

cargo install cargo-leptos
RUST_LOG=debug cargo leptos serve

Btw leptos also has cargo leptos watch which allows hot-reload of just saved file changes.

Step 2. Option 2. Run Explorer Service in Docker

In 2'nd terminal run:

INDEXER_RPC_URL="http://host.docker.internal:8779" docker compose up

INDEXER_RPC_URL="http://host.docker.internal:8779" is needed to point Explorer to use Indexer outside of docker, this works on Mac. On Linux it may be INDEXER_RPC_URL="http://172.17.0.1:8779"

Step 3. Open browser

Open link in browser.

For native run it should be: [http://127.0.0.1:3000]

For docker run it should be: [http://127.0.0.1:8080]

🔗 Dependencies

None

🔜 Future Work

• Integrate real indexer implementation
• We may want to publish Explorer and Indexer Docker images as we do for Sequencer. This may be useful for deployment

📋 PR Completion Checklist

• Complete PR description
• Implement the core functionality
• Add/update tests
• Add/update documentation and inline comments

[Pravdyvy]

lgtm.

[schouhy]

LGTM thanks!