refactor all to ts

BoltzExchange · Dec 7, 2023 · 3f8c912 · 3f8c912
1 parent 0ced278
commit 3f8c912
Show file tree

Hide file tree

Showing 60 changed files with 496 additions and 465 deletions.
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
     <body class="loading">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
-        <script src="/src/index.jsx" type="module"></script>
+        <script src="/src/index.tsx" type="module"></script>
         <script
             src="/node_modules/iframe-resizer/js/iframeResizer.contentWindow.js"
             type="module"></script>

diff --git a/src/Create.tsx b/src/Create.tsx
@@ -14,28 +14,15 @@ import { RBTC, sideReceive, sideSend } from "./consts";
 import { useCreateContext } from "./context/Create";
 import t from "./i18n";
 import {
-    addressValid,
     amountChanged,
     assetSelect,
     assetSelected,
     boltzFee,
     denomination,
-    invoiceValid,
     maximum,
     minerFee,
     minimum,
-    receiveAmount,
-    receiveAmountFormatted,
-    sendAmount,
-    sendAmountFormatted,
-    sendAmountValid,
     setAmountChanged,
-    setReceiveAmount,
-    setReceiveAmountFormatted,
-    setSendAmount,
-    setSendAmountFormatted,
-    setSendAmountValid,
-    setValid,
     webln,
 } from "./signals";
 import { calculateReceiveAmount, calculateSendAmount } from "./utils/calculate";
