blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix recent trade sounds

This commit is contained in:
saml33 2022-11-29 13:01:31 +11:00
parent 82abfaf555
commit 95a833fa02
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/trade/RecentTrades.tsx
View File

@ -1,13 +1,12 @@
import useInterval from '@components/shared/useInterval' import useInterval from '@components/shared/useInterval'
import mangoStore from '@store/mangoStore' import mangoStore from '@store/mangoStore'
import { useEffect, useMemo } from 'react' import { useEffect, useMemo, useRef } from 'react'
// import isEqual from 'lodash/isEqual' // import isEqual from 'lodash/isEqual'
import { floorToDecimal, getDecimalCount } from 'utils/numbers' import { floorToDecimal, getDecimalCount } from 'utils/numbers'
import Decimal from 'decimal.js' import Decimal from 'decimal.js'
import { ChartTradeType } from 'types' import { ChartTradeType } from 'types'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import useSelectedMarket from 'hooks/useSelectedMarket' import useSelectedMarket from 'hooks/useSelectedMarket'
import usePrevious from '@components/shared/usePrevious'
import { Howl } from 'howler' import { Howl } from 'howler'
import { IconButton } from '@components/shared/Button' import { IconButton } from '@components/shared/Button'
import useLocalStorageState from 'hooks/useLocalStorageState' import useLocalStorageState from 'hooks/useLocalStorageState'
@ -15,6 +14,7 @@ import { SOUND_SETTINGS_KEY } from 'utils/constants'
import { SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/20/solid' import { SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/20/solid'
import Tooltip from '@components/shared/Tooltip' import Tooltip from '@components/shared/Tooltip'
import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings' import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings'
import { isEqual } from 'lodash'
const RecentTrades = () => { const RecentTrades = () => {
// const [trades, setTrades] = useState<any[]>([]) // const [trades, setTrades] = useState<any[]>([])
@ -24,7 +24,9 @@ const RecentTrades = () => {
SOUND_SETTINGS_KEY, SOUND_SETTINGS_KEY,
INITIAL_SOUND_SETTINGS INITIAL_SOUND_SETTINGS
) )
const previousLatestFill = usePrevious(fills[0]) const currentFillsData = useRef<any>(null)
const nextFillsData = useRef<any>(null)
const buySound = new Howl({ const buySound = new Howl({
src: ['/sounds/trade-buy.mp3'], src: ['/sounds/trade-buy.mp3'],
volume: 0.5, volume: 0.5,
@ -46,16 +48,28 @@ const RecentTrades = () => {
// needs more testing // needs more testing
useEffect(() => { useEffect(() => {
if (!fills.length || !previousLatestFill) return if (soundSettings['recent-trades']) {
if ( mangoStore.subscribe(
!fills[0].orderId.eq(previousLatestFill.orderId) && (state) => [state.selectedMarket.fills],
fills[0].openOrdersSlot === previousLatestFill.openOrdersSlot (fills) => (nextFillsData.current = fills[0])
) { )
if (soundSettings['recent-trades']) { }
}, [soundSettings['recent-trades']])
// needs more testing
useInterval(() => {
if (soundSettings['recent-trades']) {
if (fills.length) {
currentFillsData.current = fills
}
if (
nextFillsData?.current &&
!isEqual(currentFillsData.current, nextFillsData.current)
) {
fills[0].side === 'buy' ? buySound.play() : sellSound.play() fills[0].side === 'buy' ? buySound.play() : sellSound.play()
} }
} }
}, [fills, previousLatestFill]) }, 1000)
// const fetchRecentTrades = useCallback(async () => { // const fetchRecentTrades = useCallback(async () => {
// if (!market) return // if (!market) return