[BX-1023] Sounds Toggle (#953)

Co-authored-by: Bruno Barbieri <[email protected]>

e2e/parallel/shortcuts-settings.test.ts

@@ -385,7 +385,7 @@ describe.runIf(browser !== 'firefox')(
       await executePerformShortcut({
         driver,
         key: 'TAB',
-        timesToPress: 7,
+        timesToPress: 8,
       });
       await executePerformShortcut({ driver, key: 'ENTER' });
       const systemOption = await findElementByText(driver, 'System');

src/core/state/sound/index.ts

@@ -0,0 +1,23 @@
+import create from 'zustand';
+
+import { createStore } from '../internal/createStore';
+
+export interface SoundState {
+  soundsEnabled: boolean;
+  toggleSoundsEnabled: (enabled: boolean) => void;
+}
+
+export const soundStore = createStore<SoundState>(
+  (set) => ({
+    soundsEnabled: true,
+    toggleSoundsEnabled: (soundsEnabled) => set({ soundsEnabled }),
+  }),
+  {
+    persist: {
+      name: 'sound',
+      version: 0,
+    },
+  },
+);
+
+export const useSoundStore = create(soundStore);

src/design-system/styles/designTokens.ts

@@ -982,6 +982,7 @@ export const symbolNames = selectSymbolNames(
   'square.grid.2x2',
   '123.rectangle.fill',
   'clock.arrow.2.circlepath',
+  'speaker.wave.2.fill',
 );
 export type SymbolName = (typeof symbolNames)[number];
 

src/design-system/symbols/generated/index.ts

@@ -3725,4 +3725,31 @@ export default {
       viewBox: { width: 35.109333495834015, height: 29.408203125 },
     },
   },
+  'speaker.wave.2.fill': {
+    regular: {
+      name: 'speaker.wave.2.fill',
+      path: 'M14.7401 24.116C15.6401 24.116 16.2801 23.476 16.2801 22.586V1.616C16.2801 0.726 15.6401 -0.004 14.7101 -0.004C14.0701 -0.004 13.6401 0.286 12.9501 0.946L7.1101 6.416C7.0301 6.496 6.9001 6.536 6.7701 6.536H2.8601C1.0001 6.536 0.0001 7.556 0.0001 9.526V14.616C0.0001 16.596 1.0001 17.606 2.8601 17.606H6.7701C6.9001 17.606 7.0301 17.646 7.1101 17.736L12.9501 23.256C13.5601 23.856 14.1001 24.116 14.7401 24.116ZM26.2401 21.436C26.7401 21.776 27.3701 21.656 27.7401 21.136C29.4901 18.726 30.5201 15.426 30.5201 12.046C30.5201 8.666 29.5001 5.336 27.7401 2.956C27.3701 2.436 26.7401 2.306 26.2401 2.656C25.7301 2.996 25.6501 3.636 26.0401 4.196C27.5401 6.306 28.4001 9.136 28.4001 12.046C28.4001 14.956 27.5101 17.756 26.0401 19.896C25.6601 20.456 25.7301 21.096 26.2401 21.436ZM21.1801 17.866C21.6301 18.186 22.2701 18.086 22.6401 17.556C23.6901 16.176 24.3201 14.136 24.3201 12.046C24.3201 9.956 23.6901 7.926 22.6401 6.536C22.2701 6.006 21.6301 5.896 21.1801 6.216C20.6201 6.606 20.5401 7.286 20.9601 7.846C21.7501 8.946 22.2001 10.456 22.2001 12.046C22.2001 13.626 21.7401 15.136 20.9601 16.246C20.5501 16.816 20.6201 17.476 21.1801 17.866Z',
+      viewBox: { width: 30.515625, height: 24.1171875 },
+    },
+    medium: {
+      name: 'speaker.wave.2.fill',
+      path: 'M14.9544 24.4638C15.9644 24.4638 16.7044 23.7238 16.7044 22.7138V1.8337C16.7044 0.8238 15.9644 0.0038 14.9344 0.0038C14.2344 0.0038 13.7544 0.3038 12.9844 0.9937L7.2744 6.3737C7.1944 6.4438 7.0844 6.4838 6.9544 6.4838H3.0744C1.0844 6.4838 0.0044 7.5838 0.0044 9.7038V14.7938C0.0044 16.8938 1.0844 18.0238 3.0744 18.0238H6.9544C7.0844 18.0238 7.1944 18.0438 7.2744 18.1338L12.9844 23.5338C13.6744 24.1838 14.2444 24.4638 14.9544 24.4638ZM27.0444 21.9438C27.6544 22.3238 28.4144 22.1938 28.8344 21.5638C30.6244 19.0438 31.6544 15.6838 31.6544 12.2238C31.6544 8.7638 30.6244 5.3738 28.8344 2.8837C28.4144 2.2538 27.6544 2.1038 27.0444 2.5038C26.4044 2.9138 26.3044 3.7037 26.7844 4.4138C28.2444 6.5538 29.0844 9.3238 29.0844 12.2238C29.0844 15.1038 28.2144 17.8838 26.7844 20.0338C26.3144 20.7438 26.4044 21.5338 27.0444 21.9438ZM21.5844 18.2938C22.1644 18.6638 22.9244 18.5438 23.3344 17.9338C24.4344 16.4738 25.0844 14.3838 25.0844 12.2238C25.0844 10.0638 24.4344 7.9838 23.3344 6.4938C22.9244 5.9037 22.1644 5.7738 21.5844 6.1638C20.9344 6.6038 20.8044 7.3938 21.3244 8.1638C22.0944 9.2438 22.5144 10.6938 22.5144 12.2238C22.5144 13.7438 22.0844 15.1938 21.3244 16.2838C20.8044 17.0638 20.9344 17.8438 21.5844 18.2938Z',
+      viewBox: { width: 31.650390625, height: 24.458984375 },
+    },
+    semibold: {
+      name: 'speaker.wave.2.fill',
+      path: 'M15.126 24.7168C16.226 24.7168 17.046 23.8968 17.046 22.7868V1.9868C17.046 0.8768 16.226 -0.0032 15.106 -0.0032C14.366 -0.0032 13.836 0.2968 13.046 1.0368L7.396 6.3168C7.316 6.3868 7.216 6.4268 7.096 6.4268H3.256C1.146 6.4268 -0.004 7.6168 -0.004 9.8468V14.9068C-0.004 17.1268 1.146 18.3068 3.256 18.3068H7.096C7.216 18.3068 7.316 18.3468 7.396 18.4168L13.046 23.7368C13.766 24.4168 14.366 24.7168 15.126 24.7168ZM27.676 22.3168C28.366 22.7368 29.216 22.5768 29.696 21.8768C31.486 19.2768 32.526 15.8768 32.526 12.3468C32.526 8.8168 31.496 5.3868 29.696 2.8168C29.216 2.1068 28.366 1.9368 27.676 2.3768C26.916 2.8268 26.826 3.7468 27.356 4.5668C28.796 6.7168 29.596 9.4768 29.596 12.3468C29.596 15.2168 28.766 17.9668 27.356 20.1068C26.836 20.9268 26.916 21.8568 27.676 22.3168ZM21.916 18.5968C22.576 19.0168 23.416 18.8668 23.886 18.2268C25.006 16.6768 25.686 14.5568 25.686 12.3468C25.686 10.1268 25.006 8.0068 23.886 6.4668C23.416 5.8268 22.576 5.6768 21.916 6.0968C21.176 6.5768 21.016 7.4668 21.616 8.3768C22.356 9.4468 22.746 10.8668 22.746 12.3468C22.746 13.8268 22.336 15.2268 21.616 16.2968C21.026 17.2268 21.176 18.1168 21.916 18.5968Z',
+      viewBox: { width: 32.525390625, height: 24.71875 },
+    },
+    bold: {
+      name: 'speaker.wave.2.fill',
+      path: 'M15.3403 25.0745C16.5703 25.0745 17.4903 24.1445 17.4903 22.9245V2.1845C17.4903 0.9745 16.5703 0.0045 15.3303 0.0045C14.5303 0.0045 13.9503 0.3245 13.1003 1.1045L7.5603 6.2645C7.4803 6.3345 7.4003 6.3745 7.2903 6.3745H3.4903C1.2303 6.3745 0.0003 7.6545 0.0003 10.0245V15.0845C0.0003 17.4445 1.2303 18.7145 3.4903 18.7145H7.2903C7.3803 18.7145 7.4803 18.7445 7.5503 18.8145L13.1003 24.0045C13.8803 24.7445 14.5203 25.0745 15.3403 25.0745ZM28.4903 22.8145C29.3003 23.2945 30.2803 23.1045 30.8003 22.3145C32.6303 19.5945 33.6903 16.1345 33.6903 12.5245C33.6903 8.9145 32.6503 5.4245 30.8003 2.7345C30.2803 1.9445 29.3003 1.7545 28.4903 2.2145C27.6003 2.7445 27.4903 3.8245 28.1003 4.7945C29.5003 6.9445 30.3003 9.6845 30.3003 12.5245C30.3003 15.3645 29.4903 18.0845 28.1003 20.2445C27.4903 21.2145 27.6003 22.2945 28.4903 22.8145ZM22.3403 19.0145C23.1103 19.4945 24.0803 19.3145 24.5803 18.6045C25.7703 16.9845 26.4703 14.8045 26.4703 12.5245C26.4703 10.2445 25.7703 8.0645 24.5803 6.4245C24.0803 5.7245 23.1103 5.5345 22.3403 6.0245C21.4903 6.5645 21.3003 7.5845 22.0003 8.7045C22.7003 9.7445 23.0603 11.1045 23.0603 12.5245C23.0603 13.9345 22.6803 15.2845 22.0003 16.3345C21.3003 17.4745 21.4903 18.4845 22.3403 19.0145Z',
+      viewBox: { width: 33.6875, height: 25.07421875 },
+    },
+    heavy: {
+      name: 'speaker.wave.2.fill',
+      path: 'M15.6673 25.5706C17.0773 25.5706 18.1473 24.5006 18.1473 23.1006V2.4906C18.1473 1.0906 17.0773 0.0006 15.6673 0.0006C14.7973 0.0006 14.1073 0.3406 13.1973 1.1906L7.8073 6.1806C7.7373 6.2306 7.6573 6.2706 7.5773 6.2706H3.8273C1.3573 6.2706 -0.0027 7.7006 -0.0027 10.2706V15.3106C-0.0027 17.8806 1.3573 19.3006 3.8273 19.3006H7.5573C7.6573 19.3006 7.7273 19.3206 7.7973 19.3706L13.1973 24.4006C14.0573 25.2106 14.7473 25.5706 15.6673 25.5706ZM29.6973 23.5606C30.6673 24.1006 31.8373 23.8706 32.4473 22.9106C34.3173 20.0406 35.3673 16.5006 35.3673 12.7706C35.3673 9.0406 34.3273 5.4806 32.4473 2.6106C31.8373 1.6706 30.6673 1.4306 29.6973 1.9806C28.5973 2.6006 28.4773 3.9106 29.2073 5.1006C30.5473 7.2906 31.3273 9.9506 31.3273 12.7706C31.3273 15.5706 30.5473 18.2506 29.2073 20.4306C28.4773 21.6106 28.5973 22.9306 29.6973 23.5606ZM22.9673 19.6206C23.8973 20.1906 25.0473 19.9606 25.6173 19.1506C26.8773 17.4006 27.6173 15.1506 27.6173 12.7706C27.6173 10.3806 26.8773 8.1306 25.6173 6.3706C25.0473 5.5806 23.8973 5.3506 22.9673 5.9206C21.9573 6.5306 21.7073 7.7406 22.5573 9.1506C23.1873 10.1706 23.5473 11.4406 23.5473 12.7706C23.5473 14.1006 23.1873 15.3506 22.5573 16.3806C21.7273 17.8006 21.9573 19.0006 22.9673 19.6206Z',
+      viewBox: { width: 35.369140625, height: 25.56640625 },
+    },
+  },
 } as const;

