Add onboarding hint + fix Metamask build issues

landing/index.html

@@ -61,7 +61,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;">96bb5c5985cd729b3804434b486956b514d48869341b762cedab7fedf0cb8886</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;">09fafee7dac469e2fd4ba75057d69c4ca166089a410015342d39d15a282323c6</code>.
 </p>
                 <a href="https://github.com/kewbish/cobweb" class="btn glassy-cw-btn mt-1" role="button">view source</a>
 </div>

landing/removed/index.html

@@ -27,7 +27,7 @@ <h1 class="display">Sorry to see you go.</h1>
         </p>
         <a
           class="btn glassy-cw-btn p-1 mb-2 mx-auto d-inline-block"
-          href="https://github.com/kewbish/cobweb/releases/tag/v0.0.1"
+          href="https://chrome.google.com/webstore/detail/cobweb/agdomcadfhkpkcjceenogkiglbhgpclg"
         >
           Reinstall
         </a>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Cobweb",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A Web3-based Web Monetization tool enabling one-click content monetization for creative teens.",
   "license": "MIT",
   "repository": {

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Cobweb",
   "description": "A Web3-based Web Monetization tool enabling one-click content monetization for creative teens.",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/pages/Background/index.ts

@@ -52,6 +52,9 @@ chrome.runtime.onInstalled.addListener((details) => {
 
 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 });
 
 metamaskProvider?.on("error", (error) => {
@@ -83,8 +86,6 @@ metamaskProvider.on("accountsChanged", (accounts) => {
   }
 });
 
-const mmProvider = new ethers.providers.Web3Provider(metamaskProvider as any);
-
 storage.local.set({ toasts: [] });
 
 let { address: addressTry } = (await storage.local.get("address")) as {

src/pages/Popup/Popup.tsx

@@ -1,4 +1,4 @@
-import { ethers, BigNumber } from "ethers";
+import { ethers, BigNumber, constants } from "ethers";
 import React, { useEffect, useState } from "react";
 import { Link, Navigate, useSearchParams } from "react-router-dom";
 import {
@@ -39,6 +39,10 @@ const Popup = () => {
     "extend-chrome/storage__local--mmNotFound",
     null
   );
+  const [balanceRes, , ,]: [any, any, any, any] = useChromeStorageLocal(
+    "extend-chrome/storage__local--balance",
+    null
+  );
 
   useEffect(() => {
     if (address) {
@@ -130,6 +134,22 @@ const Popup = () => {
     };
   }, [currentStream]);
 
+  useEffect(() => {
+    const noETHx = document.getElementById("no-ethx");
+    let popover: bootstrap.Popover | null = null;
+    if (
+      searchParams.get("onboarding") &&
+      balanceRes &&
+      BigNumber.from(balanceRes).eq(constants.Zero)
+    ) {
+      popover = new bootstrap.Popover(noETHx);
+      popover.show();
+    }
+    return () => {
+      popover?.dispose();
+    };
+  }, [balanceRes]);
+
   const editStream = async ({
     oldKey,
     newKey,
@@ -235,7 +255,7 @@ const Popup = () => {
                   id="streamed-until"
                   data-bs-toggle="popover"
                   data-bs-trigger="hover focus"
-                  data-bs-placement="bottom"
+                  data-bs-placement="top"
                   title={
                     ethers.utils.formatEther(streamedUntilNow(currentStream)) +
                     " " +
@@ -295,7 +315,17 @@ const Popup = () => {
                 <div id="collapse" className="collapse" data-bs-toggle="false">
                   <div className="d-flex justify-content-evenly gap-2 mt-2">
                     <Link to="balance">
-                      <button type="button" className="btn p-1 glassy-cw-btn">
+                      <button
+                        className="btn p-1 glassy-cw-btn"
+                        data-bs-toggle="popover"
+                        title="You don't have any ETHx. Click here to upgrade more!"
+                        id="no-ethx"
+                        data-bs-template={
+                          '<div class="popover popover-squarer" role="tooltip"><div class="popover-arrow popover-arrow-override"></div><p class="popover-header text-small"></p><div class="popover-body"></div></div>'
+                        }
+                        data-bs-placement="bottom"
+                        data-bs-container="body"
+                      >
                         Manage balances
                       </button>
                     </Link>
@@ -320,7 +350,17 @@ const Popup = () => {
                 <hr className="my-1 mb-2" />
                 <div className="d-flex justify-content-evenly gap-2">
                   <Link to="balance">
-                    <button type="button" className="btn p-1 glassy-cw-btn">
+                    <button
+                      className="btn p-1 glassy-cw-btn"
+                      data-bs-toggle="popover"
+                      title="You don't have any ETHx. Click here to upgrade more!"
+                      id="no-ethx"
+                      data-bs-template={
+                        '<div class="popover popover-squarer" role="tooltip"><div class="popover-arrow"></div><p class="popover-header text-small"></p><div class="popover-body"></div></div>'
+                      }
+                      data-bs-container="body"
+                      data-bs-placement="bottom"
+                    >
                       Manage balances
                     </button>
                   </Link>

src/pages/Popup/components/DropdownModal.tsx

@@ -20,6 +20,7 @@ const DropdownModal = ({
     aria-labelledby="cobwebModalLabel"
     aria-hidden="true"
     data-bs-backdrop={force ? "static" : undefined}
+    style={{ zIndex: 9999999 }}
   >
     <div className="modal-dialog modal-dialog-centered">
       <div

src/pages/Popup/lib/getStreams.ts

@@ -1,10 +1,13 @@
 import { BigNumber } from "ethers";
 import { gql, ApolloClient, InMemoryCache } from "@apollo/client";
 import { GraphQlStream } from "../../shared/types";
+import { isDev } from "../../Background/lib/isDev";
 
 const getStreamsDeepOut = async (address: string) => {
   const client = new ApolloClient({
-    uri: "https://api.thegraph.com/subgraphs/name/superfluid-finance/protocol-v1-goerli",
+    uri: 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(),
   });
   const QUERY = gql`