refactor: cleanup refund page (#785)

* refactor: split up refund page

* chore: fix wording

* fix: always show `RefundButton` in external btc refund

* refactor: dont show tabs at all if rsk log endpoint isnt available

* fix: make `lockupTransaction` reactive to swap

* chore: move invalid json message to refund button

* chore: add missing strings + prettier

* fix: dont show refund button after swap has been refunded

* refactor: proper resource implementation for lockupTransaction

* chore: fix tests

* chore: prettier

---------

Co-authored-by: Kilian <[email protected]>

e2e/refund/refundFile.spec.ts

@@ -10,6 +10,9 @@ test.describe("Refund files", () => {
         await page.goto("/");
 
         await page.getByRole("link", { name: "Refund" }).click();
+        await page
+            .getByRole("button", { name: "Refund external swap" })
+            .click();
         await page.getByTestId("refundUpload").click();
 
         await page

src/components/RefundButton.tsx

@@ -112,6 +112,7 @@ export const RefundEvm = (props: {
 const RefundButton = (props: {
     swap: Accessor<SubmarineSwap | ChainSwap>;
     setRefundTxId?: Setter<string>;
+    buttonOverride?: string;
 }) => {
     const {
         getSwap,
@@ -178,10 +179,9 @@ const RefundButton = (props: {
                 currentSwap.refundTx = res.refundTx;
                 await setSwapStorage(currentSwap);
                 setSwap(currentSwap);
-            } else {
-                if (props.setRefundTxId) {
-                    props.setRefundTxId(res.refundTx);
-                }
+            }
+            if (props.setRefundTxId) {
+                props.setRefundTxId(res.refundTx);
             }
         } catch (error) {
             log.warn("refund failed", error);
@@ -214,18 +214,19 @@ const RefundButton = (props: {
         setRefundRunning(false);
     };
 
-    const [lockupTransaction] = createResource(async () => {
-        if (!props.swap()) {
+    // eslint-disable-next-line solid/reactivity
+    const [lockupTransaction] = createResource(props.swap, async (swap) => {
+        if (!swap) {
             return undefined;
         }
 
         const transactionToRefund = await getLockupTransaction(
-            props.swap().id,
-            props.swap().type,
+            swap.id,
+            swap.type,
         );
 
         // show refund ETA for legacy swaps
-        if (props.swap().version !== OutputType.Taproot) {
+        if (swap.version !== OutputType.Taproot) {
             setTimeoutEta(transactionToRefund.timeoutEta);
             setTimeoutBlockheight(transactionToRefund.timeoutBlockHeight);
         }
@@ -295,7 +296,11 @@ const RefundButton = (props: {
                 </Show>
             }>
             <Switch>
-                <Match when={lockupTransaction.state === "ready"}>
+                <Match
+                    when={
+                        lockupTransaction.state === "ready" ||
+                        lockupTransaction.state == "unresolved"
+                    }>
                     <Show when={timeoutEta() > 0 || timeoutBlockheight() > 0}>
                         <RefundEta
                             timeoutEta={timeoutEta}
@@ -333,7 +338,7 @@ const RefundButton = (props: {
                         class="btn"
                         disabled={!valid() || refundRunning()}
                         onClick={() => refundAction()}>
-                        {t("refund")}
+                        {props.buttonOverride ?? t("refund")}
                     </button>
                 </Match>
                 <Match when={lockupTransaction.state === "pending"}>

src/components/SwapList.tsx

@@ -9,6 +9,7 @@ import { SwapIcons } from "./SwapIcons";
 
 const SwapList = (props: {
     swapsSignal: Accessor<SomeSwap[]>;
+    action: string;
     onDelete?: () => Promise<unknown>;
 }) => {
     const navigate = useNavigate();
@@ -51,7 +52,7 @@ const SwapList = (props: {
                             class="swaplist-item"
                             onClick={() => navigate(`/swap/${swap.id}`)}>
                             <a class="btn-small hidden-mobile" href="#">
-                                {t("view")}
+                                {props.action}
                             </a>
                             <SwapIcons swap={swap} />
                             <span class="swaplist-asset-id">

src/i18n/i18n.ts

@@ -96,18 +96,29 @@ const dict = {
         backup_refund_list_clear_history: "clear your browsing history",
         backup_refund_skip:
             "If any of the above applies to you, we strongly recommend downloading this refund file!",
-        refund_a_swap: "Refund a swap",
-        refund_swap: "Refund Swap {{ id }}",
+        refund_swap: "Refund Swap",
         refund_a_swap_subline:
-            "Upload your refund file and reclaim your locked funds",
+            "Upload your Swap’s refund file, to refund a swap that is not available in this browser’s swap history.",
         refund_past_swaps: "Past swaps",
         refund_past_swaps_subline:
             "Swaps that got saved into your browsers storage",
+        no_refundable_swaps:
+            "No refundable swaps found in your browser history",
+        cant_find_swap: "Can't find your swap?",
+        refund_external_explainer:
+            "Try refunding an external swap via refund file and other emergency methods",
+        refund_external_explainer_rsk:
+            "Connect your Rootstock Wallet to scan for refundable swaps that are not saved in this browser’s swap history.",
+        refund_external_scanning_rsk:
+            "Scanning for refundable swaps in your Rootstock Wallet...",
+        connected_wallet_no_swaps:
+            "The connected Rootstock Wallet does not contain any refundable swaps.",
+        refund_external_swap: "Refund External Swap",
         history_no_swaps: "Looks like you didn't do any swaps yet.",
         refund_address_header:
-            "Enter address of your {{ asset }} wallet to refund",
+            "Enter a {{ asset }} address to receive your refund on:",
         refund_address_header_no_asset:
-            "Enter address of your wallet to refund",
+            "Enter an address to receive your refund on:",
         refund_backup: "Backup",
         refund_import: "Import Backup",
         refund_clear: "Delete storage",
@@ -329,13 +340,24 @@ const dict = {
         backup_refund_list_clear_history: "die Browser Daten gelöscht werden",
         backup_refund_skip:
             "Falls einer dieser Punkte zutrifft, empfehlen wir ausdrücklich die Rückerstattungsdatei herunterzuladen!",
-        refund_a_swap: "Einen Swap erstatten",
-        refund_swap: "Erstatte Swap {{ id }}",
+        refund_swap: "Swap Erstatten",
         refund_a_swap_subline:
-            "Lade deine Rückerstattungsdatei hoch und hole dir deine Bitcoin aus einem fehlgeschlagenen Swap zurück",
+            "Lade deine Rückerstattungsdatei hoch und hole dir deine Bitcoin aus einem fehlgeschlagenen Swap zurück.",
         refund_past_swaps: "Historische Swaps",
         refund_past_swaps_subline:
             "Swaps, die in deinem Browser gespeichert wurden",
+        no_refundable_swaps:
+            "Keine erstattungsfähigen Swaps in Browserverlauf gefunden",
+        cant_find_swap: "Swap nicht gefunden?",
+        refund_external_explainer:
+            "Versuchen Sie, einen externen Swap über eine Rückerstattungsdatei und andere Notfallmethoden zu erstatten",
+        refund_external_explainer_rsk:
+            "Verbinden Sie Ihr Rootstock Wallet, um nach erstattungsfähigen Swaps zu suchen, die nicht im Swap-Verlauf dieses Browsers gespeichert sind..",
+        refund_external_scanning_rsk:
+            "Scanne nach erstattungsfähigen Swaps in Rootstock-Wallet...",
+        connected_wallet_no_swaps:
+            "Das angeschlossene Rootstock Wallet enthält keine erstattungsfähigen Swaps.",
+        refund_external_swap: "Externen Swap rückerstatten",
         history_no_swaps:
             "Es sieht so aus, als hättest du noch nicht geswappt.",
         refund_address_header: "Adresse deines {{ asset }} Wallets eingeben",
@@ -567,13 +589,24 @@ const dict = {
         backup_refund_list_clear_history: "borra tu historial de navegación",
         backup_refund_skip:
             "Si alguno de los puntos anteriores le afecta, le recomendamos que descargue el archivo de reembolso.",
-        refund_a_swap: "Reembolsar un intercambio",
-        refund_swap: "Reembolsar intercambio {{ id }}",
+        refund_swap: "Reembolsar Intercambio",
         refund_a_swap_subline:
-            "Cargue su archivo de reembolso y recupere sus fondos bloqueados",
+            "Cargue su archivo de reembolso y recupere sus fondos bloqueados.",
         refund_past_swaps: "Intercambios anteriores",
         refund_past_swaps_subline:
             "Intercambios que se guardaron en el almacenamiento del navegador",
+        no_refundable_swaps:
+            "No se han encontrado swaps reembolsables en el historial de tu navegador",
+        cant_find_swap: "¿No encuentra su intercambio?",
+        refund_external_explainer:
+            "Intenta reembolsar un swap externo mediante el archivo de reembolso y otros métodos de emergencia.",
+        refund_external_explainer_rsk:
+            "Conecta tu monedero Rootstock para buscar swaps reembolsables que no estén guardados en el historial de swaps de este navegador.",
+        refund_external_scanning_rsk:
+            "Escaneando en busca de swaps reembolsables en su monedero Rootstock...",
+        connected_wallet_no_swaps:
+            "El monedero Rootstock conectada no contiene ningún swap reembolsable.",
+        refund_external_swap: "Reembolsar Swap Externo",
         history_no_swaps: "Parece que aún no has realizado ningún intercambio.",
         refund_address_header:
             "Introduzca la dirección de tu monedero {{ asset }} para reembolsar",
@@ -800,11 +833,21 @@ const dict = {
         backup_refund_list_tor: "正在使用Tor浏览器",
         backup_refund_list_clear_history: "清除您的浏览历史记录",
         backup_refund_skip: "如果您符合以上任何条件，强烈建议下载此退款文件！",
-        refund_a_swap: "退还交换",
-        refund_swap: "退交换{{ id }}",
+        refund_swap: "退还交换",
         refund_a_swap_subline: "上传您的退款文件，取回被锁定的资金",
         refund_past_swaps: "过去的交换",
         refund_past_swaps_subline: "保存在浏览器存储中的交换",
+        no_refundable_swaps: "在您的浏览器历史中未发现可退款的交换。",
+        cant_find_swap: "找不到您的交换？",
+        refund_external_explainer:
+            "尝试通过退款文件和其他紧急方法退款外部交换。",
+        refund_external_explainer_rsk:
+            "连接您的 Rootstock 钱包，扫描未保存在此浏览器交换历史记录中的可退款交换。",
+        refund_external_scanning_rsk:
+            "正在扫描您的 Rootstock 钱包中的可退款掉期。。。",
+        connected_wallet_no_swaps:
+            "已连接的 Rootstock 钱包不包含任何可退款掉期。",
+        refund_external_swap: "退款外部交换",
         history_no_swaps: "看起来您还没有进行任何交换。",
         refund_address_header: "输入要退款的 {{ asset }} 钱包地址",
         refund_address_header_no_asset: "输入要退款的钱包地址",
@@ -1020,12 +1063,23 @@ const dict = {
         backup_refund_list_clear_history: "ブラウザ履歴を消した場合",
         backup_refund_skip:
             "もし以上にあてはまる場合、返金ファイルをダウンロードすることを強くお勧めします！",
-        refund_a_swap: "スワップを返金する",
-        refund_swap: "スワップの返金 {{ id }}",
+        refund_swap: "スワップを返金する",
         refund_a_swap_subline:
             "返金ファイルをアップロードし、ロックされた資金を回収します",
         refund_past_swaps: "過去のスワップ",
         refund_past_swaps_subline: "ブラウザのストレージに保存されたスワップ",
+        no_refundable_swaps:
+            "ブラウザの履歴に返金可能なスワップが見つかりません。",
+        cant_find_swap: "スワップが見つからない？",
+        refund_external_explainer:
+            "払い戻しファイルやその他の緊急手段を使って外部スワップを払い戻してみる。",
+        refund_external_explainer_rsk:
+            "Rootstockウォレットを接続して、このブラウザのスワップ履歴に保存されていない払い戻し可能なスワップをスキャンします。",
+        refund_external_scanning_rsk:
+            "Rootstockウォレットにある払い戻し可能なスワップをスキャンしています...",
+        connected_wallet_no_swaps:
+            "接続されているRootstockウォレットには返金可能なスワップが含まれていません。",
+        refund_external_swap: "払い戻し外部スワップ",
         history_no_swaps: "まだスワップを行っていないようです。",
         refund_address_header:
             "返金用の {{ asset }} ウォレットのアドレスを入力",

src/index.tsx

@@ -25,6 +25,7 @@ import NotFound from "./pages/NotFound";
 import Pay from "./pages/Pay";
 import Refund from "./pages/Refund";
 import RefundEvm from "./pages/RefundEvm";
+import RefundExternal from "./pages/RefundExternal";
 import RefundStep from "./pages/RefundStep";
 import "./style/index.scss";
 import "./utils/patches";
@@ -105,6 +106,8 @@ const cleanup = render(
             <Route path="/swap/refund/:id" component={RefundStep} />
             <Route path="/error" component={() => <Error />} />
             <Route path="/refund" component={Refund} />
+            <Route path="/refund/external" component={RefundExternal} />
+            <Route path="/refund/external/:type" component={RefundExternal} />
             <Route path="/history" component={History} />
             <Route path="*404" component={NotFound} />
         </Router>

src/pages/History.tsx

@@ -153,6 +153,7 @@ const History = () => {
                         onDelete={async () => {
                             setSwaps(await getSwaps());
                         }}
+                        action={t("view")}
                     />
                     <Show when={swaps().length > 0}>
                         <Show when={!isIos()}>