From 3b7f67d6c691bca6e6dbcd07d2a6fba87720bb4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Fri, 5 Jan 2024 00:22:42 +0100
Subject: [PATCH 1/3] refactor: denomination.ts

dont use signals here
use BigNumber when possible
move clockableamount spec to ts
---
 src/components/ClickableAmount.tsx        | 19 +++++++
 src/components/Fees.tsx                   |  9 ++-
 src/pages/Create.tsx                      | 35 ++++++++----
 src/status/InvoiceSet.tsx                 |  8 ++-
 src/status/SwapCreated.tsx                |  6 +-
 src/utils/denomination.ts                 | 42 +++++++-------
 src/utils/validation.ts                   |  3 +-
 tests/components/ClickableAmount.spec.tsx | 68 +++++++++++++++++++++++
 tests/utils/denomination.spec.ts          | 13 +++--
 9 files changed, 162 insertions(+), 41 deletions(-)
 create mode 100644 src/components/ClickableAmount.tsx
 create mode 100644 tests/components/ClickableAmount.spec.tsx

diff --git a/src/components/ClickableAmount.tsx b/src/components/ClickableAmount.tsx
new file mode 100644
index 00000000..d1c77f0b
--- /dev/null
+++ b/src/components/ClickableAmount.tsx
@@ -0,0 +1,19 @@
+import { BigNumber } from "bignumber.js";
+import { Show } from "solid-js";
+
+import t from "../i18n";
+import { denomination } from "../signals";
+import { formatAmount } from "../utils/denomination";
+
+const ClickableAmount = ({ label, onClick, amount }) => {
+    return (
+        <>
+            <Show when={label !== undefined}>{t(label)}: </Show>
+            <span onClick={() => onClick(amount())} class="btn-small btn-light">
+                {formatAmount(BigNumber(amount()), denomination())}
+            </span>
+        </>
+    );
+};
+
+export default ClickableAmount;
diff --git a/src/components/Fees.tsx b/src/components/Fees.tsx
index 5f890a1d..6f52f49a 100644
--- a/src/components/Fees.tsx
+++ b/src/components/Fees.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import { createEffect } from "solid-js";
 
 import btcSvg from "../assets/btc.svg";
