nebula/components/transactions.templ

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) {
	<div class={ "tx-icon", string(txType) }>
		switch txType {
			case TxTypeSend:
				<wa-icon name="arrow-up"></wa-icon>
			case TxTypeReceive:
				<wa-icon name="arrow-down"></wa-icon>
			case TxTypeSwap:
				<wa-icon name="arrow-right-arrow-left"></wa-icon>
			case TxTypeApprove:
				<wa-icon name="check"></wa-icon>
			case TxTypeContract:
				<wa-icon name="file-code"></wa-icon>
		}
	</div>
}

templ TxAssetBadge(asset string, color string, toAsset string, toColor string) {
	<div class="tx-asset">
		<wa-avatar initials={ assetInitial(asset) } style={ "--size: 24px; background: " + color + ";" }></wa-avatar>
		if toAsset != "" {
			<wa-icon name="arrow-right" style="font-size: 10px; color: var(--wa-color-neutral-400);"></wa-icon>
			<wa-avatar initials={ assetInitial(toAsset) } style={ "--size: 24px; background: " + toColor + ";" }></wa-avatar>
		} else {
			<span>{ asset }</span>
		}
	</div>
}

templ TxAmount(amount string, usd string, isPositive bool) {
	<div class={ "tx-amount", templ.KV("positive", isPositive), templ.KV("negative", !isPositive) }>
		<div class="value">{ amount }</div>
		<div class="usd">{ usd }</div>
	</div>
}

templ TxTime(time string, status TxStatus) {
	<div class="tx-time">
		<div class="time">{ time }</div>
		switch status {
			case TxStatusConfirmed:
				<wa-badge variant="success" size="small">Confirmed</wa-badge>
			case TxStatusPending:
				<wa-badge variant="warning" size="small">Pending</wa-badge>
			case TxStatusFailed:
				<wa-badge variant="danger" size="small">Failed</wa-badge>
		}
	</div>
}

templ TxActions(hash string) {
	<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={ hash } copy-label="Copy hash"></wa-copy-button>
	</div>
}

templ TxRow(tx TransactionDetail) {
	<div class="tx-row">
		@TxIcon(tx.Type)
		<div class="tx-details">
			<div class="tx-type-label">{ tx.Title }</div>
			<div class="tx-address">{ tx.Description }</div>
		</div>
		@TxAssetBadge(tx.Asset, tx.AssetColor, tx.ToAsset, tx.ToAssetColor)
		@TxAmount(tx.Amount, tx.AmountUSD, tx.IsPositive)
		@TxTime(tx.Time, tx.Status)
		@TxActions(tx.Hash)
	</div>
}

templ TxDateGroupComponent(group TxDateGroup) {
	<div class="date-group">
		<div class="date-group-header">
			<h3>{ group.Date }</h3>
			<span class="tx-count">{ formatTxCount(group.Count) }</span>
		</div>
		for _, tx := range group.Transactions {
			@TxRow(tx)
		}
	</div>
}

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) {
	<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 change-positive">
					+<wa-format-number type="currency" currency="USD" value={ stats.TotalReceived } lang="en-US"></wa-format-number>
				</span>
				<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ formatTxCount(stats.ReceivedCount) }</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 change-negative">
					-<wa-format-number type="currency" currency="USD" value={ stats.TotalSent } lang="en-US"></wa-format-number>
				</span>
				<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ formatTxCount(stats.SentCount) }</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">{ formatSwapCount(stats.SwapCount) }</span>
				<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ stats.SwapVolume } 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={ stats.GasSpent } 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>
}

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) {
	<div class="filter-bar">
		<wa-select placeholder="All Types" size="small" style="min-width: 140px;" clearable name="filter-type">
			<wa-option value="send">
				<wa-icon slot="prefix" name="arrow-up" style="color: var(--wa-color-danger);"></wa-icon>
				Send
			</wa-option>
			<wa-option value="receive">
				<wa-icon slot="prefix" name="arrow-down" style="color: var(--wa-color-success);"></wa-icon>
				Receive
			</wa-option>
			<wa-option value="swap">
				<wa-icon slot="prefix" name="arrow-right-arrow-left" style="color: var(--wa-color-primary);"></wa-icon>
				Swap
			</wa-option>
			<wa-option value="approve">
				<wa-icon slot="prefix" name="check"></wa-icon>
				Approve
			</wa-option>
			<wa-option value="contract">
				<wa-icon slot="prefix" name="file-code"></wa-icon>
				Contract
			</wa-option>
		</wa-select>
		<wa-select placeholder="All Assets" size="small" style="min-width: 140px;" clearable name="filter-asset">
			for _, asset := range filter.Assets {
				<wa-option value={ asset }>{ asset }</wa-option>
			}
		</wa-select>
		<wa-select placeholder="All Accounts" size="small" style="min-width: 160px;" clearable name="filter-account">
			for _, account := range filter.Accounts {
				<wa-option value={ account }>{ account }</wa-option>
			}
		</wa-select>
		<wa-input type="date" size="small" style="width: 150px;" placeholder="From date" name="filter-from"></wa-input>
		<span style="color: var(--wa-color-neutral-400);">—</span>
		<wa-input type="date" size="small" style="width: 150px;" placeholder="To date" name="filter-to"></wa-input>
		<div style="flex: 1;"></div>
		<wa-input placeholder="Search by hash or address..." size="small" style="width: 240px;" name="filter-search">
			<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
		</wa-input>
	</div>
}

