add to settings

src/components/Audio.tsx

@@ -0,0 +1,32 @@
+import { useGlobalContext } from "../context/Global";
+
+const Audio = () => {
+    const { audio, setAudio, t, playSound } = useGlobalContext();
+
+    const toggleAudio = (evt: MouseEvent) => {
+        setAudio(!audio());
+        evt.stopPropagation();
+    };
+
+    const play = (evt: MouseEvent) => {
+        playSound();
+        evt.stopPropagation();
+    };
+
+    return (
+        <>
+            <span onClick={play} class="btn-small">
+                {t("play_sound")}
+            </span>
+            <div
+                class="audio toggle"
+                title={t("enable_audio_tooltip")}
+                onClick={toggleAudio}>
+                <span class={audio() ? "active" : ""}>{t("on")}</span>
+                <span class={!audio() ? "active" : ""}>{t("off")}</span>
+            </div>
+        </>
+    );
+};
+
+export default Audio;

src/components/RefundButton.tsx

@@ -32,6 +32,8 @@ const RefundButton = ({
         setRefundAddress,
         refundAddress,
         t,
+        audio,
+        playSound,
     } = useGlobalContext();
     const { setSwap } = usePayContext();
 
@@ -149,6 +151,7 @@ const RefundButton = ({
                     setRefundTxId(res.refundTx);
                 }
             }
+            if (audio()) playSound();
         } catch (error) {
             log.debug("refund failed", error);
             setNotificationType("error");

src/components/SettingsMenu.tsx

@@ -2,6 +2,7 @@ import { IoClose } from "solid-icons/io";
 
 import { useGlobalContext } from "../context/Global";
 import "../style/settings.scss";
+import Audio from "./Audio";
 import Denominaton from "./Denomination";
 import Separator from "./Separator";
 import Tooltip from "./Tooltip";
@@ -32,6 +33,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>
+                <Audio />
+            </span>
         </div>
     );
 };

src/components/SwapChecker.tsx

@@ -125,8 +125,15 @@ export const SwapChecker = () => {
         setTimeoutEta,
         setTimeoutBlockheight,
     } = usePayContext();
-    const { notify, updateSwapStatus, getSwap, getSwaps, setSwapStorage } =
-        useGlobalContext();
+    const {
+        audio,
+        playSound,
+        notify,
+        updateSwapStatus,
+        getSwap,
+        getSwaps,
+        setSwapStorage,
+    } = useGlobalContext();
 
     const assetWebsocket = new Map<string, BoltzWebSocket>();
 
@@ -213,6 +220,7 @@ export const SwapChecker = () => {
                 }
 
                 notify("success", `swap ${res.id} claimed`);
+                if (audio()) playSound();
             } catch (e) {
                 log.warn("swapchecker failed to claim swap", e);
             }

src/context/Global.tsx

@@ -60,9 +60,12 @@ export type GlobalContextType = {
     setSeparator: Setter<string>;
     settingsMenu: Accessor<boolean>;
     setSettingsMenu: Setter<boolean>;
+    audio: Accessor<boolean>;
+    setAudio: Setter<boolean>;
     // functions
     t: (key: string, values?: Record<string, any>) => string;
     notify: (type: string, message: string) => void;
+    playSound: () => void;
     fetchPairs: (asset?: string) => void;
 
     setSwapStorage: (swap: SwapWithId) => Promise<any>;
@@ -146,6 +149,7 @@ const GlobalProvider = (props: { children: any }) => {
     });
 
     const [settingsMenu, setSettingsMenu] = createSignal<boolean>(false);
+    const [audio, setAudio] = createSignal<boolean>(false);
 
     const localeSeparator = (0.1).toLocaleString().charAt(1);
     const [separator, setSeparator] = makePersisted(
@@ -158,8 +162,11 @@ const GlobalProvider = (props: { children: any }) => {
     const notify = (type: string, message: string) => {
         setNotificationType(type);
         setNotification(message);
+    };
+
+    const playSound = () => {
         const audio = new Audio("/sound.mp3");
-        audio.volume = 0.2;
+        audio.volume = 0.3;
         audio.play();
     };
 
@@ -300,9 +307,12 @@ const GlobalProvider = (props: { children: any }) => {
                 setSeparator,
                 settingsMenu,
                 setSettingsMenu,
+                audio,
+                setAudio,
                 // functions
                 t,
                 notify,
+                playSound,
                 fetchPairs,
                 updateSwapStatus,
                 setSwapStorage,

src/i18n/i18n.ts

@@ -181,6 +181,11 @@ const dict = {
         denomination_tooltip: "Choose your preferred denomination: BTC or sats",
         decimal_tooltip:
             "Choose your preferred decimal separator: dot or comma",
+        enable_audio: "Enable Audio",
+        enable_audio_tooltip: "Enable or disable audio notifications",
+        play_sound: "Play Sound",
+        on: "on",
+        off: "off",
     },
     de: {
         language: "Deutsch",
@@ -371,6 +376,12 @@ const dict = {
             "Wähle deine bevorzugte Denomination: BTC oder sats",
         decimal_tooltip:
             "Wähle dein bevorzugtes Dezimaltrennzeichen: Punkt oder Komma",
+        enable_audio: "Audio aktivieren",
+        enable_audio_tooltip:
+            "Aktiviere oder deaktiviere Audio-Benachrichtigungen",
+        play_sound: "Ton abspielen",
+        on: "an",
+        off: "aus",
     },
     es: {
         language: "Español",
@@ -561,6 +572,11 @@ const dict = {
         decimal_separator: "Separador decimal",
         denomination_tooltip: "Elige tu denominación preferida: BTC o sats",
         decimal_tooltip: "Elige tu separador decimal preferido: punto o coma",
+        enable_audio: "Activar audio",
+        enable_audio_tooltip: "Activar o desactivar notificaciones de audio",
+        play_sound: "Reproducir sonido",
+        on: "on",
+        off: "off",
     },
     zh: {
         language: "中文",
@@ -731,6 +747,11 @@ const dict = {
         decimal_separator: "小数分隔符",
         denomination_tooltip: "选择您的首选面额：BTC 或 sats",
         decimal_tooltip: "选择您的首选小数分隔符：点或逗号",
+        enable_audio: "启用音频",
+        enable_audio_tooltip: "启用或禁用音频通知",
+        play_sound: "播放声音",
+        on: "开",
+        off: "关",
     },
 };
 

src/style/index.scss

@@ -346,6 +346,7 @@ textarea {
     border-radius: 18px;
     border: 1px dashed rgba(255, 255, 255, 0.3);
     padding: 0 5px;
+    margin-left: 15px;
     align-items: center;
     display: flex;
     justify-content: start;
@@ -358,6 +359,9 @@ textarea {
         height: 28px;
         border-radius: 50%;
         user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     > :first-child {
         margin-right: 5px;