Skip to content

Commit 998ced7

Browse files
spe1020spe1020
authored
Merge pull request #137 from dmnyc/sats-are-the-standard
SATS: Clean up wallet balance display: remove redundant labels, relocate controls
2 parents 8bff54d + 302dd31 commit 998ced7

File tree

3 files changed

+137
-147
lines changed

3 files changed

+137
-147
lines changed

‎src/components/WalletBalance.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
{:else}
144144
<span class="min-w-[3.5rem] text-right">***</span>
145145
{/if}
146-
<span class="text-caption text-xs">sats</span>
146+
147147
<CaretDownIcon size={12} class="text-caption ml-0.5" />
148148
</button>
149149

@@ -256,7 +256,7 @@
256256
{:else}
257257
<span class="min-w-[3.5rem] text-right">***</span>
258258
{/if}
259-
<span class="text-caption text-xs">sats</span>
259+
260260
<CaretDownIcon size={12} class="text-caption ml-0.5" />
261261
</button>
262262

@@ -361,7 +361,7 @@
361361
{:else}
362362
<span class="min-w-[3.5rem] text-right">***</span>
363363
{/if}
364-
<span class="text-caption text-xs">sats</span>
364+
365365
<CaretDownIcon size={12} class="text-caption ml-0.5" />
366366
</button>
367367

‎src/routes/settings/wallet/+page.svelte‎

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,76 @@
11
<script lang="ts">
2-
import { onMount } from 'svelte'
3-
import { goto } from '$app/navigation'
4-
import { browser } from '$app/environment'
5-
import {
6-
walletBalance,
7-
walletConnected,
8-
activeWallet,
9-
getWalletKindName
10-
} from '$lib/wallet'
11-
import {
12-
lightningAddress,
13-
walletInitialized
14-
} from '$lib/spark'
15-
import { userPublickey } from '$lib/nostr'
16-
import Button from '../../../components/Button.svelte'
17-
import LightningIcon from 'phosphor-svelte/lib/Lightning'
18-
import WalletIcon from 'phosphor-svelte/lib/Wallet'
19-
import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRight'
2+
import { onMount } from 'svelte';
3+
import { goto } from '$app/navigation';
4+
import { browser } from '$app/environment';
5+
import { walletBalance, walletConnected, activeWallet, getWalletKindName } from '$lib/wallet';
6+
import { lightningAddress, walletInitialized } from '$lib/spark';
7+
import { userPublickey } from '$lib/nostr';
8+
import Button from '../../../components/Button.svelte';
9+
import LightningIcon from 'phosphor-svelte/lib/Lightning';
10+
import WalletIcon from 'phosphor-svelte/lib/Wallet';
11+
import ArrowRightIcon from 'phosphor-svelte/lib/ArrowRight';
2012
21-
// Redirect to new wallet page on mount
22-
onMount(() => {
23-
if (browser) {
24-
goto('/wallet')
25-
}
26-
})
13+
// Redirect to new wallet page on mount
14+
onMount(() => {
15+
if (browser) {
16+
goto('/wallet');
17+
}
18+
});
2719
28-
function formatBalance(balance: number | null): string {
29-
if (balance === null) return '---'
30-
return balance.toLocaleString()
31-
}
20+
function formatBalance(balance: number | null): string {
21+
if (balance === null) return '---';
22+
return balance.toLocaleString();
23+
}
3224
</script>
3325

3426
<div class="space-y-6 p-4">
35-
<h1 class="text-2xl font-bold" style="color: var(--color-text-primary)">Wallet Settings</h1>
27+
<h1 class="text-2xl font-bold" style="color: var(--color-text-primary)">Wallet Settings</h1>
3628

37-
<p class="text-caption">
38-
Wallet management has moved to a dedicated page with more features.
39-
</p>
29+
<p class="text-caption">Wallet management has moved to a dedicated page with more features.</p>
4030