@@ -49,10 +36,29 @@ import {
 import { enableWebln } from "./utils/webln";
 
 const Create = () => {
-    let receiveAmountRef, sendAmountRef;
+    let receiveAmountRef: HTMLInputElement;
+    let sendAmountRef: HTMLInputElement;
 
-    const { asset, assetReceive, assetSend, reverse, setInvoice } =
-        useCreateContext();
+    const {
+        asset,
+        assetReceive,
+        assetSend,
+        addressValid,
+        reverse,
+        setInvoice,
+        invoiceValid,
+        receiveAmount,
+        receiveAmountFormatted,
+        sendAmount,
+        sendAmountFormatted,
+        sendAmountValid,
+        setReceiveAmount,
+        setReceiveAmountFormatted,
+        setSendAmount,
+        setSendAmountFormatted,
+        setSendAmountValid,
+        setValid,
+    } = useCreateContext();
 
     onMount(() => {
         sendAmountRef.focus();
@@ -61,9 +67,17 @@ const Create = () => {
     createEffect(
         on([boltzFee, minerFee, reverse, asset], () => {
             if (amountChanged() === sideReceive) {
-                setSendAmount(BigInt(calculateSendAmount(receiveAmount())));
+                setSendAmount(
+                    BigInt(
+                        calculateSendAmount(Number(receiveAmount()), reverse()),
+                    ),
+                );
             } else {
-                setReceiveAmount(BigInt(calculateReceiveAmount(sendAmount())));
+                setReceiveAmount(
+                    BigInt(
+                        calculateReceiveAmount(Number(sendAmount()), reverse()),
+                    ),
+                );
             }
             validateAmount();
         }),
@@ -114,54 +128,55 @@ const Create = () => {
         }
     });
 
-    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);
+        const sendAmount = calculateSendAmount(satAmount, reverse());
         setAmountChanged(sideReceive);
         setReceiveAmount(BigInt(satAmount));
-        setSendAmount(sendAmount);
+        setSendAmount(BigInt(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);
+        const receiveAmount = calculateReceiveAmount(satAmount, reverse());
         setAmountChanged(sideSend);
         setSendAmount(BigInt(satAmount));
         setReceiveAmount(BigInt(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;
+        debugger;
         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.preventDefault();
         }
     };
 
-    const validatePaste = (evt) => {
+    const validatePaste = (evt: ClipboardEvent) => {
         const clipboardData = evt.clipboardData || globalThis.clipboardData;
         const pastedData = clipboardData.getData("Text").trim();
         if (!getValidationRegex().test(pastedData)) {
@@ -171,10 +186,10 @@ const Create = () => {
     };
 
     const validateAmount = () => {
-        const setCustomValidity = (val, isZero) => {
+        const setCustomValidity = (msg: string, isZero: boolean = true) => {
             [sendAmountRef, receiveAmountRef].forEach((ref) => {
-                ref.setCustomValidity(val);
-                if (!isZero && val !== "") {
+                ref.setCustomValidity(msg);
+                if (!isZero && msg !== "") {
                     ref.classList.add("invalid");
                 } else {
                     ref.classList.remove("invalid");
@@ -203,9 +218,9 @@ const Create = () => {
         setSendAmountValid(true);
     };
 
-    const setAmount = (amount) => {
-        setSendAmount(amount);
-        setReceiveAmount(calculateReceiveAmount(amount));
+    const setAmount = (amount: number) => {
+        setSendAmount(BigInt(amount));
+        setReceiveAmount(BigInt(calculateReceiveAmount(amount, reverse())));
         validateAmount();
         sendAmountRef.focus();
     };
@@ -243,7 +258,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>
@@ -262,7 +277,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/src/Hero.tsx b/src/Hero.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "@solidjs/router";
 import log from "loglevel";
-import { createMemo, createSignal } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 
 import Create from "./Create";
 import bitcoin from "./assets/bitcoin-icon.svg";
@@ -17,10 +17,10 @@ export const [hideHero, setHideHero] = createSignal(false);
 export const Hero = () => {
     const navigate = useNavigate();
     const [nodeStats, setNodeStats] = createSignal(null);
-    const [numChannel, setNumChannel] = createSignal(0);
-    const [numPeers, setNumPeers] = createSignal(0);
-    const [capacity, setCapacity] = createSignal(0);
-    const [oldestChannel, setOldestChannel] = createSignal(0);
+    const [numChannel, setNumChannel] = createSignal<string>("0");
+    const [numPeers, setNumPeers] = createSignal<string>("0");
+    const [capacity, setCapacity] = createSignal<string>("0");
+    const [oldestChannel, setOldestChannel] = createSignal<string>("0");
 
     createMemo(() => {
         const stats = nodeStats();
@@ -37,7 +37,7 @@ export const Hero = () => {
         window.open(ambossUrl, "_blank");
     };
 
-    fetcher(getApiUrl("/nodestats", BTC), (data) => {
+    fetcher(getApiUrl("/nodestats", BTC), (data: any) => {
         log.debug("nodestats", data);
         setNodeStats(data.nodes.BTC);
     });

diff --git a/src/History.tsx b/src/History.tsx
@@ -14,7 +14,7 @@ import {
 import { downloadJson } from "./utils/download";
 
 // Throws when the file is invalid
-const validateBackupFile = (file) => {
+const validateBackupFile = (file: any) => {
     // Check if the object is an array and all elements have at least the id property
     if (!(file instanceof Array)) {
         throw "not an Array";
@@ -28,7 +28,7 @@ const validateBackupFile = (file) => {
 const History = () => {
     const navigate = useNavigate();
 
-    let importRef;
+    let importRef: HTMLInputElement;
 
     const deleteLocalStorage = () => {
         if (confirm(t("delete_localstorage"))) {
@@ -40,8 +40,8 @@ const History = () => {
         downloadJson(`boltz-backup-${Math.floor(Date.now() / 1000)}`, swaps());
     };
 
-    const importLocalStorage = (e) => {
-        const input = e.currentTarget;
+    const importLocalStorage = (e: Event) => {
+        const input = e.currentTarget as HTMLInputElement;
         const inputFile = input.files[0];
         input.setCustomValidity("");
         new Response(inputFile)

diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -11,8 +11,8 @@ import { setI18nConfigured } from "./signals";
 import "./style/nav.scss";
 
 const Nav = ({ network }) => {
-    let timeout;
-    const [hamburger, setHamburger] = createSignal(false);
+    let timeout: any;
+    const [hamburger, setHamburger] = createSignal<boolean>(false);
     return (
         <nav>
             <Warnings />

diff --git a/src/Pay.tsx b/src/Pay.tsx
@@ -7,16 +7,7 @@ import LoadingSpinner from "./components/LoadingSpinner";
 import { RBTC } from "./consts";
 import { fetcher, getApiUrl } from "./helper";
 import t from "./i18n";
-import {
-    setFailureReason,
-    setSwap,
-    setSwapStatus,
-    setSwapStatusTransaction,
-    swap,
-    swapStatus,
-    swapStatusTransaction,
-    swaps,
-} from "./signals";
+import { setFailureReason, setSwap, swap, swaps } from "./signals";
 import InvoiceExpired from "./status/InvoiceExpired";
 import InvoiceFailedToPay from "./status/InvoiceFailedToPay";
 import InvoicePending from "./status/InvoicePending";
@@ -32,6 +23,8 @@ import { swapStatusFailed } from "./utils/swapStatus";
 
 const Pay = () => {
     const params = useParams();
+    const [swapStatus, setSwapStatus] = createSignal(null);
+    const [swapStatusTransaction, setSwapStatusTransaction] = createSignal("");
     const [contractTransaction, setContractTransaction] =
         createSignal(undefined);
     const [contractTransactionType, setContractTransactionType] =

diff --git a/src/Refund.tsx b/src/Refund.tsx
@@ -6,7 +6,7 @@ import { Show, createEffect, createSignal } from "solid-js";
 import BlockExplorer from "./components/BlockExplorer";
 import RefundEta from "./components/RefundEta";
 import SwapList from "./components/SwapList";
-import { fetcher, getApiUrl, refund, refundAddressChange } from "./helper";
+import { fetcher, getApiUrl, refundAddressChange } from "./helper";
 import t from "./i18n";
 import {
     refundTx,
@@ -15,6 +15,7 @@ import {
     setTransactionToRefund,
     swaps,
 } from "./signals";
+import { refund } from "./utils/refund";
 import {
     swapStatusFailed,
     swapStatusSuccess,
@@ -41,7 +42,7 @@ const Refund = () => {
         }
     });
 
-    const checkRefundJsonKeys = (input, json) => {
+    const checkRefundJsonKeys = (input: HTMLInputElement, json: any) => {
         log.debug("checking refund json", json);
 
         // Redirect to normal flow if swap is in local storage
@@ -68,8 +69,8 @@ const Refund = () => {
         }
     };
 
-    const uploadChange = (e) => {
-        const input = e.currentTarget;
+    const uploadChange = (evt: Event) => {
+        const input = evt.currentTarget as HTMLInputElement;
         const inputFile = input.files[0];
         input.setCustomValidity("");
         setRefundJson("");
@@ -110,20 +111,20 @@ const Refund = () => {
 
                 setRefundable(true);
                 setTransactionToRefund(data);
-                await refund(refundJson(), t);
+                await refund(refundJson());
             },
             {
                 id: refundInfo.id,
             },
         );
     };
 
-    const refundSwapsSanityFilter = (swap) =>
+    const refundSwapsSanityFilter = (swap: any) =>
         !swap.reverse && swap.refundTx === undefined;
 
     const [refundableSwaps, setRefundableSwaps] = createSignal([]);
 
-    const addToRefundableSwaps = (swap) => {
+    const addToRefundableSwaps = (swap: any) => {
         setRefundableSwaps(refundableSwaps().concat(swap));
     };
 
@@ -211,7 +212,7 @@ const Refund = () => {
                 <hr />
                 <button
                     class="btn"
-                    disabled={valid() && refundTx() === "" ? "" : "disabled"}
+                    disabled={!(valid() && refundTx() === "")}
                     onClick={startRefund}>
                     {t("refund")}
                 </button>

diff --git a/src/RefundStep.tsx b/src/RefundStep.tsx
@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from "@solidjs/router";
 import log from "loglevel";
+import { For } from "solid-js";
 import { createEffect } from "solid-js";
 
 import DownloadRefund from "./components/DownloadRefund";

diff --git a/src/components/Asset.jsx → src/components/Asset.tsx b/src/components/Asset.jsx → src/components/Asset.tsx