Improve block tracker disabling design

Author: IvanSavoskin

src/background/index.ts

@@ -192,6 +192,17 @@ function disableBlocksTracking(): void {
         }
     });
     socket?.close(1000, "Disabling blocks tracking");
+
+    fees = null;
+    lastBlockTime = null;
+    lastBlockHeight = null;
+
+    sendMessage({
+        target: "popup",
+        data: { blockInfo: { lastBlockTime, lastBlockHeight } },
+        type: "blockInfo"
+    });
+    sendMessage({ target: "popup", data: { fees }, type: "fees" });
 }
 
 chrome.storage.local.get(["isTrackingEnabled", "isMainnet"]).then((result) => {

src/popup/components/Main/FeeInfo.tsx

@@ -6,7 +6,13 @@ import { Fees, FeesPopupMessage, PopupMessage } from "@models/types";
 import styles from "./styles/FeeInfo.module.scss";
 import mainStyles from "./styles/Main.module.scss";
 
-export default function FeeInfo() {
+interface FeeInfoProps {
+    isTrackingEnabled: boolean;
+}
+
+export default function FeeInfo({ isTrackingEnabled }: FeeInfoProps) {
+    const noDataText = isTrackingEnabled ? "Loading..." : "Block tracking is disabled";
+
     const [fees, setFees] = useState<Fees | null>();
 
     const updateFees = useCallback((message: PopupMessage) => {
@@ -53,7 +59,7 @@ export default function FeeInfo() {
                     </div>
                 </div>
             ) : (
-                <div className={styles.loading}>Loading...</div>
+                <div className={styles.loading}>{noDataText}</div>
             )}
         </div>
     );

src/popup/components/Main/LastBlockInfo.tsx

@@ -6,7 +6,13 @@ import { BlockInfo, BlockPopupMessage, PopupMessage } from "@models/types";
 import styles from "./styles/LastBlockInfo.module.scss";
 import mainStyles from "./styles/Main.module.scss";
 
-export default function LastBlockInfo() {
+interface LastBlockInfoProps {
+    isTrackingEnabled: boolean;
+}
+
+export default function LastBlockInfo({ isTrackingEnabled }: LastBlockInfoProps) {
+    const noDataText = isTrackingEnabled ? "Loading..." : "Block tracking is disabled";
+
     const [lastBlockInfo, setLastBlockInfo] = useState<BlockInfo | null>();
     const [currentDate, setCurrentDate] = useState<number>(Date.now());
 
@@ -61,7 +67,7 @@ export default function LastBlockInfo() {
                     </div>
                 </div>
             ) : (
-                <div className={styles.loading}>Loading...</div>
+                <div className={styles.loading}>{noDataText}</div>
             )}
         </div>
     );

src/popup/components/Main/index.tsx

@@ -30,8 +30,8 @@ export default function Main() {
                 setIsMainnet={setIsMainnet}
                 isMainnet={isMainnet}
             />
-            <FeeInfo />
-            <LastBlockInfo />
+            <FeeInfo isTrackingEnabled={isTrackingEnabled} />
+            <LastBlockInfo isTrackingEnabled={isTrackingEnabled} />
         </>
     );
 }