992 lines
34 KiB
HTML
992 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
================================================================================
|
|
TEMPL MIGRATION GUIDE: transactions.html → views/transactions.templ
|
|
================================================================================
|
|
|
|
PAGE OVERVIEW:
|
|
- Transaction history with date-grouped list view
|
|
- Stats: Total Received, Total Sent, Swaps count, Gas Spent
|
|
- Multi-filter bar: Type, Asset, Account, Date range, Search
|
|
- Transaction rows with type icon, details, asset, amount, time, actions
|
|
- Pagination with page size selector
|
|
- Export functionality
|
|
|
|
MAIN TEMPL COMPONENT:
|
|
templ TransactionsPage(data TransactionsData) {
|
|
@layouts.DashboardLayout("transactions") {
|
|
@PageHeader("Transactions", "Activity history across all accounts")
|
|
@TransactionsStatsGrid(data.Stats)
|
|
@TransactionsCard(data.Groups, data.Filter, data.Pagination)
|
|
}
|
|
}
|
|
|
|
HTMX INTEGRATION:
|
|
- Filter dropdowns: hx-get="/transactions" hx-target="#tx-list" hx-include="[name^='filter']"
|
|
- Date range: hx-get="/transactions?from={date}&to={date}" hx-target="#tx-list"
|
|
- Search: hx-get="/transactions?search={query}" hx-trigger="keyup changed delay:300ms"
|
|
- Pagination: hx-get="/transactions?page=2" hx-target="#tx-list" hx-push-url="true"
|
|
- Page size: hx-get="/transactions?limit=25" hx-target="#tx-list"
|
|
- Export: hx-get="/api/transactions/export?format=csv" (triggers download)
|
|
- View on explorer: Client-side window.open()
|
|
- Copy hash: Client-side wa-copy-button
|
|
|
|
SUB-COMPONENTS TO EXTRACT:
|
|
- TransactionsStatsGrid(stats TxStats)
|
|
- TransactionsCard(groups []TxDateGroup, filter TxFilter, pagination Pagination)
|
|
- TransactionFilterBar(filter TxFilter)
|
|
- DateRangeFilter(from, to time.Time)
|
|
- TransactionDateGroup(date string, count int, txs []Transaction)
|
|
- TransactionRow(tx Transaction)
|
|
- TransactionIcon(txType string)
|
|
- TransactionAssetBadge(asset string, toAsset string)
|
|
- TransactionAmount(amount float64, usd float64, isPositive bool)
|
|
- TransactionTime(timestamp time.Time, status string)
|
|
- TransactionActions(hash string, explorerURL string)
|
|
- PaginationControls(pagination Pagination)
|
|
|
|
STATE/PROPS:
|
|
type TransactionsData struct {
|
|
Stats TxStats
|
|
Groups []TxDateGroup
|
|
Filter TxFilter
|
|
Pagination Pagination
|
|
}
|
|
|
|
type TxStats struct {
|
|
TotalReceived float64
|
|
ReceivedCount int
|
|
TotalSent float64
|
|
SentCount int
|
|
SwapCount int
|
|
SwapVolume float64
|
|
TotalGasSpent float64
|
|
}
|
|
|
|
type TxFilter struct {
|
|
Type string // "send", "receive", "swap", "approve", "contract"
|
|
Asset string
|
|
Account string
|
|
FromDate string
|
|
ToDate string
|
|
Search string
|
|
}
|
|
|
|
type TxDateGroup struct {
|
|
Date string
|
|
Count int
|
|
Transactions []Transaction
|
|
}
|
|
|
|
type Transaction struct {
|
|
Type string // "send", "receive", "swap", "approve", "contract"
|
|
Title string
|
|
Description string
|
|
Asset string
|
|
ToAsset string // For swaps
|
|
Amount float64
|
|
AmountUSD float64
|
|
IsPositive bool
|
|
Timestamp time.Time
|
|
Status string // "confirmed", "pending", "failed"
|
|
Hash string
|
|
ExplorerURL string
|
|
}
|
|
|
|
type Pagination struct {
|
|
Page int
|
|
Limit int
|
|
Total int
|
|
TotalPages int
|
|
}
|
|
|
|
HTMX PATTERNS:
|
|
// Multi-filter bar with combined include
|
|
<wa-select hx-get="/transactions"
|
|
hx-target="#tx-list"
|
|
hx-include="[name^='filter-']"
|
|
name="filter-type">
|
|
|
|
// Search with debounce
|
|
<wa-input hx-get="/transactions"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#tx-list"
|
|
hx-include="[name^='filter-']"
|
|
name="filter-search">
|
|
|
|
// Date range picker
|
|
<wa-input type="date"
|
|
hx-get="/transactions"
|
|
hx-trigger="change"
|
|
hx-target="#tx-list"
|
|
hx-include="[name^='filter-']"
|
|
name="filter-from">
|
|
|
|
// Pagination with page size
|
|
<wa-select hx-get="/transactions"
|
|
hx-target="#tx-list"
|
|
hx-include="[name^='filter-']"
|
|
name="limit">
|
|
|
|
// Page number buttons
|
|
<button class="page-btn"
|
|
hx-get="/transactions?page=2"
|
|
hx-target="#tx-list"
|
|
hx-push-url="true">
|
|
|
|
// Export button (non-HTMX, download)
|
|
<wa-button onclick="window.location.href='/api/transactions/export?format=csv'">
|
|
================================================================================
|
|
-->
|
|
<html lang="en" class="wa-cloak">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Transactions - Sonr Motr Wallet</title>
|
|
<script src="https://cdn.sonr.org/wa/autoloader.js"></script>
|
|
<style>
|
|
:root {
|
|
--wa-color-primary: #17c2ff;
|
|
}
|
|
|
|
html, body {
|
|
min-height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-layout {
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: 1px solid var(--wa-color-neutral-200);
|
|
padding: var(--wa-space-m);
|
|
background: var(--wa-color-surface);
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: var(--wa-space-s) var(--wa-space-xs);
|
|
margin-bottom: var(--wa-space-m);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-nav li {
|
|
margin-bottom: var(--wa-space-2xs);
|
|
}
|
|
|
|
.sidebar-nav a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-s);
|
|
padding: var(--wa-space-s) var(--wa-space-m);
|
|
border-radius: var(--wa-radius-m);
|
|
text-decoration: none;
|
|
color: var(--wa-color-neutral-700);
|
|
font-size: var(--wa-font-size-s);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.sidebar-nav a:hover {
|
|
background: var(--wa-color-surface-alt);
|
|
}
|
|
|
|
.sidebar-nav a.active {
|
|
background: var(--wa-color-primary-subtle);
|
|
color: var(--wa-color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.main-content {
|
|
padding: var(--wa-space-xl);
|
|
background: var(--wa-color-surface-alt);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: var(--wa-space-xl);
|
|
}
|
|
|
|
.stats-grid {
|
|
--min-column-size: 180px;
|
|
margin-bottom: var(--wa-space-xl);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--wa-color-surface);
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-m);
|
|
margin-bottom: var(--wa-space-l);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.date-group {
|
|
margin-bottom: var(--wa-space-xl);
|
|
}
|
|
|
|
.date-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-s);
|
|
padding: var(--wa-space-s) 0;
|
|
margin-bottom: var(--wa-space-s);
|
|
border-bottom: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.date-group-header h3 {
|
|
margin: 0;
|
|
font-size: var(--wa-font-size-s);
|
|
font-weight: 600;
|
|
color: var(--wa-color-neutral-700);
|
|
}
|
|
|
|
.date-group-header .tx-count {
|
|
font-size: var(--wa-font-size-xs);
|
|
color: var(--wa-color-neutral-500);
|
|
}
|
|
|
|
.tx-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto auto;
|
|
gap: var(--wa-space-m);
|
|
align-items: center;
|
|
padding: var(--wa-space-m);
|
|
background: var(--wa-color-surface);
|
|
border-radius: var(--wa-radius-m);
|
|
margin-bottom: var(--wa-space-s);
|
|
transition: box-shadow 0.15s;
|
|
}
|
|
|
|
.tx-row:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.tx-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tx-icon.send {
|
|
background: var(--wa-color-danger-subtle);
|
|
color: var(--wa-color-danger);
|
|
}
|
|
|
|
.tx-icon.receive {
|
|
background: var(--wa-color-success-subtle);
|
|
color: var(--wa-color-success);
|
|
}
|
|
|
|
.tx-icon.swap {
|
|
background: var(--wa-color-primary-subtle);
|
|
color: var(--wa-color-primary);
|
|
}
|
|
|
|
.tx-icon.contract {
|
|
background: var(--wa-color-warning-subtle);
|
|
color: var(--wa-color-warning);
|
|
}
|
|
|
|
.tx-icon.approve {
|
|
background: var(--wa-color-neutral-100);
|
|
color: var(--wa-color-neutral-600);
|
|
}
|
|
|
|
.tx-details {
|
|
min-width: 0;
|
|
}
|
|
|
|
.tx-type {
|
|
font-weight: 500;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tx-address {
|
|
font-family: var(--wa-font-mono);
|
|
font-size: var(--wa-font-size-xs);
|
|
color: var(--wa-color-neutral-500);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tx-asset {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-xs);
|
|
}
|
|
|
|
.tx-amount {
|
|
text-align: right;
|
|
}
|
|
|
|
.tx-amount .value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tx-amount .usd {
|
|
font-size: var(--wa-font-size-xs);
|
|
color: var(--wa-color-neutral-500);
|
|
}
|
|
|
|
.tx-amount.positive .value { color: var(--wa-color-success); }
|
|
.tx-amount.negative .value { color: var(--wa-color-danger); }
|
|
|
|
.tx-time {
|
|
text-align: right;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.tx-time .time {
|
|
font-size: var(--wa-font-size-s);
|
|
}
|
|
|
|
.tx-time .status {
|
|
font-size: var(--wa-font-size-xs);
|
|
}
|
|
|
|
.tx-actions {
|
|
display: flex;
|
|
gap: var(--wa-space-2xs);
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--wa-space-m) 0;
|
|
margin-top: var(--wa-space-l);
|
|
border-top: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: var(--wa-font-size-s);
|
|
color: var(--wa-color-neutral-500);
|
|
}
|
|
|
|
.pagination-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-xs);
|
|
}
|
|
|
|
.page-numbers {
|
|
display: flex;
|
|
gap: var(--wa-space-2xs);
|
|
}
|
|
|
|
.page-btn {
|
|
min-width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--wa-radius-s);
|
|
font-size: var(--wa-font-size-s);
|
|
cursor: pointer;
|
|
border: 1px solid var(--wa-color-neutral-200);
|
|
background: var(--wa-color-surface);
|
|
color: var(--wa-color-neutral-700);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.page-btn:hover {
|
|
background: var(--wa-color-surface-alt);
|
|
}
|
|
|
|
.page-btn.active {
|
|
background: var(--wa-color-primary);
|
|
border-color: var(--wa-color-primary);
|
|
color: white;
|
|
}
|
|
|
|
.page-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--wa-space-3xl);
|
|
color: var(--wa-color-neutral-500);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.tx-row {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
.tx-asset, .tx-time {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<wa-page>
|
|
<div class="dashboard-layout">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-avatar initials="S" style="--size: 32px; background: var(--wa-color-primary);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Sonr Wallet</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">sonr1x9f...7k2m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="sidebar-nav">
|
|
<li>
|
|
<a href="accounts.html">
|
|
<wa-icon name="wallet"></wa-icon>
|
|
Accounts
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="transactions.html" class="active">
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
Transactions
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="tokens.html">
|
|
<wa-icon name="coins"></wa-icon>
|
|
Tokens
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="nfts.html">
|
|
<wa-icon name="image"></wa-icon>
|
|
NFTs
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="activity.html">
|
|
<wa-icon name="chart-line"></wa-icon>
|
|
Activity
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<wa-divider style="margin: var(--wa-space-l) 0;"></wa-divider>
|
|
|
|
<ul class="sidebar-nav">
|
|
<li>
|
|
<a href="connections.html">
|
|
<wa-icon name="plug"></wa-icon>
|
|
Connections
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="device.html">
|
|
<wa-icon name="mobile"></wa-icon>
|
|
Devices
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="service.html">
|
|
<wa-icon name="server"></wa-icon>
|
|
Services
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="settings.html">
|
|
<wa-icon name="gear"></wa-icon>
|
|
Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="page-header">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-xl">Transactions</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Activity history across all connected accounts</span>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-button variant="neutral" appearance="outlined" size="small">
|
|
<wa-icon slot="start" name="arrow-down-to-line"></wa-icon>
|
|
Export
|
|
</wa-button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wa-grid stats-grid">
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Total Received</span>
|
|
<span class="wa-heading-xl" style="color: var(--wa-color-success);">
|
|
+<wa-format-number type="currency" currency="USD" value="15420.50" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">42 transactions</span>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Total Sent</span>
|
|
<span class="wa-heading-xl" style="color: var(--wa-color-danger);">
|
|
-<wa-format-number type="currency" currency="USD" value="8234.18" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">28 transactions</span>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Swaps</span>
|
|
<span class="wa-heading-xl">12</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$4,892.00 volume</span>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Gas Spent</span>
|
|
<span class="wa-heading-xl">
|
|
<wa-format-number type="currency" currency="USD" value="127.45" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">All time</span>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<wa-card>
|
|
<div class="filter-bar">
|
|
<wa-select placeholder="All Types" size="small" style="min-width: 140px;" clearable>
|
|
<wa-option value="send">
|
|
<wa-icon slot="prefix" name="arrow-up" style="color: var(--wa-color-danger);"></wa-icon>
|
|
Send
|
|
</wa-option>
|
|
<wa-option value="receive">
|
|
<wa-icon slot="prefix" name="arrow-down" style="color: var(--wa-color-success);"></wa-icon>
|
|
Receive
|
|
</wa-option>
|
|
<wa-option value="swap">
|
|
<wa-icon slot="prefix" name="arrow-right-arrow-left" style="color: var(--wa-color-primary);"></wa-icon>
|
|
Swap
|
|
</wa-option>
|
|
<wa-option value="approve">
|
|
<wa-icon slot="prefix" name="check"></wa-icon>
|
|
Approve
|
|
</wa-option>
|
|
<wa-option value="contract">
|
|
<wa-icon slot="prefix" name="file-code"></wa-icon>
|
|
Contract
|
|
</wa-option>
|
|
</wa-select>
|
|
|
|
<wa-select placeholder="All Assets" size="small" style="min-width: 140px;" clearable>
|
|
<wa-option value="eth">ETH</wa-option>
|
|
<wa-option value="snr">SNR</wa-option>
|
|
<wa-option value="usdc">USDC</wa-option>
|
|
<wa-option value="avax">AVAX</wa-option>
|
|
</wa-select>
|
|
|
|
<wa-select placeholder="All Accounts" size="small" style="min-width: 160px;" clearable>
|
|
<wa-option value="main">Main Wallet</wa-option>
|
|
<wa-option value="trading">Trading</wa-option>
|
|
<wa-option value="savings">Savings</wa-option>
|
|
</wa-select>
|
|
|
|
<wa-input type="date" size="small" style="width: 150px;" placeholder="From date"></wa-input>
|
|
<span style="color: var(--wa-color-neutral-400);">—</span>
|
|
<wa-input type="date" size="small" style="width: 150px;" placeholder="To date"></wa-input>
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
<wa-input placeholder="Search by hash or address..." size="small" style="width: 240px;">
|
|
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
|
</wa-input>
|
|
</div>
|
|
|
|
<div class="date-group">
|
|
<div class="date-group-header">
|
|
<h3>Today</h3>
|
|
<span class="tx-count">3 transactions</span>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon receive">
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Received ETH</div>
|
|
<div class="tx-address">From: 0x742d...35Cb</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="E" style="--size: 24px; background: #627eea;"></wa-avatar>
|
|
<span>ETH</span>
|
|
</div>
|
|
<div class="tx-amount positive">
|
|
<div class="value">+0.25 ETH</div>
|
|
<div class="usd">$586.25</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">2:34 PM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x8f4a2b1c9e3d5f7a0b2c4d6e8f0a1b3c5d7e9f0a1b2c3d4e5f6a7b8c9d0e1f2a" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon swap">
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Swapped SNR → USDC</div>
|
|
<div class="tx-address">via Uniswap V3</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="S" style="--size: 24px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<wa-icon name="arrow-right" style="font-size: 10px; color: var(--wa-color-neutral-400);"></wa-icon>
|
|
<wa-avatar initials="U" style="--size: 24px; background: #2775ca;"></wa-avatar>
|
|
</div>
|
|
<div class="tx-amount">
|
|
<div class="value">500 SNR → 248.50 USDC</div>
|
|
<div class="usd">$248.50</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">11:22 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x7d3e2a1b8c4f6e0d9a5b7c3e1f8a2d4c6b0e9f7a1b2c3d4e5f6a7b8c9d0e1f2a" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon approve">
|
|
<wa-icon name="check"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Approved USDC</div>
|
|
<div class="tx-address">Spender: Uniswap V3 Router</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="U" style="--size: 24px; background: #2775ca;"></wa-avatar>
|
|
<span>USDC</span>
|
|
</div>
|
|
<div class="tx-amount">
|
|
<div class="value">Unlimited</div>
|
|
<div class="usd">—</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">11:20 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-group">
|
|
<div class="date-group-header">
|
|
<h3>Yesterday</h3>
|
|
<span class="tx-count">2 transactions</span>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon send">
|
|
<wa-icon name="arrow-up"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Sent SNR</div>
|
|
<div class="tx-address">To: sonr1k4m...9p3q</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="S" style="--size: 24px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<span>SNR</span>
|
|
</div>
|
|
<div class="tx-amount negative">
|
|
<div class="value">-500 SNR</div>
|
|
<div class="usd">$250.00</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">4:18 PM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x9f8e7d6c5b4a3f2e1d0c9b8a7f6e5d4c3b2a1f0e9d8c7b6a5f4e3d2c1b0a9f8e" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon receive">
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Received AVAX</div>
|
|
<div class="tx-address">From: 0xaBcD...1234</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="A" style="--size: 24px; background: #e84142;"></wa-avatar>
|
|
<span>AVAX</span>
|
|
</div>
|
|
<div class="tx-amount positive">
|
|
<div class="value">+10.00 AVAX</div>
|
|
<div class="usd">$281.50</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">9:45 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-group">
|
|
<div class="date-group-header">
|
|
<h3>January 1, 2026</h3>
|
|
<span class="tx-count">4 transactions</span>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon swap">
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Swapped ETH → USDC</div>
|
|
<div class="tx-address">via Uniswap V3</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="E" style="--size: 24px; background: #627eea;"></wa-avatar>
|
|
<wa-icon name="arrow-right" style="font-size: 10px; color: var(--wa-color-neutral-400);"></wa-icon>
|
|
<wa-avatar initials="U" style="--size: 24px; background: #2775ca;"></wa-avatar>
|
|
</div>
|
|
<div class="tx-amount">
|
|
<div class="value">0.5 ETH → 1,172.50 USDC</div>
|
|
<div class="usd">$1,172.50</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">9:15 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon contract">
|
|
<wa-icon name="file-code"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Contract Interaction</div>
|
|
<div class="tx-address">Staking Contract: 0x5f3c...8a2b</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="S" style="--size: 24px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<span>SNR</span>
|
|
</div>
|
|
<div class="tx-amount negative">
|
|
<div class="value">-1,000 SNR</div>
|
|
<div class="usd">$500.00 staked</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">8:30 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon send">
|
|
<wa-icon name="arrow-up"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Sent ETH</div>
|
|
<div class="tx-address">To: 0x9f8e...7d6c</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="E" style="--size: 24px; background: #627eea;"></wa-avatar>
|
|
<span>ETH</span>
|
|
</div>
|
|
<div class="tx-amount negative">
|
|
<div class="value">-0.15 ETH</div>
|
|
<div class="usd">$351.85</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">7:22 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon receive">
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Received SNR</div>
|
|
<div class="tx-address">From: sonr1abc...xyz9 (Airdrop)</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="S" style="--size: 24px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<span>SNR</span>
|
|
</div>
|
|
<div class="tx-amount positive">
|
|
<div class="value">+2,500 SNR</div>
|
|
<div class="usd">$1,250.00</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">12:00 AM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-group">
|
|
<div class="date-group-header">
|
|
<h3>December 30, 2025</h3>
|
|
<span class="tx-count">1 transaction</span>
|
|
</div>
|
|
|
|
<div class="tx-row">
|
|
<div class="tx-icon receive">
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type">Received AVAX</div>
|
|
<div class="tx-address">From: 0xfEdC...bA98</div>
|
|
</div>
|
|
<div class="tx-asset">
|
|
<wa-avatar initials="A" style="--size: 24px; background: #e84142;"></wa-avatar>
|
|
<span>AVAX</span>
|
|
</div>
|
|
<div class="tx-amount positive">
|
|
<div class="value">+14.83 AVAX</div>
|
|
<div class="usd">$417.53</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">4:48 PM</div>
|
|
<wa-badge variant="success" size="small">Confirmed</wa-badge>
|
|
</div>
|
|
<div class="tx-actions">
|
|
<wa-tooltip content="View on Explorer">
|
|
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-copy-button value="0x7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b" copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Showing <strong>1-10</strong> of <strong>82</strong> transactions
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<wa-select value="10" size="small" style="width: 100px;">
|
|
<wa-option value="10">10 / page</wa-option>
|
|
<wa-option value="25">25 / page</wa-option>
|
|
<wa-option value="50">50 / page</wa-option>
|
|
<wa-option value="100">100 / page</wa-option>
|
|
</wa-select>
|
|
<div class="page-numbers">
|
|
<button class="page-btn" disabled>
|
|
<wa-icon name="chevron-left"></wa-icon>
|
|
</button>
|
|
<button class="page-btn active">1</button>
|
|
<button class="page-btn">2</button>
|
|
<button class="page-btn">3</button>
|
|
<span style="padding: 0 var(--wa-space-xs); color: var(--wa-color-neutral-400);">...</span>
|
|
<button class="page-btn">9</button>
|
|
<button class="page-btn">
|
|
<wa-icon name="chevron-right"></wa-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</main>
|
|
</div>
|
|
</wa-page>
|
|
|
|
<script>
|
|
document.querySelectorAll('.page-btn:not(:disabled)').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
|
|
if (!this.querySelector('wa-icon')) {
|
|
this.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.sidebar-nav a').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
if (this.getAttribute('href') === '#') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|