990 lines
40 KiB
Plaintext
990 lines
40 KiB
Plaintext
package views
|
|
|
|
import (
|
|
"nebula/components"
|
|
"nebula/layouts"
|
|
)
|
|
|
|
type Token struct {
|
|
Symbol string
|
|
Name string
|
|
Balance string
|
|
Value string
|
|
Change string
|
|
Positive bool
|
|
Color string
|
|
Initials string
|
|
Network string
|
|
}
|
|
|
|
type Transaction struct {
|
|
Type string
|
|
Asset string
|
|
Amount string
|
|
USD string
|
|
Date string
|
|
Time string
|
|
Hash string
|
|
Positive bool
|
|
Address string
|
|
}
|
|
|
|
type NFT struct {
|
|
Name string
|
|
Collection string
|
|
Image string
|
|
Floor string
|
|
Value string
|
|
Badge string
|
|
Verified bool
|
|
}
|
|
|
|
type DashboardData struct {
|
|
TotalBalance string
|
|
Change24h string
|
|
Tokens []Token
|
|
Transactions []Transaction
|
|
NFTs []NFT
|
|
PortfolioChart []components.AreaSeriesData
|
|
MarketCapBubble []components.BubbleData
|
|
}
|
|
|
|
func DefaultDashboardData() DashboardData {
|
|
return DashboardData{
|
|
TotalBalance: "12847.32",
|
|
Change24h: "+$302.18",
|
|
Tokens: []Token{
|
|
{Symbol: "SNR", Name: "Sonr", Balance: "8,432.50", Value: "$4,216.25", Change: "+5.67%", Positive: true, Color: "linear-gradient(135deg, #17c2ff, #0090ff)", Initials: "S", Network: "Sonr Mainnet"},
|
|
{Symbol: "ETH", Name: "Ethereum", Balance: "2.847", Value: "$6,682.04", Change: "+3.24%", Positive: true, Color: "#627eea", Initials: "E", Network: "Ethereum"},
|
|
{Symbol: "USDC", Name: "USD Coin", Balance: "1,250.00", Value: "$1,250.00", Change: "0.00%", Positive: true, Color: "#2775ca", Initials: "U", Network: "Ethereum"},
|
|
{Symbol: "AVAX", Name: "Avalanche", Balance: "24.83", Value: "$699.03", Change: "-2.18%", Positive: false, Color: "#e84142", Initials: "A", Network: "Avalanche"},
|
|
},
|
|
Transactions: []Transaction{
|
|
{Type: "receive", Asset: "ETH", Amount: "+0.25 ETH", USD: "$586.25", Date: "Today", Time: "2:34 PM", Hash: "0x8f4a2b1c...", Positive: true, Address: "0x742d...35Cb"},
|
|
{Type: "send", Asset: "SNR", Amount: "-500 SNR", USD: "$250.00", Date: "Yesterday", Time: "11:22 AM", Hash: "0x7d3e2a1b...", Positive: false, Address: "sonr1k4m...9p3q"},
|
|
{Type: "swap", Asset: "ETH → USDC", Amount: "0.5 ETH", USD: "→ 1,172.50 USDC", Date: "Jan 1", Time: "9:15 AM", Hash: "0x1a2b3c4d...", Positive: true, Address: "Uniswap V3"},
|
|
},
|
|
NFTs: []NFT{
|
|
{Name: "Bored Ape #4521", Collection: "Bored Ape Yacht Club", Image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=400&fit=crop", Floor: "28.5 ETH", Value: "32.0 ETH", Badge: "Listed", Verified: true},
|
|
{Name: "Sonr Genesis #001", Collection: "Sonr Genesis", Image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400&fit=crop", Floor: "0.8 ETH", Value: "2.5 ETH", Badge: "Rare", Verified: true},
|
|
},
|
|
PortfolioChart: DefaultPortfolioChartData(),
|
|
MarketCapBubble: DefaultMarketCapBubbleData(),
|
|
}
|
|
}
|
|
|
|
// DefaultPortfolioChartData returns sample stacked area data for portfolio performance by asset
|
|
func DefaultPortfolioChartData() []components.AreaSeriesData {
|
|
return []components.AreaSeriesData{
|
|
// Day 1
|
|
{Date: "2024-12-25", Industry: "ETH", Value: 3200},
|
|
{Date: "2024-12-25", Industry: "SNR", Value: 2100},
|
|
{Date: "2024-12-25", Industry: "USDC", Value: 1200},
|
|
{Date: "2024-12-25", Industry: "AVAX", Value: 500},
|
|
// Day 2
|
|
{Date: "2024-12-26", Industry: "ETH", Value: 3350},
|
|
{Date: "2024-12-26", Industry: "SNR", Value: 2200},
|
|
{Date: "2024-12-26", Industry: "USDC", Value: 1200},
|
|
{Date: "2024-12-26", Industry: "AVAX", Value: 520},
|
|
// Day 3
|
|
{Date: "2024-12-27", Industry: "ETH", Value: 3500},
|
|
{Date: "2024-12-27", Industry: "SNR", Value: 2350},
|
|
{Date: "2024-12-27", Industry: "USDC", Value: 1200},
|
|
{Date: "2024-12-27", Industry: "AVAX", Value: 480},
|
|
// Day 4
|
|
{Date: "2024-12-28", Industry: "ETH", Value: 3280},
|
|
{Date: "2024-12-28", Industry: "SNR", Value: 2400},
|
|
{Date: "2024-12-28", Industry: "USDC", Value: 1200},
|
|
{Date: "2024-12-28", Industry: "AVAX", Value: 510},
|
|
// Day 5
|
|
{Date: "2024-12-29", Industry: "ETH", Value: 3450},
|
|
{Date: "2024-12-29", Industry: "SNR", Value: 2550},
|
|
{Date: "2024-12-29", Industry: "USDC", Value: 1250},
|
|
{Date: "2024-12-29", Industry: "AVAX", Value: 530},
|
|
// Day 6
|
|
{Date: "2024-12-30", Industry: "ETH", Value: 3600},
|
|
{Date: "2024-12-30", Industry: "SNR", Value: 2680},
|
|
{Date: "2024-12-30", Industry: "USDC", Value: 1250},
|
|
{Date: "2024-12-30", Industry: "AVAX", Value: 550},
|
|
// Day 7
|
|
{Date: "2024-12-31", Industry: "ETH", Value: 3750},
|
|
{Date: "2024-12-31", Industry: "SNR", Value: 2800},
|
|
{Date: "2024-12-31", Industry: "USDC", Value: 1250},
|
|
{Date: "2024-12-31", Industry: "AVAX", Value: 580},
|
|
// Day 8
|
|
{Date: "2025-01-01", Industry: "ETH", Value: 3680},
|
|
{Date: "2025-01-01", Industry: "SNR", Value: 2900},
|
|
{Date: "2025-01-01", Industry: "USDC", Value: 1250},
|
|
{Date: "2025-01-01", Industry: "AVAX", Value: 600},
|
|
}
|
|
}
|
|
|
|
// DefaultMarketCapBubbleData returns sample bubble chart data for market cap dominance
|
|
func DefaultMarketCapBubbleData() []components.BubbleData {
|
|
return []components.BubbleData{
|
|
{Name: "BTC", Sector: "Layer 1", Value: 45000},
|
|
{Name: "ETH", Sector: "Layer 1", Value: 28000},
|
|
{Name: "SNR", Sector: "Layer 1", Value: 8500},
|
|
{Name: "SOL", Sector: "Layer 1", Value: 12000},
|
|
{Name: "AVAX", Sector: "Layer 1", Value: 6000},
|
|
{Name: "USDC", Sector: "Stablecoin", Value: 15000},
|
|
{Name: "USDT", Sector: "Stablecoin", Value: 18000},
|
|
{Name: "UNI", Sector: "DeFi", Value: 4500},
|
|
{Name: "AAVE", Sector: "DeFi", Value: 3200},
|
|
{Name: "LINK", Sector: "Oracle", Value: 5800},
|
|
}
|
|
}
|
|
|
|
templ DashboardPage(data DashboardData, activeTab string) {
|
|
@layouts.AppLayout("Dashboard - Sonr", layouts.WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}) {
|
|
@dashboardStyles()
|
|
<div class="dashboard-tabs">
|
|
<wa-tab-group id="dashboard-tabs">
|
|
<wa-tab panel="overview" if activeTab == "overview" || activeTab == "" { active?={ true } }>
|
|
<wa-icon name="grid-2"></wa-icon>
|
|
Overview
|
|
</wa-tab>
|
|
<wa-tab panel="transactions" if activeTab == "transactions" { active?={ true } }>
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
Transactions
|
|
</wa-tab>
|
|
<wa-tab panel="tokens" if activeTab == "tokens" { active?={ true } }>
|
|
<wa-icon name="coins"></wa-icon>
|
|
Tokens
|
|
</wa-tab>
|
|
<wa-tab panel="nfts" if activeTab == "nfts" { active?={ true } }>
|
|
<wa-icon name="image"></wa-icon>
|
|
NFTs
|
|
</wa-tab>
|
|
<wa-tab panel="activity" if activeTab == "activity" { active?={ true } }>
|
|
<wa-icon name="chart-line"></wa-icon>
|
|
Activity
|
|
</wa-tab>
|
|
<wa-tab-panel name="overview">
|
|
@OverviewPanel(data)
|
|
</wa-tab-panel>
|
|
<wa-tab-panel name="transactions">
|
|
@TransactionsPanel(data.Transactions)
|
|
</wa-tab-panel>
|
|
<wa-tab-panel name="tokens">
|
|
@TokensPanel(data.Tokens)
|
|
</wa-tab-panel>
|
|
<wa-tab-panel name="nfts">
|
|
@NFTsPanel(data.NFTs)
|
|
</wa-tab-panel>
|
|
<wa-tab-panel name="activity">
|
|
@ActivityPanel()
|
|
</wa-tab-panel>
|
|
</wa-tab-group>
|
|
</div>
|
|
<!-- Drawers -->
|
|
@components.AllDrawers(components.DefaultTokenOptions(), "sonr1x9f4h2k8m3n5p7q2r4s6t8v0w3x5y7z9a1b3c5d7k2m")
|
|
@components.DrawerTriggers()
|
|
}
|
|
}
|
|
|
|
templ AccountsPanel(data DashboardData) {
|
|
<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" data-drawer-open="receive">
|
|
<wa-icon slot="start" name="arrow-down"></wa-icon>
|
|
Receive
|
|
</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined" size="small" data-drawer-open="send">
|
|
<wa-icon slot="start" name="arrow-up"></wa-icon>
|
|
Send
|
|
</wa-button>
|
|
<wa-button variant="brand" size="small" data-drawer-open="swap">
|
|
<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={ data.TotalBalance } 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-heading-2xl" style="color: var(--wa-color-success);">{ data.Change24h }</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
</div>
|
|
<!-- Portfolio Performance Chart -->
|
|
<wa-card style="margin-bottom: var(--wa-space-l);">
|
|
<div slot="header" class="wa-flank">
|
|
<div class="wa-stack wa-gap-0">
|
|
<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">
|
|
<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>
|
|
@components.StackedAreaChart("portfolio-chart", data.PortfolioChart)
|
|
</wa-card>
|
|
<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>
|
|
for _, token := range data.Tokens {
|
|
@TokenRow(token)
|
|
}
|
|
</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>
|
|
for _, tx := range data.Transactions {
|
|
@TransactionTableRow(tx)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</wa-card>
|
|
</div>
|
|
@ConnectedAccountsCard()
|
|
}
|
|
|
|
templ TokenRow(token Token) {
|
|
<div class="token-row">
|
|
<div class="token-info">
|
|
<wa-avatar initials={ token.Initials } style={ "--size: 40px; background: " + token.Color + ";" }></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">{ token.Name }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ token.Symbol }</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-balance">
|
|
<div class="wa-stack wa-gap-0" style="align-items: flex-end;">
|
|
<span class="wa-heading-s">{ token.Balance }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ token.Value }</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>
|
|
}
|
|
|
|
templ TransactionTableRow(tx Transaction) {
|
|
<tr>
|
|
<td>
|
|
<span class={ "tx-type", tx.Type }>
|
|
if tx.Type == "receive" {
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
Receive
|
|
} else if tx.Type == "send" {
|
|
<wa-icon name="arrow-up"></wa-icon>
|
|
Send
|
|
} else {
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
Swap
|
|
}
|
|
</span>
|
|
</td>
|
|
<td>{ tx.Asset }</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span style={ txAmountStyle(tx.Positive) }>{ tx.Amount }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ tx.USD }</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span>{ tx.Date }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ tx.Time }</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<wa-copy-button value={ tx.Hash } copy-label="Copy hash"></wa-copy-button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
|
|
func txAmountStyle(positive bool) string {
|
|
if positive {
|
|
return "color: var(--wa-color-success);"
|
|
}
|
|
return "color: var(--wa-color-danger);"
|
|
}
|
|
|
|
templ ConnectedAccountsCard() {
|
|
<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">
|
|
<wa-icon slot="start" name="plus"></wa-icon>
|
|
Create
|
|
</wa-button>
|
|
</div>
|
|
<div class="wa-grid" style="--min-column-size: 280px;">
|
|
@AccountCard("M", "Main Wallet", "sonr1x9f...7k2m", "var(--wa-color-primary)", true)
|
|
@AccountCard("T", "Trading", "sonr1k4m...9p3q", "var(--wa-color-neutral-400)", false)
|
|
@AccountCard("S", "Savings", "sonr1r7t...2w8x", "var(--wa-color-neutral-400)", false)
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ AccountCard(initials string, name string, address string, color string, active bool) {
|
|
<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={ initials } style={ "--size: 40px; background: " + color + ";" }></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">{ name }</span>
|
|
<span class="address-mono">{ address }</span>
|
|
</div>
|
|
</div>
|
|
if active {
|
|
<wa-badge variant="success" pill>Active</wa-badge>
|
|
} else {
|
|
<wa-icon-button name="ellipsis-vertical" label="Options"></wa-icon-button>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ TransactionsPanel(transactions []Transaction) {
|
|
<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>
|
|
<wa-button variant="neutral" appearance="outlined" size="small">
|
|
<wa-icon slot="start" name="arrow-down-to-line"></wa-icon>
|
|
Export
|
|
</wa-button>
|
|
</div>
|
|
</header>
|
|
<div class="wa-grid stats-grid">
|
|
@StatCard("Total Received", "+$15,420.50", "42 transactions", "success")
|
|
@StatCard("Total Sent", "-$8,234.18", "28 transactions", "danger")
|
|
@StatCard("Swaps", "12", "$4,892.00 volume", "neutral")
|
|
@StatCard("Gas Spent", "$127.45", "All time", "neutral")
|
|
</div>
|
|
<wa-card>
|
|
<div class="filter-bar">
|
|
<wa-select placeholder="All Types" size="small" style="min-width: 140px;" clearable>
|
|
<wa-option value="send">Send</wa-option>
|
|
<wa-option value="receive">Receive</wa-option>
|
|
<wa-option value="swap">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-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>
|
|
@TransactionDateGroup("Today", transactions[:1])
|
|
@TransactionDateGroup("Yesterday", transactions[1:])
|
|
@Pagination(1, 82, 10)
|
|
</wa-card>
|
|
}
|
|
|
|
templ StatCard(label string, value string, subtitle string, variant string) {
|
|
<wa-card class="stat-card">
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ label }</span>
|
|
<span class={ "wa-heading-l", templ.KV("change-positive", variant == "success"), templ.KV("change-negative", variant == "danger") }>{ value }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ subtitle }</span>
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ TransactionDateGroup(date string, transactions []Transaction) {
|
|
<div class="date-group">
|
|
<div class="date-group-header">
|
|
<h3>{ date }</h3>
|
|
<span class="tx-count">{ lenStr(transactions) } transaction(s)</span>
|
|
</div>
|
|
for _, tx := range transactions {
|
|
@TransactionRow(tx)
|
|
}
|
|
</div>
|
|
}
|
|
|
|
func lenStr(txs []Transaction) string {
|
|
return string(rune('0' + len(txs)))
|
|
}
|
|
|
|
templ TransactionRow(tx Transaction) {
|
|
<div class="tx-row">
|
|
<div class={ "tx-icon", tx.Type }>
|
|
if tx.Type == "receive" {
|
|
<wa-icon name="arrow-down"></wa-icon>
|
|
} else if tx.Type == "send" {
|
|
<wa-icon name="arrow-up"></wa-icon>
|
|
} else {
|
|
<wa-icon name="arrow-right-arrow-left"></wa-icon>
|
|
}
|
|
</div>
|
|
<div class="tx-details">
|
|
<div class="tx-type-label">
|
|
if tx.Type == "receive" {
|
|
Received { tx.Asset }
|
|
} else if tx.Type == "send" {
|
|
Sent { tx.Asset }
|
|
} else {
|
|
Swapped { tx.Asset }
|
|
}
|
|
</div>
|
|
<div class="tx-address">{ tx.Address }</div>
|
|
</div>
|
|
<div class={ "tx-amount", templ.KV("positive", tx.Positive), templ.KV("negative", !tx.Positive) }>
|
|
<div class="value">{ tx.Amount }</div>
|
|
<div class="usd">{ tx.USD }</div>
|
|
</div>
|
|
<div class="tx-time">
|
|
<div class="time">{ tx.Time }</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={ tx.Hash } copy-label="Copy hash"></wa-copy-button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ Pagination(current int, total int, perPage int) {
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Showing <strong>1-{ string(rune('0' + perPage)) }</strong> of <strong>{ string(rune('0' + total/10)) }{ string(rune('0' + total%10)) }</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>
|
|
}
|
|
|
|
templ TokensPanel(tokens []Token) {
|
|
<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);">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>
|
|
</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">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>
|
|
for _, token := range tokens {
|
|
@TokenTableRow(token)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</wa-card>
|
|
}
|
|
|
|
templ TokenTableRow(token Token) {
|
|
<tr>
|
|
<td>
|
|
<div class="token-cell">
|
|
<wa-avatar initials={ token.Initials } style={ "--size: 36px; background: " + token.Color + ";" }></wa-avatar>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">{ token.Name }</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ token.Symbol }</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="network-badge">
|
|
<wa-icon name="circle" variant="solid" style="font-size: 6px;"></wa-icon>
|
|
{ token.Network }
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class={ templ.KV("change-positive", token.Positive), templ.KV("change-negative", !token.Positive) }>
|
|
if token.Positive {
|
|
<wa-icon name="arrow-up" style="font-size: 10px;"></wa-icon>
|
|
} else {
|
|
<wa-icon name="arrow-down" style="font-size: 10px;"></wa-icon>
|
|
}
|
|
{ token.Change }
|
|
</span>
|
|
</td>
|
|
<td>{ token.Balance } { token.Symbol }</td>
|
|
<td>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">{ token.Value }</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>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
|
|
templ NFTsPanel(nfts []NFT) {
|
|
<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">
|
|
@StatCard("Total NFTs", "12", "across 5 collections", "neutral")
|
|
@StatCard("Estimated Value", "$8,420.50", "+12.4% this week", "success")
|
|
@StatCard("Floor Value", "4.2 ETH", "$9,851.40", "neutral")
|
|
</div>
|
|
<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-select>
|
|
</div>
|
|
<div class="nft-grid">
|
|
for _, nft := range nfts {
|
|
@NFTCard(nft)
|
|
}
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ NFTCard(nft NFT) {
|
|
<div class="nft-card">
|
|
<div class="nft-image">
|
|
<img src={ nft.Image } alt={ nft.Name }/>
|
|
if nft.Badge != "" {
|
|
<div class="nft-badge">
|
|
<wa-badge variant={ nftBadgeVariant(nft.Badge) } pill>{ nft.Badge }</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">
|
|
if nft.Verified {
|
|
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
|
|
}
|
|
<span class="nft-collection-name">{ nft.Collection }</span>
|
|
</div>
|
|
<div class="nft-name">{ nft.Name }</div>
|
|
<div class="nft-price-row">
|
|
<span class="nft-floor">Floor: { nft.Floor }</span>
|
|
<span class="nft-value">{ nft.Value }</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
func nftBadgeVariant(badge string) string {
|
|
if badge == "Listed" {
|
|
return "success"
|
|
}
|
|
if badge == "Rare" {
|
|
return "brand"
|
|
}
|
|
return "neutral"
|
|
}
|
|
|
|
templ ActivityPanel() {
|
|
@ActivityPanelWithData(DefaultMarketCapBubbleData())
|
|
}
|
|
|
|
templ ActivityPanelWithData(marketCapData []components.BubbleData) {
|
|
<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">
|
|
<wa-icon slot="start" name="rotate"></wa-icon>
|
|
Refresh
|
|
</wa-button>
|
|
</div>
|
|
</header>
|
|
<div class="wa-grid stats-grid">
|
|
@ActivityStatCard("desktop", "Active Sessions", "3", "var(--wa-color-primary)")
|
|
@ActivityStatCard("plug", "Connected Apps", "5", "var(--wa-color-success)")
|
|
@ActivityStatCard("bell", "Pending", "4", "var(--wa-color-warning)")
|
|
@ActivityStatCard("clock-rotate-left", "Last Active", "Just now", "var(--wa-color-neutral-600)")
|
|
</div>
|
|
@PendingActionsCard()
|
|
<div class="content-grid">
|
|
@ActiveSessionsCard()
|
|
@ConnectedAppsCard()
|
|
</div>
|
|
<!-- Market Dominance Chart -->
|
|
<wa-card style="margin-top: var(--wa-space-l);">
|
|
<div slot="header" class="wa-flank">
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-m">Market Cap Dominance</span>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Portfolio allocation by market cap</span>
|
|
</div>
|
|
</div>
|
|
<div style="padding: var(--wa-space-m);">
|
|
@components.BubbleChart("market-cap-bubble", marketCapData)
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ ActivityStatCard(icon string, label string, value string, color string) {
|
|
<wa-card class="stat-card">
|
|
<div class="wa-flank">
|
|
<wa-avatar shape="rounded" style={ "background: " + color + "20;" }>
|
|
<wa-icon slot="icon" name={ icon } style={ "color: " + color + ";" }></wa-icon>
|
|
</wa-avatar>
|
|
<div class="wa-stack wa-gap-3xs">
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ label }</span>
|
|
<span class="wa-heading-2xl">{ value }</span>
|
|
</div>
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ PendingActionsCard() {
|
|
<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">
|
|
@PendingAction("shield-halved", "var(--wa-color-warning)", "Security Review Required", "New device signed in from San Francisco, CA", "Review", "Dismiss")
|
|
<wa-divider></wa-divider>
|
|
@PendingAction("signature", "var(--wa-color-primary)", "Signature Request", "DeFi Protocol wants to verify wallet ownership", "Sign", "Reject")
|
|
</div>
|
|
</wa-card>
|
|
}
|
|
|
|
templ PendingAction(icon string, color string, title string, desc string, primaryAction string, secondaryAction string) {
|
|
<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={ icon } style={ "color: " + color + ";" }></wa-icon>
|
|
<div class="wa-stack wa-gap-0">
|
|
<span class="wa-heading-s">{ title }</span>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-600);">{ desc }</span>
|
|
</div>
|
|
</div>
|
|
<div class="wa-cluster wa-gap-xs">
|
|
<wa-button variant="brand" size="small">{ primaryAction }</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined" size="small">{ secondaryAction }</wa-button>
|
|
</div>
|
|
</article>
|
|
}
|
|
|
|
templ ActiveSessionsCard() {
|
|
<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">
|
|
@SessionRow("desktop", "var(--wa-color-primary)", "MacBook Pro", "Chrome 120 · San Francisco, CA", "Active now", true)
|
|
<wa-divider></wa-divider>
|
|
@SessionRow("mobile", "var(--wa-color-success)", "iPhone 15 Pro", "Safari · San Francisco, CA", "2 hours ago", false)
|
|
<wa-divider></wa-divider>
|
|
@SessionRow("tablet", "var(--wa-color-warning)", "iPad Air", "Safari · New York, NY", "12 hours ago", false)
|
|
</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>
|
|
}
|
|
|
|
templ SessionRow(icon string, color string, device string, details string, time string, current bool) {
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-icon class="wa-font-size-l" name={ icon } style={ "color: " + color + ";" }></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">{ device }</span>
|
|
if current {
|
|
<wa-badge variant="success" pill>Current</wa-badge>
|
|
}
|
|
</div>
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-600);">{ details }</span>
|
|
</div>
|
|
<span class="wa-caption-xs" style={ sessionTimeStyle(current) }>{ time }</span>
|
|
</div>
|
|
if !current {
|
|
<wa-button variant="danger" appearance="plain" size="small">Revoke</wa-button>
|
|
}
|
|
</article>
|
|
}
|
|
|
|
func sessionTimeStyle(current bool) string {
|
|
if current {
|
|
return "color: var(--wa-color-success);"
|
|
}
|
|
return "color: var(--wa-color-neutral-500);"
|
|
}
|
|
|
|
templ ConnectedAppsCard() {
|
|
<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">
|
|
@ConnectedAppRow("D", "linear-gradient(135deg, #6366f1, #8b5cf6)", "DeFi Protocol", "defi.example.com", "")
|
|
<wa-divider></wa-divider>
|
|
@ConnectedAppRow("N", "linear-gradient(135deg, #10b981, #059669)", "NFT Marketplace", "nft.marketplace.io", "transact")
|
|
<wa-divider></wa-divider>
|
|
@ConnectedAppRow("S", "linear-gradient(135deg, #f59e0b, #d97706)", "Staking Dashboard", "stake.sonr.io", "")
|
|
</div>
|
|
<div slot="footer">
|
|
<a href="/connections" 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>
|
|
}
|
|
|
|
templ ConnectedAppRow(initials string, bg string, name string, domain string, badge string) {
|
|
<article class="wa-flank wa-gap-m">
|
|
<wa-avatar initials={ initials } style={ "--size: 36px; background: " + bg + ";" }></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">{ name }</span>
|
|
if badge != "" {
|
|
<wa-badge variant="warning" pill>{ badge }</wa-badge>
|
|
}
|
|
</div>
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ domain }</span>
|
|
</div>
|
|
</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>
|
|
}
|
|
|
|
templ dashboardStyles() {
|
|
<style>
|
|
.dashboard-tabs wa-tab-panel { padding: var(--wa-space-l) 0; }
|
|
.dashboard-tabs wa-tab-panel::part(base) { padding: 0; }
|
|
.stats-grid { --min-column-size: 160px; margin-bottom: var(--wa-space-l); gap: var(--wa-space-m); }
|
|
.stat-card { background: var(--wa-color-surface); }
|
|
.quick-actions { display: flex; gap: var(--wa-space-s); }
|
|
.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); }
|
|
.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); }
|
|
.address-mono { font-family: var(--wa-font-mono); font-size: var(--wa-font-size-xs); }
|
|
.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-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); }
|
|
.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-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); }
|
|
.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-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; }
|
|
.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); }
|
|
.token-cell { display: flex; align-items: center; gap: var(--wa-space-s); }
|
|
.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); }
|
|
.change-positive { color: var(--wa-color-success); }
|
|
.change-negative { color: var(--wa-color-danger); }
|
|
.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); }
|
|
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-l); }
|
|
@media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } }
|
|
@media (max-width: 900px) { .tx-row { grid-template-columns: auto 1fr auto; } }
|
|
</style>
|
|
}
|