refactor: full switch to typescript, create context for signals

src/components/AddressInput.tsx

@@ -1,23 +1,23 @@
 import { createEffect, on } from "solid-js";
 
 import { RBTC } from "../consts";
+import { useCreateContext } from "../context/Create";
 import t from "../i18n";
-import {
-    asset,
-    onchainAddress,
-    reverse,
-    sendAmountValid,
-    setAddressValid,
-    setOnchainAddress,
-} from "../signals";
-import { decodeAddress } from "../utils/compat";
 import { extractAddress } from "../utils/invoice";
 import { setButtonLabel } from "./CreateButton";
 
 const AddressInput = () => {
     let inputRef: HTMLInputElement;
+    const {
+        asset,
+        onchainAddress,
+        reverse,
+        sendAmountValid,
+        setAddressValid,
+        setOnchainAddress,
+    } = useCreateContext();
 
-    const validateAddress = (input: HTMLInputElement) => {
+    const validateAddress = (input: EventTarget & HTMLInputElement) => {
         const inputValue = input.value.trim();
         const address = extractAddress(inputValue);
 

src/components/Asset.tsx

@@ -1,7 +1,9 @@
-import { setAssetSelect, setAssetSelected } from "../signals";
+import { useCreateContext } from "../context/Create";
 import "../style/asset.scss";
 
 const Asset = ({ side, signal }) => {
+    const { setAssetSelect, setAssetSelected } = useCreateContext();
+
     const openSelect = () => {
         setAssetSelected(side);
         setAssetSelect(true);

src/components/AssetSelect.tsx

@@ -1,22 +1,24 @@
 import { pairs } from "../config";
 import { LN, sideSend } from "../consts";
-import t from "../i18n";
-import {
-    assetReceive,
-    assetSelect,
-    assetSelected,
-    assetSend,
-    setAsset,
-    setAssetReceive,
-    setAssetSelect,
-    setAssetSend,
-} from "../signals";
+import { useCreateContext } from "../context/Create";
 import { fetchPairs } from "../utils/helper";
+import t from "../i18n";
 
 const assets = Object.keys(pairs).map((pair) => pair.split("/")[0]);
 assets.push(LN);
 
 const SelectAsset = () => {
+    const {
+        assetSelected,
+        assetSelect,
+        setAssetSelect,
+        assetReceive,
+        setAssetReceive,
+        assetSend,
+        setAssetSend,
+        setAsset,
+    } = useCreateContext();
+
     const setSelectAsset = (isSend: boolean, asset: string) => {
         const setter = isSend ? setAssetSend : setAssetReceive;
         setter(asset);

src/components/ConnectMetamask.tsx

@@ -1,16 +1,19 @@
 import { Show, createEffect, createSignal } from "solid-js";
 
+import { useCreateContext } from "../context/Create";
 import { useWeb3Signer } from "../context/Web3";
 import t from "../i18n";
-import {
-    addressValid,
-    sendAmountValid,
-    setAddressValid,
-    setOnchainAddress,
-} from "../signals";
 import { setButtonLabel } from "./CreateButton";
 
 const ConnectMetamask = ({ showAddress }) => {
+    const {
+        addressValid,
+        sendAmountValid,
+        setAddressValid,
+        setOnchainAddress,
+    } = useCreateContext();
+    const { getSigner, hasMetamask } = useWeb3Signer();
+
     const [address, setAddress] = createSignal<string | undefined>();
     const [buttonText, setButtonText] = createSignal<string | undefined>();
 
@@ -33,8 +36,6 @@ const ConnectMetamask = ({ showAddress }) => {
         }
     });
 
-    const { getSigner, hasMetamask } = useWeb3Signer();
-
     return (
         <>
             <Show when={hasMetamask()}>

src/components/CreateButton.tsx

@@ -5,29 +5,16 @@ import log from "loglevel";
 import { createEffect, createMemo, createSignal } from "solid-js";
 
 import { RBTC } from "../consts";
+import { useCreateContext } from "../context/Create";
 import { useWeb3Signer } from "../context/Web3";
 import t from "../i18n";
 import {
-    asset,
     config,
-    invoice,
-    lnurl,
-    onchainAddress,
     online,
-    receiveAmount,
-    reverse,
-    sendAmount,
-    sendAmountValid,
-    setAddressValid,
-    setInvoice,
-    setInvoiceValid,
-    setLnurl,
     setNotification,
     setNotificationType,
-    setOnchainAddress,
     setSwaps,
     swaps,
-    valid,
     wasmSupported,
 } from "../signals";
 import { ECPair } from "../utils/ecpair";
@@ -47,6 +34,22 @@ export const [buttonLabel, setButtonLabel] = createSignal<buttonLabelParams>({
 export const CreateButton = () => {
     const navigate = useNavigate();
     const { getEtherSwap } = useWeb3Signer();
+    const {
+        asset,
+        invoice,
+        lnurl,
+        reverse,
+        setInvoice,
+        setLnurl,
+        receiveAmount,
+        sendAmountValid,
+        setOnchainAddress,
+        valid,
+        sendAmount,
+        onchainAddress,
+        setInvoiceValid,
+        setAddressValid,
+    } = useCreateContext();
 
     const [buttonDisable, setButtonDisable] = createSignal(true);
     const [buttonClass, setButtonClass] = createSignal("btn");
@@ -135,16 +138,16 @@ export const CreateButton = () => {
             }
         }
 
-        if (!(await feeCheck(t("feecheck")))) {
+        if (!(await feeCheck(t("feecheck"), assetName))) {
             return;
         }
 
         params.pairHash = config()[`${assetName}/BTC`]["hash"];
 
         await new Promise((resolve) => {
             fetcher(
-                "/createswap",
-                (data) => {
+                getApiUrl("/createswap", assetName),
+                (data: any) => {
                     data.date = new Date().getTime();
                     data.reverse = reverse();
                     data.asset = asset();
@@ -192,7 +195,7 @@ export const CreateButton = () => {
                 async (err: Response) => {
                     const res = await err.json();
                     if (res.error === "invalid pair hash") {
-                        await feeCheck(t("feecheck"));
+                        await feeCheck(t("feecheck"), assetName);
                     } else {
                         setNotificationType("error");
                         setNotification(res.error);

src/components/Fees.tsx

@@ -3,20 +3,16 @@ import { createEffect } from "solid-js";
 
 import btcSvg from "../assets/btc.svg";
 import satSvg from "../assets/sat.svg";
+import { useCreateContext } from "../context/Create";
 import t from "../i18n";
 import {
-    asset,
     boltzFee,
     config,
     denomination,
     minerFee,
-    reverse,
-    sendAmount,
     setBoltzFee,
     setDenomination,
-    setMaximum,
     setMinerFee,
-    setMinimum,
 } from "../signals";
 import {
     calculateBoltzFeeOnSend,
@@ -26,6 +22,9 @@ import { denominations, formatAmount } from "../utils/denomination";
 import { fetchPairs } from "../utils/helper";
 
 const Fees = () => {
+    const { asset, reverse, sendAmount, setMinimum, setMaximum } =
+        useCreateContext();
+
     createEffect(() => {
         const cfg = config()[`${asset()}/BTC`];
 

src/components/InvoiceInput.tsx

@@ -1,25 +1,9 @@
 import { BigNumber } from "bignumber.js";
 import { createEffect, on } from "solid-js";
 
-import { RBTC } from "../consts";
+import { useCreateContext } from "../context/Create";
 import t from "../i18n";
-import {
-    asset,
-    boltzFee,
-    denomination,
-    invoice,
-    minerFee,
-    receiveAmount,
-    receiveAmountFormatted,
-    reverse,
-    sendAmount,
-    sendAmountValid,
-    setInvoice,
-    setInvoiceValid,
-    setLnurl,
-    setReceiveAmount,
-    setSendAmount,
-} from "../signals";
+import { denomination } from "../signals";
 import { calculateSendAmount } from "../utils/calculate";
 import { decodeInvoice, extractInvoice, isLnurl } from "../utils/invoice";
 import { validateInvoice } from "../utils/validation";
@@ -28,6 +12,20 @@ import { setButtonLabel } from "./CreateButton";
 const InvoiceInput = () => {
     let inputRef: HTMLTextAreaElement;
 
+    const {
+        invoice,
+        reverse,
+        setInvoice,
+        receiveAmount,
+        setReceiveAmount,
+        sendAmount,
+        setSendAmount,
+        setLnurl,
+        setInvoiceValid,
+        receiveAmountFormatted,
+        sendAmountValid,
+    } = useCreateContext();
+
     const validate = (input: HTMLTextAreaElement) => {
         const inputValue = extractInvoice(input.value.trim());
         try {
@@ -62,7 +60,7 @@ const InvoiceInput = () => {
 
     createEffect(
         on([sendAmountValid, invoice], () => {
-            if (!reverse() && asset() !== RBTC) {
+            if (!reverse()) {
                 validate(inputRef);
             }
         }),

src/components/Nav.tsx

@@ -12,8 +12,7 @@ import "../style/nav.scss";
 
 const Nav = ({ network }) => {
     let timeout: ReturnType<typeof setTimeout> | undefined;
-
-    const [hamburger, setHamburger] = createSignal(false);
+    const [hamburger, setHamburger] = createSignal<boolean>(false);
     return (
         <nav>
             <Warnings />

src/components/Refund.tsx

@@ -3,10 +3,11 @@ import { Accessor, createSignal } from "solid-js";
 import { RBTC } from "../consts";
 import { useWeb3Signer } from "../context/Web3";
 import t from "../i18n";
-import { refund, refundAddressChange, updateSwaps } from "../utils/helper";
+import {  updateSwaps } from "../utils/helper";
 import { decodeInvoice } from "../utils/invoice";
 import { prefix0x, satoshiToWei } from "../utils/rootstock";
 import ContractTransaction from "./ContractTransaction";
+import RefundCreate from "./RefundCreate";
 
 const Refund = ({ swap }: { swap: Accessor<Record<string, any>> }) => {
     if (swap().asset === RBTC) {
@@ -30,24 +31,13 @@ const Refund = ({ swap }: { swap: Accessor<Record<string, any>> }) => {
         );
     }
 
-    const [valid, setValid] = createSignal<boolean>(false);
+    // a swap not from refundjson is always valid
+    const [valid, _] = createSignal<boolean>(true);
 
     return (
         <>
             <h2>{t("refund")}</h2>
-            <input
-                id="refundAddress"
-                onInput={(e) => setValid(refundAddressChange(e, swap().asset))}
-                type="text"
-                name="refundAddress"
-                placeholder={t("refund_address_placeholder")}
-            />
-            <button
-                class="btn"
-                disabled={!valid()}
-                onclick={() => refund(swap(), t)}>
-                {t("refund")}
-            </button>
+            <RefundCreate swap={swap} refundValid={valid} />
         </>
     );
 };