fixup!

BoltzExchange · Jan 3, 2024 · da03fcf · da03fcf
1 parent 734eddd
commit da03fcf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 41 deletions.
diff --git a/src/Create.jsx → src/Create.tsx b/src/Create.jsx → src/Create.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "bignumber.js";
 import log from "loglevel";
 import { Show, createEffect, createMemo, on, onMount } from "solid-js";
 
@@ -53,56 +54,57 @@ import {
 import { enableWebln } from "./utils/webln";
 
 const Create = () => {
-    let receiveAmountRef, sendAmountRef;
+    let receiveAmountRef: HTMLInputElement, sendAmountRef: HTMLInputElement;
 
-    const changeReceiveAmount = (e) => {
-        const amount = e.currentTarget.value.trim();
+    const changeReceiveAmount = (evt: InputEvent) => {
+        const target = evt.currentTarget as HTMLInputElement;
+        const amount = target.value.trim();
         const satAmount = convertAmount(Number(amount), denominations.sat);
         const sendAmount = calculateSendAmount(satAmount);
         setAmountChanged(sideReceive);
-        setReceiveAmount(BigInt(satAmount));
-        setSendAmount(sendAmount);
+        setReceiveAmount(BigNumber(satAmount));
+        setSendAmount(BigNumber(sendAmount));
         validateAmount();
-        e.currentTarget.setCustomValidity("");
-        e.currentTarget.classList.remove("invalid");
+        target.setCustomValidity("");
+        target.classList.remove("invalid");
     };
 
-    const changeSendAmount = (e) => {
-        const amount = e.currentTarget.value.trim();
+    const changeSendAmount = (evt: InputEvent) => {
+        const target = evt.currentTarget as HTMLInputElement;
+        const amount = target.value.trim();
         const satAmount = convertAmount(Number(amount), denominations.sat);
         const receiveAmount = calculateReceiveAmount(satAmount);
         setAmountChanged(sideSend);
-        setSendAmount(BigInt(satAmount));
-        setReceiveAmount(BigInt(receiveAmount));
+        setSendAmount(BigNumber(satAmount));
+        setReceiveAmount(BigNumber(receiveAmount));
         validateAmount();
-        e.currentTarget.setCustomValidity("");
-        e.currentTarget.classList.remove("invalid");
+        target.setCustomValidity("");
+        target.classList.remove("invalid");
     };
 
     const createWeblnInvoice = async () => {
         enableWebln(async () => {
             const amount = Number(receiveAmount());
+            // @ts-ignore
             const invoice = await window.webln.makeInvoice({ amount: amount });
             validateAmount();
             log.debug("created webln invoice", invoice);
             setInvoice(invoice.paymentRequest);
         });
     };
 
-    const validateInput = (evt) => {
-        const theEvent = evt || window.event;
-        const input = evt.currentTarget;
-        let keycode = theEvent.keyCode || theEvent.which;
-        keycode = String.fromCharCode(keycode);
+    const validateInput = (evt: KeyboardEvent) => {
+        const input = evt.currentTarget as HTMLInputElement;
+        const keycode = evt.key;
         const hasDot = input.value.includes(".");
         const regex = denomination() == "sat" || hasDot ? /[0-9]/ : /[0-9]|\./;
         if (!regex.test(keycode)) {
-            theEvent.returnValue = false;
-            if (theEvent.preventDefault) theEvent.preventDefault();
+            evt.stopPropagation();
+            evt.preventDefault();
         }
     };
 
-    const validatePaste = (evt) => {
+    const validatePaste = (evt: ClipboardEvent) => {
         const clipboardData = evt.clipboardData || globalThis.clipboardData;
         const pastedData = clipboardData.getData("Text").trim();
         if (!getValidationRegex().test(pastedData)) {
@@ -112,7 +114,7 @@ const Create = () => {
     };
 
     const validateAmount = () => {
-        const setCustomValidity = (val, isZero) => {
+        const setCustomValidity = (val: string, isZero: boolean) => {
             [sendAmountRef, receiveAmountRef].forEach((ref) => {
                 ref.setCustomValidity(val);
                 if (!isZero && val !== "") {
@@ -123,7 +125,7 @@ const Create = () => {
             });
         };
 
-        setCustomValidity("");
+        setCustomValidity("", false);
 
         const amount = Number(sendAmount());
         const lessThanMin = amount < minimum();
@@ -143,9 +145,9 @@ const Create = () => {
         setSendAmountValid(true);
     };
 
-    const setAmount = (amount) => {
-        setSendAmount(amount);
-        setReceiveAmount(calculateReceiveAmount(amount));
+    const setAmount = (amount: number) => {
+        setSendAmount(BigNumber(amount));
+        setReceiveAmount(BigNumber(calculateReceiveAmount(amount)));
         validateAmount();
         sendAmountRef.focus();
     };
@@ -157,9 +159,13 @@ const Create = () => {
     createEffect(
         on([boltzFee, minerFee, reverse, asset], () => {
             if (amountChanged() === sideReceive) {
-                setSendAmount(BigInt(calculateSendAmount(receiveAmount())));
+                setSendAmount(
+                    BigNumber(calculateSendAmount(receiveAmount().toNumber())),
+                );
             } else {
-                setReceiveAmount(BigInt(calculateReceiveAmount(sendAmount())));
+                setReceiveAmount(
+                    BigNumber(calculateReceiveAmount(sendAmount().toNumber())),
+                );
             }
             validateAmount();
         }),
@@ -248,7 +254,7 @@ const Create = () => {
                         data-testid="sendAmount"
                         value={sendAmountFormatted()}
                         onpaste={(e) => validatePaste(e)}
-                        onKeypress={(e) => validateInput(e)}
+                        onkeypress={(e) => validateInput(e)}
                         onInput={(e) => changeSendAmount(e)}
                     />
                 </div>
@@ -267,7 +273,7 @@ const Create = () => {
                         data-testid="receiveAmount"
                         value={receiveAmountFormatted()}
                         onpaste={(e) => validatePaste(e)}
-                        onKeypress={(e) => validateInput(e)}
+                        onkeypress={(e) => validateInput(e)}
                         onInput={(e) => changeReceiveAmount(e)}
                     />
                 </div>

diff --git a/tests/components/Create.spec.jsx → tests/components/Create.spec.tsx b/tests/components/Create.spec.jsx → tests/components/Create.spec.tsx
@@ -1,6 +1,7 @@
 import { Router } from "@solidjs/router";
 import { fireEvent, render, screen } from "@solidjs/testing-library";
-import { beforeAll, beforeEach, expect, vi } from "vitest";
+import { BigNumber } from "bignumber.js";
+import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 
 import Create from "../../src/Create";
 import { sideReceive, sideSend } from "../../src/consts";
@@ -45,17 +46,17 @@ describe("Create", () => {
             </Router>
         ));
 
-        signals.setSendAmount(50_000n);
+        signals.setSendAmount(BigNumber(50_000));
 
         // To force trigger a recalculation
         signals.setAsset("L-BTC");
         signals.setAsset("BTC");
 
-        expect(setReceiveAmount).toHaveBeenCalledWith(38110n);
+        expect(setReceiveAmount).toHaveBeenCalledWith(BigNumber(38110));
 
         signals.setAsset("L-BTC");
 
-        expect(setReceiveAmount).toHaveBeenLastCalledWith(49447n);
+        expect(setReceiveAmount).toHaveBeenLastCalledWith(BigNumber(49447));
     });
 
     test("should update receive amount on miner fee change", async () => {
@@ -69,13 +70,13 @@ describe("Create", () => {
             </Router>
         ));
 
-        expect(setReceiveAmount).toHaveBeenCalledWith(38110n);
+        expect(setReceiveAmount).toHaveBeenCalledWith(BigNumber(38110));
 
         const updatedCfg = { ...cfg };
         cfg["BTC/BTC"].fees.minerFees.baseAsset.reverse.claim += 1;
         signals.setConfig(updatedCfg);
 
-        expect(setReceiveAmount).toHaveBeenLastCalledWith(38110n - 1n);
+        expect(setReceiveAmount).toHaveBeenLastCalledWith(BigNumber(38110 - 1));
     });
 
     test("should update calculated value on fee change", async () => {
@@ -105,9 +106,9 @@ describe("Create", () => {
         expect(setAmountChanged).toHaveBeenCalledWith(sideReceive);
 
         expect(setSendAmount).toHaveBeenCalledTimes(1);
-        expect(setSendAmount).not.toHaveBeenCalledWith(BigInt(amount));
+        expect(setSendAmount).not.toHaveBeenCalledWith(BigNumber(amount));
         expect(setReceiveAmount).toHaveBeenCalledTimes(1);
-        expect(setReceiveAmount).toHaveBeenCalledWith(BigInt(amount));
+        expect(setReceiveAmount).toHaveBeenCalledWith(BigNumber(amount));
 
         updateConfig();
 
@@ -151,11 +152,11 @@ describe("Create", () => {
         fireEvent.click(await screen.findByText(amount));
 
         expect(setSendAmount).toHaveBeenCalledTimes(1);
-        expect(setSendAmount).toHaveBeenCalledWith(amount);
+        expect(setSendAmount).toHaveBeenCalledWith(BigNumber(amount));
 
         expect(setReceiveAmount).toHaveBeenCalledTimes(1);
         expect(setReceiveAmount).toHaveBeenCalledWith(
-            calculateReceiveAmount(amount),
+            BigNumber(calculateReceiveAmount(amount)),
         );
     });
 });
diff --git a/tests/utils/calculate.spec.ts b/tests/utils/calculate.spec.ts
@@ -103,7 +103,7 @@ describe("Calculate amounts", () => {
 
                 expect(calculateBoltzFeeOnSend(sendAmount)).toEqual(fee);
                 expect(
-                    BigNumber(sendAmount)
+                    sendAmount
                         .minus(calculateBoltzFeeOnSend(sendAmount))
                         .minus(minerFee())
                         .toNumber(),