Fix Metamask detection

landing/index.html

@@ -73,7 +73,7 @@ <h2 class="display mx-auto text-center mb-3">get started</h2>
                 <a href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg" class="btn glassy-cw-btn mt-1" role="button">download</a>
 </div>
 <div class="col">
-    <p>Cobweb is MIT-licensed and fully open source - the source is <a href="https://github.com/kewbish/cobweb">available on GitHub</a> should you wish to build from source. The checksum of the current version is <code style="word-break:break-all;">ff78065ceff9a9334d78b5ad106df5950e9a8141ed88dd112ec1cec28993b8f9</code>.
+    <p>Cobweb is MIT-licensed and fully open source - the source is <a href="https://github.com/kewbish/cobweb">available on GitHub</a> should you wish to build from source. The checksum of the current version is <code style="word-break:break-all;">3f794b4c56c4fbd2a3d635ba3e7cbbebe1de6428085022cb930e66f9984f9a06</code>.
 </p>
                 <a href="https://github.com/kewbish/cobweb" class="btn glassy-cw-btn mt-1" role="button">view source</a>
 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Cobweb",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A Web3-based tool enabling creative teens to learn and earn on the blockchain.",
   "license": "MIT",
   "repository": {

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Cobweb",
   "description": "A Web3-based tool enabling creative teens to learn and earn on the blockchain.",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/pages/Background/index.ts

@@ -37,7 +37,6 @@ import fetchAndUpdateBalance from "./lib/fetchAndUpdateBalance";
 import setNewAddress from "./lib/updateAddress";
 import { downgradeTokens, upgradeTokens } from "./lib/wrapTokens";
 import setNewToast, { deleteToast } from "./lib/setNewToast";
-import errorToast, { toast } from "../shared/toast";
 import generateSignature from "./lib/generateSignature";
 import verifySignature from "../shared/verifySignature";
 import cleanUpStreams from "./lib/cleanUpStreams";
@@ -50,49 +49,59 @@ chrome.runtime.onInstalled.addListener((details) => {
   }
 });
 
+storage.local.set({ mmNotFound: false });
+
 let metamaskProvider: MetaMaskInpageProvider | null = null;
 metamaskProvider = createMetaMaskProvider();
-const mmProvider = new ethers.providers.Web3Provider(metamaskProvider as any);
-await mmProvider.send("eth_requestAccounts", []);
-
-storage.local.set({ mmNotFound: false });
+let mmProvider = new ethers.providers.Web3Provider(metamaskProvider as any);
 
-metamaskProvider?.on("error", (error) => {
-  storage.local.set({ mmNotFound: true });
-});
+const resetHandlers = () => {
+  metamaskProvider?.on("error", (error) => {
+    storage.local.set({ mmNotFound: true });
+  });
 
-metamaskProvider.on("disconnect", () => {
-  storage.local.set({ mmNotFound: true });
-});
+  metamaskProvider?.on("disconnect", () => {
+    storage.local.set({ mmNotFound: true });
+  });
 
-metamaskProvider.on("connect", async () => {
-  const accounts = await mmProvider.listAccounts();
-  try {
-    storage.local.set({
-      mmNotFound: accounts.length === 0,
-    });
-    if (!infuraProvider) {
-      return;
+  metamaskProvider?.on("connect", async () => {
+    await mmProvider?.send("eth_requestAccounts", []);
+    const accounts = await mmProvider.listAccounts();
+    try {
+      if (accounts.length === 0) {
+        storage.local.set({
+          mmNotFound: true,
+        });
+      } else {
+        storage.local.set({
+          mmNotFound: false,
+        });
+        if (!infuraProvider) {
+          return;
+        }
+        setNewAddress({ address: accounts[0], provider: infuraProvider });
+      }
+    } catch {
+      storage.local.set({ mmNotFound: true });
     }
-    setNewAddress({ address: accounts[0], provider: infuraProvider });
-  } catch {
-    storage.local.set({ mmNotFound: true });
-  }
-});
+  });
 
-metamaskProvider.on("accountsChanged", (accounts) => {
-  if ((accounts as Array<String>).length === 0) {
-    storage.local.set({ mmNotFound: true });
-  } else {
-    if (!infuraProvider) {
-      return;
+  metamaskProvider?.on("accountsChanged", (accounts) => {
+    if ((accounts as Array<String>).length === 0) {
+      storage.local.set({ mmNotFound: true });
+    } else {
+      if (!infuraProvider) {
+        return;
+      }
+      setNewAddress({
+        address: (accounts as Array<string>)[0],
+        provider: infuraProvider,
+      });
     }
-    setNewAddress({
-      address: (accounts as Array<string>)[0],
-      provider: infuraProvider,
-    });
-  }
-});
+  });
+};
+
+resetHandlers();
 
 storage.local.set({ toasts: [] });
 
@@ -117,18 +126,14 @@ try {
       projectSecret: INFURA_PROJECT_SECRET,
     }
   );
-} catch (e) {
-  toast("Error - failed to initialize provider");
-  throw new Error("Error - failed to initialize provider");
-}
+} catch (e) {}
 let sf: Framework | null = null;
 try {
   sf = await Framework.create({
     chainId: isDev() ? 5 : 1,
     provider: infuraProvider,
   });
 } catch (e) {
-  errorToast(e as Error);
   throw e;
 }
 
