feat: play sound on successful swaps (#536)

* feat: play sound on successful swaps closes #338 Update src/context/Global.tsx Co-authored-by: michael1011 <[email protected]> * fix: small es language fix --------- Co-authored-by: michael1011 <[email protected]> Co-authored-by: Kilian <[email protected]>
BoltzExchange · May 22, 2024 · caa861a · caa861a
1 parent a4169fe
commit caa861a
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 4 deletions.
diff --git a/public/notification.mp3 b/public/notification.mp3
diff --git a/src/components/AudioNotificationSetting.tsx b/src/components/AudioNotificationSetting.tsx
@@ -0,0 +1,34 @@
+import { useGlobalContext } from "../context/Global";
+
+const AudioNotificationSetting = () => {
+    const {
+        audioNotification,
+        setAudioNotification,
+        t,
+        playNotificationSound,
+    } = useGlobalContext();
+
+    const toggleAudioNotification = (evt: MouseEvent) => {
+        if (!audioNotification()) playNotificationSound();
+        setAudioNotification(!audioNotification());
+        evt.stopPropagation();
+    };
+
+    return (
+        <>
+            <div
+                class="audio toggle"
+                title={t("enable_audio_tooltip")}
+                onClick={toggleAudioNotification}>
+                <span class={audioNotification() ? "active" : ""}>
+                    {t("on")}
+                </span>
+                <span class={!audioNotification() ? "active" : ""}>
+                    {t("off")}
+                </span>
+            </div>
+        </>
+    );
+};
+
+export default AudioNotificationSetting;
diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
@@ -2,6 +2,7 @@ import { IoClose } from "solid-icons/io";
 
 import { useGlobalContext } from "../context/Global";
 import "../style/settings.scss";
+import AudioNotificationSetting from "./AudioNotificationSetting";
 import Denomination from "./Denomination";
 import Logs from "./Logs";
 import Separator from "./Separator";
@@ -34,6 +35,12 @@ const SettingsMenu = () => {
                     <div class="spacer"></div>
                     <Separator />
                 </span>
+                <span class="setting">
+                    <label>{t("enable_audio_notifications")}: </label>
+                    <Tooltip label="enable_audio_notifications_tooltip" />
+                    <div class="spacer"></div>
+                    <AudioNotificationSetting />
+                </span>
                 <span class="setting">
                     <label>{t("logs")}: </label>
                     <Tooltip label="logs_tooltip" />

diff --git a/src/components/SwapChecker.tsx b/src/components/SwapChecker.tsx
@@ -211,7 +211,7 @@ export const SwapChecker = () => {
                 if (claimedSwap.id === swap().id) {
                     setSwap(claimedSwap);
                 }
-                notify("success", t("claim_success", { id: res.id }));
+                notify("success", t("claim_success", { id: res.id }), true);
             } catch (e) {
                 const msg = t("claim_fail", { id: currentSwap.id });
                 log.warn(msg, e);

diff --git a/src/context/Global.tsx b/src/context/Global.tsx
@@ -61,9 +61,12 @@ export type GlobalContextType = {
     setSeparator: Setter<string>;
     settingsMenu: Accessor<boolean>;
     setSettingsMenu: Setter<boolean>;
+    audioNotification: Accessor<boolean>;
+    setAudioNotification: Setter<boolean>;
     // functions
     t: (key: string, values?: Record<string, any>) => string;
-    notify: (type: string, message: string) => void;
+    notify: (type: string, message: string, audio?: boolean) => void;
+    playNotificationSound: () => void;
     fetchPairs: (asset?: string) => void;
 
     getLogs: () => Promise<Record<string, string[]>>;
@@ -153,6 +156,13 @@ const GlobalProvider = (props: { children: any }) => {
 
     const [settingsMenu, setSettingsMenu] = createSignal<boolean>(false);
 
+    const [audioNotification, setAudioNotification] = makePersisted(
+        createSignal<boolean>(false),
+        {
+            name: "audioNotification",
+        },
+    );
+
     const localeSeparator = (0.1).toLocaleString().charAt(1);
     const [separator, setSeparator] = makePersisted(
         createSignal(localeSeparator),
@@ -161,9 +171,16 @@ const GlobalProvider = (props: { children: any }) => {
         },
     );
 
-    const notify = (type: string, message: string) => {
+    const notify = (type: string, message: string, audio: boolean = false) => {
         setNotificationType(type);
         setNotification(message);
+        if (audio && audioNotification()) playNotificationSound();
+    };
+
+    const playNotificationSound = () => {
+        const audio = new Audio("/notification.mp3");
+        audio.volume = 0.3;
+        audio.play();
     };
 
     const fetchPairs = (asset: string = BTC) => {
@@ -326,9 +343,12 @@ const GlobalProvider = (props: { children: any }) => {
                 setSeparator,
                 settingsMenu,
                 setSettingsMenu,
+                audioNotification,
+                setAudioNotification,
                 // functions
                 t,
                 notify,
+                playNotificationSound,
                 fetchPairs,
                 getLogs,
                 clearLogs,

diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -185,6 +185,11 @@ const dict = {
         claim_fail: "Failed to claim swap: {{ id }}",
         logs: "Logs",
         logs_tooltip: "Logs of the web app, useful for debugging.",
+        enable_audio_notifications: "Enable Audio Notifications",
+        enable_audio_notifications_tooltip:
+            "Enable or disable audio notifications",
+        on: "on",
+        off: "off",
     },
     de: {
         language: "Deutsch",
@@ -379,6 +384,11 @@ const dict = {
         claim_fail: "Swap {{ id }} konnte nicht geclaimed werden!",
         logs: "Logs",
         logs_tooltip: "Logs der Web App, nützlich für Debugging.",
+        enable_audio_notifications: "Audio Benachrichtigungen aktivieren",
+        enable_audio_notifications_tooltip:
+            "Aktiviere oder deaktiviere Audio-Benachrichtigungen",
+        on: "an",
+        off: "aus",
     },
     es: {
         language: "Español",
@@ -572,7 +582,13 @@ const dict = {
         claim_success: "¡Intercambio {{ id }} reclamado con éxito!",
         claim_fail: "¡Error en reclamar el intercambio {{ id }}!",
         logs: "Logs",
-        logs_tooltip: "Registros de la aplicación web, para depuración.",
+        logs_tooltip:
+            "Registros de la aplicación web como herramienta de depuración.",
+        enable_audio_notifications: "Activar notificaciones de audio",
+        enable_audio_notifications_tooltip:
+            "Activar o desactivar notificaciones de audio",
+        on: "on",
+        off: "off",
     },
     zh: {
         language: "中文",
@@ -747,6 +763,10 @@ const dict = {
         claim_fail: "交换{{ id }}索赔失败！",
         logs: "日志",
         logs_tooltip: "网络应用程序的日志，用于调试。",
+        enable_audio_notifications: "启用音频通知",
+        enable_audio_notifications_tooltip: "启用或禁用音频通知",
+        on: "开",
+        off: "关",
     },
 };
 

diff --git a/src/style/index.scss b/src/style/index.scss
@@ -363,6 +363,9 @@ textarea {
         height: 28px;
         border-radius: 50%;
         user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     > :first-child {
         margin-right: 5px;

diff --git a/src/style/settings.scss b/src/style/settings.scss
@@ -17,6 +17,9 @@
         display: flex;
         align-items: center;
     }
+    .toggle {
+        margin-left: 15px;
+    }
 }
 .setting {
     display: flex;