Add specific fee tracker (#7)

Features:
Add specific fee tracker;
Add specific fee notification settings tab;
Add extension update notification;

Design features:
Update extension icon;
Change tracking design;
Update texts;

Other changes:
Global refactoring;
Improve typing;

Author: IvanSavoskin

custom_typing/png.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+    const content: string;
+    export default content;
+}

custom_typing/wav.d.ts

@@ -0,0 +1,4 @@
+declare module "*.wav" {
+    const content: string;
+    export default content;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-space-block-tracker-chrome-extenstion",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0",
   "description": "Chrome extension to track new bitcoin blocks via Mempool Space",
   "scripts": {
     "dev": "webpack --watch --progress --mode=development",

public/files/manifest.json

@@ -4,8 +4,8 @@
 
   "name": "Bitcoin blocks tracker",
   "description": "Extension for Bitcoin blocks tracking via Mempool space",
-  "version": "1.0.1",
-  "version_name": "1.1.0-beta.2",
+  "version": "1.1.0",
+  "version_name": "1.1.0",
 
   "icons": {
     "16":"icons/16.png",
@@ -22,5 +22,5 @@
     "service_worker": "js/background.js"
   },
 
-  "permissions": ["storage", "offscreen"]
+  "permissions": ["storage", "offscreen", "notifications"]
 }

public/icons/128.png

@@ -2,25 +2,68 @@ import { sendMessage } from "@coreUtils/utils";
 import {
     BackgroundMessage,
     BlockPopupMessage,
+    FeeNotificationBorder,
     Fees,
     FeesPopupMessage,
-    PlayBlockNotificationSoundOffscreenMessage
+    PlayNotificationSoundOffscreenMessage
 } from "@models/types";
+import logo from "@static/images/logo.png";
 
+import { releaseNotes } from "./utils/releaseNotes";
 import { getSocketUrl } from "./utils/utils";
 
 const OFFSCREEN_DOCUMENT_NAME = "offScreen.html";
 const OFFSCREEN_DOCUMENT_PATH = `../${OFFSCREEN_DOCUMENT_NAME}`;
 
-let creating: Promise<void> | null;
-let socket: WebSocket | null;
+let isBlockNotificationEnabled: boolean | null = null;
+let isMainnet: boolean | null = null;
+let creating: Promise<void> | null = null;
+let socket: WebSocket | null = null;
 let intervalId: NodeJS.Timer | null;
-let fees: Fees | null;
-let lastBlockTime: number | null;
-let lastBlockHeight: number | null;
+let fees: Fees | null = null;
+let lastBlockTime: number | null = null;
+let lastBlockHeight: number | null = null;
 let blockNotificationVolume: number = 100;
 let blockNotificationSound: string | null = null;
 
+let isFeeNotificationEnabled: boolean | null = null;
+let feeNotificationBorder: FeeNotificationBorder | null = null;
+let feeNotificationVolume: number = 100;
+let feeNotificationSound: string | null = null;
+
+chrome.runtime.onInstalled.addListener((details) => {
+    try {
+        const currentVersion = chrome.runtime.getManifest().version;
+        if (details.reason === "update" && currentVersion !== details.previousVersion) {
+            console.debug(`Updated version: ${currentVersion}. Send notification`);
+
+            const currentVersionReleaseNotes = releaseNotes[currentVersion];
+
+            if (currentVersionReleaseNotes) {
+                chrome.notifications.create(
+                    `relese-notes-${currentVersion}`,
+                    {
+                        type: "basic",
+                        iconUrl: logo,
+                        title: currentVersionReleaseNotes.title,
+                        message: currentVersionReleaseNotes.message,
+                        buttons: [{ title: "Release Notes" }]
+                    },
+                    () => {}
+                );
+
+                chrome.notifications.onClicked.addListener(() => {
+                    chrome.tabs.create({ url: currentVersionReleaseNotes.link });
+                });
+            } else {
+                console.debug(`Release notes for version "${currentVersion}" not found`);
+            }
+        }
+    } catch (error) {
+        console.warn(`Error sending update notification: ${(error as Error).message}`);
+    }
+});
+
 async function checkOffscreenDocumentExist(): Promise<boolean> {
     // Check all windows controlled by the service worker to see if one
     // of them is the offscreen document with the given path
@@ -51,23 +94,36 @@ async function setupOffscreenDocument() {
     }
 }
 
+function initialSettings(): void {
+    chrome.storage.local
+        .get([
+            "blockNotificationVolume",
+            "blockNotificationSound",
+            "feeNotificationBorder",
+            "feeNotificationVolume",
+            "feeNotificationSound"
+        ])
+        .then((result) => {
+            blockNotificationVolume = result.blockNotificationVolume ?? 100;
+            blockNotificationSound = result.blockNotificationSound;
+            feeNotificationBorder = result.feeNotificationBorder;
+            feeNotificationVolume = result.feeNotificationVolume ?? 100;
+            feeNotificationSound = result.feeNotificationSound;
+        });
+}
+
 function onOpenSocketHandler(): void {
     console.debug("Socket is open");
     console.debug("Send data to server");
     socket?.send(JSON.stringify({ action: "init" }));
     socket?.send(JSON.stringify({ action: "want", data: ["blocks", "stats"] }));
-
-    chrome.storage.local.get(["blockNotificationVolume", "blockNotificationSound"]).then((result) => {
-        blockNotificationVolume = result.blockNotificationVolume ?? 100;
-        blockNotificationSound = result.blockNotificationSound;
-    });
 }
 
 function onCloseSocketWithReconnectHandler(event: CloseEvent, websocketUrl: string): void {
     console.debug(`Socket is closed. Reason: ${event.reason}`);
 
-    chrome.storage.local.get(["isTrackingEnabled"]).then((result) => {
-        if (result.isTrackingEnabled && event.code !== 1000) {
+    chrome.storage.local.get(["isBlockNotificationEnabled", "isFeeNotificationEnabled"]).then((result) => {
+        if ((result.isTrackingEnabled || result.isFeeNotificationEnabled) && event.code !== 1000) {
             console.debug("Reconnect will be attempted in 1 second.");
 
             if (intervalId) {
@@ -99,14 +155,16 @@ function onCloseSocketWithReconnectHandler(event: CloseEvent, websocketUrl: stri
 function onBlockMessageHandler(eventData: any): void {
     if ("block" in eventData) {
         console.info("New block");
-        setupOffscreenDocument().then(() => {
-            console.debug("Send block notification method to offscreen");
-            sendMessage<PlayBlockNotificationSoundOffscreenMessage>({
-                data: { volume: blockNotificationVolume, sound: blockNotificationSound },
-                target: "offscreen",
-                type: "playBlockNotificationSound"
+        if (isBlockNotificationEnabled) {
+            setupOffscreenDocument().then(() => {
+                console.debug("Send block notification to offscreen");
+                sendMessage<PlayNotificationSoundOffscreenMessage>({
+                    data: { volume: blockNotificationVolume, sound: blockNotificationSound },
+                    target: "offscreen",
+                    type: "playBlockNotificationSound"
+                });
             });
-        });
+        }
 
         lastBlockTime = eventData.block.timestamp * 1000;
         lastBlockHeight = eventData.block.height;
@@ -124,11 +182,44 @@ function onBlockMessageHandler(eventData: any): void {
     }
 }
 
+function checkFeeBorder(oldFees: Fees | null, newFees: Fees | null): void {
+    if (
+        isFeeNotificationEnabled &&
+        feeNotificationBorder !== null &&
+        feeNotificationBorder.feeBorder &&
+        newFees !== null &&
+        oldFees !== null
+    ) {
+        const fromLowToHighCondition =
+            oldFees[feeNotificationBorder.feeLevel] < newFees[feeNotificationBorder.feeLevel] &&
+            newFees[feeNotificationBorder.feeLevel] >= feeNotificationBorder.feeBorder &&
+            oldFees[feeNotificationBorder.feeLevel] < feeNotificationBorder.feeBorder;
+        const fromHighToLowCondition =
+            oldFees[feeNotificationBorder.feeLevel] > newFees[feeNotificationBorder.feeLevel] &&
+            newFees[feeNotificationBorder.feeLevel] <= feeNotificationBorder.feeBorder &&
+            oldFees[feeNotificationBorder.feeLevel] > feeNotificationBorder.feeBorder;
+
+        if (fromLowToHighCondition || fromHighToLowCondition) {
+            setupOffscreenDocument().then(() => {
+                console.debug("Send fee notification to offscreen");
+                sendMessage<PlayNotificationSoundOffscreenMessage>({
+                    data: { volume: feeNotificationVolume, sound: feeNotificationSound },
+                    target: "offscreen",
+                    type: "playFeeNotificationSound"
+                });
+            });
+        }
+    }
+}
+
 function onFeesMessageHandler(eventData: any): void {
     if ("fees" in eventData) {
         console.debug("Fee updated");
+        const lastFees = structuredClone(fees);
+
         fees = eventData.fees;
         sendMessage<FeesPopupMessage>({ target: "popup", data: { fees }, type: "fees" });
+        checkFeeBorder(lastFees, fees);
 
         console.info(`Current fees: slow: ${fees?.hourFee}, medium: ${fees?.halfHourFee}, fast: ${fees?.fastestFee}`);
     }
@@ -191,55 +282,75 @@ function mempoolSpaceBlockNotification(websocketUrl: string) {
     intervalId = setInterval(healthcheck, 1000);
 }
 
-function enableBlocksTracking(isMainnet: boolean): void {
-    console.log("Enabling blocks tracking");
-    mempoolSpaceBlockNotification(getSocketUrl(isMainnet));
+function enableWebSocket(_isMainnet: boolean): void {
+    if ((isBlockNotificationEnabled || isFeeNotificationEnabled) && !socket) {
+        console.log("Enabling web socket");
+        initialSettings();
+        mempoolSpaceBlockNotification(getSocketUrl(_isMainnet));
+    }
 }
 
-function disableBlocksTracking(): void {
-    console.log("Disabling blocks tracking");
-    checkOffscreenDocumentExist().then((isOffscreenDocumentExist: boolean) => {
-        if (isOffscreenDocumentExist) {
-            chrome.offscreen.closeDocument();
-        }
-    });
-    socket?.close(1000, "Disabling blocks tracking");
+function disableWebSocket(): void {
+    if (!isBlockNotificationEnabled && !isFeeNotificationEnabled) {
+        console.log("Disabling web socket");
+        checkOffscreenDocumentExist().then((isOffscreenDocumentExist: boolean) => {
+            if (isOffscreenDocumentExist) {
+                chrome.offscreen.closeDocument();
+            }
+        });
+        socket?.close(1000, "Disabling blocks tracking");
 
-    fees = null;
-    lastBlockTime = null;
-    lastBlockHeight = null;
+        fees = null;
+        lastBlockTime = null;
+        lastBlockHeight = null;
 
-    sendMessage<BlockPopupMessage>({
-        target: "popup",
-        data: { blockInfo: { lastBlockTime, lastBlockHeight } },
-        type: "blockInfo"
-    });
-    sendMessage<FeesPopupMessage>({ target: "popup", data: { fees }, type: "fees" });
+        sendMessage<BlockPopupMessage>({
+            target: "popup",
+            data: { blockInfo: { lastBlockTime, lastBlockHeight } },
+            type: "blockInfo"
+        });
+        sendMessage<FeesPopupMessage>({ target: "popup", data: { fees }, type: "fees" });
+    }
 }
 
-chrome.storage.local.get(["isTrackingEnabled", "isMainnet"]).then((result) => {
-    const isTrackingEnabled = result.isTrackingEnabled || false;
-    const isMainnet = result.isMainnet || true;
+chrome.storage.local.get(["isBlockNotificationEnabled", "isMainnet", "isFeeNotificationEnabled"]).then((result) => {
+    isBlockNotificationEnabled = result.isBlockNotificationEnabled ?? false;
+    isFeeNotificationEnabled = result.isFeeNotificationEnabled ?? false;
+    isMainnet = result.isMainnet ?? true;
 
-    if (isTrackingEnabled && !socket) {
-        enableBlocksTracking(isMainnet);
+    enableWebSocket(!!isMainnet);
+});
+
+chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
+    if (message.target === "background" && message.type === "changeBlockNotificationEnabled") {
+        isBlockNotificationEnabled = message.data.enabled;
+        if (isBlockNotificationEnabled) {
+            enableWebSocket(!!isMainnet);
+        } else {
+            disableWebSocket();
+        }
     }
 });
 
 chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
-    if (message.target === "background" && message.type === "changeEnabled") {
-        if (message.data.enabled) {
-            enableBlocksTracking(message.data.isMainnet);
+    if (message.target === "background" && message.type === "changeFeeNotificationEnabled") {
+        isFeeNotificationEnabled = message.data.enabled;
+        if (isFeeNotificationEnabled) {
+            enableWebSocket(!!isMainnet);
         } else {
-            disableBlocksTracking();
+            disableWebSocket();
         }
     }
 });
 
 chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
-    if (message.target === "background" && message.type === "changeBlockchain" && message.data.enabled && socket) {
-        console.log(`Changing blockchain to ${message.data.isMainnet ? "mainnet" : "testnet"}`);
-        socket.close(3001, getSocketUrl(message.data.isMainnet));
+    if (message.target === "background" && message.type === "changeBlockchain") {
+        isMainnet = message.data.isMainnet;
+
+        if ((isBlockNotificationEnabled || isFeeNotificationEnabled) && socket) {
+            console.log(`Changing blockchain to ${message.data.isMainnet ? "mainnet" : "testnet"}`);
+            socket.close(3001, getSocketUrl(message.data.isMainnet));
+        }
     }
 });
 
@@ -278,3 +389,27 @@ chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
         blockNotificationSound = message.data.sound;
     }
 });
+
+chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
+    if (message.target === "background" && message.type === "changeFeeNotificationSoundVolume") {
+        console.debug("Change fee notification sound volume");
+
+        feeNotificationVolume = message.data.volume;
+    }
+});
+
+chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
+    if (message.target === "background" && message.type === "changeFeeNotificationSound") {
+        console.debug("Change fee notification sound");
+
+        feeNotificationSound = message.data.sound;
+    }
+});
+
+chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
+    if (message.target === "background" && message.type === "changeFeeNotificationBorder") {
+        console.debug("Change fee notification border");
+
+        feeNotificationBorder = message.data.feeBorder;
+    }
+});

public/icons/16.png

@@ -0,0 +1,8 @@
+export const releaseNotes: Record<string, { title: string; message: string; link: string }> = {
+    "1.1.0": {
+        title: "Update 1.1.0",
+        message:
+            "Settings for notifications, commission tracking and other changes in version 1.1.0. More details at the link https://github.com/IvanSavoskin/bitcoin-blocks-tracker-extension/releases/tag/v1.1.0",
+        link: "https://github.com/IvanSavoskin/bitcoin-blocks-tracker-extension/releases/tag/v1.1.0"
+    }
+};