fix: nicer handling of pending ethereum transactions

BoltzExchange · Nov 15, 2023 · ce3f87d · ce3f87d
1 parent 31c3944
commit ce3f87d
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 40 deletions.
diff --git a/src/Create.jsx b/src/Create.jsx
@@ -78,7 +78,6 @@ import {
     assetSend,
     assetSelect,
     assetSelected,
-    metamask,
 } from "./signals";
 
 const Create = () => {
@@ -128,7 +127,9 @@ const Create = () => {
         if (sendAmountValid()) {
             if (
                 (reverse() && addressValid()) ||
-                (!reverse() && invoiceValid())
+                (!reverse() &&
+                    invoiceValid() &&
+                    (asset() !== RBTC || addressValid()))
             ) {
                 setValid(true);
                 return;
@@ -211,7 +212,7 @@ const Create = () => {
                 preimageHash: preimageHash,
             };
 
-            if (asset() == RBTC) {
+            if (asset() === RBTC) {
                 params.claimAddress = onchainAddress();
             }
         } else {
@@ -407,6 +408,8 @@ const Create = () => {
         setSendAmount(amount);
         setReceiveAmount(calculateReceiveAmount(amount));
         validateAmount();
+
+        resetInvoice();
         sendAmountRef.focus();
     };
 

diff --git a/src/components/ConnectMetamask.jsx b/src/components/ConnectMetamask.jsx
@@ -1,4 +1,5 @@
 import { createEffect, createSignal, Show } from "solid-js";
+import t from "../i18n";
 import { useWeb3Signer } from "../context/Web3.jsx";
 import { setAddressValid, setOnchainAddress } from "../signals.js";
 
@@ -14,21 +15,31 @@ const ConnectMetamask = ({ showAddress }) => {
 
     return (
         <>
-            <button
-                id="metamask"
-                class="btn btn-light"
-                onClick={async () =>
-                    setAddress(await (await getSigner()).getAddress())
-                }>
-                Connect Metamask
-            </button>
-            <hr />
-            <Show when={showAddress !== undefined ? showAddress : true}>
+            <Show when={address() === undefined}>
+                <button
+                    id="metamask"
+                    class="btn"
+                    onClick={async () =>
+                        setAddress(await (await getSigner()).getAddress())
+                    }>
+                    {t("connect_metamask")}
+                </button>
+            </Show>
+            <Show when={address() !== undefined}>
+                <button
+                    id="metamask"
+                    class="btn btn-light"
+                    onClick={() => setAddress(undefined)}>
+                    {t("disconnect_metamask")}
+                </button>
+            </Show>
+
+            <br />
+            <Show when={showAddress}>
                 <input
                     disabled
                     type="text"
-                    value={address() || "Connect Metamask to set address"}
-                    placeholder={"Address"}
+                    value={address() || t("connect_to_address")}
                 />
             </Show>
         </>

diff --git a/src/components/EthereumTransaction.jsx b/src/components/EthereumTransaction.jsx
@@ -0,0 +1,33 @@
+import { createSignal, Show } from "solid-js";
+import LoadingSpinner from "./LoadingSpinner.jsx";
+
+const EthereumTransaction = ({
+    onClick,
+    promptText,
+    buttonText,
+    waitingText,
+}) => {
+    const [txSent, setTxSent] = createSignal(false);
+
+    return (
+        <>
+            <Show when={!txSent()}>
+                <p>{promptText}</p>
+                <button
+                    class="btn"
+                    onClick={async () => {
+                        await onClick();
+                        setTxSent(true);
+                    }}>
+                    {buttonText}
+                </button>
+            </Show>
+            <Show when={txSent()}>
+                <p>{waitingText}</p>
+                <LoadingSpinner />
+            </Show>
+        </>
+    );
+};
+
+export default EthereumTransaction;
diff --git a/src/context/Web3.jsx b/src/context/Web3.jsx
@@ -1,9 +1,4 @@
-import {
-    createContext,
-    createEffect,
-    createSignal,
-    useContext,
-} from "solid-js";
+import { createContext, createSignal, useContext } from "solid-js";
 import { BrowserProvider, Contract } from "ethers";
 import EtherSwap from "boltz-core/out/EtherSwap.sol/EtherSwap.json";
 import { RBTC } from "../consts.js";

diff --git a/src/helper.js b/src/helper.js
@@ -333,7 +333,7 @@ export const claim = async (swap) => {
     if (swap.asset === RBTC) {
         return;
     }
-    
+
     await setup();
     const asset_name = swap.asset;
 

diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
@@ -31,6 +31,7 @@ const dict = {
         fee: "Boltz Fee",
         denomination: "Denomination",
         send: "Send",
+        claim: "Claim",
         receive: "Receive",
         min: "Min",
         max: "Max",
@@ -61,13 +62,15 @@ const dict = {
         send_to_desc:
             "Please send exactly {{ amount }} {{ denomination }} before timeout block height {{ blockheight }}",
         pay_address: "Address",
+        connect_metamask: "Connect MetaMask",
+        disconnect_metamask: "Disconnect MetaMask",
+        connect_to_address: "Connect to MetaMask to set address",
         lockup_failed: "Lockup Failed!",
         lockup_failed_subline:
             "Your lockup transaction failed, wait for the timeout to refund.",
         failure_reason: "Failure reason",
         invoice_payment_failure: "Could not pay your lightning invoice",
         onchain_address: "Enter {{ asset }} address",
-        onchain_address_create: "Create {{ asset }} address",
         download_refund_file: "Download refund file",
         invalid_refund_file: "Invalid refund file",
         invalid_backup_file: "Invalid backup file",
@@ -93,7 +96,7 @@ const dict = {
         delete_localstorage_single_swap:
             "Are you sure you want to clear Swap {{ id }} from your localstorage?\nYour swap information and you refund / claim privatekeys will be lost.",
         tx_in_mempool: "Transaction is in mempool",
-        tx_in_mempool_subline: "waiting for confirmation to complete the swap",
+        tx_in_mempool_subline: "Waiting for confirmation to complete the swap",
         expired: "Swap expired!",
         invoice_pending: "Transaction received, paying invoice.",
         invoice_expired: "Invoice expired, try again!",
@@ -102,7 +105,7 @@ const dict = {
         pay_invoice_webln: "pay invoice via WebLN",
         select_asset: "Select {{ direction }} Asset",
         tx_confirmed: "Transaction confirmed",
-        tx_ready_to_claim: "claiming transaction now...",
+        tx_ready_to_claim: "Claiming transaction now...",
         transaction_refunded: "Boltz has refunded the Transaction",
         refunded: "Swap has been refunded",
         broadcasted: "Refund broadcasted",
@@ -135,6 +138,10 @@ const dict = {
         not_found: "404 - Page Not Found",
         not_found_subline: "The page you are looking for does not exist.",
         back_to_home: "Back to Home",
+        claim_prompt:
+            'Press "Claim" in order to open your connected wallet and confirm the displayed transaction.',
+        send_prompt:
+            'Press "Send" in order to open your connected wallet and confirm the displayed transaction.',
     },
     de: {
         language: "Deutsch",
@@ -206,7 +213,6 @@ const dict = {
         invoice_payment_failure:
             "Deine Lightning-Rechung konnte nicht bezahlt werden",
         onchain_address: "{{ asset }}-Adresse eingeben",
-        onchain_address_create: "Erstelle {{ asset }}-Adresse",
         download_refund_file: "Rückerstattungsdatei herunterladen",
         invalid_refund_file: "Ungültige Rückerstattungsdatei",
         invalid_backup_file: "Ungültige Backupdatei",
@@ -350,7 +356,6 @@ const dict = {
         failure_reason: "Motivo del fallo",
         invoice_payment_failure: "No se pudo pagar su factura Lightning",
         onchain_address: "Ingrese la dirección de {{ asset }}",
-        onchain_address_create: "Create {{ asset }} address",
         download_refund_file: "Descargar archivo de reembolso",
         invalid_refund_file: "Archivo de reembolso no válido",
         invalid_backup_file: "Archivo de backup no válido",

diff --git a/src/signals.js b/src/signals.js
@@ -105,11 +105,9 @@ export const [notification, setNotification] = createSignal("");
 export const [notificationType, setNotificationType] = createSignal("");
 
 export const [webln, setWebln] = createSignal(false);
-export const [metamask, setMetamask] = createSignal(true);
 
 // effects
 createEffect(() => setReverse(assetReceive() !== LN));
-createEffect(() => setMetamask(asset() === RBTC));
 
 [assetSend, assetReceive].forEach((signal) => {
     createEffect(() => {

diff --git a/src/status/InvoiceSet.jsx b/src/status/InvoiceSet.jsx
@@ -7,14 +7,14 @@ import { formatAmount } from "../utils/denomination";
 import DownloadRefund from "../components/DownloadRefund";
 import { prefix0x, satoshiToWei } from "../utils/ethereum";
 import { invoiceQr, swap, denomination, asset } from "../signals";
+import EthereumTransaction from "../components/EthereumTransaction.jsx";
 
 const InvoiceSet = () => {
     if (asset() === RBTC) {
         const { getEtherSwap } = useWeb3Signer();
 
         return (
-            <button
-                class="btn"
+            <EthereumTransaction
                 onClick={async () => {
                     const contract = await getEtherSwap();
 
@@ -26,9 +26,11 @@ const InvoiceSet = () => {
                             value: satoshiToWei(swap().expectedAmount),
                         },
                     );
-                }}>
-                Send
-            </button>
+                }}
+                promptText={t("send_prompt")}
+                buttonText={t("send")}
+                waitingText={t("tx_in_mempool_subline")}
+            />
         );
     }
 

diff --git a/src/status/TransactionConfirmed.jsx b/src/status/TransactionConfirmed.jsx
@@ -4,14 +4,14 @@ import { asset, swap } from "../signals";
 import { useWeb3Signer } from "../context/Web3";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { prefix0x, satoshiToWei } from "../utils/ethereum";
+import EthereumTransaction from "../components/EthereumTransaction.jsx";
 
 const TransactionConfirmed = () => {
     if (asset() === RBTC) {
         const { getEtherSwap } = useWeb3Signer();
 
         return (
-            <button
-                class="btn"
+            <EthereumTransaction
                 onClick={async () => {
                     const contract = await getEtherSwap();
 
@@ -21,12 +21,14 @@ const TransactionConfirmed = () => {
                         swap().refundAddress,
                         swap().timeoutBlockHeight,
                     );
-                }}>
-                Claim
-            </button>
+                }}
+                buttonText={t("claim")}
+                promptText={t("claim_prompt")}
+                waitingText={t("tx_ready_to_claim")}
+            />
         );
     }
-    
+
     return (
         <div>
             <h2>{t("tx_confirmed")}</h2>