refactor: denomination.ts

dont use signals here use BigNumber when possible move clockableamount spec to ts
BoltzExchange · Jan 4, 2024 · 0e4ce18 · 0e4ce18
1 parent b31bc7d
commit 0e4ce18
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 56 deletions.
diff --git a/src/Create.tsx b/src/Create.tsx
@@ -61,8 +61,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));
@@ -74,8 +74,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));
@@ -108,7 +108,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();
         }
@@ -133,7 +133,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";
@@ -185,11 +188,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(),
+            );
         }
     });
 
@@ -247,8 +254,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"
                         }
@@ -272,9 +282,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/components/ClickableAmount.tsx b/src/components/ClickableAmount.tsx
@@ -1,14 +1,16 @@
+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(amount())}
+                {formatAmount(BigNumber(amount()), denomination())}
             </span>
         </>
     );

diff --git 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,15 +77,19 @@ 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>
                 </span>
                 <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/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
@@ -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
@@ -1,38 +1,40 @@
 import { BigNumber } from "bignumber.js";
 
-import { denomination, maximum } from "../signals";
-
 export const satFactor = 100_000_000;
 
 export const denominations = {
     sat: "sat",
     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
@@ -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.jsx → tests/components/ClickableAmount.spec.tsx b/tests/components/ClickableAmount.spec.jsx → tests/components/ClickableAmount.spec.tsx
@@ -1,4 +1,5 @@
 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";
@@ -10,30 +11,32 @@ describe("ClickableAmount", () => {
     test("should show label when defined", async () => {
         const label = "min";
         const { container } = render(() => (
-            <ClickableAmount label={label} amount={() => 1} />
+            <ClickableAmount
+                label={label}
+                onClick={() => false}
+                amount={() => 1}
+            />
         ));
         expect(container.innerHTML.startsWith(t(label))).toBeTruthy();
     });
 
-    test("should not show label when undefined", async () => {
-        const { container } = render(() => (
-            <ClickableAmount amount={() => 1} />
-        ));
-        expect(container.innerHTML.startsWith("<span")).toBeTruthy();
-    });
-
     test.each`
         denomination
         ${denominations.btc}
         ${denominations.sat}
     `("should format amount $denomination", ({ denomination }) => {
         setDenomination(denomination);
 
-        const amount = 1_000_00;
+        const amount = BigNumber(1_000_00);
         const { container } = render(() => (
-            <ClickableAmount amount={() => amount} />
+            <ClickableAmount
+                onClick={() => false}
+                label={"test"}
+                amount={() => amount}
+            />
         ));
-        expect(container.childNodes[0].innerHTML).toEqual(formatAmount(amount));
+        const child = container.children[0];
+        expect(child.innerHTML).toEqual(formatAmount(amount, denomination));
     });
 
     test.each`
@@ -45,13 +48,18 @@ describe("ClickableAmount", () => {
         ({ denomination }) => {
             setDenomination(denomination);
 
-            const amount = 1_000_00;
+            const amount = BigNumber(1_000_00);
             const callback = vitest.fn();
 
             const { container } = render(() => (
-                <ClickableAmount amount={() => amount} onClick={callback} />
+                <ClickableAmount
+                    onClick={callback}
+                    label={"test"}
+                    amount={() => amount}
+                />
             ));
-            fireEvent.click(container.childNodes[0]);
+            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
@@ -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);
             },
         );