refactor: one shared extension-API module, and drive the dApp flows on Firefox (closes #153)

src/popup/views/approval.js

@@ -27,8 +27,7 @@ const { walletDefect } = require("../../shared/walletDefects");
 const { describeSigningFailure } = require("../../shared/approvalVerify");
 const txStatus = require("./txStatus");
 const uniswap = require("../../shared/uniswap");
-const runtime =
-    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
+const { notify, runtimeApi, sendMessage } = require("../../shared/browserApi");
 
 const erc20Iface = new Interface(ERC20_ABI);
 
@@ -439,34 +438,41 @@ function showSignApproval(details) {
     );
 }
 
-function show(id) {
+// Awaited by nobody: the popup entry point calls this and moves on. It
+// therefore has to absorb its own failure, and a background that cannot
+// describe the approval is the same outcome as an approval that is gone.
+async function show(id) {
     approvalId = id;
-    runtime.connect({ name: "approval:" + id });
-    runtime.sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id }, (details) => {
-        if (!details) {
-            window.close();
-            return;
-        }
-        if (details.type === "tx") {
-            showTxApproval(details);
-            return;
-        }
-        if (details.type === "sign") {
-            showSignApproval(details);
-            return;
-        }
-        // Site connection approval
-        showPhishingWarning(
-            "approve-site-phishing-warning",
-            details.isPhishingDomain,
-        );
-        $("approve-hostname").textContent = details.hostname;
-        $("approve-address").innerHTML = approvalAddressHtml(
-            state.activeAddress,
-        );
-        attachCopyHandlers("view-approve-site");
-        $("approve-remember").checked = state.rememberSiteChoice;
-    });
+    runtimeApi().connect({ name: "approval:" + id });
+
+    let details = null;
+    try {
+        details = await sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id });
+    } catch {
+        details = null;
+    }
+
+    if (!details) {
+        window.close();
+        return;
+    }
+    if (details.type === "tx") {
+        showTxApproval(details);
+        return;
+    }
+    if (details.type === "sign") {
+        showSignApproval(details);
+        return;
+    }
+    // Site connection approval
+    showPhishingWarning(
+        "approve-site-phishing-warning",
+        details.isPhishingDomain,
+    );
+    $("approve-hostname").textContent = details.hostname;
+    $("approve-address").innerHTML = approvalAddressHtml(state.activeAddress);
+    attachCopyHandlers("view-approve-site");
+    $("approve-remember").checked = state.rememberSiteChoice;
 }
 
 let approvalId = null;
@@ -548,7 +554,7 @@ function init(ctx) {
 
     $("btn-approve").addEventListener("click", () => {
         const remember = $("approve-remember").checked;
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_APPROVAL_RESPONSE",
             id: approvalId,
             approved: true,
@@ -559,7 +565,7 @@ function init(ctx) {
 
     $("btn-reject").addEventListener("click", () => {
         const remember = $("approve-remember").checked;
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_APPROVAL_RESPONSE",
             id: approvalId,
             approved: false,
@@ -648,29 +654,37 @@ function init(ctx) {
             decryptedSecret = null;
         }
 
-        runtime.sendMessage(payload, (response) => {
-            if (response && response.txHash) {
-                txStatus.showWait(pendingTxDetails, response.txHash);
-                return;
-            }
-            // A retryable failure leaves the approval pending in the
-            // background, so stay on this screen with a live button rather
-            // than sending the user to a dead end.
-            const outcome = describeSigningFailure(
-                response,
-                "The transaction could not be sent.",
-            );
-            if (outcome.retryable) {
-                showError("approve-tx-error", outcome.message);
-                setTxButtonBusy(false);
-            } else {
-                txStatus.showError(pendingTxDetails, null, outcome.message);
-            }
-        });
+        // A send that never reaches the background is reported to the user
+        // the same way a background that refused it is: describeSigningFailure
+        // turns a null response into the generic message below.
+        let response = null;
+        try {
+            response = await sendMessage(payload);
+        } catch {
+            response = null;
+        }
+
+        if (response && response.txHash) {
+            txStatus.showWait(pendingTxDetails, response.txHash);
+            return;
+        }
+        // A retryable failure leaves the approval pending in the
+        // background, so stay on this screen with a live button rather
+        // than sending the user to a dead end.
+        const outcome = describeSigningFailure(
+            response,
+            "The transaction could not be sent.",
+        );
+        if (outcome.retryable) {
+            showError("approve-tx-error", outcome.message);
+            setTxButtonBusy(false);
+        } else {
+            txStatus.showError(pendingTxDetails, null, outcome.message);
+        }
     });
 
     $("btn-reject-tx").addEventListener("click", () => {
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_TX_RESPONSE",
             id: approvalId,
             approved: false,
@@ -764,26 +778,31 @@ function init(ctx) {
             decryptedSecret = null;
         }
 
-        runtime.sendMessage(payload, (response) => {
-            if (response && response.signature) {
-                window.close();
-                return;
-            }
-            // The button comes back only when the approval is still pending in
-            // the background; otherwise it stays disabled and the message says
-            // why, because a control that cannot succeed must not look like it
-            // can.
-            const outcome = describeSigningFailure(
-                response,
-                "The message could not be signed.",
-            );
-            showError("approve-sign-error", outcome.message);
-            if (outcome.retryable) setSignButtonBusy(false);
-        });
+        let response = null;
+        try {
+            response = await sendMessage(payload);
+        } catch {
+            response = null;
+        }
+
+        if (response && response.signature) {
+            window.close();
+            return;
+        }
+        // The button comes back only when the approval is still pending in
+        // the background; otherwise it stays disabled and the message says
+        // why, because a control that cannot succeed must not look like it
+        // can.
+        const outcome = describeSigningFailure(
+            response,
+            "The message could not be signed.",
+        );
+        showError("approve-sign-error", outcome.message);
+        if (outcome.retryable) setSignButtonBusy(false);
     });
 
     $("btn-reject-sign").addEventListener("click", () => {
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_SIGN_RESPONSE",
             id: approvalId,
             approved: false,