add language selector to settings

components/settings/DisplaySettings.tsx

@@ -5,12 +5,12 @@ 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 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 { useCallback } from 'react'
+import { useRouter } from 'next/router'
 import {
   NOTIFICATION_POSITION_KEY,
   SIZE_INPUT_UI_KEY,
@@ -28,17 +28,17 @@ const NOTIFICATION_POSITIONS = [
 const TRADING_CHARTS = ['custom', 'trading-view']
 const TRADE_FORM_UI = ['slider', 'buttons']
 
-// const LANGS = [
+const LANGS = [
-// { locale: 'en', name: 'english', description: 'english' },
+  { locale: 'en', name: 'english', description: 'english' },
   // { locale: 'ru', name: 'russian', description: 'russian' },
   // { locale: 'es', name: 'spanish', description: 'spanish' },
-// {
+  {
-//   locale: 'zh_tw',
+    locale: 'zh_tw',
-//   name: 'chinese-traditional',
+    name: 'chinese-traditional',
-//   description: 'traditional chinese',
+    description: 'traditional chinese',
-// },
+  },
   // { locale: 'zh', name: 'chinese', description: 'simplified chinese' },
-// ]
+]
 
 export const THEMES = [
   'light',
@@ -56,9 +56,12 @@ export const THEMES = [
 const DisplaySettings = () => {
   const { t } = useTranslation(['common', 'settings'])
   const { theme, setTheme } = useTheme()
-  // const [savedLanguage, setSavedLanguage] = useLocalStorageState('language', '')
+  const [savedLanguage, setSavedLanguage] = useLocalStorageState(
-  // const router = useRouter()
+    'language',
-  // const { pathname, asPath, query } = router
+    'en'
+  )
+  const router = useRouter()
+  const { pathname, asPath, query } = router
   const [notificationPosition, setNotificationPosition] = useLocalStorageState(
     NOTIFICATION_POSITION_KEY,
     'bottom-left'
@@ -76,14 +79,14 @@ const DisplaySettings = () => {
     'chartLeft'
   )
 
-  // const handleLangChange = useCallback(
+  const handleLangChange = useCallback(
-  //   (l: string) => {
+    (l: string) => {
-  //     setSavedLanguage(l)
+      setSavedLanguage(l)
-  //     router.push({ pathname, query }, asPath, { locale: l })
+      router.push({ pathname, query }, asPath, { locale: l })
-  //     dayjs.locale(l == 'zh_tw' ? 'zh-tw' : l)
+      dayjs.locale(l == 'zh_tw' ? 'zh-tw' : l)
-  //   },
+    },
-  //   [router]
+    [router, pathname, query, asPath, setSavedLanguage]
-  // )
+  )
 
   return (
     <>
@@ -106,7 +109,7 @@ const DisplaySettings = () => {
           </Select>
         </div>
       </div>
-      {/* <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
+      <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
         <p className="mb-2 md:mb-0">{t('settings:language')}</p>
         <div className="w-full min-w-[330px] md:w-[480px] md:pl-4">
           <ButtonGroup
@@ -116,7 +119,7 @@ const DisplaySettings = () => {
             names={LANGS.map((val) => t(`settings:${val.name}`))}
           />
         </div>
-      </div> */}
+      </div>
       <div className="hidden border-t border-th-bkg-3 py-4 md:flex md:flex-row md:items-center md:justify-between md:px-4">
         <p className="mb-2 md:mb-0">{t('settings:notification-position')}</p>
         <div className="w-full min-w-[140px] md:w-auto">