move howl outside components

components/swap/SwapReviewRouteInfo.tsx

@@ -93,6 +93,11 @@ const EMPTY_COINGECKO_PRICES = {
   outputCoingeckoPrice: 0,
 }
 
+const successSound = new Howl({
+  src: ['/sounds/swap-success.mp3'],
+  volume: 0.5,
+})
+
 const SwapReviewRouteInfo = ({
   amountIn,
   onClose,
@@ -109,10 +114,6 @@ const SwapReviewRouteInfo = ({
   const { mangoTokens } = useJupiterMints()
   const { inputTokenInfo, outputTokenInfo } = useJupiterSwapData()
   const inputBank = mangoStore((s) => s.swap.inputBank)
-  const successSound = new Howl({
-    src: ['/sounds/swap-success.mp3'],
-    volume: 0.5,
-  })
   const [soundSettings] = useLocalStorageState(
     SOUND_SETTINGS_KEY,
     INITIAL_SOUND_SETTINGS

components/trade/AdvancedTradeForm.tsx

@@ -363,7 +363,7 @@ const AdvancedTradeForm = () => {
             <div className="mb-2 mt-4 flex items-center justify-between">
               <p className="text-xs text-th-fgd-3">{t('trade:limit-price')}</p>
             </div>
-            <div className="default-transition md:hover:border-input-border-hover flex items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 text-xs font-bold text-th-fgd-1 lg:text-base">
+            <div className="default-transition flex items-center rounded-md border border-th-input-border bg-th-input-bkg p-2 text-xs font-bold text-th-fgd-1 md:hover:border-th-input-border-hover lg:text-base">
               {quoteLogoURI ? (
                 <Image
                   className="rounded-full"

components/trade/RecentTrades.tsx

@@ -15,6 +15,15 @@ import { SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings'
 
+const buySound = new Howl({
+  src: ['/sounds/trade-buy.mp3'],
+  volume: 0.5,
+})
+const sellSound = new Howl({
+  src: ['/sounds/trade-sell.mp3'],
+  volume: 0.5,
+})
+
 const RecentTrades = () => {
   // const [trades, setTrades] = useState<any[]>([])
   const { t } = useTranslation(['common', 'trade'])
@@ -26,15 +35,6 @@ const RecentTrades = () => {
   const currentFillsData = useRef<any>([])
   const nextFillsData = useRef<any>([])
 
-  const buySound = new Howl({
-    src: ['/sounds/trade-buy.mp3'],
-    volume: 0.5,
-  })
-  const sellSound = new Howl({
-    src: ['/sounds/trade-sell.mp3'],
-    volume: 0.5,
-  })
-
   const { selectedMarket, serumOrPerpMarket: market } = useSelectedMarket()
 
   const baseSymbol = useMemo(() => {

utils/notifications.ts

@@ -12,11 +12,14 @@ export type Notification = {
   id: number
 }
 
-interface ReducerItems {
-  [key: string]: {
-    active: boolean
-  }
-}
+const successSound = new Howl({
+  src: ['/sounds/transaction-success.mp3'],
+  volume: 0.5,
+})
+const failSound = new Howl({
+  src: ['/sounds/transaction-fail.mp3'],
+  volume: 0.5,
+})
 
 export function notify(newNotification: {
   type?: 'success' | 'info' | 'error' | 'confirm'
@@ -29,14 +32,6 @@ export function notify(newNotification: {
   const notifications = mangoStore.getState().notifications
   const lastId = mangoStore.getState().notificationIdCounter
   const newId = lastId + 1
-  const successSound = new Howl({
-    src: ['/sounds/transaction-success.mp3'],
-    volume: 0.5,
-  })
-  const failSound = new Howl({
-    src: ['/sounds/transaction-fail.mp3'],
-    volume: 0.5,
-  })
   const savedSoundSettings = localStorage.getItem(SOUND_SETTINGS_KEY)
   const soundSettings = savedSoundSettings
     ? JSON.parse(savedSoundSettings)