2022-11-24 18:39:14 -08:00
|
|
|
import Switch from '@components/forms/Switch'
|
|
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { SOUND_SETTINGS_KEY } from 'utils/constants'
|
|
|
|
|
|
|
|
export const INITIAL_SOUND_SETTINGS = {
|
2022-11-27 15:07:45 -08:00
|
|
|
'recent-trades': false,
|
2022-11-24 18:39:14 -08:00
|
|
|
'swap-success': false,
|
|
|
|
'transaction-success': false,
|
|
|
|
'transaction-fail': false,
|
|
|
|
}
|
|
|
|
|
|
|
|
const SoundSettings = () => {
|
|
|
|
const { t } = useTranslation(['common', 'settings'])
|
|
|
|
const [soundSettings, setSoundSettings] = useLocalStorageState(
|
|
|
|
SOUND_SETTINGS_KEY,
|
2023-07-21 11:47:53 -07:00
|
|
|
INITIAL_SOUND_SETTINGS,
|
2022-11-24 18:39:14 -08:00
|
|
|
)
|
|
|
|
|
|
|
|
const handleToggleSoundSetting = (settingName: string) => {
|
|
|
|
if (settingName === 'all') {
|
|
|
|
const toggle = !Object.values(soundSettings).includes(false)
|
|
|
|
Object.keys(soundSettings).forEach((key) => {
|
|
|
|
soundSettings[key] = !toggle
|
|
|
|
})
|
|
|
|
setSoundSettings(soundSettings)
|
|
|
|
} else {
|
|
|
|
setSoundSettings({
|
|
|
|
...soundSettings,
|
|
|
|
[settingName]: !soundSettings[settingName],
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-09-04 21:43:26 -07:00
|
|
|
<div className="border-b border-th-bkg-3 pt-6">
|
2022-12-05 14:33:36 -08:00
|
|
|
<div className="mb-4 flex items-center justify-between">
|
2023-09-04 21:43:26 -07:00
|
|
|
<h3 className="text-sm font-normal text-th-fgd-1">
|
|
|
|
{t('settings:sounds')}
|
|
|
|
</h3>
|
2022-11-24 18:39:14 -08:00
|
|
|
<Switch
|
|
|
|
checked={!Object.values(soundSettings).includes(false)}
|
|
|
|
onChange={() => handleToggleSoundSetting('all')}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-01-17 21:06:00 -08:00
|
|
|
{/* <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
|
2022-12-05 14:33:36 -08:00
|
|
|
<p>{t('settings:recent-trades')}</p>
|
2022-11-27 15:07:45 -08:00
|
|
|
<Switch
|
|
|
|
checked={soundSettings['recent-trades']}
|
|
|
|
onChange={() => handleToggleSoundSetting('recent-trades')}
|
|
|
|
/>
|
2023-01-17 21:06:00 -08:00
|
|
|
</div> */}
|
2022-12-05 14:33:36 -08:00
|
|
|
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
|
|
|
|
<p>{t('settings:swap-success')}</p>
|
2022-11-27 15:07:45 -08:00
|
|
|
<Switch
|
|
|
|
checked={soundSettings['swap-success']}
|
|
|
|
onChange={() => handleToggleSoundSetting('swap-success')}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-12-05 14:33:36 -08:00
|
|
|
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
|
|
|
|
<p>{t('settings:transaction-success')}</p>
|
2022-11-24 18:39:14 -08:00
|
|
|
<Switch
|
|
|
|
checked={soundSettings['transaction-success']}
|
|
|
|
onChange={() => handleToggleSoundSetting('transaction-success')}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-12-05 14:33:36 -08:00
|
|
|
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
|
|
|
|
<p>{t('settings:transaction-fail')}</p>
|
2022-11-24 18:39:14 -08:00
|
|
|
<Switch
|
|
|
|
checked={soundSettings['transaction-fail']}
|
|
|
|
onChange={() => handleToggleSoundSetting('transaction-fail')}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-09-04 21:43:26 -07:00
|
|
|
</div>
|
2022-11-24 18:39:14 -08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SoundSettings
|