feat: add tx signing instructions modal

src/html/erc20-form.html

@@ -194,6 +194,7 @@ <h2 class="modal-section__label">Enter a token address</h2>
 
       disableForm();
 
+      window.dom.show("ethTxModal")
       try {
         await window.nep141Xerc20.naturalErc20.sendToNear({
           amount: amount.value,
@@ -205,6 +206,7 @@ <h2 class="modal-section__label">Enter a token address</h2>
         alert("Something went wrong!\n" + e.message);
         throw e;
       } finally {
+        window.dom.hide("ethTxModal")
         // re-enable the form, whether the call succeeded or failed
         enableForm();
       }

src/html/erc20n-form.html

@@ -179,6 +179,10 @@ <h2 class="modal-section__label">Enter a token address</h2>
 
       disableForm();
 
+      window.dom.show("nearTxModal")
+      // give the user some time to read the redirect information
+      await new Promise(r => setTimeout(r, 3000));
+
       try {
         await window.nep141Xerc20.bridgedNep141.sendToEthereum({
           amount: amount.value,
@@ -187,6 +191,8 @@ <h2 class="modal-section__label">Enter a token address</h2>
           recipient: window.ethUserAddress,
         });
       } catch (e) {
+        // only hide if error, show until redirect happens
+        window.dom.hide("nearTxModal")
         alert(
           "Something went wrong! " +
             "Maybe you need to sign out and back in? " +

src/html/eth-tx-modal.html

@@ -0,0 +1,11 @@
+<div data-behavior="ethTxModal" class="modal" style="display: none">
+  <div class="modal__container">
+    <div class="modal-image__container">
+      <img src="img/eth-wallet-sig.svg" alt="" class="modal__image" />
+    </div>
+    <h1 class="modal__heading">Confirm Ethereum Transaction</h1>
+    <p class="modal__message">
+      Please sign and confirm the transaction in your Ethereum wallet to proceed.
+    </p>
+  </div>
+</div>

src/html/near-tx-modal.html

@@ -0,0 +1,14 @@
+<div data-behavior="nearTxModal" class="modal" style="display: none">
+  <div class="modal__container">
+    <div class="modal-image__container">
+      <img src="img/near.svg" alt="" class="modal__image" />
+    </div>
+    <h1 class="modal__heading">Confirm NEAR Transaction</h1>
+    <p class="modal__message">
+      You are being redirected to NEAR Wallet to confirm the transaction...
+    </p>
+    <p class="modal__message">
+      Please do not go back or close the window until the process is complete.
+    </p>
+  </div>
+</div>

src/html/transfers.html

@@ -42,6 +42,7 @@ <h1 class="modal__heading">Remove transfer from list?</h1>
       </div>
     </div>
   </div>
+</div>
   <style>
     .transfers {
       padding: 5rem 0;
@@ -447,13 +448,30 @@ <h1 class="modal__heading">Remove transfer from list?</h1>
         if (!callToAction) return;
 
         const transferId = callToAction.closest("[data-behavior=transfer]").id;
+        const [transfer] = await window.transfers.get({
+          filter: (t) => t.id === transferId
+        });
+        if (
+          (transfer.type.includes('sendToNear') && transfer.completedStep !== 'sync-natural-erc20-to-nep141') || // approve or lock (including retry)
+          (transfer.type.includes('sendToEthereum') && transfer.completedStep === 'sync-bridged-nep141-to-erc20') // unlock (including retry)
+          // TODO eNEAR case
+        ) {
+          window.dom.show("ethTxModal")
+        } else {
+          window.dom.show("nearTxModal")
+          // give the user some time to read the redirect information
+          await new Promise(r => setTimeout(r, 3000));
+        }
         callToAction.disabled = true
         try {
           await window.transfers.act(transferId)
         } catch(error) {
           console.error(error)
+          // only hide if error, show until redirect happens
+          window.dom.hide("nearTxModal")
         } finally {
           callToAction.disabled = false
+          window.dom.hide("ethTxModal")
         }
       });
       document.querySelector("body").addEventListener("click", (event) => {
@@ -628,4 +646,3 @@ <h3 class="transfer__amount">${window.utils.formatLargeNum(
     window.renderers.push(updateTransfers);
     window.renderers.push(hideShowTransfers);
   </script>
-</div>

src/index.html

@@ -130,6 +130,8 @@
       <include src="erc20n-form.html"></include>
       <include src="bridge-erc20-form.html"></include>
       <include src="restore-transfer.html"></include>
+      <include src="eth-tx-modal.html"></include>
+      <include src="near-tx-modal.html"></include>
     </div>
 
     <script src="./js/index.js"></script>