Add extension badge when streaming active

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;">4fd1072cb48c5612abc5b8f980953521733db40538f361d2c56648c502706d18</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;">82d7386b81f8447c07766294884626a35b38b38a679238158b75969726fd97b0</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.9",
+  "version": "0.0.10",
   "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 empowering teens to learn and earn on the blockchain.",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/pages/Background/index.ts

@@ -42,6 +42,7 @@ import generateSignature from "./lib/generateSignature";
 import verifySignature from "../shared/verifySignature";
 import cleanUpStreams from "./lib/cleanUpStreams";
 import { isDev } from "./lib/isDev";
+import updateExtBadge from "./lib/updateExtBadge";
 
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
@@ -149,6 +150,8 @@ try {
   throw e;
 }
 
+updateExtBadge();
+
 const montagFound = async ({
   request,
   sender,
@@ -472,6 +475,7 @@ chrome.alarms.onAlarm.addListener(async (alarm) => {
         sf,
         mmSigner: mmProvider.getSigner(),
       });
+      updateExtBadge();
     } else if (
       name === "metamaskRefresh" &&
       metamaskProvider?.chainId === null

src/pages/Background/lib/createStream.ts

@@ -11,6 +11,7 @@ import {
   startMonetization,
   stopMonetization,
 } from "../../shared/monetization";
+import { setBadge } from "./updateExtBadge";
 
 const createStream = async ({
   from,
@@ -192,6 +193,7 @@ export const updateStream = async ({
     func: (to, uuid) => startMonetization,
     world: "MAIN",
   });
+  await setBadge(tabId);
   return updateStream;
 };
 

src/pages/Background/lib/deleteStreamByTabId.ts

@@ -2,6 +2,7 @@ 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 { unsetBadge } from "./updateExtBadge";
 
 const deleteStreamByTabId = async ({
   tabId,
@@ -57,6 +58,8 @@ const deleteStreamByTabId = async ({
   });
 
   cancelStream(stream.recipient);
+
+  await unsetBadge(tabId);
 };
 
 export default deleteStreamByTabId;

src/pages/Background/lib/updateExtBadge.ts

@@ -0,0 +1,37 @@
+import { storage } from "@extend-chrome/storage";
+import { Stream } from "../../shared/types";
+
+const updateExtBadge = async () => {
+  chrome.action.setBadgeBackgroundColor({ color: "#6DB2F2" });
+
+  const { streams }: { streams: Array<Stream> } = await storage.local.get(
+    "streams"
+  );
+
+  if (!streams) {
+    return;
+  }
+
+  for (const stream of streams) {
+    try {
+      await chrome.tabs.get(stream.tabId); // check tab exists
+      chrome.action.setBadgeText({ tabId: stream.tabId, text: "active!" });
+    } catch {}
+  }
+};
+
+export const setBadge = async (tabId: number) => {
+  try {
+    await chrome.tabs.get(tabId); // check tab exists
+    chrome.action.setBadgeText({ tabId, text: "active!" });
+  } catch {}
+};
+
+export const unsetBadge = async (tabId: number) => {
+  try {
+    await chrome.tabs.get(tabId); // check tab exists
+    chrome.action.setBadgeText({ tabId, text: "" });
+  } catch {}
+};
+
+export default updateExtBadge;