127 lines
4.2 KiB
TypeScript
127 lines
4.2 KiB
TypeScript
import { ModalProps } from '../../types/modal'
|
|
import Modal from '../shared/Modal'
|
|
import Button, { LinkButton } from '../shared/Button'
|
|
import { useTranslation } from 'next-i18next'
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
import { SOUND_SETTINGS_KEY, TRADE_VOLUME_ALERT_KEY } from 'utils/constants'
|
|
import Label from '@components/forms/Label'
|
|
import { useState } from 'react'
|
|
import Switch from '@components/forms/Switch'
|
|
import { INITIAL_SOUND_SETTINGS } from '@components/settings/SoundSettings'
|
|
import NumberFormat, { NumberFormatValues } from 'react-number-format'
|
|
import { Howl } from 'howler'
|
|
import { PlayIcon } from '@heroicons/react/20/solid'
|
|
|
|
const volumeAlertSound = new Howl({
|
|
src: ['/sounds/trade-buy.mp3'],
|
|
volume: 0.8,
|
|
})
|
|
|
|
export const DEFAULT_VOLUME_ALERT_SETTINGS = { seconds: 30, value: 10000 }
|
|
|
|
export const INPUT_CLASSES =
|
|
'h-12 w-full rounded-md border border-th-input-border bg-th-input-bkg px-3 font-mono text-base text-th-fgd-1 focus:border-th-fgd-4 focus:outline-none md:hover:border-th-input-border-hover'
|
|
|
|
const TradeVolumeAlertModal = ({ isOpen, onClose }: ModalProps) => {
|
|
const { t } = useTranslation(['common', 'trade'])
|
|
const [soundSettings, setSoundSettings] = useLocalStorageState(
|
|
SOUND_SETTINGS_KEY,
|
|
INITIAL_SOUND_SETTINGS,
|
|
)
|
|
const [alertSettings, setAlertSettings] = useLocalStorageState(
|
|
TRADE_VOLUME_ALERT_KEY,
|
|
DEFAULT_VOLUME_ALERT_SETTINGS,
|
|
)
|
|
const [formValues, setFormValues] = useState(alertSettings)
|
|
|
|
const handleSave = () => {
|
|
setAlertSettings(formValues)
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
<h2 className="mb-2 text-center">{t('trade:volume-alert')}</h2>
|
|
<p className="mb-2 text-center">
|
|
{t('trade:volume-alert-desc')}.{' '}
|
|
<i>Warning: this is an experimental feature.</i>
|
|
</p>
|
|
<LinkButton
|
|
className="mb-4 flex w-full items-center justify-center"
|
|
onClick={() => volumeAlertSound.play()}
|
|
>
|
|
<PlayIcon className="mr-1.5 h-4 w-4" />
|
|
<span>{t('trade:preview-sound')}</span>
|
|
</LinkButton>
|
|
<div className="flex items-center justify-between rounded-md bg-th-bkg-3 p-3">
|
|
<p>{t('trade:activate-volume-alert')}</p>
|
|
<Switch
|
|
className="text-th-fgd-3"
|
|
checked={soundSettings['recent-trades']}
|
|
onChange={() =>
|
|
setSoundSettings({
|
|
...soundSettings,
|
|
'recent-trades': !soundSettings['recent-trades'],
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
{soundSettings['recent-trades'] ? (
|
|
<>
|
|
<div className="my-4">
|
|
<Label text={t('trade:interval-seconds')} />
|
|
<NumberFormat
|
|
name="seconds"
|
|
id="seconds"
|
|
inputMode="numeric"
|
|
thousandSeparator=","
|
|
allowNegative={false}
|
|
decimalScale={0}
|
|
isNumericString={true}
|
|
className={INPUT_CLASSES}
|
|
placeholder="e.g. 30"
|
|
value={formValues.seconds}
|
|
onValueChange={(e: NumberFormatValues) =>
|
|
setFormValues({
|
|
...formValues,
|
|
seconds: e.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="mb-6">
|
|
<Label text={t('trade:notional-volume')} />
|
|
<NumberFormat
|
|
name="value"
|
|
id="value"
|
|
inputMode="numeric"
|
|
thousandSeparator=","
|
|
allowNegative={false}
|
|
isNumericString={true}
|
|
className={INPUT_CLASSES}
|
|
placeholder="e.g. 10,000"
|
|
value={formValues.value}
|
|
onValueChange={(e: NumberFormatValues) =>
|
|
setFormValues({
|
|
...formValues,
|
|
value: e.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
disabled={!formValues.seconds || !formValues.value}
|
|
onClick={handleSave}
|
|
size="large"
|
|
>
|
|
{t('save')}
|
|
</Button>
|
|
</>
|
|
) : null}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default TradeVolumeAlertModal
|