x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrate to webawesome dark theme by default

Browse Source
This commit is contained in:
Prad Nu
2026-01-05 19:33:54 -05:00
parent 30ed4e9ec7
commit 169d576694
4 changed files with 310 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
views/dashboard.templ
View File

@@ -372,6 +372,7 @@ templ AccountCard(initials string, name string, address string, color string, ac
}
templ TransactionsPanel(transactions []Transaction) {
@components.TxStyles()
<header style="margin-bottom: var(--wa-space-l);">
<div class="wa-flank">
<div class="wa-stack wa-gap-2xs">
@@ -384,32 +385,13 @@ templ TransactionsPanel(transactions []Transaction) {
</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>
@components.TxStatsGrid(components.DefaultTxStats())
<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)
@components.TxFilterBar(components.DefaultTxFilter())
for _, group := range components.DefaultTxGroups() {
@components.TxDateGroupComponent(group)
}
@components.TxPagination(1, 82, 10)
</wa-card>
}
@@ -423,86 +405,6 @@ templ StatCard(label string, value string, subtitle string, variant string) {
</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">

940
views/dashboard_templ.go
View File

File diff suppressed because one or more lines are too long