Add moo sounds (#2259)

src/custom/state/claim/middleware.ts

@@ -1,23 +1,41 @@
 import { Middleware, isAnyOf } from '@reduxjs/toolkit'
+import { getCowSoundSuccess, getCowSoundSend } from 'utils/sound'
 import { AppState } from 'state'
-import { finalizeTransaction } from '../enhancedTransactions/actions'
+import { finalizeTransaction, addTransaction } from '../enhancedTransactions/actions'
 import { setClaimStatus, ClaimStatus } from './actions'
 
 const isFinalizeTransaction = isAnyOf(finalizeTransaction)
+const isAddTransaction = isAnyOf(addTransaction)
 
 // Watch for claim tx being finalized and triggers a change of status
 export const claimMinedMiddleware: Middleware<Record<string, unknown>, AppState> = (store) => (next) => (action) => {
   const result = next(action)
 
-  if (isFinalizeTransaction(action)) {
+  let cowSound
+  if (isAddTransaction(action)) {
+    const { chainId, hash } = action.payload
+    const transaction = store.getState().transactions[chainId][hash]
+
+    if (transaction.claim) {
+      console.debug('[stat:claim:middleware] Claim transaction sent', transaction.hash, transaction.claim)
+      cowSound = getCowSoundSend()
+    }
+  } else if (isFinalizeTransaction(action)) {
     const { chainId, hash } = action.payload
     const transaction = store.getState().transactions[chainId][hash]
 
     if (transaction.claim) {
       console.debug('[stat:claim:middleware] Claim transaction finalized', transaction.hash, transaction.claim)
       store.dispatch(setClaimStatus(ClaimStatus.CONFIRMED))
+      cowSound = getCowSoundSuccess()
     }
   }
 
+  if (cowSound) {
+    cowSound.play().catch((e) => {
+      console.error('🐮 [Claiming] Moooooo cannot be played', e)
+    })
+  }
+
   return result
 }

src/custom/state/orders/middleware.ts

@@ -6,17 +6,7 @@ import * as OrderActions from './actions'
 
 import { OrderIDWithPopup, OrderTxTypes, PopupPayload, buildCancellationPopupSummary, setPopupData } from './helpers'
 import { registerOnWindow } from 'utils/misc'
-
-type SoundType = 'SEND' | 'SUCCESS' | 'ERROR'
-type Sounds = Record<SoundType, string>
-
-const COW_SOUNDS: Sounds = {
-  SEND: '/audio/mooooo-send__lower-90.mp3',
-  SUCCESS: '/audio/mooooo-success__ben__lower-90.mp3',
-  ERROR: '/audio/mooooo-error__lower-90.mp3',
-}
-
-const SOUND_CACHE: Record<string, HTMLAudioElement | undefined> = {}
+import { getCowSoundError, getCowSoundSend, getCowSoundSuccess } from 'utils/sound'
 
 // action syntactic sugar
 const isSingleOrderChangeAction = isAnyOf(
@@ -173,30 +163,6 @@ export const popupMiddleware: Middleware<Record<string, unknown>, AppState> = (s
   return result
 }
 
-function getAudio(type: SoundType): HTMLAudioElement {
-  const soundPath = COW_SOUNDS[type]
-  let sound = SOUND_CACHE[soundPath]
-
-  if (!sound) {
-    sound = new Audio(soundPath)
-    SOUND_CACHE[soundPath] = sound
-  }
-
-  return sound
-}
-
-function getCowSoundSend(): HTMLAudioElement {
-  return getAudio('SEND')
-}
-
-function getCowSoundSuccess(): HTMLAudioElement {
-  return getAudio('SUCCESS')
-}
-
-function getCowSoundError(): HTMLAudioElement {
-  return getAudio('ERROR')
-}
-
 function removeLightningEffect() {
   document.body.classList.remove('lightning')
 }

src/custom/utils/sound.ts

@@ -0,0 +1,34 @@
+type SoundType = 'SEND' | 'SUCCESS' | 'ERROR'
+type Sounds = Record<SoundType, string>
+
+const COW_SOUNDS: Sounds = {
+  SEND: '/audio/mooooo-send__lower-90.mp3',
+  SUCCESS: '/audio/mooooo-success__ben__lower-90.mp3',
+  ERROR: '/audio/mooooo-error__lower-90.mp3',
+}
+
+const SOUND_CACHE: Record<string, HTMLAudioElement | undefined> = {}
+
+function getAudio(type: SoundType): HTMLAudioElement {
+  const soundPath = COW_SOUNDS[type]
+  let sound = SOUND_CACHE[soundPath]
+
+  if (!sound) {
+    sound = new Audio(soundPath)
+    SOUND_CACHE[soundPath] = sound
+  }
+
+  return sound
+}
+
+export function getCowSoundSend(): HTMLAudioElement {
+  return getAudio('SEND')
+}
+
+export function getCowSoundSuccess(): HTMLAudioElement {
+  return getAudio('SUCCESS')
+}
+
+export function getCowSoundError(): HTMLAudioElement {
+  return getAudio('ERROR')
+}