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

refactor(handlers): change default tab to 'overview' for dashboard

Browse Source
This commit is contained in:
Prad Nu
2026-01-05 15:39:40 -05:00
parent 4cde7e7d38
commit c6fdbf5084
5 changed files with 379 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
handlers/routes.go
View File

@@ -202,7 +202,7 @@ func handleAuthorizeDeny(w http.ResponseWriter, r *http.Request) {
func handleDashboard(w http.ResponseWriter, r *http.Request) {
tab := r.URL.Query().Get("tab")
if tab == "" {
tab = "accounts"
tab = "overview"
}
data := views.DefaultDashboardData()
views.DashboardPage(data, tab).Render(r.Context(), w)

275
layouts/app.templ
View File

@@ -1,254 +1,49 @@
package layouts
import "nebula/components"
type WalletUser struct {
Name string
Address string
}
// Blockchain represents a supported blockchain network
type Blockchain struct {
ID string
Name string
Symbol string
Icon string
Color string
Testnet bool
}
// Account represents a wallet account
type Account struct {
ID string
Name string
Address string
Initials string
Color string
Active bool
}
// AppContext holds navigation state for the header
type AppContext struct {
User WalletUser
Blockchains []Blockchain
Accounts []Account
SelectedChainID string
SelectedAccountID string
}
// DefaultBlockchains returns the available blockchain networks
func DefaultBlockchains() []Blockchain {
return []Blockchain{
{ID: "sonr", Name: "Sonr", Symbol: "SNR", Icon: "cube", Color: "var(--wa-color-primary)", Testnet: false},
{ID: "ethereum", Name: "Ethereum", Symbol: "ETH", Icon: "ethereum", Color: "#627eea", Testnet: false},
{ID: "avalanche", Name: "Avalanche", Symbol: "AVAX", Icon: "mountain", Color: "#e84142", Testnet: false},
{ID: "polygon", Name: "Polygon", Symbol: "MATIC", Icon: "hexagon", Color: "#8247e5", Testnet: false},
{ID: "sonr-testnet", Name: "Sonr Testnet", Symbol: "tSNR", Icon: "cube", Color: "var(--wa-color-warning)", Testnet: true},
}
}
// DefaultAccounts returns the user's wallet accounts
func DefaultAccounts() []Account {
return []Account{
{ID: "main", Name: "Main Wallet", Address: "sonr1x9f...7k2m", Initials: "M", Color: "var(--wa-color-primary)", Active: true},
{ID: "trading", Name: "Trading", Address: "sonr1k4m...9p3q", Initials: "T", Color: "var(--wa-color-success)", Active: false},
{ID: "savings", Name: "Savings", Address: "sonr1r7t...2w8x", Initials: "S", Color: "var(--wa-color-warning)", Active: false},
}
}
// DefaultAppContext returns the default navigation context
func DefaultAppContext() AppContext {
return AppContext{
User: WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"},
Blockchains: DefaultBlockchains(),
Accounts: DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
}
}
templ AppLayout(title string, user WalletUser) {
// DashboardLayout renders the dashboard with header, tabs, and content
templ DashboardLayout(title string, user WalletUser, activeTab string) {
@Base(title) {
@appStyles()
@components.AppNavStyles()
<wa-page>
<div class="app-layout">
@AppHeader(user)
<main class="main-content">
<div class="content-container">
{ children... }
</div>
</main>
</div>
@components.AppHeader(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
Tabs: components.DashboardTabs(activeTab),
SelectedChainID: "sonr",
SelectedAccountID: "main",
ActiveTab: activeTab,
})
@components.AppSubheader(components.DashboardTabs(activeTab))
<main class="content-container">
{ children... }
</main>
</wa-page>
}
}
templ AppHeader(user WalletUser) {
@AppHeaderWithContext(DefaultAppContext())
}
templ AppHeaderWithContext(ctx AppContext) {
<div class="header-wrapper">
<header class="app-header">
<div class="header-left">
<wa-breadcrumb>
<span slot="separator">/</span>
<!-- Sonr Logo -->
<wa-breadcrumb-item>
<a href="/dashboard" class="breadcrumb-logo">
<wa-icon name="cube" style="font-size: 20px; color: var(--wa-color-primary);"></wa-icon>
<span>Sonr</span>
</a>
</wa-breadcrumb-item>
<!-- Blockchain Selector -->
<wa-breadcrumb-item>
<wa-combobox placeholder="Network" value={ ctx.SelectedChainID } size="small" class="nav-combobox">
<small>Mainnets</small>
for _, chain := range ctx.Blockchains {
if !chain.Testnet {
<wa-option value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color: " + chain.Color + ";" }></wa-icon>
{ chain.Name }
</wa-option>
}
}
<wa-divider></wa-divider>
<small>Testnets</small>
for _, chain := range ctx.Blockchains {
if chain.Testnet {
<wa-option value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color: " + chain.Color + ";" }></wa-icon>
{ chain.Name }
</wa-option>
}
}
</wa-combobox>
</wa-breadcrumb-item>
<!-- Account Selector -->
<wa-breadcrumb-item>
<wa-combobox placeholder="Account" value={ ctx.SelectedAccountID } size="small" class="nav-combobox">
for _, account := range ctx.Accounts {
<wa-option value={ account.ID }>
<wa-avatar slot="prefix" initials={ account.Initials } style={ "--size: 20px; background: " + account.Color + ";" }></wa-avatar>
{ account.Name }
</wa-option>
}
<wa-divider></wa-divider>
<wa-option value="__create__">
<wa-icon slot="prefix" name="plus"></wa-icon>
Create Account
</wa-option>
</wa-combobox>
</wa-breadcrumb-item>
</wa-breadcrumb>
</div>
<div class="header-right">
<wa-dropdown>
<wa-avatar slot="trigger" initials="S" style="--size: 36px; background: var(--wa-color-primary); cursor: pointer;"></wa-avatar>
<div style="padding: var(--wa-space-m); border-bottom: 1px solid var(--wa-color-neutral-200);">
<div class="wa-stack wa-gap-0">
<span class="wa-heading-s">{ ctx.User.Name }</span>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ ctx.User.Address }</span>
</div>
</div>
<wa-dropdown-item href="/connections">
<wa-icon slot="icon" name="plug"></wa-icon>
Connections
</wa-dropdown-item>
<wa-dropdown-item href="/devices">
<wa-icon slot="icon" name="mobile"></wa-icon>
Devices
</wa-dropdown-item>
<wa-dropdown-item href="/services">
<wa-icon slot="icon" name="server"></wa-icon>
Services
</wa-dropdown-item>
<wa-dropdown-item href="/settings">
<wa-icon slot="icon" name="gear"></wa-icon>
Settings
</wa-dropdown-item>
<wa-divider></wa-divider>
<wa-dropdown-item variant="danger" href="/logout">
<wa-icon slot="icon" name="arrow-right-from-bracket"></wa-icon>
Sign Out
</wa-dropdown-item>
</wa-dropdown>
</div>
</header>
</div>
}
templ appStyles() {
<style>
.app-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--wa-color-surface-alt);
}
.header-wrapper {
background: var(--wa-color-surface);
border-bottom: 1px solid var(--wa-color-neutral-200);
}
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: var(--wa-space-s) var(--wa-space-l);
background: var(--wa-color-surface);
}
.header-left {
display: flex;
align-items: center;
gap: var(--wa-space-m);
}
.header-right {
display: flex;
align-items: center;
gap: var(--wa-space-m);
}
.main-content {
flex: 1;
overflow-y: auto;
}
.content-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--wa-space-l);
}
/* Breadcrumb Navigation */
.header-left wa-breadcrumb {
--separator-color: var(--wa-color-neutral-400);
}
.header-left wa-breadcrumb::part(base) {
align-items: center;
}
.breadcrumb-logo {
display: flex;
align-items: center;
gap: var(--wa-space-xs);
text-decoration: none;
color: var(--wa-color-neutral-900);
font-weight: 600;
font-size: var(--wa-font-size-m);
}
.breadcrumb-logo:hover {
color: var(--wa-color-primary);
}
.nav-combobox {
--wa-input-border-color: transparent;
--wa-input-background-color: var(--wa-color-surface-alt);
min-width: 140px;
}
.nav-combobox::part(combobox) {
border-radius: var(--wa-radius-m);
padding: var(--wa-space-2xs) var(--wa-space-s);
}
.nav-combobox:hover::part(combobox) {
background: var(--wa-color-neutral-100);
}
.nav-combobox::part(display-input) {
font-weight: 500;
}
</style>
// AppLayout is a simplified layout without tabs (for non-dashboard pages)
templ AppLayout(title string, user WalletUser) {
@Base(title) {
@components.AppNavStyles()
<wa-page>
@components.AppHeader(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
})
<main class="content-container">
{ children... }
</main>
</wa-page>
}
}

