Add testchain mode

kewbish · May 6, 2023 · c3a3d45 · c3a3d45
1 parent a8ea85c
commit c3a3d45
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 8 deletions.
diff --git a/build.crx b/build.crx
diff --git a/landing/index.html b/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;">a0f59c908c6d6f65a22348d2abfe51c01ee530072da6a8ded98e84fd1ef3dda5</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;">4fd1072cb48c5612abc5b8f980953521733db40538f361d2c56648c502706d18</code>.
 </p>
                 <a href="https://github.com/kewbish/cobweb" class="btn glassy-cw-btn mt-1" role="button">view source</a>
 </div>

diff --git a/src/pages/Background/index.ts b/src/pages/Background/index.ts
@@ -24,6 +24,7 @@ import {
   NEW_TOAST,
   FETCH_SIGNATURE,
   CHECK_METAMASK,
+  RESET_TESTCHAINMODE,
 } from "../shared/events";
 import TOKEN_MAP, { PROD_TOKEN_MAP } from "../shared/tokens";
 import { PayRates } from "../shared/types";
@@ -120,7 +121,7 @@ if (!addressTry || addressTry === "NO_ADDRESS") {
 let infuraProvider: InfuraProvider | null = null;
 try {
   infuraProvider = new ethers.providers.InfuraProvider(
-    isDev() ? "goerli" : "homestead",
+    (await isDev()) ? "goerli" : "homestead",
     {
       projectId: INFURA_PROJECT_ID,
       projectSecret: INFURA_PROJECT_SECRET,
@@ -130,7 +131,7 @@ try {
 let sf: Framework | null = null;
 try {
   sf = await Framework.create({
-    chainId: isDev() ? 5 : 1,
+    chainId: (await isDev()) ? 5 : 1,
     provider: infuraProvider,
   });
 } catch (e) {
@@ -141,7 +142,7 @@ let sfToken: SuperToken | null = null;
 try {
   if (sf) {
     sfToken = await sf.loadSuperToken(
-      isDev() ? TOKEN_MAP.ETH.xAddress : PROD_TOKEN_MAP.ETH.xAddress
+      (await isDev()) ? TOKEN_MAP.ETH.xAddress : PROD_TOKEN_MAP.ETH.xAddress
     );
   }
 } catch (e) {
@@ -391,6 +392,20 @@ const handleMessaging = async (
       }
       sendResponse();
       return;
+    case RESET_TESTCHAINMODE:
+      if (await isDev()) {
+        infuraProvider = new ethers.providers.InfuraProvider("goerli", {
+          projectId: INFURA_PROJECT_ID,
+          projectSecret: INFURA_PROJECT_SECRET,
+        });
+        sf = await Framework.create({
+          chainId: 5,
+          provider: infuraProvider,
+        });
+        sfToken = await sf.loadSuperToken(TOKEN_MAP.ETH.xAddress);
+      }
+      sendResponse();
+      return;
     default:
       sendResponse();
       return;

diff --git a/src/pages/Background/lib/isDev.ts b/src/pages/Background/lib/isDev.ts
@@ -1,4 +1,8 @@
 import "process";
+import { storage } from "@extend-chrome/storage";
 
-export const isDev = () =>
-  !process.env.NODE_ENV || process.env.NODE_ENV === "development";
+export const isDev = async () =>
+  !process.env.NODE_ENV ||
+  process.env.NODE_ENV === "development" ||
+  ((await storage.local.get("testChainMode")) as { testChainMode: boolean })
+    .testChainMode === true;
diff --git a/src/pages/Popup/CobwebInfo.tsx b/src/pages/Popup/CobwebInfo.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
 import CobwebPage from "./components/CobwebPage";
 import ToastHandler from "./components/ToastHandler";
-import { FETCH_SIGNATURE } from "../shared/events";
+import { FETCH_SIGNATURE, RESET_TESTCHAINMODE } from "../shared/events";
 import { useChromeStorageLocal } from "use-chrome-storage";
 import { toast } from "../shared/toast";
+import "./info-accordion.css";
 
 const CobwebInfo = () => {
   const [address, , ,]: [string, any, any, any] = useChromeStorageLocal(
@@ -18,6 +19,8 @@ const CobwebInfo = () => {
   const [requested, setRequested, ,]: [any, any, any, any] =
     useChromeStorageLocal("extend-chrome/storage__local--requested", null);
   const [reactRequested, setReactRequested] = useState<boolean>(false);
+  const [testChainMode, setTestChainMode, ,]: [any, any, any, any] =
+    useChromeStorageLocal("extend-chrome/storage__local--testChainMode", false);
 
   useEffect(() => {
     const getResponse = async () => {
@@ -30,6 +33,18 @@ const CobwebInfo = () => {
     getResponse();
   }, [signatureLocal]);
 
+  useEffect(() => {
+    const getResponse = async () => {
+      if (testChainMode) {
+        chrome.runtime.sendMessage({
+          message: RESET_TESTCHAINMODE,
+        });
+      }
+    };
+
+    getResponse();
+  }, [testChainMode]);
+
   const requestVerification = async () => {
     if (!address) {
       toast("Couldn't fetch Metamask account.");
@@ -95,6 +110,66 @@ const CobwebInfo = () => {
               Copy this to the contents of any content you want to monetize.
             </label>
           </div>
+          <div className="mt-1">
+            <div className="accordion" id="accordionExample">
+              <div className="accordion-item">
+                <h2 className="accordion-header" id="headingOne">
+                  <button
+                    className="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseOne"
+                    aria-expanded="true"
+                    aria-controls="collapseOne"
+                  >
+                    Testchain Mode
+                  </button>
+                </h2>
+                <div
+                  id="collapseOne"
+                  className={"accordion-collapse collapse"}
+                  aria-labelledby="headingOne"
+                  data-bs-parent="#accordionExample"
+                >
+                  <div className="accordion-body">
+                    <div
+                      className="form-check form-switch"
+                      style={{ height: "7.4rem" }}
+                    >
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        role="switch"
+                        id="flexSwitchCheckDefault"
+                        checked={testChainMode}
+                        onChange={(e) => setTestChainMode(e.target.value)}
+                      />
+                      <label
+                        className="form-check-label"
+                        htmlFor="flexSwitchCheckDefault"
+                        style={{
+                          textAlign: "left",
+                          float: "left",
+                          display: "inline-block",
+                        }}
+                      >
+                        Enable{" "}
+                        <a href="https://en.wikipedia.org/wiki/Testnet">
+                          testchain
+                        </a>{" "}
+                        mode. Change your MetaMask chain to the Goerli testnet
+                        and restart the extension on{" "}
+                        <pre style={{ display: "inline" }}>
+                          chrome://extensions
+                        </pre>{" "}
+                        for this to take effect.
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           {requested !== null && (!requested || reactRequested) ? (
             <div className="mt-1">
               <button

diff --git a/src/pages/Popup/info-accordion.css b/src/pages/Popup/info-accordion.css
@@ -0,0 +1,4 @@
+.accordion-button {
+  background-color: transparent;
+  border: 1px solid var(--bs-body-bg);
+}
diff --git a/src/pages/Popup/lib/getStreams.ts b/src/pages/Popup/lib/getStreams.ts
@@ -5,7 +5,7 @@ import { isDev } from "../../Background/lib/isDev";
 
 const getStreamsDeepOut = async (address: string) => {
   const client = new ApolloClient({
-    uri: isDev()
+    uri: (await isDev())
       ? "https://api.thegraph.com/subgraphs/name/superfluid-finance/protocol-v1-goerli"
       : "https://subgraph.satsuma-prod.com/superfluid/eth-mainnet/version/v0.0.1/api",
     cache: new InMemoryCache(),

diff --git a/src/pages/shared/events.ts b/src/pages/shared/events.ts
@@ -10,3 +10,4 @@ export const UPGRADE_TOKEN = "tokens/upgrade";
 export const NEW_TOAST = "toast/new";
 export const FETCH_SIGNATURE = "settings/signature";
 export const CHECK_METAMASK = "metamask/check";
+export const RESET_TESTCHAINMODE = "settings/testchain";