From a4df61016bb7d12551c235d1850686557196add7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 28 Feb 2023 16:10:25 +0100
Subject: [PATCH 1/3] feat: add lnurl min / max values to form

---
 src/app/components/SatButtons/index.tsx       | 48 ++++++++-----------
 .../form/DualCurrencyField/index.tsx          | 21 +++++---
 src/app/screens/LNURLPay/index.tsx            |  2 +
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/app/components/SatButtons/index.tsx b/src/app/components/SatButtons/index.tsx
index 4805244ee4..33e45ecdbc 100644
--- a/src/app/components/SatButtons/index.tsx
+++ b/src/app/components/SatButtons/index.tsx
@@ -5,39 +5,29 @@ import Button from "../Button";
 type Props = {
   onClick: (amount: string) => void;
   disabled?: boolean;
+  min?: number;
+  max?: number;
 };
 
-function SatButtons({ onClick, disabled }: Props) {
+function SatButtons({ onClick, disabled, min, max }: Props) {
+  const sizes = [1000, 5000, 10000, 25000];
+
   return (
     <div className="flex gap-2">
-      <Button
-        icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="1k ⚡"
-        onClick={() => onClick("1000")}
-        fullWidth
-        disabled={disabled}
-      />
-      <Button
-        icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="5k ⚡"
-        onClick={() => onClick("5000")}
-        fullWidth
-        disabled={disabled}
-      />
-      <Button
-        icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="10k ⚡"
-        onClick={() => onClick("10000")}
-        fullWidth
-        disabled={disabled}
-      />
-      <Button
-        icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="25k ⚡"
-        onClick={() => onClick("25000")}
-        fullWidth
-        disabled={disabled}
-      />
+      {sizes.map((size) => (
+        <Button
+          key={size}
+          icon={<SatoshiV2Icon className="w-4 h-4" />}
+          label={size / 1000 + "k"}
+          onClick={() => onClick(size.toString())}
+          fullWidth
+          disabled={
+            disabled ||
+            (min != undefined && min > size) ||
+            (max != undefined && max < size)
+          }
+        />
+      ))}
     </div>
   );
 }
diff --git a/src/app/components/form/DualCurrencyField/index.tsx b/src/app/components/form/DualCurrencyField/index.tsx
index bdf0c56cd6..283eae6972 100644
--- a/src/app/components/form/DualCurrencyField/index.tsx
+++ b/src/app/components/form/DualCurrencyField/index.tsx
@@ -75,12 +75,21 @@ export default function DualCurrencyField({
 
   return (
     <div className="relative block m-0">
-      <label
-        htmlFor={id}
-        className="block font-medium text-gray-800 dark:text-white"
-      >
-        {label}
-      </label>
+      <div className="flex justify-between items-center w-full">
+        <label
+          htmlFor={id}
+          className="font-medium text-gray-800 dark:text-white"
+        >
+          {label}
+        </label>
+        {(min || max) && (
+          <span className="text-xs font-normal">
+            {min && max && "Between " + min + " and " + max + " sats"}
+            {min && !max && "> " + min + " sats"}
+            {max && !min && "< " + max + " sats"}
+          </span>
+        )}
+      </div>
 
       <div
         className={classNames(
diff --git a/src/app/screens/LNURLPay/index.tsx b/src/app/screens/LNURLPay/index.tsx
index 1075e3ff1f..6653443f7f 100644
--- a/src/app/screens/LNURLPay/index.tsx
+++ b/src/app/screens/LNURLPay/index.tsx
@@ -420,6 +420,8 @@ function LNURLPay() {
                               fiatValue={fiatValue}
                             />
                             <SatButtons
+                              min={Math.floor(+details.minSendable / 1000)}
+                              max={Math.floor(+details.maxSendable / 1000)}
                               onClick={setValueSat}
                               disabled={loadingConfirm}
                             />

From ba56d9556d532be3e2af131bfc972ead3e26bcce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 28 Feb 2023 16:50:26 +0100
Subject: [PATCH 2/3] fix: added translations, refactored component

---
 .../form/DualCurrencyField/index.tsx          |  6 +++---
 .../form/DualCurrencyField/range.tsx          | 19 +++++++++++++++++++
 src/i18n/locales/en/translation.json          |  5 +++++
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/form/DualCurrencyField/range.tsx

diff --git a/src/app/components/form/DualCurrencyField/index.tsx b/src/app/components/form/DualCurrencyField/index.tsx
index 283eae6972..05908cca77 100644
--- a/src/app/components/form/DualCurrencyField/index.tsx
+++ b/src/app/components/form/DualCurrencyField/index.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react";
 import { classNames } from "~/app/utils";
 
+import { Range } from "./range";
+
 export type Props = {
   suffix?: string;
   endAdornment?: React.ReactNode;
@@ -84,9 +86,7 @@ export default function DualCurrencyField({
         </label>
         {(min || max) && (
           <span className="text-xs font-normal">
-            {min && max && "Between " + min + " and " + max + " sats"}
-            {min && !max && "> " + min + " sats"}
-            {max && !min && "< " + max + " sats"}
+            <Range min={min} max={max} /> sats
           </span>
         )}
       </div>
diff --git a/src/app/components/form/DualCurrencyField/range.tsx b/src/app/components/form/DualCurrencyField/range.tsx
new file mode 100644
index 0000000000..c9e2d45238
--- /dev/null
+++ b/src/app/components/form/DualCurrencyField/range.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+type RangeProps = {
+  min?: number | string | undefined;
+  max?: number | string | undefined;
+};
+export function Range({ min, max }: RangeProps): React.ReactElement {
+  const { t } = useTranslation("common");
+
+  if (min && max) {
+    return <>{t("range.between", { min, max })}</>;
+  } else if (min) {
+    return <>{t("range.greaterThan", { min })}</>;
+  } else if (max) {
+    return <>{t("range.lessThan", { max })}</>;
+  }
+
+  return <></>;
+}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 2be90e0855..e2f9be0897 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -783,6 +783,11 @@
     "errors": {
       "connection_failed": "Connection failed",
       "payment_failed": "Payment Failed"
+    },
+    "range": {
+      "between": "between {{min}} and {{max}}",
+      "lessThan": "< {{max}}",
+      "greaterThan": "> {{min}}"
     }
   },
   "components": {

From 21127160b0e2eb8917d6ef45d7b77743c8f46427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 1 Mar 2023 02:56:12 +0100
Subject: [PATCH 3/3] fix: rename component, remove empty fragment

---
 src/app/components/form/DualCurrencyField/index.tsx       | 4 ++--
 .../form/DualCurrencyField/{range.tsx => rangeLabel.tsx}  | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)
 rename src/app/components/form/DualCurrencyField/{range.tsx => rangeLabel.tsx} (77%)

diff --git a/src/app/components/form/DualCurrencyField/index.tsx b/src/app/components/form/DualCurrencyField/index.tsx
index 05908cca77..c1f6f4120c 100644
--- a/src/app/components/form/DualCurrencyField/index.tsx
+++ b/src/app/components/form/DualCurrencyField/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { classNames } from "~/app/utils";
 
-import { Range } from "./range";
+import { RangeLabel } from "./rangeLabel";
 
 export type Props = {
   suffix?: string;
@@ -86,7 +86,7 @@ export default function DualCurrencyField({
         </label>
         {(min || max) && (
           <span className="text-xs font-normal">
-            <Range min={min} max={max} /> sats
+            <RangeLabel min={min} max={max} /> sats
           </span>
         )}
       </div>
diff --git a/src/app/components/form/DualCurrencyField/range.tsx b/src/app/components/form/DualCurrencyField/rangeLabel.tsx
similarity index 77%
rename from src/app/components/form/DualCurrencyField/range.tsx
rename to src/app/components/form/DualCurrencyField/rangeLabel.tsx
index c9e2d45238..c054dd64fd 100644
--- a/src/app/components/form/DualCurrencyField/range.tsx
+++ b/src/app/components/form/DualCurrencyField/rangeLabel.tsx
@@ -1,10 +1,10 @@
 import { useTranslation } from "react-i18next";
 
-type RangeProps = {
+type RangeLabelProps = {
   min?: number | string | undefined;
   max?: number | string | undefined;
 };
-export function Range({ min, max }: RangeProps): React.ReactElement {
+export function RangeLabel({ min, max }: RangeLabelProps) {
   const { t } = useTranslation("common");
 
   if (min && max) {
@@ -13,7 +13,7 @@ export function Range({ min, max }: RangeProps): React.ReactElement {
     return <>{t("range.greaterThan", { min })}</>;
   } else if (max) {
     return <>{t("range.lessThan", { max })}</>;
+  } else {
+    return null;
   }
-
-  return <></>;
 }