refactor: nicer screen for logs refunds

src/components/ContractTransaction.tsx

@@ -9,6 +9,7 @@ import ConnectWallet, { ConnectAddress, SwitchNetwork } from "./ConnectWallet";
 import LoadingSpinner from "./LoadingSpinner";
 
 const ContractTransaction = (props: {
+    disabled?: boolean;
     onClick: () => Promise<unknown>;
     children?: JSX.Element;
     showHr?: boolean;
@@ -74,7 +75,7 @@ const ContractTransaction = (props: {
                     </Show>
                     <button
                         class="btn"
-                        disabled={clicked()}
+                        disabled={props.disabled || clicked()}
                         onClick={async () => {
                             setClicked(true);
                             try {

src/components/RefundButton.tsx

@@ -32,6 +32,7 @@ import ContractTransaction from "./ContractTransaction";
 import LoadingSpinner from "./LoadingSpinner";
 
 export const RefundEvm = (props: {
+    disabled?: boolean;
     swapId?: string;
     amount: number;
     preimageHash: string;
@@ -47,6 +48,7 @@ export const RefundEvm = (props: {
 
     return (
         <ContractTransaction
+            disabled={props.disabled}
             /* eslint-disable-next-line solid/reactivity */
             onClick={async () => {
                 const contract = getEtherSwap();

src/i18n/i18n.ts

@@ -225,6 +225,7 @@ const dict = {
         no_browser_wallet: "No browser wallet detected",
         sent: "Sent",
         will_receive: "Will receive",
+        refund_available_in: "Refund will be available in {{ blocks }} blocks",
     },
     de: {
         language: "Deutsch",
@@ -462,6 +463,7 @@ const dict = {
         no_browser_wallet: "Kein Browser Wallet gefunden",
         sent: "Gesendet",
         will_receive: "Sie erhalten",
+        refund_available_in: "Rückerstattung möglich in {{ blocks }} Blöcken",
     },
     es: {
         language: "Español",
@@ -696,6 +698,7 @@ const dict = {
         no_browser_wallet: "No se detectó monedero en el navegador",
         sent: "Enviado",
         will_receive: "Recibirá",
+        refund_available_in: "Reembolso disponible en {{ blocks }} bloques",
     },
     zh: {
         language: "中文",
@@ -903,6 +906,7 @@ const dict = {
         no_browser_wallet: "未检测到浏览器钱包",
         sent: "已发送",
         will_receive: "将收到",
+        refund_available_in: "退款将分 {{ blocks }} 区块提供",
     },
     ja: {
         language: "日本語",
@@ -1135,6 +1139,7 @@ const dict = {
         no_browser_wallet: "ブラウザのウォレットが検出されない",
         sent: "送信済み",
         will_receive: "受信予定",
+        refund_available_in: "返金は {{ blocks }} つのブロックに分かれる",
     },
 };
 

src/pages/Refund.tsx

@@ -1,13 +1,7 @@
 import { useNavigate } from "@solidjs/router";
 import log from "loglevel";
 import QrScanner from "qr-scanner";
-import {
-    Show,
-    createResource,
-    createSignal,
-    onCleanup,
-    onMount,
-} from "solid-js";
+import { Show, createEffect, createSignal, onCleanup, onMount } from "solid-js";
 
 import BlockExplorer from "../components/BlockExplorer";
 import ConnectWallet from "../components/ConnectWallet";
@@ -121,7 +115,8 @@ const Refund = () => {
         }
     });
 
-    createResource(async () => {
+    // eslint-disable-next-line solid/reactivity
+    createEffect(async () => {
         setLogRefundableSwaps([]);
 
         if (refundScanAbort !== undefined) {

src/pages/RefundEvm.tsx

@@ -1,29 +1,99 @@
 import { useParams } from "@solidjs/router";
-import { Match, Show, Switch, createResource, createSignal } from "solid-js";
+import BigNumber from "bignumber.js";
+import {
+    Match,
+    Setter,
+    Show,
+    Switch,
+    createResource,
+    createSignal,
+} from "solid-js";
 
 import BlockExplorer from "../components/BlockExplorer";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { RefundEvm as RefundButton } from "../components/RefundButton";
 import { useGlobalContext } from "../context/Global";
 import { useWeb3Signer } from "../context/Web3";
 import { LogRefundData, getLogsFromReceipt } from "../utils/contractLogs";
+import { formatAmount } from "../utils/denomination";
 import { formatError } from "../utils/errors";
+import { cropString } from "../utils/helper";
+
+type RefundData = LogRefundData & { currentHeight: bigint };
+
+const RefundState = (props: {
+    asset: string;
+    lockupTxHash: string;
+    refundData: RefundData;
+    setRefundTxHash: Setter<string | undefined>;
+}) => {
+    const { t, denomination, separator } = useGlobalContext();
+
+    const timelockExpired = () =>
+        props.refundData.timelock <= props.refundData.currentHeight;
+
+    return (
+        <>
+            <p>
+                {t("refund")}{" "}
+                {formatAmount(
+                    new BigNumber(props.refundData.amount.toString()),
+                    denomination(),
+                    separator(),
+                )}{" "}
+                {props.asset}
+            </p>
+
+            <Show when={!timelockExpired()}>
+                <h3>
+                    {t("refund_available_in", {
+                        blocks: (
+                            props.refundData.timelock -
+                            props.refundData.currentHeight
+                        ).toString(),
+                    })}
+                </h3>
+            </Show>
+
+            <RefundButton
+                disabled={!timelockExpired()}
+                setRefundTxHash={props.setRefundTxHash}
+                amount={Number(props.refundData.amount)}
+                preimageHash={props.refundData.preimageHash}
+                claimAddress={props.refundData.claimAddress}
+                signerAddress={props.refundData.refundAddress}
+                timeoutBlockHeight={Number(props.refundData.timelock)}
+            />
+            <hr />
+            <BlockExplorer
+                typeLabel={"lockup_tx"}
+                asset={props.asset}
+                txId={props.lockupTxHash}
+            />
+        </>
+    );
+};
 
 const RefundEvm = () => {
     const params = useParams<{ asset: string; txHash: string }>();
+
     const { t } = useGlobalContext();
     const { signer, getEtherSwap } = useWeb3Signer();
 
-    const [refundData] = createResource<LogRefundData>(async () => {
+    const [refundData] = createResource<RefundData>(async () => {
         if (signer() === undefined) {
             return undefined;
         }
 
-        return await getLogsFromReceipt(
-            signer(),
-            getEtherSwap(),
-            params.txHash,
-        );
+        const [logData, currentHeight] = await Promise.all([
+            getLogsFromReceipt(signer(), getEtherSwap(), params.txHash),
+            signer().provider.getBlockNumber(),
+        ]);
+
+        return {
+            ...logData,
+            currentHeight: BigInt(currentHeight),
+        };
     });
 
     const [refundTxHash, setRefundTxHash] = createSignal<string | undefined>(
@@ -37,27 +107,27 @@ const RefundEvm = () => {
                 fallback={<h2>{t("no_wallet")}</h2>}>
                 <Switch>
                     <Match when={refundData.state === "ready"}>
-                        <h2>{t("refund")}</h2>
+                        <h2 style={{ "margin-bottom": "6px" }}>
+                            {t("refund")} {cropString(params.txHash, 15, 5)}
+                        </h2>
                         <Show
-                            when={refundTxHash() !== undefined}
+                            when={refundTxHash() === undefined}
                             fallback={
-                                <RefundButton
-                                    setRefundTxHash={setRefundTxHash}
-                                    amount={Number(refundData().amount)}
-                                    preimageHash={refundData().preimageHash}
-                                    claimAddress={refundData().claimAddress}
-                                    signerAddress={refundData().refundAddress}
-                                    timeoutBlockHeight={Number(
-                                        refundData().timelock,
-                                    )}
-                                />
+                                <>
+                                    <p>{t("refunded")}</p>
+                                    <hr />
+                                    <BlockExplorer
+                                        typeLabel={"refund_tx"}
+                                        asset={params.asset}
+                                        txId={refundTxHash()}
+                                    />
+                                </>
                             }>
-                            <p>{t("refunded")}</p>
-                            <hr />
-                            <BlockExplorer
-                                typeLabel={"refund_tx"}
+                            <RefundState
                                 asset={params.asset}
-                                txId={refundTxHash()}
+                                lockupTxHash={params.txHash}
+                                refundData={refundData()}
+                                setRefundTxHash={setRefundTxHash}
                             />
                         </Show>
                     </Match>