What it is

A front-end template for a crypto transaction page that reads like a receipt. The first screen answers what the user actually wants to know: did it work, what did I give, what did I get after fees, and what did it cost. The on-chain detail is still there, one click down.

Plain HTML, CSS and vanilla JavaScript. No framework, no build step, no backend.

Features

- Receipt-first header: status, amount sent, amount received after fees, total cost

- Ledger that reconciles: pool price, pool fee, aggregator fee, network fee and rent add up to the wallet's real balance change (the sample swap balances to the last lamport)

- Route view: wallet to aggregator to pool to wallet in plain words, amounts on each line; a Detailed view lists every movement with a balance check

- Failed state: shows that nothing was swapped, what was still paid, and why

- Visitor state: someone else's transaction reads "This wallet" instead of "you"

- Exact values: every rounded number opens its exact value and copies it correctly

- Plain-language definitions for jargon, right where it appears

- Desktop and mobile, light and dark theme, keyboard accessible

- Design tokens in one CSS file for quick rebranding

What you get

index.html (the full interactive page), 18 standalone screens at exact sizes (desktop 1440 and mobile 390: receipt, ledger, route, exact value, glossary, technical details, visitor, failed, design-system board), CSS tokens and styles, the render model in vanilla JS, a real Solana swap bundled as sample data (raw RPC JSON), README with how to plug in your own transaction, MIT license.

Scope: the data model was built and checked on a Solana swap (Jupiter routed through Pump.fun AMM). Other routes or transaction types render, but their fee breakdown may need changes in model.js.

Live demo of the original concept build (the template ships with neutral "explorer" branding): https://swiftbotlab.github.io/solscan-receipt-redesign/prototype.html

Questions are answered in the Getly chat.