feat: intermediate step when uploading refundjson and proper error (#489

)

src/i18n/i18n.ts

@@ -170,6 +170,8 @@ const dict = {
         branding: "Branding",
         testnet: "Testnet",
         broadcasting_claim: "Broadcasting claim transaction...",
+        open_swap: "Open Swap",
+        swap_in_progress: "This swap is still in progress.",
     },
     de: {
         language: "Deutsch",
@@ -347,6 +349,8 @@ const dict = {
         branding: "Branding",
         testnet: "Testnet",
         broadcasting_claim: "Sende claim transaction...",
+        open_swap: "Swap öffnen",
+        swap_in_progress: "Dieser Swap ist noch nicht abgeschlossen.",
     },
     es: {
         language: "Español",
@@ -526,6 +530,8 @@ const dict = {
         branding: "Branding",
         testnet: "Testnet",
         broadcasting_claim: "Enviando transacción de reclamación...",
+        open_swap: "Abrir intercambio",
+        swap_in_progress: "Este intercambio aún está en curso.",
     },
     zh: {
         language: "中文",
@@ -688,6 +694,8 @@ const dict = {
         branding: "品牌",
         testnet: "测试网",
         broadcasting_claim: "正在发送索赔交易...",
+        open_swap: "打开交换",
+        swap_in_progress: "此交换仍在进行中。",
     },
 };
 

src/pages/Refund.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "@solidjs/router";
 import log from "loglevel";
 import QrScanner from "qr-scanner";
-import { Show, createEffect, createSignal } from "solid-js";
+import { Show, createSignal, onMount } from "solid-js";
 
 import BlockExplorer from "../components/BlockExplorer";
 import RefundButton from "../components/RefundButton";
@@ -19,6 +19,8 @@ const Refund = () => {
     const { updateSwapStatus, wasmSupported, swaps, t } = useGlobalContext();
     const { setTimeoutEta, setTimeoutBlockheight } = usePayContext();
 
+    const [swapFound, setSwapFound] = createSignal(null);
+    const [refundInvalid, setRefundInvalid] = createSignal(false);
     const [refundJson, setRefundJson] = createSignal(null);
     const [refundTxId, setRefundTxId] = createSignal<string>("");
 
@@ -28,10 +30,12 @@ const Refund = () => {
     const checkRefundJsonKeys = (input: HTMLInputElement, json: any) => {
         log.debug("checking refund json", json);
 
-        // Redirect to normal flow if swap is in local storage
+        // When the swap id is found in the local storage, there is no need for the validation,
+        // all relevant data is there already and we just need to show the button to redirect
         const localStorageSwap = swaps().find((s: any) => s.id === json.id);
         if (localStorageSwap !== undefined) {
-            navigate("/swap/" + json.id);
+            setSwapFound(json.id);
+            return;
         }
 
         // Compatibility with the old refund files
@@ -46,6 +50,7 @@ const Refund = () => {
         if (valid) {
             setRefundJson(json);
         } else {
+            setRefundInvalid(true);
             input.setCustomValidity(t("invalid_refund_file"));
         }
     };
@@ -55,6 +60,8 @@ const Refund = () => {
         const inputFile = input.files[0];
         input.setCustomValidity("");
         setRefundJson(null);
+        setSwapFound(null);
+        setRefundInvalid(false);
 
         if (inputFile.type === "image/png") {
             QrScanner.scanImage(inputFile, { returnDetailedScanResult: true })
@@ -63,6 +70,7 @@ const Refund = () => {
                 )
                 .catch((e) => {
                     log.error("invalid QR code upload", e);
+                    setRefundInvalid(true);
                     input.setCustomValidity(t("invalid_refund_file"));
                 });
         } else {
@@ -73,6 +81,7 @@ const Refund = () => {
                 })
                 .catch((e) => {
                     log.error("invalid file upload", e);
+                    setRefundInvalid(true);
                     input.setCustomValidity(t("invalid_refund_file"));
                 });
         }
@@ -87,7 +96,7 @@ const Refund = () => {
         setRefundableSwaps(refundableSwaps().concat(swap));
     };
 
-    createEffect(() => {
+    onMount(() => {
         const swapsToRefund = swaps()
             .filter(refundSwapsSanityFilter)
             .filter((swap) =>
@@ -143,6 +152,21 @@ const Refund = () => {
                         accept="application/json,image/png"
                         onChange={(e) => uploadChange(e)}
                     />
+                    <Show when={swapFound() !== null}>
+                        <hr />
+                        <p>{t("swap_in_progress")}</p>
+                        <button
+                            class="btn btn-success"
+                            onClick={() => navigate(`/swap/${swapFound()}`)}>
+                            {t("open_swap")}
+                        </button>
+                    </Show>
+                    <Show when={refundInvalid()}>
+                        <hr />
+                        <button class="btn" disabled={true}>
+                            {t("invalid_refund_file")}
+                        </button>
+                    </Show>
                     <Show when={refundTxId() === "" && refundJson() !== null}>
                         <hr />
                         <RefundButton

tests/pages/Refund.spec.tsx

@@ -24,9 +24,8 @@ describe("Refund", () => {
         ).not.toBeUndefined();
     });
 
-    test("should not show refund button when no file was uploaded", async () => {
+    test("should show refund button when file was uploaded", async () => {
         const user = userEvent.setup();
-
         render(
             () => (
                 <>
@@ -55,6 +54,75 @@ describe("Refund", () => {
             });
         await user.upload(uploadInput, swapFile);
 
-        expect(refundFrame.children.length).toEqual(8);
+        expect(await screen.findAllByText(i18n.en.refund)).not.toBeUndefined();
+    });
+
+    test("should show invalid refund button when invalid file was uploaded", async () => {
+        const user = userEvent.setup();
+        render(
+            () => (
+                <>
+                    <TestComponent />
+                    <Refund />
+                </>
+            ),
+            {
+                wrapper: contextWrapper,
+            },
+        );
+        const refundFrame = (await screen.findByTestId(
+            "refundFrame",
+        )) as HTMLDivElement;
+        expect(refundFrame.children.length).toEqual(4);
+
+        const uploadInput = await screen.findByTestId("refundUpload");
+        const swapFile = new File(["{}"], "swap.json", {
+            type: "application/json",
+        });
+        (swapFile as any).text = async () =>
+            JSON.stringify({
+                asset: "BTC",
+            });
+        await user.upload(uploadInput, swapFile);
+
+        expect(
+            await screen.findAllByText(i18n.en.invalid_refund_file),
+        ).not.toBeUndefined();
+    });
+
+    test("should show open swap button when swap is in `swaps()`", async () => {
+        const user = userEvent.setup();
+        render(
+            () => (
+                <>
+                    <TestComponent />
+                    <Refund />
+                </>
+            ),
+            {
+                wrapper: contextWrapper,
+            },
+        );
+        const swap = {
+            asset: "BTC",
+            id: "123",
+            privateKey: "",
+        };
+        globalSignals.setSwaps([swap]);
+        const refundFrame = (await screen.findByTestId(
+            "refundFrame",
+        )) as HTMLDivElement;
+        expect(refundFrame.children.length).toEqual(4);
+
+        const uploadInput = await screen.findByTestId("refundUpload");
+        const swapFile = new File(["{}"], "swap.json", {
+            type: "application/json",
+        });
+        (swapFile as any).text = async () => JSON.stringify(swap);
+        await user.upload(uploadInput, swapFile);
+
+        expect(
+            await screen.findAllByText(i18n.en.open_swap),
+        ).not.toBeUndefined();
     });
 });