x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
nebula/_migrate/transactions.html

992 lines
34 KiB
HTML
Raw Permalink Normal View History

chore(init): Setup Makefile for build and test automation
2026-01-05 13:28:43 -05:00
<!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>
Reference in New Issue Copy Permalink