feat: play sound on successful swaps

closes #338

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;

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")}: </label>
+                    <Tooltip label="enable_audio_tooltip" />
+                    <div class="spacer"></div>
+                    <AudioNotificationSetting />
+                </span>
                 <span class="setting">
                     <label>{t("logs")}: </label>
                     <Tooltip label="logs_tooltip" />

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);

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[]>>;
@@ -152,6 +155,8 @@ const GlobalProvider = (props: { children: any }) => {
     });
 
     const [settingsMenu, setSettingsMenu] = createSignal<boolean>(false);
+    const [audioNotification, setAudioNotification] =
+        createSignal<boolean>(false);
 
     const localeSeparator = (0.1).toLocaleString().charAt(1);
     const [separator, setSeparator] = makePersisted(
@@ -161,9 +166,16 @@ const GlobalProvider = (props: { children: any }) => {
         },
     );
 
-    const notify = (type: string, message: string) => {
+    const notify = (type: string, message: string, audio?: boolean) => {
         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 +338,12 @@ const GlobalProvider = (props: { children: any }) => {
                 setSeparator,
                 settingsMenu,
                 setSettingsMenu,
+                audioNotification,
+                setAudioNotification,
                 // functions
                 t,
                 notify,
+                playNotificationSound,
                 fetchPairs,
                 getLogs,
                 clearLogs,

src/i18n/i18n.ts

@@ -185,6 +185,10 @@ const dict = {
         claim_fail: "Failed to claim swap: {{ id }}",
         logs: "Logs",
         logs_tooltip: "Logs of the web app, useful for debugging.",
+        enable_audio: "Enable Audio",
+        enable_audio_tooltip: "Enable or disable audio notifications",
+        on: "on",
+        off: "off",
     },
     de: {
         language: "Deutsch",
@@ -379,6 +383,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: "Audio aktivieren",
+        enable_audio_tooltip:
+            "Aktiviere oder deaktiviere Audio-Benachrichtigungen",
+        on: "an",
+        off: "aus",
     },
     es: {
         language: "Español",
@@ -573,6 +582,10 @@ const dict = {
         claim_fail: "¡Error en reclamar el intercambio {{ id }}!",
         logs: "Logs",
         logs_tooltip: "Registros de la aplicación web, para depuración.",
+        enable_audio: "Activar audio",
+        enable_audio_tooltip: "Activar o desactivar notificaciones de audio",
+        on: "on",
+        off: "off",
     },
     zh: {
         language: "中文",
@@ -747,6 +760,10 @@ const dict = {
         claim_fail: "交换{{ id }}索赔失败！",
         logs: "日志",
         logs_tooltip: "网络应用程序的日志，用于调试。",
+        enable_audio: "启用音频",
+        enable_audio_tooltip: "启用或禁用音频通知",
+        on: "开",
+        off: "关",
     },
 };
 

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;

src/style/settings.scss

@@ -17,6 +17,9 @@
         display: flex;
         align-items: center;
     }
+    .toggle {
+        margin-left: 15px;
+    }
 }
 .setting {
     display: flex;