src/entries/popup/components/Menu/MenuItem.tsx

@@ -181,7 +181,7 @@ const MenuItem = ({
           borderBottomRightRadius: 15,
           borderBottomLeftRadius: 15,
         }),
-        minHeight: 50,
+        height: 50,
       }}
       tabIndex={tabIndex}
     >

src/entries/popup/components/SeedVerifyQuiz/SeedVerifyQuiz.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Address } from 'wagmi';
 
-import CorrectSeedQuiz from 'static/assets/audio/correct_seed_quiz.mp3';
-import IncorrectSeedQuiz from 'static/assets/audio/incorrect_seed_quiz.mp3';
 import { i18n } from '~/core/languages';
 import { useWalletBackupsStore } from '~/core/state/walletBackups';
 import {
@@ -19,6 +17,7 @@ import { Lens } from '~/design-system/components/Lens/Lens';
 import { globalColors } from '~/design-system/styles/designTokens';
 
 import { getImportWalletSecrets } from '../../handlers/importWalletSecrets';
+import playSound from '../../utils/playSound';
 
 const shuffleArray = (array: { word: string; index: number }[]) => {
   const arrayCopy = [...array];
@@ -184,13 +183,13 @@ export function SeedVerifyQuiz({
             selectedWords[2].index === 11
           ) {
             setValidated(true);
-            new Audio(CorrectSeedQuiz).play();
+            playSound('CorrectSeedQuiz');
             setTimeout(() => {
               setWalletBackedUp({ address });
               onQuizValidated();
             }, 1200);
           } else {
-            new Audio(IncorrectSeedQuiz).play();
+            playSound('IncorrectSeedQuiz');
             setIncorrect(true);
           }
         }, 100);

src/entries/popup/pages/home/MoreMenu.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useAccount, useEnsName } from 'wagmi';
 
