feat: show when no lockup can be found for refund

e2e/refund/refundFile.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+import dict from "../../src/i18n/i18n";
+
+test.describe("Refund files", () => {
+    test("should show that no lockup transaction can be found", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        await page.getByRole("link", { name: "Refund" }).click();
+        await page.getByTestId("refundUpload").click();
+
+        await page
+            .getByTestId("refundUpload")
+            .setInputFiles(path.join(__dirname, "noLockup.png"));
+
+        await expect(
+            page.getByRole("button", { name: dict.en.no_lockup_transaction }),
+        ).toBeVisible();
+    });
+});

package.json

@@ -34,6 +34,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@trivago/prettier-plugin-sort-imports": "^5.2.0",
         "@types/jest": "^29.5.14",
+        "@types/node": "^22.10.5",
         "@webbtc/webln-types": "^3.0.0",
         "babel-jest": "^29.7.0",
         "babel-plugin-transform-import-meta": "^2.2.1",

src/components/RefundButton.tsx

@@ -5,11 +5,12 @@ import { Network as LiquidNetwork } from "liquidjs-lib/src/networks";
 import log from "loglevel";
 import {
     Accessor,
+    Match,
     Setter,
     Show,
+    Switch,
     createResource,
     createSignal,
-    onMount,
 } from "solid-js";
 import { ChainSwap, SubmarineSwap } from "src/utils/swapCreator";
 
@@ -162,16 +163,11 @@ const RefundButton = (props: {
     const refundAction = async () => {
         setRefundRunning(true);
 
-        const transactionToRefund = await getLockupTransaction(
-            props.swap().id,
-            props.swap().type,
-        );
-
         try {
             const res = await refund(
                 props.swap(),
                 refundAddress(),
-                transactionToRefund,
+                lockupTransaction(),
             );
 
             // save refundTx into swaps json and set it to the current swap
@@ -202,9 +198,9 @@ const RefundButton = (props: {
                     msg === "non-final"
                 ) {
                     msg = t("locktime_not_satisfied");
-                    setTimeoutEta(transactionToRefund.timeoutEta);
+                    setTimeoutEta(lockupTransaction().timeoutEta);
                     setTimeoutBlockheight(
-                        transactionToRefund.timeoutBlockHeight,
+                        lockupTransaction().timeoutBlockHeight,
                     );
                 }
                 log.error(msg);
@@ -218,8 +214,10 @@ const RefundButton = (props: {
         setRefundRunning(false);
     };
 
-    onMount(async () => {
-        if (!props.swap()) return;
+    const [lockupTransaction] = createResource(async () => {
+        if (!props.swap()) {
+            return undefined;
+        }
 
         const transactionToRefund = await getLockupTransaction(
             props.swap().id,
@@ -231,6 +229,8 @@ const RefundButton = (props: {
             setTimeoutEta(transactionToRefund.timeoutEta);
             setTimeoutBlockheight(transactionToRefund.timeoutBlockHeight);
         }
+
+        return transactionToRefund;
     });
 
     const [preimageHash] = createResource(async () => {
@@ -294,43 +294,57 @@ const RefundButton = (props: {
                     </Show>
                 </Show>
             }>
-            <Show when={timeoutEta() > 0 || timeoutBlockheight() > 0}>
-                <RefundEta
-                    timeoutEta={timeoutEta}
-                    timeoutBlockHeight={timeoutBlockheight}
-                />
-            </Show>
-            <h3 style={{ color: "#fff" }}>
-                {props.swap()
-                    ? t("refund_address_header", {
-                          asset: props.swap()?.assetSend,
-                      })
-                    : t("refund_address_header_no_asset")}
-            </h3>
-            <input
-                data-testid="refundAddress"
-                id="refundAddress"
-                disabled={props.swap() === null}
-                onInput={(e) =>
-                    setValid(refundAddressChange(e, props.swap()?.assetSend))
-                }
-                type="text"
-                name="refundAddress"
-                placeholder={
-                    props.swap()
-                        ? t("onchain_address", {
-                              asset: props.swap()?.assetSend,
-                          })
-                        : t("onchain_address_no_asset")
-                }
-            />
-            <button
-                data-testid="refundButton"
-                class="btn"
-                disabled={!valid() || refundRunning()}
-                onClick={() => refundAction()}>
-                {t("refund")}
-            </button>
+            <Switch>
+                <Match when={lockupTransaction.state === "ready"}>
+                    <Show when={timeoutEta() > 0 || timeoutBlockheight() > 0}>
+                        <RefundEta
+                            timeoutEta={timeoutEta}
+                            timeoutBlockHeight={timeoutBlockheight}
+                        />
+                    </Show>
+                    <h3 style={{ color: "#fff" }}>
+                        {props.swap()
+                            ? t("refund_address_header", {
+                                  asset: props.swap()?.assetSend,
+                              })
+                            : t("refund_address_header_no_asset")}
+                    </h3>
+                    <input
+                        data-testid="refundAddress"
+                        id="refundAddress"
+                        disabled={props.swap() === null}
+                        onInput={(e) =>
+                            setValid(
+                                refundAddressChange(e, props.swap()?.assetSend),
+                            )
+                        }
+                        type="text"
+                        name="refundAddress"
+                        placeholder={
+                            props.swap()
+                                ? t("onchain_address", {
+                                      asset: props.swap()?.assetSend,
+                                  })
+                                : t("onchain_address_no_asset")
+                        }
+                    />
+                    <button
+                        data-testid="refundButton"
+                        class="btn"
+                        disabled={!valid() || refundRunning()}
+                        onClick={() => refundAction()}>
+                        {t("refund")}
+                    </button>
+                </Match>
+                <Match when={lockupTransaction.state === "pending"}>
+                    <LoadingSpinner />
+                </Match>
+                <Match when={lockupTransaction.state === "errored"}>
+                    <button class="btn" disabled={true}>
+                        {t("no_lockup_transaction")}
+                    </button>
+                </Match>
+            </Switch>
         </Show>
     );
 };

src/i18n/i18n.ts

@@ -227,6 +227,7 @@ const dict = {
         will_receive: "Will receive",
         refund_available_in: "Refund will be available in {{ blocks }} blocks",
         no_wallet_connected: "No wallet connected",
+        no_lockup_transaction: "No lockup transaction found",
     },
     de: {
         language: "Deutsch",
@@ -466,6 +467,7 @@ const dict = {
         will_receive: "Sie erhalten",
         refund_available_in: "Rückerstattung möglich in {{ blocks }} Blöcken",
         no_wallet_connected: "Kein Wallet verbunden",
+        no_lockup_transaction: "Keine Lockup-Transaktion gefunden",
     },
     es: {
         language: "Español",
@@ -701,6 +703,7 @@ const dict = {
         will_receive: "Recibirá",
         refund_available_in: "Reembolso disponible en {{ blocks }} bloques",
         no_wallet_connected: "No hay monedero conectado",
+        no_lockup_transaction: "No se encontró ninguna transacción de lockup",
     },
     zh: {
         language: "中文",
@@ -910,6 +913,7 @@ const dict = {
         will_receive: "将收到",
         refund_available_in: "退款将分 {{ blocks }} 区块提供",
         no_wallet_connected: "未连接钱包",
+        no_lockup_transaction: "未找到锁仓交易",
     },
     ja: {
         language: "日本語",
@@ -1144,6 +1148,7 @@ const dict = {
         will_receive: "受信予定",
         refund_available_in: "返金は {{ blocks }} つのブロックに分かれる",
         no_wallet_connected: "財布はつながっていない！",
+        no_lockup_transaction: "ロックアップトランザクションが見つかりません",
     },
 };