2144 lines
100 KiB
HTML
2144 lines
100 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
================================================================================
|
|
TEMPL MIGRATION GUIDE: dashboard.html → views/dashboard.templ
|
|
================================================================================
|
|
|
|
PAGE OVERVIEW:
|
|
- Unified dashboard combining accounts, transactions, tokens, NFTs, activity
|
|
- Vercel-style tab navigation using wa-tab-group
|
|
- Top-right avatar dropdown for settings navigation
|
|
- No sidebar - all navigation through tabs and dropdown
|
|
|
|
MAIN TEMPL COMPONENT:
|
|
templ DashboardPage(data DashboardData, activeTab string) {
|
|
@layouts.AppLayout() {
|
|
@DashboardHeader()
|
|
@DashboardTabs(activeTab) {
|
|
@AccountsPanel(data.Accounts)
|
|
@TransactionsPanel(data.Transactions)
|
|
@TokensPanel(data.Tokens)
|
|
@NFTsPanel(data.NFTs)
|
|
@ActivityPanel(data.Activity)
|
|
}
|
|
}
|
|
}
|
|
|
|
HTMX INTEGRATION:
|
|
- Tab switching: hx-get="/dashboard?tab=tokens" hx-target="#tab-content" hx-push-url="true"
|
|
- Dropdown navigation: Standard links to /connections, /device, /service, /settings
|
|
================================================================================
|
|
-->
|
|
<html lang="en" class="wa-cloak">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Dashboard - Sonr Motr Wallet</title>
|
|
<script src="https://cdn.sonr.org/wa/autoloader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
|
<script src="charts.js" defer></script>
|
|
<style>
|
|
:root {
|
|
--wa-color-primary: #17c2ff;
|
|
}
|
|
|
|
html, body {
|
|
min-height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: var(--wa-color-surface-alt);
|
|
}
|
|
|
|
/* Header - Vercel compact */
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--wa-space-s) var(--wa-space-l);
|
|
background: var(--wa-color-surface);
|
|
}
|
|
|
|
.header-wrapper {
|
|
background: var(--wa-color-surface);
|
|
border-bottom: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-m);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-m);
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 600;
|
|
font-size: var(--wa-font-size-l);
|
|
color: var(--wa-color-neutral-900);
|
|
}
|
|
|
|
/* Main content - Vercel-style centered container */
|
|
.main-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--wa-space-l);
|
|
}
|
|
|
|
/* Tab styling - Vercel compact */
|
|
.dashboard-tabs wa-tab-group::part(base) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tabs-nav-wrapper {
|
|
background: var(--wa-color-surface);
|
|
border-bottom: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.dashboard-tabs wa-tab-group::part(nav) {
|
|
background: transparent;
|
|
border-bottom: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.dashboard-tabs wa-tab-panel {
|
|
padding: var(--wa-space-l) 0;
|
|
}
|
|
|
|
.dashboard-tabs wa-tab-panel::part(base) {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Card header alignment - ensure justified spacing */
|
|
wa-card [slot="header"] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
wa-card [slot="header"].wa-flank {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--wa-space-m);
|
|
}
|
|
|
|
/* Stats grid shared styles - compact */
|
|
.stats-grid {
|
|
--min-column-size: 160px;
|
|
margin-bottom: var(--wa-space-l);
|
|
gap: var(--wa-space-m);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--wa-color-surface);
|
|
}
|
|
|
|
/* Token row styles */
|
|
.token-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--wa-space-m) 0;
|
|
border-bottom: 1px solid var(--wa-color-neutral-100);
|
|
}
|
|
|
|
.token-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.token-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-s);
|
|
flex: 1;
|
|
}
|
|
|
|
.token-balance {
|
|
text-align: right;
|
|
}
|
|
|
|
.token-actions {
|
|
margin-left: var(--wa-space-m);
|
|
}
|
|
|
|
/* Transaction table */
|
|
.tx-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.tx-table th {
|
|
text-align: left;
|
|
padding: var(--wa-space-s) var(--wa-space-m);
|
|
font-size: var(--wa-font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--wa-color-neutral-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-bottom: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.tx-table td {
|
|
padding: var(--wa-space-m);
|
|
border-bottom: 1px solid var(--wa-color-neutral-100);
|
|
font-size: var(--wa-font-size-s);
|
|
}
|
|
|
|
.tx-table tr:hover td {
|
|
background: var(--wa-color-surface-alt);
|
|
}
|
|
|
|
.tx-type {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-xs);
|
|
}
|
|
|
|
.tx-type.send { color: var(--wa-color-danger); }
|
|
.tx-type.receive { color: var(--wa-color-success); }
|
|
.tx-type.swap { color: var(--wa-color-primary); }
|
|
|
|
/* Quick actions */
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: var(--wa-space-s);
|
|
}
|
|
|
|
/* Date group */
|
|
.date-group {
|
|
margin-bottom: var(--wa-space-l);
|
|
}
|
|
|
|
.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-label { 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-actions { display: flex; gap: var(--wa-space-2xs); }
|
|
|
|
/* Filter bar */
|
|
.filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-m);
|
|
margin-bottom: var(--wa-space-l);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Tokens table styles */
|
|
.tokens-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.tokens-table th {
|
|
text-align: left;
|
|
padding: var(--wa-space-m) var(--wa-space-l);
|
|
font-size: var(--wa-font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--wa-color-neutral-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-bottom: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.tokens-table th.sortable { cursor: pointer; user-select: none; }
|
|
.tokens-table th.sortable:hover { color: var(--wa-color-neutral-700); }
|
|
|
|
.tokens-table td {
|
|
padding: var(--wa-space-m) var(--wa-space-l);
|
|
border-bottom: 1px solid var(--wa-color-neutral-100);
|
|
font-size: var(--wa-font-size-s);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tokens-table tr:hover td { background: var(--wa-color-surface-alt); }
|
|
.tokens-table tr:last-child td { border-bottom: none; }
|
|
|
|
.token-cell { display: flex; align-items: center; gap: var(--wa-space-s); }
|
|
|
|
.spark-chart { width: 100px; height: 32px; }
|
|
.spark-chart svg { width: 100%; height: 100%; }
|
|
.spark-up { stroke: var(--wa-color-success); }
|
|
.spark-down { stroke: var(--wa-color-danger); }
|
|
|
|
.change-positive { color: var(--wa-color-success); }
|
|
.change-negative { color: var(--wa-color-danger); }
|
|
|
|
.network-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-2xs);
|
|
padding: var(--wa-space-2xs) var(--wa-space-xs);
|
|
background: var(--wa-color-surface-alt);
|
|
border-radius: var(--wa-radius-s);
|
|
font-size: var(--wa-font-size-xs);
|
|
color: var(--wa-color-neutral-600);
|
|
}
|
|
|
|
.table-actions { display: flex; gap: var(--wa-space-xs); }
|
|
|
|
/* NFT styles */
|
|
.nft-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: var(--wa-space-l);
|
|
}
|
|
|
|
.nft-card {
|
|
background: var(--wa-color-surface);
|
|
border-radius: var(--wa-radius-l);
|
|
overflow: hidden;
|
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nft-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.nft-image {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
background: var(--wa-color-neutral-100);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nft-image img { width: 100%; height: 100%; object-fit: cover; }
|
|
.nft-badge { position: absolute; top: var(--wa-space-s); right: var(--wa-space-s); }
|
|
.nft-actions {
|
|
position: absolute;
|
|
bottom: var(--wa-space-s);
|
|
right: var(--wa-space-s);
|
|
display: flex;
|
|
gap: var(--wa-space-2xs);
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.nft-card:hover .nft-actions { opacity: 1; }
|
|
.nft-actions wa-icon-button {
|
|
background: var(--wa-color-surface);
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.nft-info { padding: var(--wa-space-m); }
|
|
.nft-collection { display: flex; align-items: center; gap: var(--wa-space-2xs); margin-bottom: var(--wa-space-2xs); }
|
|
.nft-collection-name { font-size: var(--wa-font-size-xs); color: var(--wa-color-neutral-500); }
|
|
.nft-name { font-weight: 600; margin-bottom: var(--wa-space-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.nft-price-row { display: flex; justify-content: space-between; align-items: center; }
|
|
.nft-floor { font-size: var(--wa-font-size-xs); color: var(--wa-color-neutral-500); }
|
|
.nft-value { font-weight: 600; color: var(--wa-color-primary); }
|
|
|
|
/* Collection cards */
|
|
.collection-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-m);
|
|
padding: var(--wa-space-m);
|
|
background: var(--wa-color-surface-alt);
|
|
border-radius: var(--wa-radius-m);
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.collection-card:hover { background: var(--wa-color-neutral-100); }
|
|
|
|
.collection-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--wa-radius-m);
|
|
overflow: hidden;
|
|
background: var(--wa-color-neutral-100);
|
|
}
|
|
|
|
.collection-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
/* Activity styles */
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--wa-space-l);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.content-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.activity-card { grid-column: 1 / -1; }
|
|
|
|
/* Portfolio chart */
|
|
.portfolio-chart-card { grid-column: span 2; }
|
|
@media (max-width: 900px) { .portfolio-chart-card { grid-column: span 1; } }
|
|
.portfolio-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--wa-space-s); }
|
|
.chart-container { min-height: 240px; }
|
|
|
|
/* Address mono */
|
|
.address-mono {
|
|
font-family: var(--wa-font-mono);
|
|
font-size: var(--wa-font-size-xs);
|
|
}
|
|
|
|
/* Pagination */
|
|
.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; }
|
|
|
|
@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="app-layout">
|
|
<!-- Header with avatar dropdown on right -->
|
|
<div class="header-wrapper">
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<wa-icon name="cube" style="font-size: 24px; color: var(--wa-color-primary);"></wa-icon>
|
|
<span class="logo-text">Sonr Wallet</span>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<wa-dropdown>
|
|
<wa-avatar slot="trigger" initials="S" style="--size: 36px; background: var(--wa-color-primary); cursor: pointer;"></wa-avatar>
|
|
|
|
<div style="padding: var(--wa-space-m); border-bottom: 1px solid var(--wa-color-neutral-200);">
|
|
<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>
|
|
|
|
<wa-dropdown-item href="connections.html">
|
|
<wa-icon slot="icon" name="plug"></wa-icon>
|
|
Connections
|
|
</wa-dropdown-item>
|
|
<wa-dropdown-item href="device.html">
|
|
<wa-icon slot="icon" name="mobile"></wa-icon>
|
|
Devices
|
|
</wa-dropdown-item>
|
|
<wa-dropdown-item href="service.html">
|
|
<wa-icon slot="icon" name="server"></wa-icon>
|
|
Services
|
|
</wa-dropdown-item>
|
|
<wa-dropdown-item href="settings.html">
|
|
<wa-icon slot="icon" name="gear"></wa-icon>
|
|
Settings
|
|
</wa-dropdown-item>
|
|
<wa-divider></wa-divider>
|
|
<wa-dropdown-item variant="danger">
|
|
<wa-icon slot="icon" name="arrow-right-from-bracket"></wa-icon>
|
|
Sign Out
|
|
</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<!-- Main content with tabs -->
|
|
<main class="main-content">
|
|
<div class="content-container">
|
|
<div class="dashboard-tabs">
|
|
<wa-tab-group>
|
|
<wa-tab panel="accounts">
|
|
<wa-icon name="wallet"></wa-icon>
|
|
Accounts
|
|
</wa-tab>
|
|
<wa-tab panel="transactions">
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
Transactions
|
|
</wa-tab>
|
|
<wa-tab panel="tokens">
|
|
<wa-icon name="coins"></wa-icon>
|
|
Tokens
|
|
</wa-tab>
|
|
<wa-tab panel="nfts">
|
|
<wa-icon name="image"></wa-icon>
|
|
NFTs
|
|
</wa-tab>
|
|
<wa-tab panel="activity">
|
|
<wa-icon name="chart-line"></wa-icon>
|
|
Activity
|
|
</wa-tab>
|
|
|
|
<wa-tab-panel name="accounts">
|
|
<header style="margin-bottom: var(--wa-space-l);">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-l">Accounts</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Manage your crypto assets and balances</span>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<wa-button variant="neutral" appearance="outlined" size="small" id="open-receive-drawer">
|
|
<wa-icon slot="start" name="arrow-down"></wa-icon>
|
|
Receive
|
|
</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined" size="small" id="open-send-drawer">
|
|
<wa-icon slot="start" name="arrow-up"></wa-icon>
|
|
Send
|
|
</wa-button>
|
|
<wa-button variant="brand" size="small" id="open-swap-drawer">
|
|
<wa-icon slot="start" name="arrow-right-arrow-left"></wa-icon>
|
|
Swap
|
|
</wa-button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wa-grid stats-grid">
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-primary-subtle);">
|
|
<wa-icon slot="icon" name="wallet" style="color: var(--wa-color-primary);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Total Balance</span>
|
|
<span class="wa-cluster wa-gap-xs">
|
|
<span class="wa-heading-2xl">
|
|
<wa-format-number type="currency" currency="USD" value="12847.32" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<wa-badge variant="success" pill>+2.4% <wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-success-subtle);">
|
|
<wa-icon slot="icon" name="chart-line" style="color: var(--wa-color-success);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">24h Change</span>
|
|
<span class="wa-cluster wa-gap-xs">
|
|
<span class="wa-heading-2xl" style="color: var(--wa-color-success);">+$302.18</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card portfolio-chart-card">
|
|
<div class="portfolio-chart-header">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-m">Portfolio Performance</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Asset allocation over time</span>
|
|
</div>
|
|
<wa-radio-group value="1w" orientation="horizontal" id="portfolio-timeframe">
|
|
<wa-radio appearance="button" value="1d">1D</wa-radio>
|
|
<wa-radio appearance="button" value="1w">1W</wa-radio>
|
|
<wa-radio appearance="button" value="1m">1M</wa-radio>
|
|
<wa-radio appearance="button" value="1y">1Y</wa-radio>
|
|
</wa-radio-group>
|
|
</div>
|
|
<div id="portfolio-chart-container" class="chart-container"></div>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<div class="wa-grid" style="--min-column-size: 360px; gap: var(--wa-space-l);">
|
|
<wa-card>
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Token Balances</span>
|
|
<wa-button appearance="plain" size="small">
|
|
<wa-icon name="plus"></wa-icon>
|
|
Add Token
|
|
</wa-button>
|
|
</div>
|
|
|
|
<div class="token-row">
|
|
<div class="token-info">
|
|
<wa-avatar initials="S" style="--size: 40px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Sonr</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">SNR</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-balance">
|
|
<div class="wa-stack wa-gap-0" style="align-items: flex-end;">
|
|
<span class="wa-heading-s">8,432.50</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$4,216.25</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-actions">
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-up"></wa-icon>Send</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-down"></wa-icon>Receive</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="token-row">
|
|
<div class="token-info">
|
|
<wa-avatar initials="E" style="--size: 40px; background: #627eea;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Ethereum</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">ETH</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-balance">
|
|
<div class="wa-stack wa-gap-0" style="align-items: flex-end;">
|
|
<span class="wa-heading-s">2.847</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$6,682.04</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-actions">
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-up"></wa-icon>Send</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-down"></wa-icon>Receive</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="token-row">
|
|
<div class="token-info">
|
|
<wa-avatar initials="U" style="--size: 40px; background: #2775ca;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">USD Coin</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">USDC</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-balance">
|
|
<div class="wa-stack wa-gap-0" style="align-items: flex-end;">
|
|
<span class="wa-heading-s">1,250.00</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$1,250.00</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-actions">
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-up"></wa-icon>Send</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-down"></wa-icon>Receive</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="token-row">
|
|
<div class="token-info">
|
|
<wa-avatar initials="A" style="--size: 40px; background: #e84142;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Avalanche</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">AVAX</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-balance">
|
|
<div class="wa-stack wa-gap-0" style="align-items: flex-end;">
|
|
<span class="wa-heading-s">24.83</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$699.03</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-actions">
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-up"></wa-icon>Send</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-down"></wa-icon>Receive</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card>
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Recent Transactions</span>
|
|
<wa-button appearance="plain" size="small">View All</wa-button>
|
|
</div>
|
|
|
|
<table class="tx-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Asset</th>
|
|
<th>Amount</th>
|
|
<th>Date</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="tx-type receive">
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
Receive
|
|
</span>
|
|
</td>
|
|
<td>ETH</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span style="color: var(--wa-color-success);">+0.25 ETH</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$586.25</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span>Today</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">2:34 PM</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<wa-copy-button value="0x8f4a2b1c9e3d5f7a0b2c4d6e8f0a1b3c5d7e9f0a" copy-label="Copy hash"></wa-copy-button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="tx-type send">
|
|
<wa-icon name="arrow-up"></wa-icon>
|
|
Send
|
|
</span>
|
|
</td>
|
|
<td>SNR</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span style="color: var(--wa-color-danger);">-500 SNR</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$250.00</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span>Yesterday</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">11:22 AM</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<wa-copy-button value="0x7d3e2a1b8c4f6e0d9a5b7c3e1f8a2d4c6b0e9f7a" copy-label="Copy hash"></wa-copy-button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="tx-type swap">
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
Swap
|
|
</span>
|
|
</td>
|
|
<td>ETH → USDC</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span>0.5 ETH</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">→ 1,172.50 USDC</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span>Jan 1</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">9:15 AM</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<wa-copy-button value="0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b" copy-label="Copy hash"></wa-copy-button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<wa-card style="margin-top: var(--wa-space-xl);">
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Connected Accounts</span>
|
|
<wa-button appearance="plain" size="small" id="open-create-account">
|
|
<wa-icon slot="start" name="plus"></wa-icon>
|
|
Create
|
|
</wa-button>
|
|
</div>
|
|
|
|
<div class="wa-grid" style="--min-column-size: 280px;">
|
|
<div class="wa-flank" style="padding: var(--wa-space-s); background: var(--wa-color-surface-alt); border-radius: var(--wa-radius-m);">
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-avatar initials="M" style="--size: 40px; background: var(--wa-color-primary);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Main Wallet</span>
|
|
<span class="address-mono">sonr1x9f...7k2m</span>
|
|
</div>
|
|
</div>
|
|
<wa-badge variant="success" pill>Active</wa-badge>
|
|
</div>
|
|
|
|
<div class="wa-flank" style="padding: var(--wa-space-s); background: var(--wa-color-surface-alt); border-radius: var(--wa-radius-m);">
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-avatar initials="T" style="--size: 40px; background: var(--wa-color-neutral-400);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Trading</span>
|
|
<span class="address-mono">sonr1k4m...9p3q</span>
|
|
</div>
|
|
</div>
|
|
<wa-icon-button name="ellipsis-vertical" label="Options"></wa-icon-button>
|
|
</div>
|
|
|
|
<div class="wa-flank" style="padding: var(--wa-space-s); background: var(--wa-color-surface-alt); border-radius: var(--wa-radius-m);">
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-avatar initials="S" style="--size: 40px; background: var(--wa-color-neutral-400);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Savings</span>
|
|
<span class="address-mono">sonr1r7t...2w8x</span>
|
|
</div>
|
|
</div>
|
|
<wa-icon-button name="ellipsis-vertical" label="Options"></wa-icon-button>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</wa-tab-panel>
|
|
|
|
<wa-tab-panel name="transactions">
|
|
<header style="margin-bottom: var(--wa-space-l);">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-l">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-l" 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-l" 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-l">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-l">
|
|
<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-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>
|
|
|
|
<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-label">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-label">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>
|
|
|
|
<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-label">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-label">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="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-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>
|
|
</wa-tab-panel>
|
|
|
|
<wa-tab-panel name="tokens">
|
|
<header style="margin-bottom: var(--wa-space-l);">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-l">Tokens</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">All crypto assets across Sonr networks</span>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-button variant="neutral" appearance="outlined" size="small">
|
|
<wa-icon slot="start" name="plus"></wa-icon>
|
|
Import Token
|
|
</wa-button>
|
|
<wa-button variant="brand" size="small">
|
|
<wa-icon slot="start" name="arrow-right-arrow-left"></wa-icon>
|
|
Swap
|
|
</wa-button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wa-grid stats-grid">
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Portfolio Value</span>
|
|
<span class="wa-heading-2xl">
|
|
<wa-format-number type="currency" currency="USD" value="12847.32" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<span class="wa-caption-s change-positive">
|
|
<wa-icon name="arrow-trend-up" style="font-size: 12px;"></wa-icon>
|
|
+$302.18 (2.4%) today
|
|
</span>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Portfolio Allocation</span>
|
|
<div style="display: flex; height: 8px; border-radius: var(--wa-radius-s); overflow: hidden; margin-bottom: var(--wa-space-xs);">
|
|
<div style="width: 52%; background: #627eea;"></div>
|
|
<div style="width: 33%; background: linear-gradient(135deg, #17c2ff, #0090ff);"></div>
|
|
<div style="width: 10%; background: #2775ca;"></div>
|
|
<div style="width: 5%; background: #e84142;"></div>
|
|
</div>
|
|
<div style="display: flex; flex-wrap: wrap; gap: var(--wa-space-m);">
|
|
<span style="display: flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-xs);"><span style="width: 8px; height: 8px; border-radius: 50%; background: #627eea;"></span>ETH 52%</span>
|
|
<span style="display: flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-xs);"><span style="width: 8px; height: 8px; border-radius: 50%; background: #17c2ff;"></span>SNR 33%</span>
|
|
<span style="display: flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-xs);"><span style="width: 8px; height: 8px; border-radius: 50%; background: #2775ca;"></span>USDC 10%</span>
|
|
<span style="display: flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-xs);"><span style="width: 8px; height: 8px; border-radius: 50%; background: #e84142;"></span>AVAX 5%</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Total Assets</span>
|
|
<span class="wa-heading-2xl">7</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">across 3 networks</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<wa-card>
|
|
<div class="filter-bar">
|
|
<wa-input placeholder="Search tokens..." size="small" style="width: 200px;">
|
|
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
|
</wa-input>
|
|
</div>
|
|
|
|
<table class="tokens-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="sortable">Asset <wa-icon name="sort" style="font-size: 10px; margin-left: 4px;"></wa-icon></th>
|
|
<th>Network</th>
|
|
<th class="sortable">Price <wa-icon name="sort" style="font-size: 10px; margin-left: 4px;"></wa-icon></th>
|
|
<th>24h Chart</th>
|
|
<th class="sortable">24h Change <wa-icon name="sort" style="font-size: 10px; margin-left: 4px;"></wa-icon></th>
|
|
<th class="sortable">Holdings <wa-icon name="sort" style="font-size: 10px; margin-left: 4px;"></wa-icon></th>
|
|
<th class="sortable">Value <wa-icon name="sort" style="font-size: 10px; margin-left: 4px;"></wa-icon></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="token-cell">
|
|
<wa-avatar initials="E" style="--size: 36px; background: #627eea;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Ethereum</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">ETH</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="network-badge">
|
|
<wa-icon name="circle" variant="solid" style="font-size: 6px; color: #627eea;"></wa-icon>
|
|
Ethereum
|
|
</span>
|
|
</td>
|
|
<td><wa-format-number type="currency" currency="USD" value="2345.67" lang="en-US"></wa-format-number></td>
|
|
<td>
|
|
<div class="spark-chart">
|
|
<svg viewBox="0 0 100 32" preserveAspectRatio="none">
|
|
<polyline class="spark-up" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0,20 10,22 20,18 30,19 40,15 50,16 60,12 70,14 80,10 90,8 100,6" />
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td><span class="change-positive"><wa-icon name="arrow-up" style="font-size: 10px;"></wa-icon> +3.24%</span></td>
|
|
<td><div class="wa-stack wa-gap-0"><span>2.847 ETH</span></div></td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">$6,682.04</span>
|
|
<span class="wa-caption-xs change-positive">+$209.51</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<wa-tooltip content="Send"><wa-icon-button name="arrow-up" label="Send"></wa-icon-button></wa-tooltip>
|
|
<wa-tooltip content="Receive"><wa-icon-button name="arrow-down" label="Receive"></wa-icon-button></wa-tooltip>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="More"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="chart-simple"></wa-icon>View Chart</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<div class="token-cell">
|
|
<wa-avatar initials="S" style="--size: 36px; background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Sonr</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">SNR</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="network-badge">
|
|
<wa-icon name="circle" variant="solid" style="font-size: 6px; color: #17c2ff;"></wa-icon>
|
|
Sonr Mainnet
|
|
</span>
|
|
</td>
|
|
<td><wa-format-number type="currency" currency="USD" value="0.50" lang="en-US"></wa-format-number></td>
|
|
<td>
|
|
<div class="spark-chart">
|
|
<svg viewBox="0 0 100 32" preserveAspectRatio="none">
|
|
<polyline class="spark-up" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0,24 10,22 20,20 30,22 40,18 50,16 60,14 70,16 80,12 90,10 100,8" />
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td><span class="change-positive"><wa-icon name="arrow-up" style="font-size: 10px;"></wa-icon> +5.67%</span></td>
|
|
<td><div class="wa-stack wa-gap-0"><span>8,432.50 SNR</span></div></td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">$4,216.25</span>
|
|
<span class="wa-caption-xs change-positive">+$226.12</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<wa-tooltip content="Send"><wa-icon-button name="arrow-up" label="Send"></wa-icon-button></wa-tooltip>
|
|
<wa-tooltip content="Receive"><wa-icon-button name="arrow-down" label="Receive"></wa-icon-button></wa-tooltip>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="More"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="chart-simple"></wa-icon>View Chart</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<div class="token-cell">
|
|
<wa-avatar initials="U" style="--size: 36px; background: #2775ca;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">USD Coin</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">USDC</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="network-badge">
|
|
<wa-icon name="circle" variant="solid" style="font-size: 6px; color: #627eea;"></wa-icon>
|
|
Ethereum
|
|
</span>
|
|
</td>
|
|
<td><wa-format-number type="currency" currency="USD" value="1.00" lang="en-US"></wa-format-number></td>
|
|
<td>
|
|
<div class="spark-chart">
|
|
<svg viewBox="0 0 100 32" preserveAspectRatio="none">
|
|
<polyline stroke="var(--wa-color-neutral-400)" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0,16 10,16 20,16 30,16 40,16 50,16 60,16 70,16 80,16 90,16 100,16" />
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td><span style="color: var(--wa-color-neutral-500);">0.00%</span></td>
|
|
<td><div class="wa-stack wa-gap-0"><span>1,250.00 USDC</span></div></td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">$1,250.00</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">$0.00</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<wa-tooltip content="Send"><wa-icon-button name="arrow-up" label="Send"></wa-icon-button></wa-tooltip>
|
|
<wa-tooltip content="Receive"><wa-icon-button name="arrow-down" label="Receive"></wa-icon-button></wa-tooltip>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="More"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="chart-simple"></wa-icon>View Chart</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<div class="token-cell">
|
|
<wa-avatar initials="A" style="--size: 36px; background: #e84142;"></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Avalanche</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">AVAX</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="network-badge">
|
|
<wa-icon name="circle" variant="solid" style="font-size: 6px; color: #e84142;"></wa-icon>
|
|
Avalanche
|
|
</span>
|
|
</td>
|
|
<td><wa-format-number type="currency" currency="USD" value="28.15" lang="en-US"></wa-format-number></td>
|
|
<td>
|
|
<div class="spark-chart">
|
|
<svg viewBox="0 0 100 32" preserveAspectRatio="none">
|
|
<polyline class="spark-down" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0,8 10,10 20,12 30,10 40,14 50,16 60,18 70,16 80,20 90,22 100,24" />
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td><span class="change-negative"><wa-icon name="arrow-down" style="font-size: 10px;"></wa-icon> -2.18%</span></td>
|
|
<td><div class="wa-stack wa-gap-0"><span>24.83 AVAX</span></div></td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">$699.03</span>
|
|
<span class="wa-caption-xs change-negative">-$15.58</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<wa-tooltip content="Send"><wa-icon-button name="arrow-up" label="Send"></wa-icon-button></wa-tooltip>
|
|
<wa-tooltip content="Receive"><wa-icon-button name="arrow-down" label="Receive"></wa-icon-button></wa-tooltip>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="More"></wa-icon-button>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="arrow-right-arrow-left"></wa-icon>Swap</wa-dropdown-item>
|
|
<wa-dropdown-item><wa-icon slot="icon" name="chart-simple"></wa-icon>View Chart</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</wa-card>
|
|
</wa-tab-panel>
|
|
|
|
<wa-tab-panel name="nfts">
|
|
<header style="margin-bottom: var(--wa-space-l);">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-l">NFTs</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Your digital collectibles portfolio</span>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-button variant="neutral" appearance="outlined" size="small">
|
|
<wa-icon slot="start" name="eye-slash"></wa-icon>
|
|
Hidden (2)
|
|
</wa-button>
|
|
<wa-button variant="brand" size="small">
|
|
<wa-icon slot="start" name="plus"></wa-icon>
|
|
Import NFT
|
|
</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 NFTs</span>
|
|
<span class="wa-heading-2xl">12</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">across 5 collections</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);">Estimated Value</span>
|
|
<span class="wa-heading-2xl">
|
|
<wa-format-number type="currency" currency="USD" value="8420.50" lang="en-US"></wa-format-number>
|
|
</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-success);">
|
|
<wa-icon name="arrow-trend-up" style="font-size: 12px;"></wa-icon>
|
|
+12.4% this week
|
|
</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);">Floor Value</span>
|
|
<span class="wa-heading-2xl">4.2 ETH</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">$9,851.40</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);">Best Performer</span>
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<wa-avatar initials="B" style="--size: 24px; background: #ff6b6b;"></wa-avatar>
|
|
<span class="wa-heading-s">Bored Ape #4521</span>
|
|
</div>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-success);">+45% this month</span>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<wa-card style="margin-bottom: var(--wa-space-l);">
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Collections</span>
|
|
<a href="#" class="wa-caption-s" style="color: var(--wa-color-primary);">View All</a>
|
|
</div>
|
|
<div class="wa-grid" style="--min-column-size: 280px;">
|
|
<div class="collection-card">
|
|
<div class="collection-avatar">
|
|
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=100&h=100&fit=crop" alt="Bored Apes">
|
|
</div>
|
|
<div class="wa-stack wa-gap-0" style="flex: 1;">
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<span class="wa-heading-s">Bored Ape Yacht Club</span>
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 14px;"></wa-icon>
|
|
</div>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">3 items • Floor: 28.5 ETH</span>
|
|
</div>
|
|
<span class="wa-heading-s">$198,450</span>
|
|
</div>
|
|
|
|
<div class="collection-card">
|
|
<div class="collection-avatar">
|
|
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=100&h=100&fit=crop" alt="Sonr Genesis">
|
|
</div>
|
|
<div class="wa-stack wa-gap-0" style="flex: 1;">
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<span class="wa-heading-s">Sonr Genesis</span>
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 14px;"></wa-icon>
|
|
</div>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">5 items • Floor: 0.8 ETH</span>
|
|
</div>
|
|
<span class="wa-heading-s">$9,380</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card>
|
|
<div class="filter-bar">
|
|
<wa-select placeholder="All Collections" size="small" style="min-width: 160px;" clearable>
|
|
<wa-option value="bayc">Bored Ape Yacht Club</wa-option>
|
|
<wa-option value="sonr">Sonr Genesis</wa-option>
|
|
</wa-select>
|
|
|
|
<wa-select placeholder="Sort by" value="recent" size="small" style="min-width: 140px;">
|
|
<wa-option value="recent">Recently Added</wa-option>
|
|
<wa-option value="value-high">Value: High to Low</wa-option>
|
|
<wa-option value="value-low">Value: Low to High</wa-option>
|
|
<wa-option value="name">Name A-Z</wa-option>
|
|
</wa-select>
|
|
</div>
|
|
|
|
<div class="nft-grid">
|
|
<div class="nft-card">
|
|
<div class="nft-image">
|
|
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=400&fit=crop" alt="Bored Ape #4521">
|
|
<div class="nft-badge">
|
|
<wa-badge variant="success" pill>Listed</wa-badge>
|
|
</div>
|
|
<div class="nft-actions">
|
|
<wa-tooltip content="Send">
|
|
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-tooltip content="Hide">
|
|
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
|
|
</wa-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="nft-info">
|
|
<div class="nft-collection">
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
|
|
<span class="nft-collection-name">Bored Ape Yacht Club</span>
|
|
</div>
|
|
<div class="nft-name">Bored Ape #4521</div>
|
|
<div class="nft-price-row">
|
|
<span class="nft-floor">Floor: 28.5 ETH</span>
|
|
<span class="nft-value">32.0 ETH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nft-card">
|
|
<div class="nft-image">
|
|
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400&fit=crop" alt="Sonr Genesis #001">
|
|
<div class="nft-badge">
|
|
<wa-badge variant="brand" pill>Rare</wa-badge>
|
|
</div>
|
|
<div class="nft-actions">
|
|
<wa-tooltip content="Send">
|
|
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-tooltip content="Hide">
|
|
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
|
|
</wa-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="nft-info">
|
|
<div class="nft-collection">
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
|
|
<span class="nft-collection-name">Sonr Genesis</span>
|
|
</div>
|
|
<div class="nft-name">Sonr Genesis #001</div>
|
|
<div class="nft-price-row">
|
|
<span class="nft-floor">Floor: 0.8 ETH</span>
|
|
<span class="nft-value">2.5 ETH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nft-card">
|
|
<div class="nft-image">
|
|
<img src="https://images.unsplash.com/photo-1642388738915-eb2c06012af6?w=400&h=400&fit=crop" alt="Sonr Genesis #042">
|
|
<div class="nft-actions">
|
|
<wa-tooltip content="Send">
|
|
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-tooltip content="Hide">
|
|
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
|
|
</wa-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="nft-info">
|
|
<div class="nft-collection">
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
|
|
<span class="nft-collection-name">Sonr Genesis</span>
|
|
</div>
|
|
<div class="nft-name">Sonr Genesis #042</div>
|
|
<div class="nft-price-row">
|
|
<span class="nft-floor">Floor: 0.8 ETH</span>
|
|
<span class="nft-value">0.95 ETH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nft-card">
|
|
<div class="nft-image">
|
|
<img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=400&h=400&fit=crop" alt="Bored Ape #2187">
|
|
<div class="nft-actions">
|
|
<wa-tooltip content="Send">
|
|
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
|
|
</wa-tooltip>
|
|
<wa-tooltip content="Hide">
|
|
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
|
|
</wa-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="nft-info">
|
|
<div class="nft-collection">
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
|
|
<span class="nft-collection-name">Bored Ape Yacht Club</span>
|
|
</div>
|
|
<div class="nft-name">Bored Ape #2187</div>
|
|
<div class="nft-price-row">
|
|
<span class="nft-floor">Floor: 28.5 ETH</span>
|
|
<span class="nft-value">30.2 ETH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</wa-tab-panel>
|
|
|
|
<wa-tab-panel name="activity">
|
|
<header style="margin-bottom: var(--wa-space-l);">
|
|
<div class="wa-flank">
|
|
<div class="wa-stack wa-gap-2xs">
|
|
<span class="wa-heading-l">Activity</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Sessions, apps, and recent actions</span>
|
|
</div>
|
|
<wa-button variant="neutral" appearance="outlined" size="small" id="refresh-activity">
|
|
<wa-icon slot="start" name="rotate"></wa-icon>
|
|
Refresh
|
|
</wa-button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="wa-grid stats-grid">
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-primary-subtle);">
|
|
<wa-icon slot="icon" name="desktop" style="color: var(--wa-color-primary);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Active Sessions</span>
|
|
<span class="wa-heading-2xl">3</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-success-subtle);">
|
|
<wa-icon slot="icon" name="plug" style="color: var(--wa-color-success);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Connected Apps</span>
|
|
<span class="wa-heading-2xl">5</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-warning-subtle);">
|
|
<wa-icon slot="icon" name="bell" style="color: var(--wa-color-warning);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Pending</span>
|
|
<span class="wa-cluster wa-gap-xs">
|
|
<span class="wa-heading-2xl">4</span>
|
|
<wa-badge variant="warning" attention="pulse" pill>!</wa-badge>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-neutral-100);">
|
|
<wa-icon slot="icon" name="clock-rotate-left" style="color: var(--wa-color-neutral-600);"></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Last Active</span>
|
|
<wa-relative-time date="2026-01-03T01:49:00" class="wa-heading-s"></wa-relative-time>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
|
|
<wa-card style="margin-bottom: var(--wa-space-l);">
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Pending Actions</span>
|
|
<wa-button appearance="plain" size="small">Clear All</wa-button>
|
|
</div>
|
|
|
|
<div class="wa-stack">
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: auto;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon class="wa-font-size-l" name="shield-halved" style="color: var(--wa-color-warning);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Security Review Required</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>New device signed in from</span>
|
|
<strong>San Francisco, CA</strong>
|
|
</div>
|
|
</div>
|
|
<wa-relative-time date="2026-01-03T01:40:00" class="wa-caption-s"></wa-relative-time>
|
|
</div>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<wa-button variant="brand" size="small">Review</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Dismiss</wa-button>
|
|
</div>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: auto;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon class="wa-font-size-l" name="signature" style="color: var(--wa-color-primary);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Signature Request</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<a href="#">DeFi Protocol</a>
|
|
<span>wants to verify wallet ownership</span>
|
|
</div>
|
|
</div>
|
|
<wa-relative-time date="2026-01-03T01:25:00" class="wa-caption-s"></wa-relative-time>
|
|
</div>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<wa-button variant="brand" size="small">Sign</wa-button>
|
|
<wa-button variant="danger" appearance="outlined" size="small">Reject</wa-button>
|
|
</div>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: auto;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon class="wa-font-size-l" name="triangle-exclamation" style="color: var(--wa-color-danger);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Suspicious Activity</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>Multiple failed logins from IP</span>
|
|
<code style="font-size: var(--wa-font-size-xs);">185.234.xx.xx</code>
|
|
</div>
|
|
</div>
|
|
<wa-relative-time date="2026-01-03T00:50:00" class="wa-caption-s"></wa-relative-time>
|
|
</div>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<wa-button variant="danger" size="small">Block IP</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Details</wa-button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<div class="content-grid">
|
|
<wa-card>
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Active Sessions</span>
|
|
<wa-button appearance="plain" size="small" variant="danger">Sign Out All</wa-button>
|
|
</div>
|
|
|
|
<div class="wa-stack">
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-icon class="wa-font-size-l" name="desktop" style="color: var(--wa-color-primary);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<span class="wa-heading-s">MacBook Pro</span>
|
|
<wa-badge variant="success" pill>Current</wa-badge>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>Chrome 120</span>
|
|
<span>·</span>
|
|
<span>San Francisco, CA</span>
|
|
</div>
|
|
</div>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-success);">Active now</span>
|
|
</div>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-icon class="wa-font-size-l" name="mobile" style="color: var(--wa-color-success);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">iPhone 15 Pro</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>Safari</span>
|
|
<span>·</span>
|
|
<span>San Francisco, CA</span>
|
|
</div>
|
|
</div>
|
|
<wa-relative-time date="2026-01-02T23:51:00" class="wa-caption-xs"></wa-relative-time>
|
|
</div>
|
|
<wa-button variant="danger" appearance="plain" size="small">Revoke</wa-button>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-icon class="wa-font-size-l" name="tablet" style="color: var(--wa-color-warning);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">iPad Air</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>Safari</span>
|
|
<span>·</span>
|
|
<span>New York, NY</span>
|
|
</div>
|
|
</div>
|
|
<wa-relative-time date="2026-01-02T12:00:00" class="wa-caption-xs"></wa-relative-time>
|
|
</div>
|
|
<wa-button variant="danger" appearance="plain" size="small">Revoke</wa-button>
|
|
</article>
|
|
</div>
|
|
|
|
<div slot="footer">
|
|
<a href="#" class="wa-cluster wa-gap-xs wa-caption-s" style="color: var(--wa-color-primary);">
|
|
<span>View session history</span>
|
|
<wa-icon name="arrow-right"></wa-icon>
|
|
</a>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card>
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Connected Apps</span>
|
|
<wa-button appearance="plain" size="small">Manage</wa-button>
|
|
</div>
|
|
|
|
<div class="wa-stack">
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-avatar initials="D" style="--size: 36px; background: linear-gradient(135deg, #6366f1, #8b5cf6);"></wa-avatar>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">DeFi Protocol</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">defi.example.com</span>
|
|
</div>
|
|
<wa-relative-time date="2025-12-31T12:00:00" class="wa-caption-xs"></wa-relative-time>
|
|
</div>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item>View Permissions</wa-dropdown-item>
|
|
<wa-divider></wa-divider>
|
|
<wa-dropdown-item style="color: var(--wa-color-danger);">Disconnect</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-avatar initials="N" style="--size: 36px; background: linear-gradient(135deg, #10b981, #059669);"></wa-avatar>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<span class="wa-heading-s">NFT Marketplace</span>
|
|
<wa-badge variant="warning" pill>transact</wa-badge>
|
|
</div>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">nft.marketplace.io</span>
|
|
</div>
|
|
<wa-relative-time date="2025-12-27T12:00:00" class="wa-caption-xs"></wa-relative-time>
|
|
</div>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item>View Permissions</wa-dropdown-item>
|
|
<wa-divider></wa-divider>
|
|
<wa-dropdown-item style="color: var(--wa-color-danger);">Disconnect</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-avatar initials="S" style="--size: 36px; background: linear-gradient(135deg, #f59e0b, #d97706);"></wa-avatar>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Staking Dashboard</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">stake.sonr.io</span>
|
|
</div>
|
|
<wa-relative-time date="2025-12-20T12:00:00" class="wa-caption-xs"></wa-relative-time>
|
|
</div>
|
|
<wa-dropdown>
|
|
<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Actions"></wa-icon-button>
|
|
<wa-dropdown-item>View Permissions</wa-dropdown-item>
|
|
<wa-divider></wa-divider>
|
|
<wa-dropdown-item style="color: var(--wa-color-danger);">Disconnect</wa-dropdown-item>
|
|
</wa-dropdown>
|
|
</article>
|
|
</div>
|
|
|
|
<div slot="footer">
|
|
<a href="connections.html" class="wa-cluster wa-gap-xs wa-caption-s" style="color: var(--wa-color-primary);">
|
|
<span>Manage all connections</span>
|
|
<wa-icon name="arrow-right"></wa-icon>
|
|
</a>
|
|
</div>
|
|
</wa-card>
|
|
|
|
<wa-card class="activity-card">
|
|
<div slot="header" class="wa-flank">
|
|
<span class="wa-heading-m">Activity Log</span>
|
|
<div class="wa-cluster wa-gap-s">
|
|
<wa-select size="small" value="all" style="min-width: 130px;">
|
|
<wa-option value="all">All Activity</wa-option>
|
|
<wa-option value="security">Security</wa-option>
|
|
<wa-option value="transactions">Transactions</wa-option>
|
|
<wa-option value="connections">Connections</wa-option>
|
|
</wa-select>
|
|
<wa-button appearance="plain" size="small">
|
|
<wa-icon slot="start" name="download"></wa-icon>
|
|
Export
|
|
</wa-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wa-stack">
|
|
<wa-details open>
|
|
<span class="wa-heading-m" slot="summary">Today</span>
|
|
<div class="wa-stack">
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon name="right-to-bracket" style="color: var(--wa-color-success);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Signed in</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<a href="#">MacBook Pro</a>
|
|
<span>in San Francisco, CA</span>
|
|
</div>
|
|
</div>
|
|
<wa-format-date date="2026-01-03T01:51:00" hour="numeric" minute="numeric" class="wa-caption-s"></wa-format-date>
|
|
</div>
|
|
</div>
|
|
<wa-tag variant="success" pill>success</wa-tag>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon name="shield-check" style="color: var(--wa-color-primary);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Passkey authenticated</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-600);">WebAuthn verification</span>
|
|
</div>
|
|
<wa-format-date date="2026-01-03T01:51:00" hour="numeric" minute="numeric" class="wa-caption-s"></wa-format-date>
|
|
</div>
|
|
</div>
|
|
<wa-tag variant="neutral" pill>auth</wa-tag>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon name="arrow-up" style="color: var(--wa-color-danger);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Sent tokens</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>To</span>
|
|
<a href="#">sonr1k4m...9p3q</a>
|
|
</div>
|
|
</div>
|
|
<wa-format-date date="2026-01-03T11:22:00" hour="numeric" minute="numeric" class="wa-caption-s"></wa-format-date>
|
|
</div>
|
|
</div>
|
|
<wa-tag variant="danger">- 500 SNR</wa-tag>
|
|
</article>
|
|
</div>
|
|
</wa-details>
|
|
|
|
<wa-details>
|
|
<span class="wa-heading-m" slot="summary">Yesterday</span>
|
|
<div class="wa-stack">
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon name="arrow-down" style="color: var(--wa-color-success);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Received tokens</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<span>From</span>
|
|
<a href="#">0x7d3e...9f7a</a>
|
|
</div>
|
|
</div>
|
|
<wa-format-date date="2026-01-02T16:48:00" hour="numeric" minute="numeric" class="wa-caption-s"></wa-format-date>
|
|
</div>
|
|
</div>
|
|
<wa-tag variant="success">+ 10 AVAX</wa-tag>
|
|
</article>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
<article class="wa-flank:end wa-align-items-baseline" style="--flank-size: 10ch;">
|
|
<div class="wa-flank wa-gap-m" style="flex: 1;">
|
|
<wa-icon name="right-to-bracket" style="color: var(--wa-color-success);"></wa-icon>
|
|
<div class="wa-split">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">Signed in</span>
|
|
<div class="wa-cluster wa-gap-2xs wa-caption-s" style="color: var(--wa-color-neutral-600);">
|
|
<a href="#">iPhone 15 Pro</a>
|
|
<span>in San Francisco, CA</span>
|
|
</div>
|
|
</div>
|
|
<wa-format-date date="2026-01-02T14:15:00" hour="numeric" minute="numeric" class="wa-caption-s"></wa-format-date>
|
|
</div>
|
|
</div>
|
|
<wa-tag variant="success" pill>success</wa-tag>
|
|
</article>
|
|
</div>
|
|
</wa-details>
|
|
</div>
|
|
|
|
<div slot="footer" class="wa-flank" style="width: 100%;">
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Showing last 9 activities</span>
|
|
<wa-button appearance="plain" size="small">
|
|
Load More
|
|
<wa-icon slot="end" name="chevron-down"></wa-icon>
|
|
</wa-button>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
</wa-tab-panel>
|
|
|
|
</wa-tab-group>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</wa-page>
|
|
|
|
<script>
|
|
// Wait for D3 and charts.js to load
|
|
function waitForD3(callback) {
|
|
if (typeof d3 !== 'undefined' && typeof SemiFilledAreaChart !== 'undefined') {
|
|
callback();
|
|
} else {
|
|
setTimeout(() => waitForD3(callback), 50);
|
|
}
|
|
}
|
|
|
|
// Refresh activity button animation
|
|
document.getElementById('refresh-activity')?.addEventListener('click', function() {
|
|
const icon = this.querySelector('wa-icon');
|
|
icon.style.animation = 'spin 0.5s linear';
|
|
setTimeout(() => icon.style.animation = '', 500);
|
|
});
|
|
|
|
// Spin animation keyframe
|
|
const style = document.createElement('style');
|
|
style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
|
|
document.head.appendChild(style);
|
|
|
|
// Portfolio chart instance
|
|
let portfolioChart = null;
|
|
|
|
// Initialize portfolio chart when tab is shown
|
|
document.querySelector('wa-tab-group')?.addEventListener('wa-tab-show', (event) => {
|
|
if (event.detail.name === 'accounts') {
|
|
initPortfolioChart();
|
|
}
|
|
});
|
|
|
|
// Initialize chart on page load if accounts tab is active
|
|
function initPortfolioChart() {
|
|
const container = document.getElementById('portfolio-chart-container');
|
|
if (!container) return;
|
|
|
|
// Skip if already initialized
|
|
if (portfolioChart) return;
|
|
|
|
waitForD3(() => {
|
|
// Generate sample portfolio data
|
|
const data = generatePortfolioData();
|
|
|
|
// Create semi-filled area chart for portfolio value
|
|
portfolioChart = new SemiFilledAreaChart(container, {
|
|
data: data,
|
|
height: 240,
|
|
color: {
|
|
line: '#17c2ff',
|
|
areaFrom: 'rgba(23, 194, 255, 0.3)',
|
|
areaTo: 'rgba(23, 194, 255, 0.05)'
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function generatePortfolioData() {
|
|
const now = new Date();
|
|
const data = [];
|
|
let baseValue = 12500;
|
|
|
|
for (let i = 30; i >= 0; i--) {
|
|
const date = new Date(now);
|
|
date.setDate(date.getDate() - i);
|
|
// Add some realistic variance
|
|
baseValue += (Math.random() - 0.45) * 200;
|
|
data.push({
|
|
date: date,
|
|
value: Math.max(10000, baseValue)
|
|
});
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// Timeframe selector
|
|
document.getElementById('portfolio-timeframe')?.addEventListener('wa-change', (event) => {
|
|
const container = document.getElementById('portfolio-chart-container');
|
|
if (!container) return;
|
|
|
|
// Regenerate chart with new data based on timeframe
|
|
portfolioChart = null;
|
|
container.innerHTML = '';
|
|
initPortfolioChart();
|
|
});
|
|
|
|
// Initialize on DOM ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initPortfolioChart();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |