From 865727e86e761bb3586d07ec846acb89103e1472 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matja=C5=BE=20Lipu=C5=A1?= <matjazl@gmail.com>
Date: Sun, 8 Oct 2023 22:46:47 +0200
Subject: [PATCH] feat: linear min & max sats buttons

---
 src/app/components/SatButtons/index.tsx | 48 +++++++++++++++++++------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/app/components/SatButtons/index.tsx b/src/app/components/SatButtons/index.tsx
index 33e45ecdbc..434ff9030b 100644
--- a/src/app/components/SatButtons/index.tsx
+++ b/src/app/components/SatButtons/index.tsx
@@ -10,22 +10,50 @@ type Props = {
 };
 
 function SatButtons({ onClick, disabled, min, max }: Props) {
-  const sizes = [1000, 5000, 10000, 25000];
+  let sizes;
+
+  const round = (num) => {
+    return Math.round(num * 10) / 10;
+  };
+
+  // round & format: 1M, 1k, 100
+  const format = (num, pos) => {
+    for (let i=1e6; i > 1; i /= 1e3) {
+      if (num >= i) {
+        const n = round(num / i);
+        const unit = i === 1e3 ? 'k' : 'M';
+        return {
+          // text
+          t: n + unit,
+          // number
+          n: pos === 1 || pos === 2 ? n * i : num,
+        };
+      }
+    }
+    return {
+      t: num,
+      n: num,
+    };
+  };
+
+  if (typeof min === 'number' && typeof max === 'number' && min < max) {
+    const range = max - min;
+    const step = range / 3;
+    sizes = [min, step + min, range - step + min, max];
+  } else {
+    sizes = [1000, 5000, 10000, 25000];
+  }
 
   return (
     <div className="flex gap-2">
-      {sizes.map((size) => (
+      {sizes.map(format).map((size) => (
         <Button
-          key={size}
+          key={size.t}
           icon={<SatoshiV2Icon className="w-4 h-4" />}
-          label={size / 1000 + "k"}
-          onClick={() => onClick(size.toString())}
+          label={size.t}
+          onClick={() => onClick(size.n.toString())}
+          disabled={disabled}
           fullWidth
-          disabled={
-            disabled ||
-            (min != undefined && min > size) ||
-            (max != undefined && max < size)
-          }
         />
       ))}
     </div>