@@ -76,7 +77,7 @@ const Fees = () => {
             <label>
                 {t("network_fee")}:{" "}
                 <span class="network-fee">
-                    {formatAmount(minerFee(), true)}
+                    {formatAmount(BigNumber(minerFee()), denomination(), true)}
                     <span
                         class="denominator"
                         data-denominator={denomination()}></span>
@@ -84,7 +85,11 @@ const Fees = () => {
                 <br />
                 {t("fee")} ({boltzFee()}%):{" "}
                 <span class="boltz-fee">
-                    {formatAmount(calculateBoltzFeeOnSend(sendAmount()), true)}
+                    {formatAmount(
+                        BigNumber(calculateBoltzFeeOnSend(sendAmount())),
+                        denomination(),
+                        true,
+                    )}
                     <span
                         class="denominator"
                         data-denominator={denomination()}></span>
diff --git a/src/pages/Create.tsx b/src/pages/Create.tsx
index 86b2841f..ac9815b0 100644
--- a/src/pages/Create.tsx
+++ b/src/pages/Create.tsx
@@ -64,8 +64,8 @@ const Create = () => {
     const changeReceiveAmount = (evt: InputEvent) => {
         const target = evt.currentTarget as HTMLInputElement;
         const amount = target.value.trim();
-        const satAmount = convertAmount(Number(amount), denomination());
-        const sendAmount = calculateSendAmount(satAmount);
+        const satAmount = convertAmount(BigNumber(amount), denomination());
+        const sendAmount = calculateSendAmount(satAmount.toNumber());
         setAmountChanged(sideReceive);
         setReceiveAmount(BigNumber(satAmount));
         setSendAmount(BigNumber(sendAmount));
@@ -77,8 +77,8 @@ const Create = () => {
     const changeSendAmount = (evt: InputEvent) => {
         const target = evt.currentTarget as HTMLInputElement;
         const amount = target.value.trim();
-        const satAmount = convertAmount(Number(amount), denomination());
-        const receiveAmount = calculateReceiveAmount(satAmount);
+        const satAmount = convertAmount(BigNumber(amount), denomination());
+        const receiveAmount = calculateReceiveAmount(satAmount.toNumber());
         setAmountChanged(sideSend);
         setSendAmount(BigNumber(satAmount));
         setReceiveAmount(BigNumber(receiveAmount));
@@ -111,7 +111,7 @@ const Create = () => {
     const validatePaste = (evt: ClipboardEvent) => {
         const clipboardData = evt.clipboardData || globalThis.clipboardData;
         const pastedData = clipboardData.getData("Text").trim();
-        if (!getValidationRegex().test(pastedData)) {
+        if (!getValidationRegex(maximum(), denomination()).test(pastedData)) {
             evt.stopPropagation();
             evt.preventDefault();
         }
@@ -136,7 +136,10 @@ const Create = () => {
 
         if (lessThanMin || amount > maximum()) {
             const params = {
-                amount: formatAmount(lessThanMin ? minimum() : maximum()),
+                amount: formatAmount(
+                    BigNumber(lessThanMin ? minimum() : maximum()),
+                    denomination(),
+                ),
                 denomination: denomination(),
             };
             const label = lessThanMin ? "minimum_amount" : "maximum_amount";
@@ -188,11 +191,15 @@ const Create = () => {
     createMemo(() => {
         const rAmount = Number(receiveAmount());
         if (rAmount > 0) {
-            setReceiveAmountFormatted(formatAmount(rAmount).toString());
+            setReceiveAmountFormatted(
+                formatAmount(BigNumber(rAmount), denomination()).toString(),
+            );
         }
         const sAmount = Number(sendAmount());
         if (sAmount > 0) {
-            setSendAmountFormatted(formatAmount(sAmount).toString());
+            setSendAmountFormatted(
+                formatAmount(BigNumber(sAmount), denomination()).toString(),
+            );
         }
     });
 
@@ -251,8 +258,11 @@ const Create = () => {
                         autofocus
                         required
                         type="text"
-                        placeholder={formatAmount(minimum())}
-                        maxlength={calculateDigits()}
+                        placeholder={formatAmount(
+                            BigNumber(minimum()),
+                            denomination(),
+                        )}
+                        maxlength={calculateDigits(maximum(), denomination())}
                         inputmode={
                             denomination() == "btc" ? "decimal" : "numeric"
                         }
@@ -276,9 +286,10 @@ const Create = () => {
                         required
                         type="text"
                         placeholder={formatAmount(
-                            calculateReceiveAmount(minimum()),
+                            BigNumber(calculateReceiveAmount(minimum())),
+                            denomination(),
                         )}
-                        maxlength={calculateDigits()}
+                        maxlength={calculateDigits(maximum(), denomination())}
                         inputmode={
                             denomination() == "btc" ? "decimal" : "numeric"
                         }
diff --git a/src/status/InvoiceSet.tsx b/src/status/InvoiceSet.tsx
index eed5c343..8d91ef47 100644
--- a/src/status/InvoiceSet.tsx
+++ b/src/status/InvoiceSet.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import { Show } from "solid-js";
 
 import ContractTransaction from "../components/ContractTransaction";
@@ -48,7 +49,10 @@ const InvoiceSet = () => {
         <div>
             <h2>
                 {t("send_to", {
-                    amount: formatAmount(swap().expectedAmount),
+                    amount: formatAmount(
+                        BigNumber(swap().expectedAmount),
+                        denomination(),
+                    ),
                     denomination:
                         denomination() === denominations.sat
                             ? "sats"
@@ -78,7 +82,7 @@ const InvoiceSet = () => {
                     class="btn"
                     onclick={() =>
                         clipboard(
-                            formatAmount(swap().expectedAmount),
+                            formatAmount(swap().expectedAmount, denomination()),
                             t("copied"),
                         )
                     }>
diff --git a/src/status/SwapCreated.tsx b/src/status/SwapCreated.tsx
index b8059b0c..a020b6b2 100644
--- a/src/status/SwapCreated.tsx
+++ b/src/status/SwapCreated.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import log from "loglevel";
 import { Show } from "solid-js";
 
@@ -21,7 +22,10 @@ const SwapCreated = () => {
         <div>
             <h2>
                 {t("pay_invoice_to", {
-                    amount: formatAmount(swap().sendAmount),
+                    amount: formatAmount(
+                        BigNumber(swap().sendAmount),
+                        denomination(),
+                    ),
                     denomination:
                         denomination() === denominations.sat ? "sats" : BTC,
                 })}
diff --git a/src/utils/denomination.ts b/src/utils/denomination.ts
index a84199d2..d8be0076 100644
--- a/src/utils/denomination.ts
+++ b/src/utils/denomination.ts
@@ -1,7 +1,5 @@
 import { BigNumber } from "bignumber.js";
 
-import { denomination, maximum } from "../signals";
-
 export const satFactor = 100_000_000;
 
 export const denominations = {
@@ -9,30 +7,34 @@ export const denominations = {
     btc: "btc",
 };
 
-export const getValidationRegex = (): RegExp => {
-    const digits = calculateDigits();
+export const getValidationRegex = (
+    maximum: number,
+    denomination: string,
+): RegExp => {
+    const digits = calculateDigits(maximum, denomination);
     const regex =
-        denomination() === denominations.sat
+        denomination === denominations.sat
             ? `^[0-9]{1,${digits}}$`
             : `^[0-9](.[0-9]{1,${digits}}){0,1}$`;
     return new RegExp(regex);
 };
 
 export const formatAmount = (
-    amount: number,
+    amount: BigNumber,
+    denomination: string,
     fixed: boolean = false,
 ): string => {
-    return formatAmountDenomination(denomination(), amount, fixed);
+    return formatAmountDenomination(amount, denomination, fixed);
 };
 
 export const formatAmountDenomination = (
-    denom: string,
-    amount: number,
+    amount: BigNumber,
+    denomination: string,
     fixed: boolean = false,
 ): string => {
-    switch (denom) {
+    switch (denomination) {
         case denominations.btc:
-            const amountBig = new BigNumber(amount).div(satFactor);
+            const amountBig = amount.div(satFactor);
             if (fixed) {
                 return amountBig.toFixed(8);
             }
@@ -53,20 +55,22 @@ export const formatAmountDenomination = (
     }
 };
 
-export const convertAmount = (amount: number, denom: string): number => {
+export const convertAmount = (amount: BigNumber, denom: string): BigNumber => {
     switch (denom) {
         case denominations.btc:
-            const amountBig = new BigNumber(amount).multipliedBy(satFactor);
-            return amountBig.toNumber();
-
+            const amountBig = amount.multipliedBy(satFactor);
+            return amountBig;
         default:
-            return Number(amount);
+            return amount;
     }
 };
 
-export const calculateDigits = () => {
-    let digits = maximum().toString().length;
-    if (denomination() === denominations.btc && digits < 10) {
+export const calculateDigits = (
+    maximum: number,
+    denomination: string,
+): number => {
+    let digits = maximum.toString().length;
+    if (denomination === denominations.btc && digits < 10) {
         digits = 10;
     } else {
         digits += 1;
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
index be3746e6..efd56f2c 100644
--- a/src/utils/validation.ts
+++ b/src/utils/validation.ts
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import { crypto, script } from "bitcoinjs-lib";
 import { Scripts, reverseSwapScript, swapScript } from "boltz-core";
 import { deployedBytecode as EtherSwapBytecode } from "boltz-core/out/EtherSwap.sol/EtherSwap.json";
@@ -180,7 +181,7 @@ const validateSwap = async (
 
     return (
         new URLSearchParams(bip21Split[1]).get("amount") ===
-        formatAmountDenomination(denominations.btc, swap.sendAmount)
+        formatAmountDenomination(BigNumber(swap.sendAmount), denominations.btc)
     );
 };
 
diff --git a/tests/components/ClickableAmount.spec.tsx b/tests/components/ClickableAmount.spec.tsx
new file mode 100644
index 00000000..3cd9dd30
--- /dev/null
+++ b/tests/components/ClickableAmount.spec.tsx
@@ -0,0 +1,68 @@
+import { fireEvent, render } from "@solidjs/testing-library";
+import { BigNumber } from "bignumber.js";
+import { describe, expect, test, vitest } from "vitest";
+
+import ClickableAmount from "../../src/components/ClickableAmount";
+import t from "../../src/i18n";
+import { setDenomination } from "../../src/signals";
+import { denominations, formatAmount } from "../../src/utils/denomination";
+
+describe("ClickableAmount", () => {
+    test("should show label when defined", async () => {
+        const label = "min";
+        const { container } = render(() => (
+            <ClickableAmount
+                label={label}
+                onClick={() => false}
+                amount={() => 1}
+            />
+        ));
+        expect(container.innerHTML.startsWith(t(label))).toBeTruthy();
+    });
+
+    test.each`
+        denomination
+        ${denominations.btc}
+        ${denominations.sat}
+    `("should format amount $denomination", ({ denomination }) => {
+        setDenomination(denomination);
+
+        const amount = BigNumber(1_000_00);
+        const { container } = render(() => (
+            <ClickableAmount
+                onClick={() => false}
+                label={"test"}
+                amount={() => amount}
+            />
+        ));
+        const child = container.children[0];
+        expect(child.innerHTML).toEqual(formatAmount(amount, denomination));
+    });
+
+    test.each`
+        denomination
+        ${denominations.btc}
+        ${denominations.sat}
+    `(
+        "should callback with unformatted amount for $denomination",
+        ({ denomination }) => {
+            setDenomination(denomination);
+
+            const amount = BigNumber(1_000_00);
+            const callback = vitest.fn();
+
+            const { container } = render(() => (
+                <ClickableAmount
+                    onClick={callback}
+                    label={"test"}
+                    amount={() => amount}
+                />
+            ));
+            const child = container.children[0];
+            fireEvent.click(child);
+
+            expect(callback).toHaveBeenCalledTimes(1);
+            expect(callback).toHaveBeenCalledWith(amount);
+        },
+    );
+});
diff --git a/tests/utils/denomination.spec.ts b/tests/utils/denomination.spec.ts
index 1f61d90a..aa0fc6a2 100644
--- a/tests/utils/denomination.spec.ts
+++ b/tests/utils/denomination.spec.ts
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import { beforeAll, describe, expect, test } from "vitest";
 
 import { setDenomination, setMaximum } from "../../src/signals";
@@ -21,7 +22,9 @@ describe("denomination utils", () => {
         `(
             "convert $amount in $denomination",
             ({ denomination, amount, converted }) => {
-                expect(convertAmount(amount, denomination)).toEqual(converted);
+                expect(
+                    convertAmount(BigNumber(amount), denomination).toNumber(),
+                ).toEqual(converted);
             },
         );
     });
@@ -42,7 +45,9 @@ describe("denomination utils", () => {
             "format $amount in $denomination",
             ({ denomination, amount, formatted }) => {
                 setDenomination(denomination);
-                expect(formatAmount(amount)).toEqual(formatted);
+                expect(formatAmount(BigNumber(amount), denomination)).toEqual(
+                    formatted,
+                );
             },
         );
     });
@@ -67,7 +72,7 @@ describe("denomination utils", () => {
             ({ denomination, digits, amount }) => {
                 setMaximum(amount);
                 setDenomination(denomination);
-                expect(calculateDigits()).toEqual(digits);
+                expect(calculateDigits(amount, denomination)).toEqual(digits);
             },
         );
     });
@@ -98,7 +103,7 @@ describe("denomination utils", () => {
             "validating regex for $amount in $denomination",
             ({ denomination, amount, valid }) => {
                 setDenomination(denomination);
-                let regex = getValidationRegex();
+                let regex = getValidationRegex(max, denomination);
                 expect(regex.test(amount)).toEqual(valid);
             },
         );

From 81a0abfffc3627ea761f59b61907efb0dbed35c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Sat, 6 Jan 2024 23:24:50 +0100
Subject: [PATCH 2/3] fixup clickable

---
 src/pages/Create.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Create.tsx b/src/pages/Create.tsx
index ac9815b0..508ad478 100644
--- a/src/pages/Create.tsx
+++ b/src/pages/Create.tsx
@@ -241,13 +241,13 @@ const Create = () => {
                 <span
                     onClick={() => setAmount(minimum())}
                     class="btn-small btn-light">
-                    {formatAmount(minimum())}
+                    {formatAmount(BigNumber(minimum()), denomination())}
                 </span>{" "}
                 {t("max")}:{" "}
                 <span
                     onClick={() => setAmount(maximum())}
                     class="btn-small btn-light">
-                    {formatAmount(maximum())}
+                    {formatAmount(BigNumber(maximum()), denomination())}
                 </span>{" "}
             </p>
             <div class="icons">

From 347c72d7bbfbcfc86d1214fede8bba72eb4c17e3 Mon Sep 17 00:00:00 2001
From: michael1011 <me@michael1011.at>
Date: Sun, 7 Jan 2024 01:07:17 +0100
Subject: [PATCH 3/3] remove ClickableAmount

---
 src/components/ClickableAmount.tsx        | 19 -------
 tests/components/ClickableAmount.spec.tsx | 68 -----------------------
 2 files changed, 87 deletions(-)
 delete mode 100644 src/components/ClickableAmount.tsx
 delete mode 100644 tests/components/ClickableAmount.spec.tsx

diff --git a/src/components/ClickableAmount.tsx b/src/components/ClickableAmount.tsx
deleted file mode 100644
index d1c77f0b..00000000
--- a/src/components/ClickableAmount.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { BigNumber } from "bignumber.js";
-import { Show } from "solid-js";
-
-import t from "../i18n";
-import { denomination } from "../signals";
-import { formatAmount } from "../utils/denomination";
-
-const ClickableAmount = ({ label, onClick, amount }) => {
-    return (
-        <>
-            <Show when={label !== undefined}>{t(label)}: </Show>
-            <span onClick={() => onClick(amount())} class="btn-small btn-light">
-                {formatAmount(BigNumber(amount()), denomination())}
-            </span>
-        </>
-    );
-};
-
-export default ClickableAmount;
diff --git a/tests/components/ClickableAmount.spec.tsx b/tests/components/ClickableAmount.spec.tsx
deleted file mode 100644
index 3cd9dd30..00000000
--- a/tests/components/ClickableAmount.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { fireEvent, render } from "@solidjs/testing-library";
-import { BigNumber } from "bignumber.js";
-import { describe, expect, test, vitest } from "vitest";
-
-import ClickableAmount from "../../src/components/ClickableAmount";
-import t from "../../src/i18n";
-import { setDenomination } from "../../src/signals";
-import { denominations, formatAmount } from "../../src/utils/denomination";
-
-describe("ClickableAmount", () => {
-    test("should show label when defined", async () => {
-        const label = "min";
-        const { container } = render(() => (
-            <ClickableAmount
-                label={label}
-                onClick={() => false}
-                amount={() => 1}
-            />
-        ));
-        expect(container.innerHTML.startsWith(t(label))).toBeTruthy();
-    });
-
-    test.each`
-        denomination
-        ${denominations.btc}
-        ${denominations.sat}
-    `("should format amount $denomination", ({ denomination }) => {
-        setDenomination(denomination);
-
-        const amount = BigNumber(1_000_00);
-        const { container } = render(() => (
-            <ClickableAmount
-                onClick={() => false}
-                label={"test"}
-                amount={() => amount}
-            />
-        ));
-        const child = container.children[0];
-        expect(child.innerHTML).toEqual(formatAmount(amount, denomination));
-    });
-
-    test.each`
-        denomination
-        ${denominations.btc}
-        ${denominations.sat}
-    `(
-        "should callback with unformatted amount for $denomination",
-        ({ denomination }) => {
-            setDenomination(denomination);
-
-            const amount = BigNumber(1_000_00);
-            const callback = vitest.fn();
-
-            const { container } = render(() => (
-                <ClickableAmount
-                    onClick={callback}
-                    label={"test"}
-                    amount={() => amount}
-                />
-            ));
-            const child = container.children[0];
-            fireEvent.click(child);
-
-            expect(callback).toHaveBeenCalledTimes(1);
-            expect(callback).toHaveBeenCalledWith(amount);
-        },
-    );
-});