import ButtonGroup from '@components/forms/ButtonGroup' import Select from '@components/forms/Select' import ChartMiddleOBLeft from '@components/icons/ChartMiddleOBLeft' import ChartMiddleOBRight from '@components/icons/ChartMiddleOBRight' import ChartOnLeft from '@components/icons/ChartOnLeft' import ChartOnRight from '@components/icons/ChartOnRight' import Tooltip from '@components/shared/Tooltip' // import dayjs from 'dayjs' import useLocalStorageState from 'hooks/useLocalStorageState' import { useTranslation } from 'next-i18next' import { useTheme } from 'next-themes' // import { useRouter } from 'next/router' // import { useCallback } from 'react' import { NOTIFICATION_POSITION_KEY, SIZE_INPUT_UI_KEY, TRADE_CHART_UI_KEY, TRADE_LAYOUT_KEY, } from 'utils/constants' const NOTIFICATION_POSITIONS = [ 'bottom-left', 'bottom-right', 'top-left', 'top-right', ] const TRADING_CHARTS = ['custom', 'trading-view'] const TRADE_FORM_UI = ['slider', 'buttons'] // const LANGS = [ // { locale: 'en', name: 'english', description: 'english' }, // { locale: 'ru', name: 'russian', description: 'russian' }, // { locale: 'es', name: 'spanish', description: 'spanish' }, // { // locale: 'zh_tw', // name: 'chinese-traditional', // description: 'traditional chinese', // }, // { locale: 'zh', name: 'chinese', description: 'simplified chinese' }, // ] export const THEMES = [ 'light', 'medium', 'dark', 'high-contrast', 'mango-classic', 'avocado', 'banana', 'blueberry', 'lychee', 'olive', ] const DisplaySettings = () => { const { t } = useTranslation(['common', 'settings']) const { theme, setTheme } = useTheme() // const [savedLanguage, setSavedLanguage] = useLocalStorageState('language', '') // const router = useRouter() // const { pathname, asPath, query } = router const [notificationPosition, setNotificationPosition] = useLocalStorageState( NOTIFICATION_POSITION_KEY, 'bottom-left' ) const [tradeFormUi, setTradeFormUi] = useLocalStorageState( SIZE_INPUT_UI_KEY, 'slider' ) const [tradeChartUi, setTradeChartUi] = useLocalStorageState( TRADE_CHART_UI_KEY, 'trading-view' ) const [tradeLayout, setTradeLayout] = useLocalStorageState( TRADE_LAYOUT_KEY, 'chartLeft' ) // const handleLangChange = useCallback( // (l: string) => { // setSavedLanguage(l) // router.push({ pathname, query }, asPath, { locale: l }) // dayjs.locale(l == 'zh_tw' ? 'zh-tw' : l) // }, // [router] // ) return ( <>

{t('settings:display')}

{t('settings:theme')}

{/*

{t('settings:language')}

handleLangChange(l)} values={LANGS.map((val) => val.locale)} names={LANGS.map((val) => t(`settings:${val.name}`))} />
*/}

{t('settings:notification-position')}

{t('settings:trade-layout')}

{t('settings:swap-trade-size-selector')}

setTradeFormUi(v)} values={TRADE_FORM_UI} names={TRADE_FORM_UI.map((val) => t(`settings:${val}`))} />

{t('settings:trade-chart')}

setTradeChartUi(v)} values={TRADING_CHARTS} names={TRADING_CHARTS.map((val) => t(`settings:${val}`))} />
) } export default DisplaySettings