Что это такое

Передний шаблон (front-end) для страницы криптовалютной транзакции, которая читается как квитанция. Первый экран отвечает на то, что пользователь действительно хочет узнать: сработало ли, что я отдал, что получил после сборов и какова стоимость. Подробности в цепочке — в одном клике ниже.

Простой HTML, CSS и ванильный JavaScript. Нет фреймворка, нет шага сборки, нет бэкенда.

Особенности

- Заголовок с квитанцией: статус, отправленная сумма, полученная сумма после сборов, общая стоимость

- Журнал (ledger), который согласуется: цена пула, сбор пула, сбор агрегатора, сетевой сбор и аренда суммируются и изменяют реальный баланс кошелька (пример обмена колеблется до последнего лямпорта)

- Вью маршрута: кошелек → агрегатор → пул → кошелек простыми словами, суммы на каждой строке; в Расширенном представлении перечисляются каждое движение с проверкой баланса

- Неудачное состояние: показывает, что ничего не было обменено, что все равно было оплачено и почему

- Состояние посетителя: транзакция чужого кошелька читается как "Этот кошелек", а не как "вы"

- Точные значения: каждое округленное число открывает свое точное значение и копирует его правильно

- Определения на простом языке для жаргона там, где он встречается

- Десктоп и мобильный просмотр, светлая и темная темы, доступно с клавиатуры

- Токены дизайна в одном CSS-файле для быстрой ребрендинговой адаптации

Что вы получаете

index.html (полная интерактивная страница), 18 самостоятельных экранов точного размера (десктоп 1440 и мобильный 390: квитанция, журнал, маршрут, точное значение, глоссарий, технические детали, посетитель, неудача, доска дизайн-системы), CSS-токены и стили, модель рендеринга на ванильном JS, настоящий обмен Solana в качестве примера данных (сырые RPC JSON), README с инструкциями по подключению вашей собственной транзакции, лицензия MIT.

Объем: модель данных была построена и проверена на обмене Solana (Jupiter, маршрутизируемый через Pump.fun AMM). Другие маршруты или типы транзакций отображаются, но их разбивка сборов может потребовать изменений в model.js.

Живой демо оригинальной концепции (шаблон поставляется с нейтральным брендингом "explorer"): https://swiftbotlab.github.io/solscan-receipt-redesign/prototype.html

Вопросы можно задать в чате Getly.