diff --git a/src/pages/Background/index.ts b/src/pages/Background/index.ts index ec9eabd..8f5b457 100644 --- 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 index c716b32..a9b967b 100644 --- a/src/pages/Popup/Popup.tsx +++ b/src/pages/Popup/Popup.tsx @@ -6,7 +6,6 @@ import { BLOCK_SITE, UPDATE_SETTING, UPDATE_STREAM, - FETCH_BALANCE, CHECK_METAMASK, } from "../shared/events"; import { useChromeStorageLocal } from "use-chrome-storage"; @@ -14,12 +13,11 @@ 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 (
{metamaskNotFound || @@ -251,35 +204,7 @@ const Popup = () => {

Cobweb

- ' - } - id="balance-popover" - > - -
-
-

- {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "} - {TOKEN_MAP.ETH.name} -

-
- -
- -
+
diff --git a/src/pages/Popup/components/BalanceDisplay.tsx b/src/pages/Popup/components/BalanceDisplay.tsx new file mode 100644 index 0000000..42f7716 --- /dev/null +++ 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 ( + ' + } + > + +
+
+

+ {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "} + {TOKEN_MAP.ETH.name} +

+
+ +
+ +
+ ); +}; + +export default React.memo(BalanceDisplay); diff --git a/src/pages/Popup/components/CobwebPage.tsx b/src/pages/Popup/components/CobwebPage.tsx index 6ed9ce4..f84b294 100644 --- 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 (
@@ -67,32 +17,8 @@ const CobwebPage = ({ children }: { children: React.ReactNode }) => { > < - ' - } - > - -
-
-

- {ethers.utils.formatUnits(balance.sub(balance.mod(1e12)))}{" "} - {TOKEN_MAP.ETH.name} -

-
- -
- -
+ <>{children}