@@ -140,7 +145,6 @@ try {
     );
   }
 } catch (e) {
-  errorToast(e as Error);
   throw e;
 }
 
@@ -153,7 +157,14 @@ const montagFound = async ({
   sender: chrome.runtime.MessageSender;
   sendResponse?: Function;
 }) => {
-  if (!sf || !sfToken || !infuraProvider || !sender.tab) {
+  if (
+    !sf ||
+    !sfToken ||
+    !infuraProvider ||
+    !sender.tab ||
+    (metamaskProvider?.chainId === null &&
+      metamaskProvider?.selectedAddress == null)
+  ) {
     return;
   }
   let address = verifySignature(request.options.address);
@@ -184,7 +195,12 @@ const montagFound = async ({
 };
 
 const deleteStream = async ({ request }: { request: any }) => {
-  if (!sf || !sfToken) {
+  if (
+    !sf ||
+    !sfToken ||
+    (metamaskProvider?.chainId === null &&
+      metamaskProvider?.selectedAddress == null)
+  ) {
     return;
   }
   if (request.options.tabId) {
@@ -213,7 +229,12 @@ const updateSetting = async ({ request }: { request: any }) => {
 };
 
 const editCurrentStream = async ({ request }: { request: any }) => {
-  if (!sf || !sfToken) {
+  if (
+    !sf ||
+    !sfToken ||
+    (metamaskProvider?.chainId === null &&
+      metamaskProvider?.selectedAddress == null)
+  ) {
     return;
   }
   updateStream({
@@ -228,13 +249,26 @@ const editCurrentStream = async ({ request }: { request: any }) => {
 };
 
 const fetchBalance = async () => {
-  if (!sfToken || !mmProvider || !sf || !infuraProvider) {
+  if (
+    !sfToken ||
+    !mmProvider ||
+    !sf ||
+    !infuraProvider ||
+    (metamaskProvider?.chainId === null &&
+      metamaskProvider?.selectedAddress == null)
+  ) {
     return;
   }
   fetchAndUpdateBalance({ sfToken, mmProvider, sf, infuraProvider });
 };
 
 const downgradeTokenAmount = async ({ request }: { request: any }) => {
+  if (
+    metamaskProvider?.chainId === null &&
+    metamaskProvider?.selectedAddress == null
+  ) {
+    return;
+  }
   const sfSigner = mmProvider.getSigner();
   if (!sf || !sfToken || !sfSigner) {
     return;
@@ -247,6 +281,12 @@ const downgradeTokenAmount = async ({ request }: { request: any }) => {
 };
 
 const upgradeTokenAmount = async ({ request }: { request: any }) => {
+  if (
+    metamaskProvider?.chainId === null &&
+    metamaskProvider?.selectedAddress == null
+  ) {
+    return;
+  }
   const sfSigner = mmProvider.getSigner();
   if (!sf || !sfToken || !sfSigner) {
     return;
@@ -270,6 +310,12 @@ const fetchSignature = async ({
 }: {
   request: any;
 }): Promise<String> => {
+  if (
+    metamaskProvider?.chainId === null &&
+    metamaskProvider?.selectedAddress == null
+  ) {
+    return "";
+  }
   const signature = await generateSignature(mmProvider);
   return signature;
 };
@@ -334,8 +380,15 @@ const handleMessaging = async (
       sendResponse(signature);
       return;
     case CHECK_METAMASK:
-      metamaskProvider = createMetaMaskProvider();
-      storage.local.set({ mmNotFound: false }); // optimistically reset
+      if (metamaskProvider?.selectedAddress === null) {
+        metamaskProvider = createMetaMaskProvider();
+        resetHandlers();
+        storage.local.set({
+          mmNotFound:
+            metamaskProvider.chainId === null &&
+            metamaskProvider.selectedAddress === null,
+        }); // optimistically reset
+      }
       sendResponse();
       return;
     default:
@@ -346,7 +399,7 @@ const handleMessaging = async (
 chrome.runtime.onMessage.addListener(handleMessaging);
 
 chrome.tabs.onRemoved.addListener(async (tabId, _) => {
-  if (sf && sfToken) {
+  if (sf && sfToken && metamaskProvider?.chainId !== null) {
     deleteStreamByTabId({
       tabId,
       sf,
@@ -357,7 +410,7 @@ chrome.tabs.onRemoved.addListener(async (tabId, _) => {
 });
 
 chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, _) => {
-  if (changeInfo.status !== "complete") {
+  if (changeInfo.status !== "complete" || metamaskProvider?.chainId === null) {
     return;
   }
   if (changeInfo.url && sf && sfToken) {
@@ -378,6 +431,11 @@ chrome.runtime.onStartup.addListener(() => {
 chrome.alarms.create("cobwebStreamCleanup" + alarmSuffix, {
   delayInMinutes: 5,
 });
+if (metamaskProvider.chainId === null) {
+  chrome.alarms.create("metamaskRefresh" + alarmSuffix, {
+    delayInMinutes: 1,
+  });
+}
 chrome.alarms.onAlarm.addListener(async (alarm) => {
   try {
     var parsedName = alarm.name.match(/^([\S\s]*?)(\d+)$/);
@@ -393,12 +451,18 @@ chrome.alarms.onAlarm.addListener(async (alarm) => {
     if (!sf || !sfToken) {
       return;
     }
-    if (name === "cobwebStreamCleanup") {
+    if (name === "cobwebStreamCleanup" && metamaskProvider?.chainId !== null) {
       cleanUpStreams({
         sfToken,
         sf,
         mmSigner: mmProvider.getSigner(),
       });
+    } else if (
+      name === "metamaskRefresh" &&
+      metamaskProvider?.chainId === null
+    ) {
+      metamaskProvider = createMetaMaskProvider();
+      mmProvider = new ethers.providers.Web3Provider(metamaskProvider as any);
     }
   } catch {}
 });

src/pages/Background/lib/createStream.ts

@@ -6,7 +6,6 @@ import { Stream } from "../../shared/types";
 import { storage } from "@extend-chrome/storage";
 import { Framework, SuperToken } from "@superfluid-finance/sdk-core";
 import { InfuraProvider } from "@ethersproject/providers";
-import errorToast, { toast } from "../../shared/toast";
 import {
   pendingMonetization,
   startMonetization,
@@ -135,10 +134,6 @@ const createStream = async ({
       func: stopMonetization,
       world: "MAIN",
     });
-    errorToast(e as Error);
-    toast(
-      "Check that you've approved enough spending tokens in your account page."
-    );
   }
 };
 
@@ -180,9 +175,7 @@ export const updateStream = async ({
       userData: `${to} ${new Date()}`,
     });
     updateStream = await updateStreamOperation.exec(mmSigner);
-  } catch (e) {
-    errorToast(e as Error);
-  }
+  } catch (e) {}
 
   const { streams } = await storage.local.get("streams");
   storage.local.set({

src/pages/Background/lib/deleteStreamByTabId.ts

@@ -2,7 +2,6 @@ import { PayRates, Stream } from "../../shared/types";
 import { storage } from "@extend-chrome/storage";
 import { Framework, SuperToken } from "@superfluid-finance/sdk-core";
 import { Signer } from "ethers";
-import errorToast from "../../shared/toast";
 
 const deleteStreamByTabId = async ({
   tabId,
@@ -32,7 +31,7 @@ const deleteStreamByTabId = async ({
       });
       await deleteStreamOperation.exec(mmSigner);
     } catch (e) {
-      errorToast(e as Error);
+      // errorToast(e as Error);
       return;
     }
   };