src/components/InvoiceTypes.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
55
56
57
58
59
60
61
62
63

<script>
  let {
    aid,
    user,
    type,
    types,
    t,
    setType
  } = $props();
</script>

{#if aid === user?.id}
  <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.bitcoin}
      class:text-secondary={type === types.bitcoin}
      onclick={() => setType(types.bitcoin)}
    >
      <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
      <div class="my-auto text-lg">Bitcoin</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.liquid}
      class:text-secondary={type === types.liquid}
      onclick={() => setType(types.liquid)}
    >
      <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
      <div class="my-auto text-lg">Liquid</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.lightning}
      class:text-secondary={type === types.lightning}
      onclick={() => setType(types.lightning)}
    >
      <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
        <div class="m-auto">⚡️</div>
      </div>
      <div class="my-auto text-lg">Lightning</div>
    </button>

    <a href={`/receive`} class="block contents">
      <button class="btn flex-nowrap">
        <img src="/images/cash.png" class="w-8 my-auto" />
        <div class="my-auto text-lg">Ecash</div>
      </button>
    </a>
  </div>

  {#if type === types.liquid}
    <div class="flex justify-center">
      <div class="my-auto text-xl text-center text-secondary">
        {t("payments.onlyLbtc")}
        <span class="text-teal-500 font-bold">L-BTC</span>,
        {t("payments.dontDeposit")}
      </div>
    </div>
  {/if}
{/if}