diff --git a/src/custom/state/claim/middleware.ts b/src/custom/state/claim/middleware.ts index f49acfc99..9951e5fba 100644 --- a/src/custom/state/claim/middleware.ts +++ b/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, 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 } diff --git a/src/custom/state/orders/middleware.ts b/src/custom/state/orders/middleware.ts index 971b636fa..b612cbb87 100644 --- a/src/custom/state/orders/middleware.ts +++ b/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 - -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 = {} +import { getCowSoundError, getCowSoundSend, getCowSoundSuccess } from 'utils/sound' // action syntactic sugar const isSingleOrderChangeAction = isAnyOf( @@ -173,30 +163,6 @@ export const popupMiddleware: Middleware, 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') } diff --git a/src/custom/utils/sound.ts b/src/custom/utils/sound.ts new file mode 100644 index 000000000..58c6445d4 --- /dev/null +++ b/src/custom/utils/sound.ts @@ -0,0 +1,34 @@ +type SoundType = 'SEND' | 'SUCCESS' | 'ERROR' +type Sounds = Record + +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 = {} + +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') +}