-import LockSound from 'static/assets/audio/ui_lock.mp3';
 import { i18n } from '~/core/languages';
 import {
   RAINBOW_FEEDBACK_URL,
@@ -24,6 +23,7 @@ import { ShortcutHint } from '../../components/ShortcutHint/ShortcutHint';
 import * as wallet from '../../handlers/wallet';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
 import { ROUTES } from '../../urls';
+import playSound from '../../utils/playSound';
 
 export const MoreMenu = ({ children }: { children: React.ReactNode }) => {
   const { address } = useAccount();
@@ -56,7 +56,7 @@ export const MoreMenu = ({ children }: { children: React.ReactNode }) => {
           openProfile();
           break;
         case 'lock':
-          new Audio(LockSound).play();
+          playSound('LockSound');
           wallet.lock();
           break;
         case 'qr-code':

src/entries/popup/pages/send/ReviewSheet.tsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 import { Address } from 'wagmi';
 
-import SendSound from 'static/assets/audio/woosh.mp3';
 import { i18n } from '~/core/languages';
 import { ParsedUserAsset } from '~/core/types/assets';
 import { ChainId, ChainNameDisplay } from '~/core/types/chains';
@@ -62,6 +61,7 @@ import { WalletAvatar } from '../../components/WalletAvatar/WalletAvatar';
 import usePrevious from '../../hooks/usePrevious';
 import { useWalletInfo } from '../../hooks/useWalletInfo';
 import { useWallets } from '../../hooks/useWallets';
+import playSound from '../../utils/playSound';
 
 import { ContactAction } from './ContactPrompt';
 
@@ -292,7 +292,7 @@ export const ReviewSheet = ({
       setSending(true);
       try {
         await onSend();
-        new Audio(SendSound).play();
+        playSound('SendSound');
       } catch (e) {
         setSending(false);
       }

src/entries/popup/pages/settings/settings.tsx

@@ -23,6 +23,7 @@ import {
   FeatureFlagTypes,
   useFeatureFlagsStore,
 } from '~/core/state/currentSettings/featureFlags';
+import { useSoundStore } from '~/core/state/sound';
 import { ThemeOption } from '~/core/types/settings';
 import { Box, Inline, Symbol, Text } from '~/design-system';
 import { Lens } from '~/design-system/components/Lens/Lens';
@@ -45,6 +46,7 @@ export function Settings() {
   const { currentCurrency } = useCurrentCurrencyStore();
   const { currentLanguage } = useCurrentLanguageStore();
   const { isDefaultWallet, setIsDefaultWallet } = useIsDefaultWalletStore();
+  const { soundsEnabled, toggleSoundsEnabled } = useSoundStore();
   const { featureFlags, setFeatureFlag } = useFeatureFlagsStore();
 
   const { currentUserSelectedTheme, currentTheme, setCurrentTheme } =
@@ -97,6 +99,11 @@ export function Settings() {
     }
   }, []);
 
+  const toggleSounds = useCallback(
+    () => toggleSoundsEnabled(!soundsEnabled),
+    [soundsEnabled, toggleSoundsEnabled],
+  );
+
   const connectToHardhat = useCallback(() => {
     setConnectedToHardhat(!connectedToHardhat);
   }, [setConnectedToHardhat, connectedToHardhat]);
@@ -214,6 +221,25 @@ export function Settings() {
               <MenuItem.Title text={i18n.t('settings.language.title')} />
             }
           />
+          <MenuItem
+            titleComponent={<MenuItem.Title text={i18n.t('settings.sounds')} />}
+            leftComponent={
+              <Symbol
+                symbol="speaker.wave.2.fill"
+                weight="medium"
+                size={18}
+                color="labelTertiary"
+              />
+            }
+            rightComponent={
+              <Toggle
+                checked={soundsEnabled}
+                handleChange={toggleSounds}
+                tabIndex={-1}
+              />
+            }
+            onToggle={toggleSounds}
+          />
           <Lens
             style={{
               borderRadius: 6,
@@ -392,7 +418,6 @@ export function Settings() {
             <MenuItem.Description text="Feature Flags" />
             {Object.keys(featureFlags).map((key, i) => (
               <MenuItem
-                last={Object.keys(featureFlags).length - 1 === i}
                 key={i}
                 titleComponent={
                   <MenuItem.Title
@@ -416,6 +441,7 @@ export function Settings() {
               titleComponent={<MenuItem.Title text="Generate FCM Token" />}
               onClick={generateFCMToken}
               testId="generate-fcm-token"
+              last
             />
           </Menu>
         )}

src/entries/popup/pages/swap/SwapReviewSheet/SwapReviewSheet.tsx

@@ -9,7 +9,6 @@ import React, {
 } from 'react';
 import { Address } from 'wagmi';
 
-import SendSound from 'static/assets/audio/woosh.mp3';
 import { analytics } from '~/analytics';
 import { event } from '~/analytics/event';
 import { i18n } from '~/core/languages';
@@ -56,6 +55,7 @@ import { getNetworkNativeAssetUniqueId } from '~/entries/popup/hooks/useNativeAs
 import { useRainbowNavigate } from '~/entries/popup/hooks/useRainbowNavigate';
 import { useUserAsset } from '~/entries/popup/hooks/useUserAsset';
 import { ROUTES } from '~/entries/popup/urls';
+import playSound from '~/entries/popup/utils/playSound';
 import { zIndexes } from '~/entries/popup/utils/zIndexes';
 import { RainbowError, logger } from '~/logger';
 
@@ -367,7 +367,7 @@ const SwapReviewSheetWithQuote = ({
     }
     resetSwapValues();
     executeSwap();
-    new Audio(SendSound).play();
+    playSound('SendSound');
   }, [
     enoughNativeAssetBalanceForGas,
     executeSwap,

src/entries/popup/pages/unlock/index.tsx

@@ -1,6 +1,5 @@
 import React, { SetStateAction, useCallback, useState } from 'react';
 
-import UnlockSound from 'static/assets/audio/ui_unlock.mp3';
 import { i18n } from '~/core/languages';
 import { Box, Button, Inline, Separator, Symbol, Text } from '~/design-system';
 import { accentColorAsHsl } from '~/design-system/styles/core.css';
@@ -12,6 +11,7 @@ import { Spinner } from '../../components/Spinner/Spinner';
 import * as wallet from '../../handlers/wallet';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
 import { ROUTES } from '../../urls';
+import playSound from '../../utils/playSound';
 import { AvatarSection } from '../home/Header';
 
 export function Unlock() {
@@ -37,7 +37,7 @@ export function Unlock() {
     setLoading(true);
     try {
       if (await wallet.unlock(password)) {
-        new Audio(UnlockSound).play();
+        playSound('UnlockSound');
         navigate(ROUTES.HOME);
       } else {
         setError(i18n.t('passwords.wrong_password'));

src/entries/popup/utils/playSound.ts

@@ -0,0 +1,21 @@
+import CorrectSeedQuiz from 'static/assets/audio/correct_seed_quiz.mp3';
+import IncorrectSeedQuiz from 'static/assets/audio/incorrect_seed_quiz.mp3';
+import LockSound from 'static/assets/audio/ui_lock.mp3';
+import UnlockSound from 'static/assets/audio/ui_unlock.mp3';
+import SendSound from 'static/assets/audio/woosh.mp3';
+import { soundStore } from '~/core/state/sound';
+
+const SOUNDS = {
+  CorrectSeedQuiz,
+  IncorrectSeedQuiz,
+  LockSound,
+  SendSound,
+  UnlockSound,
+};
+
+export default function playSound(sound: keyof typeof SOUNDS) {
+  const { soundsEnabled } = soundStore.getState();
+  if (soundsEnabled) {
+    new Audio(SOUNDS[sound]).play();
+  }
+}

static/json/languages/en_US.json

@@ -66,6 +66,7 @@
   "settings": {
     "title": "Settings",
     "use_rainbow_as_default_wallet": "Use Rainbow as default wallet",
+    "sounds": "Sounds",
     "default_wallet_description": "Allow Apps to prioritize Rainbow when looking for an extension to connect with.",
     "contacts": "Contacts",
     "guides_and_support": "Guides & Support",