aboutsummaryrefslogtreecommitdiffstats
path: root/src/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/app.css')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-04 06:18:29 +0000
' href='#n40'>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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 
<script>
  import { tick } from "svelte";
  import handler from "$lib/handler";
  import { sats, f, s } from "$lib/utils";
  import { t } from "$lib/translations";
  import { enhance } from "$app/forms";
  import Numpad from "$comp/Numpad.svelte";
  import Spinner from "$comp/Spinner.svelte";
  import { fiat, pin } from "$lib/store";

  let { data, form } = $props();

  let { currency, username } = data.user;
  let {
    defaultDescription,
    minWithdrawable,
    maxWithdrawable,
    k1,
    callback,
    rate,
  } = data;

  let amount = $state(Math.round(minWithdrawable / 1000));
  let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));

  let submit = $state();
  let submitting = $state();
  let toggle = () => (submitting = !submitting);

  let setMax = async (e) => {
    e.preventDefault();
    $fiat = false;
    await tick();
    amount = Math.floor(maxWithdrawable / 1000);
  };
</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}

  {#if minWithdrawable === maxWithdrawable}
    <div class="text-center font-bold text-2xl mb-4">
      <div>
        {f(amountFiat, currency)}
      </div>
      <div>
        <span class="text-secondary font-normal text-xl"
          >⚡️{`${s(amount)}`}</span
        >
      </div>
    </div>
  {:else}
    <Numpad bind:amount {currency} {rate} />
  {/if}

  <form
    use:enhance={handler(toggle)}
    action="?/withdraw"
    method="POST"
    onsubmit={submit}
    class="space-y-5"
  >
    <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 gap-2">
      {#if maxWithdrawable > minWithdrawable}
        <button
          type="button"
          class="btn !w-auto grow"
          onclick={setMax}
          disabled={submitting}
          onkeydown={setMax}
          >Max ⚡️{s(Math.floor(maxWithdrawable / 1000))}</button
        >
      {/if}

      <button
        use:focus
        bind:this={submit}
        type="submit"
        class="btn btn-accent !w-auto grow"
      >
        {#if submitting}
          <Spinner />
        {:else}
          <div class="my-auto">{$t("payments.next")}</div>
        {/if}
      </button>
    </div>
  </form>
</div>