src/components/Balance.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script lang="ts">
  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
  import Amount from "$comp/Amount.svelte";
  import Pin from "$comp/Pin.svelte";
  import { loc, f, toFiat, s, si, sat, sats } from "$lib/utils";
  import { pin } from "$lib/store";
  import { t } from "$lib/translations";

  let show = $state();
  let { id, user, rate, balance, currency: currencyProp = undefined } = $props();
  let currency = $derived(currencyProp || user.currency);
  let { locked } = $derived(user);
  let locale = $derived(loc(user));
  let toggleShow = (e) => {
    e.preventDefault();
    e.stopPropagation();
    show = !show;
  };
</script>

{#if show && user.haspin && !$pin}
  <Pin
    cancel={() => {
      show = false;
      return "";
    }}
  />
{/if}

<div>
  {#if user.haspin && !$pin}
    <button onclick={toggleShow} class="flex gap-2 text-xl" data-testid="balance-show">
      <PhEyeSlashBold width="32" />
      <div class="my-auto">{$t("user.showBalance")}</div>
    </button>
  {:else if !isNaN(rate)}
    <div class="flex gap-4" data-testid="balance-value">
      <Amount
        amount={Math.max(balance - (id === user.id ? locked || 0 : 0), 0)}
        {rate}
        {currency}
        {locale}
        align="left"
      />
      {#if locked && id === user.id}
        <div class="text-red-600">
          <Amount amount={locked} {rate} {currency} {locale} align="left" locked={true} />
        </div>
      {/if}
    </div>
  {:else}
    <div class="text-gray-200">&mdash;</div>
  {/if}
</div>