feat: improve LNURL ux

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>
   );
 }

src/app/components/form/DualCurrencyField/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react";
 import { classNames } from "~/app/utils";
 
+import { RangeLabel } from "./rangeLabel";
+
 export type Props = {
   suffix?: string;
   endAdornment?: React.ReactNode;
@@ -75,12 +77,19 @@ 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">
+            <RangeLabel min={min} max={max} /> sats
+          </span>
+        )}
+      </div>
 
       <div
         className={classNames(

src/app/components/form/DualCurrencyField/rangeLabel.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+type RangeLabelProps = {
+  min?: number | string | undefined;
+  max?: number | string | undefined;
+};
+export function RangeLabel({ min, max }: RangeLabelProps) {
+  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 })}</>;
+  } else {
+    return null;
+  }
+}

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}
                             />

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": {