41-
<!-- Quick status if wallet connected -->
42-
{#if $walletConnected && $activeWallet}
43-
<div class="rounded-xl p-4" style="background-color: var(--color-input-bg); border: 1px solid var(--color-input-border);">
44-
<div class="flex items-center gap-3 mb-2">
45-
<LightningIcon size={24} weight="fill" class="text-amber-500" />
46-
<span class="font-medium" style="color: var(--color-text-primary)">Connected Wallet</span>
47-
</div>
48-
<div class="ml-9 space-y-1">
49-
<p style="color: var(--color-text-primary)">{$activeWallet.name} ({getWalletKindName($activeWallet.kind)})</p>
50-
<p class="text-2xl font-bold" style="color: var(--color-text-primary)">{formatBalance($walletBalance)} <span class="text-sm font-normal text-caption">sats</span></p>
51-
{#if $lightningAddress}
52-
<p class="text-sm text-caption">Lightning: {$lightningAddress}</p>
53-
{/if}
54-
</div>
55-
</div>
56-
{:else}
57-
<div class="rounded-xl p-4" style="background-color: var(--color-input-bg); border: 1px solid var(--color-input-border);">
58-
<div class="flex items-center gap-3">
59-
<WalletIcon size={24} class="text-caption" />
60-
<span style="color: var(--color-text-primary)">No wallet connected</span>
61-
</div>
62-
</div>
63-
{/if}
31+
<!-- Quick status if wallet connected -->
32+
{#if $walletConnected && $activeWallet}
33+
<div
34+
class="rounded-xl p-4"
35+
style="background-color: var(--color-input-bg); border: 1px solid var(--color-input-border);"
36+
>
37+
<div class="flex items-center gap-3 mb-2">
38+
<LightningIcon size={24} weight="fill" class="text-amber-500" />
39+
<span class="font-medium" style="color: var(--color-text-primary)">Connected Wallet</span>
40+
</div>
41+
<div class="ml-9 space-y-1">
42+
<p style="color: var(--color-text-primary)">
43+
{$activeWallet.name} ({getWalletKindName($activeWallet.kind)})
44+
</p>
45+
<p class="text-2xl font-bold" style="color: var(--color-text-primary)">
46+
{formatBalance($walletBalance)}
47+
</p>
48+
{#if $lightningAddress}
49+
<p class="text-sm text-caption">Lightning: {$lightningAddress}</p>
50+
{/if}
51+
</div>
52+
</div>
53+
{:else}
54+
<div
55+
class="rounded-xl p-4"
56+
style="background-color: var(--color-input-bg); border: 1px solid var(--color-input-border);"
57+
>
58+
<div class="flex items-center gap-3">
59+
<WalletIcon size={24} class="text-caption" />
60+
<span style="color: var(--color-text-primary)">No wallet connected</span>
61+
</div>
62+
</div>
63+
{/if}
6464

65-
<Button on:click={() => goto('/wallet')}>
66-
<span class="flex items-center gap-2">
67-
Go to Wallet Page
68-
<ArrowRightIcon size={16} />
69-
</span>
70-
</Button>
65+
<Button on:click={() => goto('/wallet')}>
66+
<span class="flex items-center gap-2">
67+
Go to Wallet Page
68+
<ArrowRightIcon size={16} />
69+
</span>
70+
</Button>
7171

72-
<p class="text-sm text-caption">
73-
The wallet page lets you connect WebLN, NWC, or Spark wallets, view your balance, and manage multiple wallets.
74-
</p>
72+
<p class="text-sm text-caption">
73+
The wallet page lets you connect WebLN, NWC, or Spark wallets, view your balance, and manage
74+
multiple wallets.
75+
</p>
7576
</div>

‎src/routes/wallet/+page.svelte‎

Lines changed: 69 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2265,127 +2265,117 @@
22652265
<!-- WebLN Balance Overview -->
22662266
{#if $weblnConnected}
22672267
<div class="mb-8 p-6 rounded-2xl bg-input border border-input">
2268-
<div class="flex items-center justify-between mb-4">
2269-
<div class="flex items-center gap-2">
2270-
<div
2271-
class="w-6 h-6 rounded-full bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center"
2272-
>
2273-
<WeblnLogo size={14} className="text-white" />
2274-
</div>
2275-
<span class="font-medium text-primary-color">Balance</span>
2276-
</div>
2277-
<div class="flex items-center gap-3">
2278-
<button
2279-
class="flex items-center gap-1 text-sm text-caption hover:text-primary transition-colors cursor-pointer"
2280-
on:click={toggleBalanceVisibility}
2281-
title={$balanceVisible ? 'Hide balance' : 'Show balance'}
2282-
>
2283-
{#if $balanceVisible}
2284-
<EyeSlashIcon size={16} />
2285-
{:else}
2286-
<EyeIcon size={16} />
2287-
{/if}
2288-
</button>
2289-
<button
2290-
class="text-caption hover:text-primary transition-colors cursor-pointer disabled:opacity-50"
2291-
on:click={refreshWeblnBalance}
2292-
disabled={weblnBalanceLoading}
2293-
title="Refresh balance"
2294-
>
2295-
<span class:animate-spin={weblnBalanceLoading}>
2296-
<ArrowsClockwiseIcon size={16} />
2297-
</span>
2298-
</button>
2299-
</div>
2300-
</div>
23012268
<div class="flex items-start justify-between mb-2">
23022269
<div>
23032270
<div class="text-4xl font-bold text-primary-color flex items-center gap-3">
2271+
<div
2272+
class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center flex-shrink-0"
2273+
>
2274+
<WeblnLogo size={18} className="text-white" />
2275+
</div>
23042276
{#if weblnBalanceLoading}
23052277
<span class="animate-pulse">...</span>
23062278
{:else if weblnBalance === null}
23072279
<span class="text-2xl text-caption">Balance not available</span>
23082280
{:else if $balanceVisible}
23092281
{formatBalance(weblnBalance)}
2310-
<span class="text-lg font-normal text-caption">sats</span>
23112282
{:else}
2312-
*** <span class="text-lg font-normal text-caption">sats</span>
2283+
***
23132284
{/if}
23142285
</div>
23152286
{#if weblnBalance !== null}
2316-
<FiatBalance satoshis={weblnBalance} visible={$balanceVisible} />
2287+
<div class="ml-11">
2288+
<FiatBalance satoshis={weblnBalance} visible={$balanceVisible} />
2289+
</div>
23172290
{/if}
23182291
</div>
2319-
<CurrencySelector compact />
2320-
</div>
2321-
<div class="text-sm text-caption">
2322-
Active: {$weblnWalletName || 'Browser Wallet'} (WebLN)
2292+
<div class="flex flex-col items-end gap-2">
2293+
<CurrencySelector compact />
2294+
<div class="flex items-center gap-3">
2295+
<button
2296+
class="flex items-center gap-1 text-sm text-caption hover:text-primary transition-colors cursor-pointer"
2297+
on:click={toggleBalanceVisibility}
2298+
title={$balanceVisible ? 'Hide balance' : 'Show balance'}
2299+
>
2300+
{#if $balanceVisible}
2301+
<EyeSlashIcon size={16} />
2302+
{:else}
2303+
<EyeIcon size={16} />
2304+
{/if}
2305+
</button>
2306+
<button
2307+
class="text-caption hover:text-primary transition-colors cursor-pointer disabled:opacity-50"
2308+
on:click={refreshWeblnBalance}
2309+
disabled={weblnBalanceLoading}
2310+
title="Refresh balance"
2311+
>
2312+
<span class:animate-spin={weblnBalanceLoading}>
2313+
<ArrowsClockwiseIcon size={16} />
2314+
</span>
2315+
</button>
2316+
</div>
2317+
</div>
23232318
</div>
23242319
</div>
23252320
{/if}
23262321

23272322
<!-- Balance Overview -->
23282323
{#if $walletConnected && $activeWallet && !$weblnConnected}
23292324
<div class="mb-8 p-6 rounded-2xl bg-input border border-input">
2330-
<div class="flex items-center justify-between mb-4">
2331-
<div class="flex items-center gap-2">
2332-
<LightningIcon size={24} weight="fill" class="text-amber-500" />
2333-
<span class="font-medium text-primary-color">Balance</span>
2334-
</div>
2335-
<div class="flex items-center gap-3">
2336-
<button
2337-
class="flex items-center gap-1 text-sm text-caption hover:text-primary transition-colors cursor-pointer"
2338-
on:click={toggleBalanceVisibility}
2339-
title={$balanceVisible ? 'Hide balance' : 'Show balance'}
2340-
>
2341-
{#if $balanceVisible}
2342-
<EyeSlashIcon size={16} />
2343-
{:else}
2344-
<EyeIcon size={16} />
2345-
{/if}
2346-
</button>
2347-
<button
2348-
class="text-caption hover:text-primary transition-colors cursor-pointer disabled:opacity-50"
2349-
on:click={() => refreshBalance()}
2350-
disabled={$walletLoading}
2351-
title="Refresh balance"
2352-
>
2353-
<span class:animate-spin={$walletLoading}>
2354-
<ArrowsClockwiseIcon size={16} />
2355-
</span>
2356-
</button>
2357-
</div>
2358-
</div>
23592325
<div class="flex items-start justify-between mb-2">
23602326
<div>
23612327
<div class="text-4xl font-bold text-primary-color flex items-center gap-3">
2328+
<LightningIcon size={32} weight="fill" class="text-amber-500 flex-shrink-0" />
23622329
{#if $walletLoading || $walletBalance === null}
23632330
<span class="animate-pulse">...</span>
23642331
{:else if $balanceVisible}
23652332
{formatBalance($walletBalance)}
2366-
<span class="text-lg font-normal text-caption">sats</span>
23672333
{:else}
2368-
*** <span class="text-lg font-normal text-caption">sats</span>
2334+
***
23692335
{/if}
23702336
</div>
2371-
<FiatBalance satoshis={$walletBalance} visible={$balanceVisible} />
2337+
<div class="ml-11">
2338+
<FiatBalance satoshis={$walletBalance} visible={$balanceVisible} />
2339+
</div>
23722340
<!-- Syncing indicator when Spark wallet balance is zero -->
23732341
{#if $activeWallet?.kind === 4 && $walletBalance === 0n && $sparkSyncing}
2374-
<div class="text-xs text-caption flex items-center gap-1 mt-1">
2342+
<div class="text-xs text-caption flex items-center gap-1 mt-1 ml-11">
23752343
<ArrowsClockwiseIcon size={12} class="animate-spin" />
23762344
Syncing wallet...
23772345
</div>
23782346
{/if}
23792347
</div>
2380-
<CurrencySelector compact />
2381-
</div>
2382-
<div class="text-sm text-caption mb-4">
2383-
Active: {$activeWallet.name} ({getWalletKindName($activeWallet.kind)})
2348+
<div class="flex flex-col items-end gap-2">
2349+
<CurrencySelector compact />
2350+
<div class="flex items-center gap-3">
2351+
<button
2352+
class="flex items-center gap-1 text-sm text-caption hover:text-primary transition-colors cursor-pointer"
2353+
on:click={toggleBalanceVisibility}
2354+
title={$balanceVisible ? 'Hide balance' : 'Show balance'}
2355+
>
2356+
{#if $balanceVisible}
2357+
<EyeSlashIcon size={16} />
2358+
{:else}
2359+
<EyeIcon size={16} />
2360+
{/if}
2361+
</button>
2362+
<button
2363+
class="text-caption hover:text-primary transition-colors cursor-pointer disabled:opacity-50"
2364+
on:click={() => refreshBalance()}
2365+
disabled={$walletLoading}
2366+
title="Refresh balance"
2367+
>
2368+
<span class:animate-spin={$walletLoading}>
2369+
<ArrowsClockwiseIcon size={16} />
2370+
</span>
2371+
</button>
2372+
</div>
2373+
</div>
23842374
</div>
23852375

23862376
<!-- Send/Receive buttons - only for NWC and Spark wallets -->
23872377
{#if $activeWallet.kind !== 1}
2388-
<div class="flex gap-3">
2378+
<div class="flex gap-3 mt-4">
23892379
<button
23902380
class="flex-1 flex items-center justify-center gap-2 py-3 px-4 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-medium transition-colors"
23912381
on:click={() => {
@@ -2570,9 +2560,8 @@
25702560
<p class="text-2xl font-bold mb-1" style="color: var(--color-text-primary)">
25712561
{#if $balanceVisible}
25722562
{$bitcoinConnectBalance.toLocaleString()}
2573-
<span class="text-sm font-normal text-caption">sats</span>
25742563
{:else}
2575-
*** <span class="text-sm font-normal text-caption">sats</span>
2564+
***
25762565
{/if}
25772566
</p>
25782567
{:else}

0 commit comments

Comments
 (0)