Skip to content

Commit db2764c

Browse files
swedishfrenchpressthesimplekid
swedishfrenchpress
and
thesimplekid
authored
Redesign Lightning invoice creation and display with better UX and status handling (#1184)
--------- Co-authored-by: thesimplekid <tsk@thesimplekid.com>
1 parent 5caa7d5 commit db2764c

8 files changed

Lines changed: 1180 additions & 356 deletions

File tree

‎crates/cdk-ldk-node/src/web/handlers/dashboard.rs‎

Lines changed: 67 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ pub async fn dashboard(State(state): State<AppState>) -> Result<Html<String>, St
140140

141141
// Balance Summary as metric cards
142142
div class="card" {
143-
h2 { "Balance Summary" }
144-
div class="metrics-container" {
143+
h2 style="font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 0;" { "Balance Summary" }
144+
div class="metrics-container" style="margin-top: 1.5rem;" {
145145
div class="metric-card" {
146146
div class="metric-value" { (format_sats_as_btc(balances.total_lightning_balance_sats)) }
147147
div class="metric-label" { "Lightning Balance" }
@@ -209,8 +209,8 @@ pub async fn dashboard(State(state): State<AppState>) -> Result<Html<String>, St
209209
// Right side - Connections metrics
210210
aside class="node-metrics" {
211211
div class="card" {
212-
h3 { "Connections" }
213-
div class="metrics-container" {
212+
h3 style="font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 0;" { "Connections" }
213+
div class="metrics-container" style="margin-top: 1.5rem;" {
214214
div class="metric-card" {
215215
div class="metric-value" { (format!("{}/{}", num_connected_peers, num_peers)) }
216216
div class="metric-label" { "Connected Peers" }
@@ -224,51 +224,74 @@ pub async fn dashboard(State(state): State<AppState>) -> Result<Html<String>, St
224224
}
225225
}
226226

227-
// Lightning Network Activity as metric cards
227+
// Activity Sections - Side by Side Layout
228228
div class="card" {
229-
h2 { "Lightning Network Activity" }
230-
div class="metrics-container" {
231-
div class="metric-card" {
232-
div class="metric-value" { (format_sats_as_btc(metrics.lightning_inflow_24h)) }
233-
div class="metric-label" { "24h LN Inflow" }
234-
}
235-
div class="metric-card" {
236-
div class="metric-value" { (format_sats_as_btc(metrics.lightning_outflow_24h)) }
237-
div class="metric-label" { "24h LN Outflow" }
238-
}
239-
div class="metric-card" {
240-
div class="metric-value" { (format_sats_as_btc(metrics.lightning_inflow_all_time)) }
241-
div class="metric-label" { "All-time LN Inflow" }
242-
}
243-
div class="metric-card" {
244-
div class="metric-value" { (format_sats_as_btc(metrics.lightning_outflow_all_time)) }
245-
div class="metric-label" { "All-time LN Outflow" }
246-
}
247-
}
248-
}
229+
h2 style="font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; padding-bottom: 1rem; margin-bottom: 0;" { "Activity Overview" }
249230

250-
// On-chain Activity as metric cards
251-
div class="card" {
252-
h2 { "On-chain Activity" }
253-
div class="metrics-container" {
254-
div class="metric-card" {
255-
div class="metric-value" { (format_sats_as_btc(metrics.onchain_inflow_24h)) }
256-
div class="metric-label" { "24h On-chain Inflow" }
257-
}
258-
div class="metric-card" {
259-
div class="metric-value" { (format_sats_as_btc(metrics.onchain_outflow_24h)) }
260-
div class="metric-label" { "24h On-chain Outflow" }
261-
}
262-
div class="metric-card" {
263-
div class="metric-value" { (format_sats_as_btc(metrics.onchain_inflow_all_time)) }
264-
div class="metric-label" { "All-time On-chain Inflow" }
231+
div class="activity-grid" {
232+
// Lightning Network Activity
233+
div class="activity-section" {
234+
div class="activity-header" {
235+
div class="activity-icon-box" {
236+
svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" {
237+
path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" {}
238+
}
239+
}
240+
h3 class="activity-title" { "Lightning Network Activity" }
241+
}
242+
243+
div class="activity-metrics" {
244+
div class="activity-metric-card" {
245+
div class="activity-metric-label" { "24h Inflow" }
246+
div class="activity-metric-value" { (format_sats_as_btc(metrics.lightning_inflow_24h)) }
247+
}
248+
div class="activity-metric-card" {
249+
div class="activity-metric-label" { "24h Outflow" }
250+
div class="activity-metric-value" { (format_sats_as_btc(metrics.lightning_outflow_24h)) }
251+
}
252+
div class="activity-metric-card" {
253+
div class="activity-metric-label" { "All-time Inflow" }
254+
div class="activity-metric-value" { (format_sats_as_btc(metrics.lightning_inflow_all_time)) }
255+
}
256+
div class="activity-metric-card" {
257+
div class="activity-metric-label" { "All-time Outflow" }
258+
div class="activity-metric-value" { (format_sats_as_btc(metrics.lightning_outflow_all_time)) }
259+
}
260+
}
265261
}
266-
div class="metric-card" {
267-
div class="metric-value" { (format_sats_as_btc(metrics.onchain_outflow_all_time)) }
268-
div class="metric-label" { "All-time On-chain Outflow" }
262+
263+
// On-chain Activity
264+
div class="activity-section" {
265+
div class="activity-header" {
266+
div class="activity-icon-box" {
267+
svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" {
268+
path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" {}
269+
path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" {}
270+
}
271+
}
272+
h3 class="activity-title" { "On-chain Activity" }
273+
}
274+
275+
div class="activity-metrics" {
276+
div class="activity-metric-card" {
277+
div class="activity-metric-label" { "24h Inflow" }
278+
div class="activity-metric-value" { (format_sats_as_btc(metrics.onchain_inflow_24h)) }
279+
}
280+
div class="activity-metric-card" {
281+
div class="activity-metric-label" { "24h Outflow" }
282+
div class="activity-metric-value" { (format_sats_as_btc(metrics.onchain_outflow_24h)) }
283+
}
284+
div class="activity-metric-card" {
285+
div class="activity-metric-label" { "All-time Inflow" }
286+
div class="activity-metric-value" { (format_sats_as_btc(metrics.onchain_inflow_all_time)) }
287+
}
288+
div class="activity-metric-card" {
289+
div class="activity-metric-label" { "All-time Outflow" }
290+
div class="activity-metric-value" { (format_sats_as_btc(metrics.onchain_outflow_all_time)) }
291+
}
292+
}
269293
}
270294
}
271-
272295
}
273296
};
274297

0 commit comments

Comments
 (0)