diff options
Diffstat (limited to 'src/components/Balance.svelte')
| -rw-r--r-- | src/components/Balance.svelte | 35 |
1 files changed, 24 insertions, 11 deletions
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index cc923b7d..fddaae3e 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -1,21 +1,34 @@ <script> + import { Pin } from '$comp'; import { f, s, sat, sats } from '$lib/utils'; - import { animatedRate } from '$lib/store'; + import { animatedRate, pin } from '$lib/store'; import { t } from '$lib/translations'; + let show; export let user; </script> +{#if show && user.haspin && $pin?.length !== 6} + <Pin /> +{/if} + <div class="space-y-2"> - <div class="text-5xl font-bold tabular-nums"> - {#if isNaN($animatedRate)} - <div class="text-gray-200">—</div> - {:else} - {f((user.balance * $animatedRate) / sats, user.currency)} - {/if} - </div> + {#if user.haspin && !$pin} + <button + class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white" + on:click={() => (show = true)}>Show Balance</button + > + {:else} + <div class="text-5xl font-bold tabular-nums"> + {#if isNaN($animatedRate)} + <div class="text-gray-200">—</div> + {:else} + {f((user.balance * $animatedRate) / sats, user.currency)} + {/if} + </div> - <div class="text-secondary text-2xl"> - ⚡️{s(user.balance)} - </div> + <div class="text-secondary text-2xl"> + ⚡️{s(user.balance)} + </div> + {/if} </div> |