aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Lnurlw.svelte
blob: b83e648fceb5adf5261816b492b2b601efdbc1e4 (plain) (blame)
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
64
65
66
<script>
  import { t } from "$lib/translations";
  import { enhance } from "$app/forms";
  import Numpad from "$comp/Numpad.svelte";
  import Spinner from "$comp/Spinner.svelte";
  import { pin } from "$lib/store";

  export let data, form;

  let { currency, username } = data.user;
  let {
    defaultDescription,
    minWithdrawable,
    maxWithdrawable,
    k1,
    callback,
    rates,
  } = data;
  $: rate = rates[currency];

  let amount = Math.round(maxWithdrawable / 1000),
    loading;

  let submit = () => (loading = true);
</script>

<div class="container px-4 mt-20 max-w-xl mx-auto">
  <div class="text-center mb-8">
    <div>
      <h1 class="text-3xl md:text-4xl font-semibold mb-2">
        {defaultDescription}
      </h1>
    </div>
  </div>

  {#if form?.error}
    <div class="text-red-600 text-center mb-5">
      {form.error}
    </div>
  {/if}

  <Numpad bind:amount {currency} bind:rate />

  <form action="?/withdraw" method="POST" use:enhance on:submit={submit}>
    <input name="amount" value={amount} type="hidden" />
    <input name="username" value={username} type="hidden" />
    <input name="currency" value={currency} type="hidden" />
    <input name="minWithdrawable" value={minWithdrawable} type="hidden" />
    <input name="maxWithdrawable" value={maxWithdrawable} type="hidden" />
    <input name="callback" value={callback} type="hidden" />
    <input name="k1" value={k1} type="hidden" />

    <div class="flex w-full">
      <button
        type="submit"
        class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
      >
        {#if loading}
          <Spinner />
        {:else}
          {$t("payments.redeem")}
        {/if}
      </button>
    </div>
  </form>
</div>