Use minSendable and maxSendable values from LNURLp response to guide user input

src/app/components/SatButtons/index.tsx

@@ -5,39 +5,43 @@ import Button from "../Button";
 type Props = {
   onClick: (amount: string) => void;
   disabled?: boolean;
+  min?: number;
+  max?: number;
 };
 
-function SatButtons({ onClick, disabled }: Props) {
+function roundThousands(number: number) {
+  return number < 1000 ? Math.round(number) : Math.floor(number / 1000) * 1000;
+}
+
+function stringifyThousands(number: number) {
+  return number < 1000
+    ? `${Math.round(number)}`
+    : `${Math.floor(number / 1000)}K`;
+}
+
+function amountsArray(min: number, max: number) {
+  const distance = Math.min(max - min, 10000);
+  const safeMin = max < 100 ? min : Math.max(min, 100);
+  return [safeMin, min + distance / 10, min + distance / 2, min + distance].map(
+    (amount) => roundThousands(amount)
+  );
+}
+
+function SatButtons({ onClick, disabled, min = 100, max = 10000 }: Props) {
+  // we use Set to dedup the array, useful if the min-max range is tight
+  const amounts = [...new Set(amountsArray(min, max))];
   return (
     <div className="flex gap-2 mt-2">
-      <Button
-        icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="100 ⚡"
-        onClick={() => onClick("100")}
-        fullWidth
-        disabled={disabled}
-      />
-      <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}
-      />
+      {amounts.map((amount, index) => (
+        <Button
+          key={index}
+          icon={<SatoshiV2Icon className="w-4 h-4" />}
+          label={`${stringifyThousands(amount)} ⚡`}
+          onClick={() => onClick(`${amount}`)}
+          fullWidth
+          disabled={disabled}
+        />
+      ))}
     </div>
   );
 }

src/app/screens/LNURLPay/index.tsx

@@ -7,7 +7,7 @@ import SatButtons from "@components/SatButtons";
 import DualCurrencyField from "@components/form/DualCurrencyField";
 import TextField from "@components/form/TextField";
 import axios from "axios";
-import React, { Fragment, useState, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -392,6 +392,8 @@ function LNURLPay() {
                           <SatButtons
                             onClick={setValueSat}
                             disabled={loadingConfirm}
+                            min={+details.minSendable / 1000}
+                            max={+details.maxSendable / 1000}
                           />
                         </div>
                       )}
@@ -441,7 +443,12 @@ function LNURLPay() {
                         isFocused={false}
                         label={tCommon("actions.confirm")}
                         loading={loadingConfirm}
-                        disabled={loadingConfirm || !valueSat}
+                        disabled={
+                          loadingConfirm ||
+                          !valueSat ||
+                          +valueSat < +details.minSendable / 1000 ||
+                          +valueSat > +details.maxSendable / 1000
+                        }
                         onCancel={reject}
                       />
                     </div>