Add block notification sound selector (#6)

Features:
Add block notification sound selector;

Design fixes:
Bold font for tabs;

Other changes;
Refactoring;
Improve typing;
Remove unnecessary comments

Author: IvanSavoskin

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mempool-space-block-tracker-chrome-extenstion",
-  "version": "1.0.2",
+  "version": "1.1.0-beta.2",
   "description": "Chrome extension to track new bitcoin blocks via Mempool Space",
   "scripts": {
     "dev": "webpack --watch --progress --mode=development",
@@ -17,6 +17,7 @@
   "author": "Savoskin Ivan",
   "license": "MIT",
   "dependencies": {
+    "axios": "1.7.2",
     "classnames": "2.5.1",
     "react": "18.3.1",
     "react-dom": "18.3.1"

package.json

@@ -4,8 +4,8 @@
 
   "name": "Bitcoin blocks tracker",
   "description": "Extension for Bitcoin blocks tracking via Mempool space",
-  "version": "1.0.2",
-  "version_name": "1.1.0 alpha 1",
+  "version": "1.0.1",
+  "version_name": "1.1.0-beta.2",
 
   "icons": {
     "16":"icons/16.png",

public/files/manifest.json

@@ -1,5 +1,11 @@
 import { sendMessage } from "@coreUtils/utils";
-import { BackgroundMessage, Fees } from "@models/types";
+import {
+    BackgroundMessage,
+    BlockPopupMessage,
+    Fees,
+    FeesPopupMessage,
+    PlayBlockNotificationSoundOffscreenMessage
+} from "@models/types";
 
 import { getSocketUrl } from "./utils/utils";
 
@@ -13,6 +19,7 @@ let fees: Fees | null;
 let lastBlockTime: number | null;
 let lastBlockHeight: number | null;
 let blockNotificationVolume: number = 100;
+let blockNotificationSound: string | null = null;
 
 async function checkOffscreenDocumentExist(): Promise<boolean> {
     // Check all windows controlled by the service worker to see if one
@@ -50,8 +57,9 @@ function onOpenSocketHandler(): void {
     socket?.send(JSON.stringify({ action: "init" }));
     socket?.send(JSON.stringify({ action: "want", data: ["blocks", "stats"] }));
 
-    chrome.storage.local.get(["blockNotificationVolume"]).then((result) => {
+    chrome.storage.local.get(["blockNotificationVolume", "blockNotificationSound"]).then((result) => {
         blockNotificationVolume = result.blockNotificationVolume ?? 100;
+        blockNotificationSound = result.blockNotificationSound;
     });
 }
 
@@ -93,15 +101,19 @@ function onBlockMessageHandler(eventData: any): void {
         console.info("New block");
         setupOffscreenDocument().then(() => {
             console.debug("Send block notification method to offscreen");
-            sendMessage({ data: { volume: blockNotificationVolume }, target: "offscreen", type: "playBlockNotificationSound" });
+            sendMessage<PlayBlockNotificationSoundOffscreenMessage>({
+                data: { volume: blockNotificationVolume, sound: blockNotificationSound },
+                target: "offscreen",
+                type: "playBlockNotificationSound"
+            });
         });
 
         lastBlockTime = eventData.block.timestamp * 1000;
         lastBlockHeight = eventData.block.height;
 
         console.debug("Update blocks info with new block");
 
-        sendMessage({
+        sendMessage<BlockPopupMessage>({
             target: "popup",
             data: { blockInfo: { lastBlockTime, lastBlockHeight } },
             type: "blockInfo"
@@ -116,7 +128,7 @@ function onFeesMessageHandler(eventData: any): void {
     if ("fees" in eventData) {
         console.debug("Fee updated");
         fees = eventData.fees;
-        sendMessage({ target: "popup", data: { fees }, type: "fees" });
+        sendMessage<FeesPopupMessage>({ target: "popup", data: { fees }, type: "fees" });
 
         console.info(`Current fees: slow: ${fees?.hourFee}, medium: ${fees?.halfHourFee}, fast: ${fees?.fastestFee}`);
     }
@@ -129,7 +141,7 @@ function onBlocksMessageHandler(eventData: any): void {
         const lastBlock = eventData.blocks.at(-1);
         lastBlockHeight = lastBlock.height;
         lastBlockTime = lastBlock.timestamp * 1000;
-        sendMessage({
+        sendMessage<BlockPopupMessage>({
             target: "popup",
             data: { blockInfo: { lastBlockTime, lastBlockHeight } },
             type: "blockInfo"
@@ -197,12 +209,12 @@ function disableBlocksTracking(): void {
     lastBlockTime = null;
     lastBlockHeight = null;
 
-    sendMessage({
+    sendMessage<BlockPopupMessage>({
         target: "popup",
         data: { blockInfo: { lastBlockTime, lastBlockHeight } },
         type: "blockInfo"
     });
-    sendMessage({ target: "popup", data: { fees }, type: "fees" });
+    sendMessage<FeesPopupMessage>({ target: "popup", data: { fees }, type: "fees" });
 }
 
 chrome.storage.local.get(["isTrackingEnabled", "isMainnet"]).then((result) => {
@@ -231,15 +243,15 @@ chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
     }
 });
 
-chrome.runtime.onMessage.addListener((message: BackgroundMessage, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message: BackgroundMessage, _, sendResponse) => {
     if (message.target === "background" && message.type === "requestFees") {
         console.debug("Send initial fees info");
 
         sendResponse({ target: "popup", data: { fees }, type: "initialFees" });
     }
 });
 
-chrome.runtime.onMessage.addListener((message: BackgroundMessage, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message: BackgroundMessage, _, sendResponse) => {
     if (message.target === "background" && message.type === "requestLastBlockInfo") {
         console.debug("Send initial last block info");
 
@@ -258,3 +270,11 @@ chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
         blockNotificationVolume = message.data.volume;
     }
 });
+
+chrome.runtime.onMessage.addListener((message: BackgroundMessage) => {
+    if (message.target === "background" && message.type === "changeBlockNotificationSound") {
+        console.debug("Change block notification sound");
+
+        blockNotificationSound = message.data.sound;
+    }
+});

src/background/index.ts

@@ -23,23 +23,33 @@ export interface RequestLastBlockInfoBackgroundMessage extends Message {
     type: "requestLastBlockInfo";
 }
 
-export interface ChangeBlockNotificationSoundVolumeOffscreenMessage extends Message {
+export interface ChangeBlockNotificationSoundVolumeBackgroundMessage extends Message {
     data: {
         volume: number;
     };
     target: "background";
     type: "changeBlockNotificationSoundVolume";
 }
 
+export interface ChangeBlockNotificationSoundBackgroundMessage extends Message {
+    data: {
+        sound: string | null;
+    };
+    target: "background";
+    type: "changeBlockNotificationSound";
+}
+
 export type BackgroundMessage =
     | BaseBackgroundMessage
     | RequestFeesBackgroundMessage
     | RequestLastBlockInfoBackgroundMessage
-    | ChangeBlockNotificationSoundVolumeOffscreenMessage;
+    | ChangeBlockNotificationSoundVolumeBackgroundMessage
+    | ChangeBlockNotificationSoundBackgroundMessage;
 
 export interface PlayBlockNotificationSoundOffscreenMessage extends Message {
     data: {
         volume: number;
+        sound: string | null;
     };
     target: "offscreen";
     type: "playBlockNotificationSound";
@@ -49,7 +59,7 @@ export type OffscreenMessage = PlayBlockNotificationSoundOffscreenMessage;
 
 export interface FeesPopupMessage extends Message {
     data: {
-        fees: Fees;
+        fees: Fees | null;
     };
     target: "popup";
     type: "fees" | "initialFees";
@@ -74,6 +84,6 @@ export interface Fees {
 }
 
 export interface BlockInfo {
-    lastBlockHeight: number;
-    lastBlockTime: number;
+    lastBlockHeight: number | null;
+    lastBlockTime: number | null;
 }

src/models/types.ts

@@ -3,15 +3,12 @@ import notification from "@static/sounds/notification.m4a";
 
 console.debug("Initialize offscreen");
 
-const sound = new Audio(notification);
-
 chrome.runtime.onMessage.addListener((message: OffscreenMessage) => {
     if (message.target === "offscreen" && message.type === "playBlockNotificationSound") {
+        const sound = new Audio(message.data.sound ?? notification);
+
         console.debug("Play block notification sound");
         sound.volume = message.data.volume / 100;
-        console.log(sound);
-        console.log(message.data.volume, message.data.volume / 100);
-        console.log(sound.volume);
         sound.play();
     }
 });

src/offScreen/index.ts

@@ -1,4 +1,5 @@
 import { sendMessage } from "@coreUtils/utils";
+import { BaseBackgroundMessage } from "@models/types";
 
 import mainStyles from "./styles/Main.module.scss";
 import styles from "./styles/RadioButtons.module.scss";
@@ -16,7 +17,7 @@ export default function ChangeBlockchainRadioButtonGroup({
 }: Readonly<TrackingRadioButtonGroupProps>) {
     const changeBlockchain = (_isMainnet: boolean) => {
         setIsMainnet(_isMainnet);
-        sendMessage({
+        sendMessage<BaseBackgroundMessage>({
             target: "background",
             data: {
                 enabled: isTrackingEnabled,