package components // TokenOption represents a token choice in dropdowns type TokenOption struct { Symbol string Name string Balance string Color string Initials string } // DefaultTokenOptions returns the standard token options for drawers func DefaultTokenOptions() []TokenOption { return []TokenOption{ {Symbol: "SNR", Name: "Sonr", Balance: "8,432.50", Color: "linear-gradient(135deg, #17c2ff, #0090ff)", Initials: "S"}, {Symbol: "ETH", Name: "Ethereum", Balance: "2.847", Color: "#627eea", Initials: "E"}, {Symbol: "USDC", Name: "USD Coin", Balance: "1,250.00", Color: "#2775ca", Initials: "U"}, {Symbol: "AVAX", Name: "Avalanche", Balance: "24.83", Color: "#e84142", Initials: "A"}, } } // ReceiveDrawer component for receiving tokens templ ReceiveDrawer(tokens []TokenOption, walletAddress string) {

for _, token := range tokens { { token.Symbol } - { token.Name } }

Scan to receive tokens

Your Wallet Address

{ walletAddress }

Only send SNR tokens to this address. Sending other assets may result in permanent loss.

Share Address

@drawerStyles() } // SendDrawer component for sending tokens templ SendDrawer(tokens []TokenOption) {

for _, token := range tokens { { token.Symbol } - { token.Balance } available }

SNR

≈ $0.00 USD

MAX

Slow

Standard

Fast

Estimated Gas ~0.001 SNR ($0.05)

Amount 0.00 SNR

Network Fee ~0.001 SNR

Total 0.001 SNR

Cancel

Review Send

@drawerStyles() } // SwapDrawer component for swapping tokens templ SwapDrawer(tokens []TokenOption) {

You Pay Balance: 2.847 ETH

ETH for _, token := range tokens { { token.Symbol } }

≈ $0.00

25%

50%

MAX

You Receive Balance: 1,250.00 USDC

USDC for _, token := range tokens { { token.Symbol } }

≈ $0.00

Slippage Tolerance

0.1%

0.5%

Custom

minutes

Rate 1 ETH = 2,345.00 USDC

Price Impact < 0.01%

Minimum Received 0.00 USDC

Network Fee ~$2.50

Route ETH USDC

Price updates in real-time. Review carefully before confirming.

Cancel

Review Swap

@drawerStyles() @swapDirectionScript() } // Script to handle swap direction button script swapDirectionScript() { document.getElementById('swap-direction-btn')?.addEventListener('click', function() { this.style.transform = this.style.transform === 'rotate(180deg)' ? '' : 'rotate(180deg)'; }); } // Drawer-specific styles templ drawerStyles() { } // AllDrawers renders all three drawers together for convenience templ AllDrawers(tokens []TokenOption, walletAddress string) { @ReceiveDrawer(tokens, walletAddress) @SendDrawer(tokens) @SwapDrawer(tokens) } // DrawerTriggerScript provides the JavaScript to wire up drawer triggers script drawerTriggerScript() { // Open receive drawer document.querySelectorAll('[data-drawer-open="receive"]').forEach(el => { el.addEventListener('click', () => { document.getElementById('receive-drawer').open = true; }); }); // Open send drawer document.querySelectorAll('[data-drawer-open="send"]').forEach(el => { el.addEventListener('click', () => { document.getElementById('send-drawer').open = true; }); }); // Open swap drawer document.querySelectorAll('[data-drawer-open="swap"]').forEach(el => { el.addEventListener('click', () => { document.getElementById('swap-drawer').open = true; }); }); } // DrawerTriggers component to initialize drawer triggers templ DrawerTriggers() { @drawerTriggerScript() }