refactor: cleanup RSK claim page (#687)

* refactor: cleanup RSK claim page * chore: fix strings to match "continue" * fix: asset label --------- Co-authored-by: Kilian <[email protected]>
BoltzExchange · Oct 7, 2024 · d37de5a · d37de5a
1 parent e8c9aa8
commit d37de5a
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 35 deletions.
diff --git a/src/components/BlockExplorerLink.tsx b/src/components/BlockExplorerLink.tsx
@@ -2,7 +2,6 @@ import { Accessor, Show, createEffect, createSignal } from "solid-js";
 
 import { RBTC } from "../consts/Assets";
 import { SwapType } from "../consts/Enums";
-import { usePayContext } from "../context/Pay";
 import {
     ChainSwap,
     ReverseSwap,
@@ -24,18 +23,12 @@ const BlockExplorerLink = ({
         (swap().type !== SwapType.Chain && getRelevantAssetForSwap(swap())) ===
         RBTC
     ) {
-        const { swapStatusTransaction } = usePayContext();
-        const txId = () =>
-            swap().claimTx || swap().lockupTx || swapStatusTransaction()?.id;
-
         return (
-            <Show when={txId() !== undefined}>
+            <Show when={swap().claimTx !== undefined}>
                 <BlockExplorer
                     asset={getRelevantAssetForSwap(swap())}
-                    txId={txId()}
-                    typeLabel={
-                        swap().claimTx !== undefined ? "claim_tx" : "lockup_tx"
-                    }
+                    txId={swap().claimTx}
+                    typeLabel={"claim_tx"}
                 />
             </Show>
         );

diff --git a/src/components/CreateButton.tsx b/src/components/CreateButton.tsx
@@ -158,12 +158,27 @@ export const CreateButton = () => {
 
                 const fetchResults = await Promise.allSettled([
                     (() => {
-                        try {
-                            return fetchLnurl(lnurl(), Number(receiveAmount()));
-                        } catch (e) {
-                            log.warn("Fetching invoice from LNURL failed", e);
-                            throw e;
-                        }
+                        return new Promise<string>(async (resolve, reject) => {
+                            const timeout = setTimeout(
+                                () => reject("timeout"),
+                                5_000,
+                            );
+
+                            try {
+                                const res = await fetchLnurl(
+                                    lnurl(),
+                                    Number(receiveAmount()),
+                                );
+                                clearTimeout(timeout);
+                                resolve(res);
+                            } catch (e) {
+                                log.warn(
+                                    "Fetching invoice from LNURL failed",
+                                    e,
+                                );
+                                throw e;
+                            }
+                        });
                     })(),
                     (() => {
                         try {

diff --git a/src/components/RefundButton.tsx b/src/components/RefundButton.tsx
@@ -26,7 +26,6 @@ import ContractTransaction from "./ContractTransaction";
 export const RefundEvm = ({
     swapId,
     setRefundTxHash,
-    asset,
     amount,
     claimAddress,
     preimageHash,
@@ -35,7 +34,6 @@ export const RefundEvm = ({
 }: {
     swapId?: string;
     setRefundTxHash?: Setter<string>;
-    asset: string;
     amount: number;
     preimageHash: string;
     claimAddress: string;
@@ -130,7 +128,6 @@ const RefundButton = ({
             return (
                 <RefundEvm
                     swapId={submarine.id}
-                    asset={submarine.assetSend}
                     signerAddress={submarine.signer}
                     amount={submarine.expectedAmount}
                     claimAddress={submarine.claimAddress}
@@ -144,7 +141,6 @@ const RefundButton = ({
             return (
                 <RefundEvm
                     swapId={chain.id}
-                    asset={chain.assetSend}
                     signerAddress={chain.signer}
                     amount={chain.lockupDetails.amount}
                     claimAddress={chain.lockupDetails.claimAddress}

diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -33,7 +33,7 @@ const dict = {
         fee: "Boltz Fee",
         denomination: "Denomination",
         send: "Send",
-        claim: "Claim",
+        continue: "Continue",
         receive: "Receive",
         min: "Min",
         max: "Max",
@@ -162,7 +162,7 @@ const dict = {
         not_found_subline: "The page you are looking for does not exist.",
         back_to_home: "Back to Home",
         transaction_prompt:
-            'Press "{{ button }}" in order to open your connected wallet and confirm the displayed transaction.',
+            'Press "{{ button }}" in order to open your connected wallet and confirm the displayed transaction to receive {{ asset }}.',
         invalid_address: "Invalid {{ asset }} address",
         scan_qr_code: "Scan QR Code",
         version: "Version",
@@ -247,7 +247,7 @@ const dict = {
         fee: "Boltzgebühr",
         denomination: "Denominierung",
         send: "Sende",
-        claim: "Claim",
+        continue: "Weiter",
         receive: "Empfange",
         min: "Min",
         max: "Max",
@@ -381,7 +381,7 @@ const dict = {
         not_found_subline: "Die gesuchte Seite existiert nicht.",
         back_to_home: "Zurück zur Startseite",
         transaction_prompt:
-            '"{{ button }}" klicken um das verbundene Wallet zu öffnen und bestätige die angezeigte Transaktion.',
+            '"{{ button }}" klicken um das verbundene Wallet zu öffnen und bestätige die angezeigte Transaktion um {{ asset }} zu empfangen.',
         invalid_address: "Ungültige {{ asset }} Adresse",
         scan_qr_code: "QR Code scannen",
         version: "Version",
@@ -468,7 +468,7 @@ const dict = {
         fee: "Comisión de Boltz",
         denomination: "Denominación",
         send: "Enviar",
-        claim: "Reclamar",
+        continue: "Continuar",
         receive: "Recibir",
         min: "Mín",
         max: "Máx",
@@ -602,7 +602,7 @@ const dict = {
         not_found_subline: "La página buscada no existe.",
         back_to_home: "Volver al inicio",
         transaction_prompt:
-            'Pulse "{{ button }}" para abrir su monedero conectado y confirmar la transacción mostrada.',
+            'Pulse "{{ button }}" para abrir su monedero conectado y confirmar la transacción mostrada para recibir {{ asset }}.',
         invalid_address: "Dirección {{ asset }} inválida",
         scan_qr_code: "Escanear código QR",
         version: "Versión",
@@ -689,7 +689,7 @@ const dict = {
         fee: "Boltz费",
         denomination: "面额",
         send: "发送",
-        claim: "索赔",
+        continue: "继续",
         receive: "接收",
         min: "最小",
         max: "最大",
@@ -805,7 +805,7 @@ const dict = {
         not_found_subline: "您要查找的页面不存在。",
         back_to_home: "返回首页",
         transaction_prompt:
-            "按“{{ button }}”以打开已连接的钱包并确认显示的交易。",
+            "按“{{ button }}”以打开已连接的钱包并确认显示的交易以便收{{ asset }}。",
         invalid_address: "无效的{{ asset }}地址",
         scan_qr_code: "扫描 QR 码",
         version: "版本",

diff --git a/src/pages/RefundEvm.tsx b/src/pages/RefundEvm.tsx
@@ -42,7 +42,6 @@ const RefundEvm = () => {
                             when={refundTxHash() !== undefined}
                             fallback={
                                 <RefundButton
-                                    asset={params.asset}
                                     setRefundTxHash={setRefundTxHash}
                                     amount={Number(refundData().amount)}
                                     preimageHash={refundData().preimageHash}

diff --git a/src/status/TransactionConfirmed.tsx b/src/status/TransactionConfirmed.tsx
@@ -10,14 +10,15 @@ import { prefix0x, satoshiToWei } from "../utils/rootstock";
 import { ChainSwap, ReverseSwap } from "../utils/swapCreator";
 
 // TODO: use bignumber for amounts
-const ClaimRsk = ({
+const ClaimEvm = ({
     useRif,
     swapId,
     amount,
     preimage,
     signerAddress,
     refundAddress,
     timeoutBlockHeight,
+    assetReceive,
 }: {
     amount: number;
     swapId: string;
@@ -26,6 +27,7 @@ const ClaimRsk = ({
     signerAddress: string;
     refundAddress: string;
     timeoutBlockHeight: number;
+    assetReceive: string;
 }) => {
     const { getEtherSwap, signer } = useWeb3Signer();
     const { t, getSwap, setSwapStorage } = useGlobalContext();
@@ -65,10 +67,12 @@ const ClaimRsk = ({
                 await setSwapStorage(currentSwap);
             }}
             address={signerAddress}
-            buttonText={t("claim")}
-            promptText={t("transaction_prompt", { button: t("claim") })}
+            buttonText={t("continue")}
+            promptText={t("transaction_prompt", {
+                button: t("continue"),
+                asset: assetReceive,
+            })}
             waitingText={t("tx_ready_to_claim")}
-            showHr={true}
         />
     );
 };
@@ -82,29 +86,31 @@ const TransactionConfirmed = () => {
             const chain = swap() as ChainSwap;
 
             return (
-                <ClaimRsk
+                <ClaimEvm
                     swapId={chain.id}
                     useRif={chain.useRif}
                     preimage={chain.preimage}
                     signerAddress={chain.signer}
                     amount={chain.claimDetails.amount}
                     refundAddress={chain.claimDetails.refundAddress}
                     timeoutBlockHeight={chain.claimDetails.timeoutBlockHeight}
+                    assetReceive={chain.assetReceive}
                 />
             );
         }
 
         const reverse = swap() as ReverseSwap;
 
         return (
-            <ClaimRsk
+            <ClaimEvm
                 swapId={reverse.id}
                 useRif={reverse.useRif}
                 preimage={reverse.preimage}
                 amount={reverse.onchainAmount}
                 signerAddress={reverse.signer}
                 refundAddress={reverse.refundAddress}
                 timeoutBlockHeight={reverse.timeoutBlockHeight}
+                assetReceive={reverse.assetReceive}
             />
         );
     }