Memoize balance component

kewbish · Dec 28, 2022 · ebba8a7 · ebba8a7
1 parent 77486b8
commit ebba8a7
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 153 deletions.
diff --git a/src/pages/Background/index.ts b/src/pages/Background/index.ts
@@ -446,6 +446,7 @@ chrome.alarms.onAlarm.addListener(async (alarm) => {
     if (!wallet || !address) {
       return;
     }
+    fetchBalance();
     fetchCobwebAllowance({
       sfToken,
       sfSigner,

diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
@@ -6,20 +6,18 @@ import {
   BLOCK_SITE,
   UPDATE_SETTING,
   UPDATE_STREAM,
-  FETCH_BALANCE,
   CHECK_METAMASK,
 } from "../shared/events";
 import { useChromeStorageLocal } from "use-chrome-storage";
 import { PayRates, Stream } from "../shared/types";
 import Setting from "./components/Setting";
 import DropdownModal from "./components/DropdownModal";
 import BackgroundBox from "./components/BackgroundBox";
-import ProfilePic from "./components/ProfilePic";
-import FadedPill from "./components/FadedPill";
 import streamedUntilNow from "./lib/streamedUntilNow";
 import { getRate } from "../Background/lib/getRate";
 import Onboarding from "./components/OnboardingCarousel";
 import ToastHandler from "./components/ToastHandler";
+import BalanceDisplay from "./components/BalanceDisplay";
 
 import "bootstrap-icons/font/bootstrap-icons.css";
 // @ts-expect-error
@@ -32,11 +30,6 @@ const Popup = () => {
     "extend-chrome/storage__local--address",
     null
   );
-  const [balance, setBalance] = useState(constants.Zero);
-  const [balanceRes, , ,]: [any, any, any, any] = useChromeStorageLocal(
-    "extend-chrome/storage__local--balance",
-    null
-  );
   const [cwInitialized, , ,]: [boolean, any, any, any] = useChromeStorageLocal(
     "extend-chrome/storage__local--cwInitialized",
     null
@@ -48,32 +41,12 @@ const Popup = () => {
 
   useEffect(() => {
     if (address) {
-      chrome.runtime.sendMessage({
-        message: FETCH_BALANCE,
-      });
       chrome.runtime.sendMessage({
         message: CHECK_METAMASK,
       });
     }
   }, [address]);
 
-  useEffect(() => {
-    if (!balanceRes) {
-      return;
-    }
-    setBalance(BigNumber.from(balanceRes));
-    const popover = document.getElementById("balance-popover");
-    let updatedPopover: any = null;
-    if (popover) {
-      popover.title =
-        ethers.utils.formatUnits(balanceRes) + " " + TOKEN_MAP.ETH.name;
-      updatedPopover = new bootstrap.Popover(popover);
-    }
-    return () => {
-      updatedPopover?.dispose();
-    };
-  }, [balanceRes]);
-
   const [searchParams, setSearchParams] = useSearchParams();
 
   useEffect(() => {
@@ -136,7 +109,6 @@ const Popup = () => {
 
   useEffect(() => {
     const popover = document.getElementById("streamed-until");
-    console.log(popover);
     let updatedPopover: any = null;
     if (popover && currentStream) {
       popover.title =
@@ -215,25 +187,6 @@ const Popup = () => {
     }
   };
 
-  useEffect(() => {
-    var popoverTriggerList = [].slice.call(
-      document.querySelectorAll('[data-bs-toggle="popover"]')
-    );
-    var popoverList = popoverTriggerList.map(function (
-      popoverTriggerEl: HTMLElement
-    ) {
-      return new bootstrap.Popover(popoverTriggerEl);
-    });
-    for (const popover of popoverList) {
-      popover.enable();
-    }
-    return () => {
-      for (const popover of popoverList) {
-        popover.dispose();
-      }
-    };
-  }, [balance]);
-
   return (
     <div className="App mx-2 my-3 p-0">
       {metamaskNotFound ||
@@ -251,35 +204,7 @@ const Popup = () => {
           <h1 className="display" style={{ fontSize: 40, fontWeight: 200 }}>
             Cobweb
           </h1>
-          <div
-            style={{ marginTop: "-10px" }}
-            data-bs-toggle="popover"
-            title={
-              ethers.utils.formatUnits(balance, "ether") +
-              " " +
-              TOKEN_MAP.ETH.name
-            }
-            data-bs-trigger="hover focus"
-            data-bs-template={
-              '<div class="popover" role="tooltip"><div class="popover-arrow popover-arrow-override"></div><p class="popover-header"></p><div class="popover-body"></div></div>'
-            }
-            id="balance-popover"
-          >
-            <FadedPill>
-              <div className="d-flex justify-content-end align-items-center h-auto">
-                <div
-                  className="d-flex align-items-center"
-                  style={{ marginRight: "5px" }}
-                >
-                  <p className="align-self-center m-0">
-                    {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "}
-                    {TOKEN_MAP.ETH.name}
-                  </p>
-                </div>
-                <ProfilePic width={40} address={address ?? ""} />
-              </div>
-            </FadedPill>
-          </div>
+          <BalanceDisplay />
         </div>
         <BackgroundBox>
           <div>

diff --git a/src/pages/Popup/components/BalanceDisplay.tsx b/src/pages/Popup/components/BalanceDisplay.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import { BigNumber, constants } from "ethers";
+import { FETCH_BALANCE } from "../../shared/events";
+// @ts-expect-error
+import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
+import FadedPill from "./FadedPill";
+import TOKEN_MAP from "../../shared/tokens";
+import ProfilePic from "./ProfilePic";
+import { ethers } from "ethers";
+import { useChromeStorageLocal } from "use-chrome-storage";
+
+const BalanceDisplay = () => {
+  const [mmAddress, , ,]: [string, any, any, any] = useChromeStorageLocal(
+    "extend-chrome/storage__local--address",
+    ""
+  );
+
+  const [balance, setBalance] = useState(constants.Zero);
+  const [balanceRes, , ,]: [any, any, any, any] = useChromeStorageLocal(
+    "extend-chrome/storage__local--balance",
+    null
+  );
+
+  useEffect(() => {
+    chrome.runtime.sendMessage({
+      message: FETCH_BALANCE,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!balanceRes) {
+      return;
+    }
+
+    setBalance(BigNumber.from(balanceRes));
+    const popover = document.getElementById("popover");
+    let updatedPopover: any = null;
+    if (popover) {
+      popover.title =
+        ethers.utils.formatUnits(balanceRes) + " " + TOKEN_MAP.ETH.name;
+      updatedPopover = new bootstrap.Popover(popover);
+    }
+    return () => {
+      updatedPopover?.dispose();
+    };
+  }, [balanceRes]);
+
+  useEffect(() => {
+    const popover = new bootstrap.Popover(document.getElementById("popover"));
+    return () => {
+      popover.dispose();
+    };
+  }, []);
+
+  return (
+    <div
+      style={{ marginTop: "-10px" }}
+      id="popover"
+      data-bs-toggle="popover"
+      title={ethers.utils.formatUnits(balance) + " " + TOKEN_MAP.ETH.name}
+      data-bs-trigger="hover focus"
+      data-bs-template={
+        '<div class="popover" role="tooltip"><div class="popover-arrow popover-arrow-override"></div><p class="popover-header"></p><div class="popover-body"></div></div>'
+      }
+    >
+      <FadedPill>
+        <div className="d-flex justify-content-end align-items-center h-auto">
+          <div
+            className="d-flex align-items-center"
+            style={{ marginRight: "5px" }}
+          >
+            <p className="align-self-center m-0">
+              {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "}
+              {TOKEN_MAP.ETH.name}
+            </p>
+          </div>
+          <ProfilePic width={40} address={mmAddress} />
+        </div>
+      </FadedPill>
+    </div>
+  );
+};
+
+export default React.memo(BalanceDisplay);
diff --git a/src/pages/Popup/components/CobwebPage.tsx b/src/pages/Popup/components/CobwebPage.tsx
@@ -1,61 +1,11 @@
 import React from "react";
 import BackgroundBox from "./BackgroundBox";
-import ProfilePic from "./ProfilePic";
-import { ethers, BigNumber, constants } from "ethers";
-import { useChromeStorageLocal } from "use-chrome-storage";
-import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { FETCH_BALANCE } from "../../shared/events";
-import FadedPill from "./FadedPill";
-import TOKEN_MAP from "../../shared/tokens";
-// @ts-expect-error
-import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
+import BalanceDisplay from "./BalanceDisplay";
 
 const CobwebPage = ({ children }: { children: React.ReactNode }) => {
-  const [mmAddress, , ,]: [string, any, any, any] = useChromeStorageLocal(
-    "extend-chrome/storage__local--address",
-    ""
-  );
-
-  const [balance, setBalance] = useState(constants.Zero);
-  const [balanceRes, , ,]: [any, any, any, any] = useChromeStorageLocal(
-    "extend-chrome/storage__local--balance",
-    null
-  );
-
-  useEffect(() => {
-    chrome.runtime.sendMessage({
-      message: FETCH_BALANCE,
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!balanceRes) {
-      return;
-    }
-
-    setBalance(BigNumber.from(balanceRes));
-    const popover = document.getElementById("popover");
-    let updatedPopover: any = null;
-    if (popover) {
-      popover.title =
-        ethers.utils.formatUnits(balanceRes) + " " + TOKEN_MAP.ETH.name;
-      updatedPopover = new bootstrap.Popover(popover);
-    }
-    return () => {
-      updatedPopover?.dispose();
-    };
-  }, [balanceRes]);
-
   const navigate = useNavigate();
 
-  useEffect(() => {
-    const popover = new bootstrap.Popover(document.getElementById("popover"));
-    return () => {
-      popover.dispose();
-    };
-  }, []);
-
   return (
     <div className="mx-2 my-3 p-0">
       <div className="container">
@@ -67,32 +17,8 @@ const CobwebPage = ({ children }: { children: React.ReactNode }) => {
           >
             &lt;
           </h1>
-          <div
-            style={{ marginTop: "-10px" }}
-            id="popover"
-            data-bs-toggle="popover"
-            title={ethers.utils.formatUnits(balance) + " " + TOKEN_MAP.ETH.name}
-            data-bs-trigger="hover focus"
-            data-bs-template={
-              '<div class="popover" role="tooltip"><div class="popover-arrow popover-arrow-override"></div><p class="popover-header"></p><div class="popover-body"></div></div>'
-            }
-          >
-            <FadedPill>
-              <div className="d-flex justify-content-end align-items-center h-auto">
-                <div
-                  className="d-flex align-items-center"
-                  style={{ marginRight: "5px" }}
-                >
-                  <p className="align-self-center m-0">
-                    {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "}
-                    {TOKEN_MAP.ETH.name}
-                  </p>
-                </div>
-                <ProfilePic width={40} address={mmAddress} />
-              </div>
-            </FadedPill>
-          </div>
         </div>
+        <BalanceDisplay />
         <BackgroundBox>
           <>{children}</>
         </BackgroundBox>