templ TxPagination(page int, total int, perPage int) {
	<div class="pagination">
		<div class="pagination-info">
			Showing <strong>{ formatRange(page, perPage) }</strong> of <strong>{ formatTotal(total) }</strong> transactions
		</div>
		<div class="pagination-controls">
			<wa-select value={ formatPerPage(perPage) } size="small" style="width: 100px;" name="limit">
				<wa-option value="10">10 / page</wa-option>
				<wa-option value="25">25 / page</wa-option>
				<wa-option value="50">50 / page</wa-option>
				<wa-option value="100">100 / page</wa-option>
			</wa-select>
			<div class="page-numbers">
				<button class={ "page-btn", templ.KV("disabled", page == 1) } disabled?={ page == 1 }>
					<wa-icon name="chevron-left"></wa-icon>
				</button>
				@pageButtons(page, totalPages(total, perPage))
				<button class={ "page-btn", templ.KV("disabled", page >= totalPages(total, perPage)) } disabled?={ page >= totalPages(total, perPage) }>
					<wa-icon name="chevron-right"></wa-icon>
				</button>
			</div>
		</div>
	</div>
}

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++ {
			<button class={ "page-btn", templ.KV("active", i == current) }>{ formatTotal(i) }</button>
		}
	} else {
		<button class={ "page-btn", templ.KV("active", current == 1) }>1</button>
		if current > 3 {
			<span style="padding: 0 var(--wa-space-xs); color: var(--wa-color-neutral-400);">...</span>
		}
		if current > 2 && current < total-1 {
			<button class="page-btn">{ formatTotal(current - 1) }</button>
			<button class="page-btn active">{ formatTotal(current) }</button>
			<button class="page-btn">{ formatTotal(current + 1) }</button>
		} else if current <= 2 {
			<button class={ "page-btn", templ.KV("active", current == 2) }>2</button>
			<button class={ "page-btn", templ.KV("active", current == 3) }>3</button>
		} else {
			<button class={ "page-btn", templ.KV("active", current == total-2) }>{ formatTotal(total - 2) }</button>
			<button class={ "page-btn", templ.KV("active", current == total-1) }>{ formatTotal(total - 1) }</button>
		}
		if current < total-2 {
			<span style="padding: 0 var(--wa-space-xs); color: var(--wa-color-neutral-400);">...</span>
		}
		<button class={ "page-btn", templ.KV("active", current == total) }>{ formatTotal(total) }</button>
	}
}

templ TxStyles() {
	<style>
		.tx-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		.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.approve { background: var(--wa-color-neutral-100); color: var(--wa-color-neutral-600); }
		.tx-icon.contract { background: var(--wa-color-warning-subtle); color: var(--wa-color-warning); }
		
		.tx-asset {
			display: flex;
			align-items: center;
			gap: var(--wa-space-xs);
		}
		
		.tx-row {
			display: grid;
			grid-template-columns: auto 1fr auto 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-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-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); margin-bottom: 2px; }
		
		.tx-actions { display: flex; gap: var(--wa-space-2xs); }
		
		.date-group { margin-bottom: var(--wa-space-xl); }
		.date-group-header {
			display: flex;
			align-items: center;
			gap: var(--wa-space-s);
			padding: var(--wa-space-s) 0;
			margin-bottom: var(--wa-space-s);
			border-bottom: 1px solid var(--wa-color-neutral-200);
		}
		.date-group-header h3 {
			margin: 0;
			font-size: var(--wa-font-size-s);
			font-weight: 600;
			color: var(--wa-color-neutral-700);
		}
		.tx-count { font-size: var(--wa-font-size-xs); color: var(--wa-color-neutral-500); }
		
		.filter-bar {
			display: flex;
			align-items: center;
			gap: var(--wa-space-m);
			margin-bottom: var(--wa-space-l);
			flex-wrap: wrap;
		}
		
		.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:not(:disabled) { 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: 1100px) {
			.tx-row { grid-template-columns: auto 1fr auto auto auto; }
			.tx-asset { display: none; }
		}
		@media (max-width: 900px) {
			.tx-row { grid-template-columns: auto 1fr auto; }
			.tx-time { display: none; }
		}
	</style>
}