131
layouts/app_templ.go
View File

@@ -8,12 +8,15 @@ package layouts
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "nebula/components"
type WalletUser struct {
Name string
Address string
}
func AppLayout(title string, user WalletUser) templ.Component {
// DashboardLayout renders the dashboard with header, tabs, and content
func DashboardLayout(title string, user WalletUser, activeTab string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -46,19 +49,31 @@ func AppLayout(title string, user WalletUser) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = appStyles().Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = components.AppNavStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <wa-page><div class=\"app-layout\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = AppHeader(user).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = components.AppHeader(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
Tabs: components.DashboardTabs(activeTab),
SelectedChainID: "sonr",
SelectedAccountID: "main",
ActiveTab: activeTab,
}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"main-content\"><div class=\"content-container\">")
templ_7745c5c3_Err = components.AppSubheader(components.DashboardTabs(activeTab)).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"content-container\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -66,7 +81,7 @@ func AppLayout(title string, user WalletUser) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div></main></div></wa-page>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -80,7 +95,8 @@ func AppLayout(title string, user WalletUser) templ.Component {
})
}
func AppHeader(user WalletUser) templ.Component {
// AppLayout is a simplified layout without tabs (for non-dashboard pages)
func AppLayout(title string, user WalletUser) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -101,62 +117,51 @@ func AppHeader(user WalletUser) templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"header-wrapper\"><header class=\"app-header\"><div class=\"header-left\"><wa-icon name=\"cube\" style=\"font-size: 24px; color: var(--wa-color-primary);\"></wa-icon> <span class=\"logo-text\">Sonr Wallet</span></div><div class=\"header-right\"><wa-dropdown><wa-avatar slot=\"trigger\" initials=\"S\" style=\"--size: 36px; background: var(--wa-color-primary); cursor: pointer;\"></wa-avatar><div style=\"padding: var(--wa-space-m); border-bottom: 1px solid var(--wa-color-neutral-200);\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-s\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `layouts/app.templ`, Line: 36, Col: 45}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(user.Address)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `layouts/app.templ`, Line: 37, Col: 93}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</span></div></div><wa-dropdown-item href=\"/connections\"><wa-icon slot=\"icon\" name=\"plug\"></wa-icon> Connections</wa-dropdown-item> <wa-dropdown-item href=\"/devices\"><wa-icon slot=\"icon\" name=\"mobile\"></wa-icon> Devices</wa-dropdown-item> <wa-dropdown-item href=\"/services\"><wa-icon slot=\"icon\" name=\"server\"></wa-icon> Services</wa-dropdown-item> <wa-dropdown-item href=\"/settings\"><wa-icon slot=\"icon\" name=\"gear\"></wa-icon> Settings</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item variant=\"danger\" href=\"/logout\"><wa-icon slot=\"icon\" name=\"arrow-right-from-bracket\"></wa-icon> Sign Out</wa-dropdown-item></wa-dropdown></div></header></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
func appStyles() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var6 := templ.GetChildren(ctx)
if templ_7745c5c3_Var6 == nil {
templ_7745c5c3_Var6 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<style>\n\t\t.app-layout {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tmin-height: 100vh;\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t}\n\t\t.header-wrapper {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tmax-width: 1200px;\n\t\t\tmargin: 0 auto;\n\t\t\tpadding: var(--wa-space-s) var(--wa-space-l);\n\t\t\tbackground: var(--wa-color-surface);\n\t\t}\n\t\t.header-left {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-m);\n\t\t}\n\t\t.header-right {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-m);\n\t\t}\n\t\t.logo-text {\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: var(--wa-font-size-l);\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t}\n\t\t.main-content {\n\t\t\tflex: 1;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.content-container {\n\t\t\tmax-width: 1200px;\n\t\t\tmargin: 0 auto;\n\t\t\tpadding: 0 var(--wa-space-l);\n\t\t}\n\t</style>")
templ_7745c5c3_Var4 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = components.AppNavStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " <wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.AppHeader(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<main class=\"content-container\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var3.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</main></wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
templ_7745c5c3_Err = Base(title).Render(templ.WithChildren(ctx, templ_7745c5c3_Var4), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

64
views/dashboard.templ
View File

@@ -136,46 +136,20 @@ func DefaultMarketCapBubbleData() []components.BubbleData {
}
templ DashboardPage(data DashboardData, activeTab string) {
@layouts.AppLayout("Dashboard - Sonr", layouts.WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}) {
@layouts.DashboardLayout("Dashboard - Sonr", layouts.WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, activeTab) {
@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 id="dashboard-content">
if activeTab == "" || activeTab == "overview" {
@OverviewPanel(data)
} else if activeTab == "transactions" {
@TransactionsPanel(data.Transactions)
} else if activeTab == "tokens" {
@TokensPanel(data.Tokens)
} else if activeTab == "nfts" {
@NFTsPanel(data.NFTs)
} else if activeTab == "activity" {
@ActivityPanel()
}
</div>
<!-- Drawers -->
@components.AllDrawers(components.DefaultTokenOptions(), "sonr1x9f4h2k8m3n5p7q2r4s6t8v0w3x5y7z9a1b3c5d7k2m")
@@ -183,12 +157,12 @@ templ DashboardPage(data DashboardData, activeTab string) {
}
}
templ AccountsPanel(data DashboardData) {
templ OverviewPanel(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>
<span class="wa-heading-l">Overview</span>
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">All assets across all networks</span>
</div>
<div class="quick-actions">
<wa-button variant="neutral" appearance="outlined" size="small" data-drawer-open="receive">
@@ -907,8 +881,10 @@ templ ConnectedAppRow(initials string, bg string, name string, domain string, ba
templ dashboardStyles() {
<style>
.dashboard-tabs wa-tab-panel { padding: var(--wa-space-l) 0; }
.dashboard-tabs wa-tab-panel::part(base) { padding: 0; }
/* Dashboard Content */
#dashboard-content {
padding-top: var(--wa-space-l);
}
.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); }

580
views/dashboard_templ.go
View File

File diff suppressed because one or more lines are too long