nwc maxfee field

2 files changed, 90 insertions, 57 deletions

diff --git a/src/components/AmountField.svelte b/src/components/AmountField.svelte
new file mode 100644
index 00000000..abfc4d1e
--- /dev/null
+++ b/src/components/AmountField.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { t } from "$lib/translations";
+  import { tick } from "svelte";
+  import Numpad from "$comp/Numpad.svelte";
+
+  let { amount = $bindable(), desc, currency, rate, label, name } = $props();
+
+  let setting = $state();
+  let set = () => {
+    setting = false;
+  };
+  let done = $state();
+  let startSetting = async () => {
+    setting = true;
+    await tick();
+    numpad.focus();
+  };
+  let numpad = $state();
+</script>
+
+<div>
+  <label for="name" class="font-bold mb-1 block">{label}</label>
+
+  {#if desc}
+    <p class="text-secondary my-2">{desc}</p>
+  {/if}
+
+  <button type="button" class="flex w-full" onclick={startSetting}>
+    <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
+      <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+      ></iconify-icon>
+    </div>
+
+    <div
+      class="border-l-0 rounded-l-none pl-2 w-full p-4 border rounded-2xl text-left"
+    >
+      {amount || $t("accounts.none")}
+    </div>
+    <input type="hidden" {name} bind:value={amount} />
+  </button>
+</div>
+
+{#if setting}
+  <div
+    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
+  >
+    <div class="relative p-5 border shadow-lg rounded-md bg-base-100 space-y-5">
+      <h1 class="text-center text-2xl font-semibold">
+        {label}
+      </h1>
+      <Numpad
+        bind:amount
+        {currency}
+        {rate}
+        bind:submit={done}
+        bind:element={numpad}
+      />
+
+      <button bind:this={done} type="button" onclick={set} class="btn"
+        >Ok</button
+      >
+    </div>
+  </div>
+{/if}
diff --git a/src/components/AppForm.svelte b/src/components/AppForm.svelte
index 5cef0d1e..0642e1b1 100644
--- a/src/components/AppForm.svelte
+++ b/src/components/AppForm.svelte
@@ -2,6 +2,7 @@
   import { browser } from "$app/environment";
   import { applyAction, deserialize } from "$app/forms";
   import { page } from "$app/stores";
+  import AmountField from "$comp/AmountField.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import { getPublicKey } from "nostr-tools";
   import { onMount, tick } from "svelte";
@@ -15,8 +16,16 @@
     PUBLIC_COINOS_RELAY as relayUrl,
   } from "$env/static/public";
 
-  let { rate, user, name, max_amount, budget_renewal, pubkey, secret } =
-    $props();
+  let {
+    rate,
+    user,
+    name,
+    max_fee,
+    max_amount,
+    budget_renewal,
+    pubkey,
+    secret,
+  } = $props();
   let { currency } = $derived(user);
 
   onMount(() => {
@@ -58,18 +67,6 @@
       fail(e.message);
     }
   };
-
-  let settingBudget = $state();
-  let setBudget = () => {
-    settingBudget = false;
-  };
-  let done = $state();
-  let startSetting = async () => {
-    settingBudget = true;
-    await tick();
-    numpad.focus();
-  };
-  let numpad = $state();
 </script>
 
 <form method="POST" class="space-y-5" onsubmit={submit} bind:this={el}>
@@ -78,27 +75,22 @@
     <input type="text" name="name" bind:value={name} use:focus />
   </div>
 
-  <div>
-    <label for="name" class="font-bold mb-1 block"
-      >{$t("accounts.budget")}</label
-    >
+  <AmountField
+    {currency}
+    {rate}
+    bind:amount={max_amount}
+    name={"max_amount"}
+    label={$t("accounts.budget")}
+  />
 
-    <button type="button" class="flex w-full" onclick={startSetting}>
-      <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
-        <iconify-icon
-          noobserver
-          icon="ph:lightning-fill"
-          class="text-yellow-300"
-        ></iconify-icon>
-      </div>
-      <div
-        class="border-l-0 rounded-l-none pl-2 w-full p-4 border rounded-2xl text-left"
-      >
-        {max_amount || $t("accounts.none")}
-      </div>
-      <input type="hidden" name="max_amount" bind:value={max_amount} />
-    </button>
-  </div>
+  <AmountField
+    desc={$t("accounts.maxfeeDesc")}
+    {currency}
+    {rate}
+    bind:amount={max_fee}
+    name={"max_fee"}
+    label={$t("accounts.maxfee")}
+  />
 
   <div>
     <label for="name" class="font-bold mb-1 block"
@@ -167,26 +159,3 @@
     {/if}
   </div>
 </form>
-
-{#if settingBudget}
-  <div
-    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
-  >
-    <div class="relative p-5 border shadow-lg rounded-md bg-base-100 space-y-5">
-      <h1 class="text-center text-2xl font-semibold">
-        {$t("accounts.budget")}
-      </h1>
-      <Numpad
-        bind:amount={max_amount}
-        {currency}
-        {rate}
-        bind:submit={done}
-        bind:element={numpad}
-      />
-
-      <button bind:this={done} type="button" onclick={setBudget} class="btn"
-        >Ok</button
-      >
-    </div>
-  </div>
-{/if}