package components
type TxType string
const (
TxTypeSend TxType = "send"
TxTypeReceive TxType = "receive"
TxTypeSwap TxType = "swap"
TxTypeApprove TxType = "approve"
TxTypeContract TxType = "contract"
)
type TxStatus string
const (
TxStatusConfirmed TxStatus = "confirmed"
TxStatusPending TxStatus = "pending"
TxStatusFailed TxStatus = "failed"
)
type TransactionDetail struct {
Type TxType
Title string
Description string
Asset string
AssetColor string
ToAsset string
ToAssetColor string
Amount string
AmountUSD string
IsPositive bool
Time string
Date string
Status TxStatus
Hash string
ExplorerURL string
}
type TxStats struct {
TotalReceived string
ReceivedCount int
TotalSent string
SentCount int
SwapCount int
SwapVolume string
GasSpent string
}
type TxFilter struct {
Types []string
Assets []string
Accounts []string
}
type TxDateGroup struct {
Date string
Count int
Transactions []TransactionDetail
}
func DefaultTxStats() TxStats {
return TxStats{
TotalReceived: "15420.50",
ReceivedCount: 42,
TotalSent: "8234.18",
SentCount: 28,
SwapCount: 12,
SwapVolume: "$4,892.00",
GasSpent: "127.45",
}
}
func DefaultTxFilter() TxFilter {
return TxFilter{
Types: []string{"send", "receive", "swap", "approve", "contract"},
Assets: []string{"ETH", "SNR", "USDC", "AVAX"},
Accounts: []string{"Main Wallet", "Trading", "Savings"},
}
}
func DefaultTxGroups() []TxDateGroup {
return []TxDateGroup{
{
Date: "Today",
Count: 3,
Transactions: []TransactionDetail{
{Type: TxTypeReceive, Title: "Received ETH", Description: "From: 0x742d...35Cb", Asset: "ETH", AssetColor: "#627eea", Amount: "+0.25 ETH", AmountUSD: "$586.25", IsPositive: true, Time: "2:34 PM", Status: TxStatusConfirmed, Hash: "0x8f4a2b1c..."},
{Type: TxTypeSwap, Title: "Swapped SNR → USDC", Description: "via Uniswap V3", Asset: "SNR", AssetColor: "linear-gradient(135deg, #17c2ff, #0090ff)", ToAsset: "USDC", ToAssetColor: "#2775ca", Amount: "500 SNR → 248.50 USDC", AmountUSD: "$248.50", IsPositive: false, Time: "11:22 AM", Status: TxStatusConfirmed, Hash: "0x7d3e2a1b..."},
{Type: TxTypeApprove, Title: "Approved USDC", Description: "Spender: Uniswap V3 Router", Asset: "USDC", AssetColor: "#2775ca", Amount: "Unlimited", AmountUSD: "—", IsPositive: false, Time: "11:20 AM", Status: TxStatusConfirmed, Hash: "0x1a2b3c4d..."},
},
},
{
Date: "Yesterday",
Count: 2,
Transactions: []TransactionDetail{
{Type: TxTypeSend, Title: "Sent SNR", Description: "To: sonr1k4m...9p3q", Asset: "SNR", AssetColor: "linear-gradient(135deg, #17c2ff, #0090ff)", Amount: "-500 SNR", AmountUSD: "$250.00", IsPositive: false, Time: "4:18 PM", Status: TxStatusConfirmed, Hash: "0x9f8e7d6c..."},
{Type: TxTypeReceive, Title: "Received AVAX", Description: "From: 0xaBcD...1234", Asset: "AVAX", AssetColor: "#e84142", Amount: "+10.00 AVAX", AmountUSD: "$281.50", IsPositive: true, Time: "9:45 AM", Status: TxStatusConfirmed, Hash: "0x2b3c4d5e..."},
},
},
{
Date: "January 1, 2026",
Count: 4,
Transactions: []TransactionDetail{
{Type: TxTypeSwap, Title: "Swapped ETH → USDC", Description: "via Uniswap V3", Asset: "ETH", AssetColor: "#627eea", ToAsset: "USDC", ToAssetColor: "#2775ca", Amount: "0.5 ETH → 1,172.50 USDC", AmountUSD: "$1,172.50", IsPositive: false, Time: "9:15 AM", Status: TxStatusConfirmed, Hash: "0x3c4d5e6f..."},
{Type: TxTypeContract, Title: "Contract Interaction", Description: "Staking Contract: 0x5f3c...8a2b", Asset: "SNR", AssetColor: "linear-gradient(135deg, #17c2ff, #0090ff)", Amount: "-1,000 SNR", AmountUSD: "$500.00 staked", IsPositive: false, Time: "8:30 AM", Status: TxStatusConfirmed, Hash: "0x4d5e6f7a..."},
{Type: TxTypeSend, Title: "Sent ETH", Description: "To: 0x9f8e...7d6c", Asset: "ETH", AssetColor: "#627eea", Amount: "-0.15 ETH", AmountUSD: "$351.85", IsPositive: false, Time: "7:22 AM", Status: TxStatusConfirmed, Hash: "0x5e6f7a8b..."},
{Type: TxTypeReceive, Title: "Received SNR", Description: "From: sonr1abc...xyz9 (Airdrop)", Asset: "SNR", AssetColor: "linear-gradient(135deg, #17c2ff, #0090ff)", Amount: "+2,500 SNR", AmountUSD: "$1,250.00", IsPositive: true, Time: "12:00 AM", Status: TxStatusConfirmed, Hash: "0x6f7a8b9c..."},
},
},
}
}
func assetInitial(asset string) string {
if len(asset) > 0 {
return string(asset[0])
}
return "?"
}
templ TxIcon(txType TxType) {
switch txType {
case TxTypeSend:
case TxTypeReceive:
case TxTypeSwap:
case TxTypeApprove:
case TxTypeContract:
}
}
templ TxAssetBadge(asset string, color string, toAsset string, toColor string) {
if toAsset != "" {
} else {
{ asset }
}
}
templ TxAmount(amount string, usd string, isPositive bool) {
}
templ TxTime(time string, status TxStatus) {
{ time }
switch status {
case TxStatusConfirmed:
Confirmed
case TxStatusPending:
Pending
case TxStatusFailed:
Failed
}
}
templ TxActions(hash string) {
}
templ TxRow(tx TransactionDetail) {
@TxIcon(tx.Type)
{ tx.Title }
{ tx.Description }
@TxAssetBadge(tx.Asset, tx.AssetColor, tx.ToAsset, tx.ToAssetColor)
@TxAmount(tx.Amount, tx.AmountUSD, tx.IsPositive)
@TxTime(tx.Time, tx.Status)
@TxActions(tx.Hash)
for _, tx := range group.Transactions {
@TxRow(tx)
}
}
func formatTxCount(count int) string {
if count == 1 {
return "1 transaction"
}
return string(rune('0'+count/10)) + string(rune('0'+count%10)) + " transactions"
}
templ TxStatsGrid(stats TxStats) {
Total Received
+
{ formatTxCount(stats.ReceivedCount) }
Total Sent
-
{ formatTxCount(stats.SentCount) }
Swaps
{ formatSwapCount(stats.SwapCount) }
{ stats.SwapVolume } volume
Gas Spent
All time
}
func formatSwapCount(count int) string {
if count < 10 {
return string(rune('0' + count))
}
return string(rune('0'+count/10)) + string(rune('0'+count%10))
}
templ TxFilterBar(filter TxFilter) {
Send
Receive
Swap
Approve
Contract
for _, asset := range filter.Assets {
{ asset }
}
for _, account := range filter.Accounts {
{ account }
}
—
}
templ TxPagination(page int, total int, perPage int) {
}
func formatRange(page int, perPage int) string {
start := (page-1)*perPage + 1
end := page * perPage
return formatTotal(start) + "-" + formatTotal(end)
}
func formatTotal(n int) string {
if n < 10 {
return string(rune('0' + n))
}
if n < 100 {
return string(rune('0'+n/10)) + string(rune('0'+n%10))
}
return string(rune('0'+n/100)) + string(rune('0'+(n%100)/10)) + string(rune('0'+n%10))
}
func formatPerPage(n int) string {
return formatTotal(n)
}
func totalPages(total int, perPage int) int {
return (total + perPage - 1) / perPage
}
templ pageButtons(current int, total int) {
if total <= 5 {
for i := 1; i <= total; i++ {
}
} else {
if current > 3 {
...
}
if current > 2 && current < total-1 {
} else if current <= 2 {
} else {
}
if current < total-2 {
...
}
}
}
templ TxStyles() {
}