refactor: use hook to utilize i18n (#116)

* refactor: use hook to utilize i18n

* refactor: remove unnecessary state

* chore: add useToggleLanguage and useCurrentLanguage

* chore: fix lint

* chore: fix toggle language logic

* chore: enbale parseDate test case

* refactor: use dayjs relative time plugin to calculate time range

* Revert "refactor: use dayjs relative time plugin to calculate time range"

This reverts commit d3cba4c.

* chore: change to the comments

* chore: add blank line at EOF

* chore: nft holder list

* chore: change to comments

* chore: remove lint script

* chore: change to the comments

* chore: fix after merge

* chore: fix toggle lng logic

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   extends: ['airbnb', 'plugin:prettier/recommended'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'react-hooks'],
+  plugins: ['@typescript-eslint', 'react-hooks', 'unused-imports'],
   globals: {
     State: 'true',
     CustomRouter: 'true',
@@ -32,16 +32,10 @@ module.exports = {
       },
     ],
     'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': 'error',
     'no-undef': 'off',
     'implicit-arrow-linebreak': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        vars: 'local',
-        args: 'after-used',
-        ignoreRestSiblings: false,
-      },
-    ],
     'operator-linebreak': [0, 'none'],
     'arrow-parens': [2, 'as-needed'],
     'max-len': [

package.json

@@ -56,11 +56,12 @@
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",

src/__tests__/utils/date.test.ts

@@ -11,7 +11,6 @@ import {
   parseSimpleDate,
   parseSimpleDateNoSecond,
   getCurrentYear,
-  parseDate,
   getCSTTime,
 } from '../../utils/date'
 
@@ -83,16 +82,6 @@ describe('Date methods tests', () => {
     expect(getCurrentYear()).toBe(2020)
   })
 
-  it('parseDate', async () => {
-    MockDate.set(1588694400000, 480)
-    expect(parseDate(1588694380000)).toBe('20s ago')
-    expect(parseDate(1588691000000)).toBe('56min 40s ago')
-
-    MockDate.reset()
-    timezoneMock.register('UTC')
-    expect(parseDate(1588651000000)).toBe('2020/05/05 03:56:40')
-  })
-
   it('getCSTTime', async () => {
     timezoneMock.register('UTC')
     expect(parseSimpleDate(1588651000000)).toBe('2020/05/05 03:56:40')

src/assets/fonts/fonts.css

@@ -6,6 +6,6 @@
 }
 
 @font-face {
-  font-family:'digital-clock-font';
+  font-family:digital-clock-font;
   src: url('./digital-7.ttf');
 }

src/components/Banner/HalvingBanner.tsx

@@ -1,4 +1,5 @@
 import classnames from 'classnames'
+import { useTranslation } from 'react-i18next'
 import styles from './index.module.scss'
 import halvingBanner from '../../assets/halving_banner.png'
 import halvingBannerSuccess from '../../assets/halving_banner_success.png'
@@ -8,7 +9,6 @@ import LoadingWhiteImage from '../../assets/loading_white.gif'
 import halvingSuccessAni from '../../assets/halving_success_ani.gif'
 import SimpleButton from '../SimpleButton'
 import { useCountdown, useHalving, useIsMobile } from '../../utils/hook'
-import i18n from '../../utils/i18n'
 
 function numberToOrdinal(number: number) {
   switch (number) {
@@ -36,36 +36,37 @@ export const HalvingBanner = () => {
   const { estimatedDate, halvingCount, inCelebration, isLoading } = useHalving()
   const [days, hours, minutes, seconds, expired] = useCountdown(estimatedDate)
   const isMobile = useIsMobile()
+  const { t } = useTranslation()
 
   const shortCountdown = () => {
     if (isLoading || Number.isNaN(seconds)) {
       return <img className={styles.halvingLoading} src={LoadingWhiteImage} alt="loading" />
     }
     if (days > 0) {
-      return `${days}${i18n.t('symbol.char_space')}${i18n.t('unit.days')}`
+      return `${days}${t('symbol.char_space')}${t('unit.days')}`
     }
     if (hours > 0) {
-      return `${hours}${i18n.t('symbol.char_space')}${i18n.t('unit.hours')}`
+      return `${hours}${t('symbol.char_space')}${t('unit.hours')}`
     }
     if (minutes > 0) {
-      return `${minutes}${i18n.t('symbol.char_space')}${i18n.t('unit.minutes')}`
+      return `${minutes}${t('symbol.char_space')}${t('unit.minutes')}`
     }
 
-    return `${seconds}${i18n.t('symbol.char_space')}${i18n.t('unit.seconds')}`
+    return `${seconds}${t('symbol.char_space')}${t('unit.seconds')}`
   }
 
   const learnMoreText = () => {
     if (inCelebration) {
-      return i18n.t('halving.learn_more')
+      return t('halving.learn_more')
     }
 
     if (expired) {
-      return i18n.t('halving.comming_soon')
+      return t('halving.comming_soon')
     }
 
     return (
       <>
-        {i18n.t('halving.halving_countdown')} {shortCountdown()}
+        {t('halving.halving_countdown')} {shortCountdown()}
       </>
     )
   }
@@ -94,15 +95,13 @@ export const HalvingBanner = () => {
           {inCelebration && <img className={styles.halvingBannerAnimation} src={halvingSuccessAni} alt="animation" />}
           {inCelebration ? (
             <div className={classnames(styles.halvingBannerText, styles.success)}>
-              {i18n
-                .t('halving.banner_congratulation', {
-                  times: i18n.t(`ordinal.${numberToOrdinal(halvingCount)}`),
-                })
-                .toUpperCase()}
+              {t('halving.banner_congratulation', {
+                times: t(`ordinal.${numberToOrdinal(halvingCount)}`),
+              }).toUpperCase()}
             </div>
           ) : (
             <div className={classnames(styles.halvingBannerText, styles.linear)}>
-              Nervos CKB Layer 1 {i18n.t('halving.halving')}
+              Nervos CKB Layer 1 {t('halving.halving')}
             </div>
           )}
           <a href="/halving">

src/components/Card/HashCard/index.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
 import CopyIcon from '../../../assets/copy.png'
-import i18n from '../../../utils/i18n'
 import { explorerService } from '../../../services/ExplorerService'
 import { copyElementValue } from '../../../utils/util'
 import SmallLoading from '../../Loading/SmallLoading'
@@ -50,8 +50,9 @@ export default ({
 }) => {
   const isMobile = useIsMobile()
   const setToast = useSetToast()
+  const { t } = useTranslation()
 
-  const isTx = i18n.t('transaction.transaction') === title
+  const isTx = t('transaction.transaction') === title
   const newAddr = useNewAddr(hash)
   const deprecatedAddr = useDeprecatedAddr(hash)
   const counterpartAddr = newAddr === hash ? deprecatedAddr : newAddr
@@ -104,15 +105,15 @@ export default ({
               className="hashCopyIcon"
               onClick={() => {
                 copyElementValue(document.getElementById('hashValue'))
-                setToast({ message: i18n.t('common.copied') })
+                setToast({ message: t('common.copied') })
               }}
             >
               {!loading && <img src={CopyIcon} alt="copy" />}
             </SimpleButton>
             {counterpartAddr ? (
               <Tooltip
                 placement="top"
-                title={i18n.t(`address.${newAddr === hash ? 'visit-deprecated-address' : 'view-new-address'}`)}
+                title={t(`address.${newAddr === hash ? 'visit-deprecated-address' : 'view-new-address'}`)}
               >
                 <a
                   href={`${window.location.href.split('/address/')[0]}/address/${counterpartAddr}`}
@@ -125,7 +126,7 @@ export default ({
               </Tooltip>
             ) : null}
             {isTx ? (
-              <Tooltip placement="top" title={i18n.t(`transaction.export-transaction`)}>
+              <Tooltip placement="top" title={t(`transaction.export-transaction`)}>
                 <button className={styles.exportTx} onClick={handleExportTxClick} type="button">
                   <DownloadIcon />
                 </button>
@@ -139,9 +140,9 @@ export default ({
         </div>
 
         {specialAddress && (
-          <Tooltip title={i18n.t('address.vesting_tooltip')} placement={isMobile ? 'bottomRight' : 'bottom'}>
+          <Tooltip title={t('address.vesting_tooltip')} placement={isMobile ? 'bottomRight' : 'bottom'}>
             <Link to={`/address/${specialAddress}`} className="hashVesting">
-              {i18n.t('address.vesting')}
+              {t('address.vesting')}
             </Link>
           </Tooltip>
         )}

src/components/DecimalCapacity/index.tsx

@@ -1,4 +1,4 @@
-import i18n from '../../utils/i18n'
+import { useTranslation } from 'react-i18next'
 import { DecimalPanel, DecimalPartPanel, DecimalZerosPanel } from './styled'
 
 export default ({
@@ -16,6 +16,7 @@ export default ({
   hideZero?: boolean
   marginBottom?: string
 }) => {
+  const { t } = useTranslation()
   const integer = value.split('.')[0] || '0'
   let decimal = value.split('.')[1] || ''
   let zeros = ''
@@ -41,7 +42,7 @@ export default ({
           {zeros}
         </DecimalZerosPanel>
       )}
-      {!hideUnit && <div className="decimalUnit monospace">{i18n.t('common.ckb_unit')}</div>}
+      {!hideUnit && <div className="decimalUnit monospace">{t('common.ckb_unit')}</div>}
     </DecimalPanel>
   )
 }

src/components/Dropdown/Language/index.tsx

@@ -1,30 +1,24 @@
-import i18n, { currentLanguage, changeLanguage } from '../../../utils/i18n'
+import { useLanguageText, useOtherLanguageText, useToggleLanguage } from '../../../utils/i18n'
 import { LanguagePanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 
-export const languageText = (lan: 'en' | 'zh' | null, reverse?: boolean) => {
-  if (reverse) {
-    return lan === 'zh' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')
-  }
-  return lan === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')
-}
-
 export default ({ setShow, left, top }: { setShow: Function; left: number; top: number }) => {
+  const toggleLanguage = useToggleLanguage()
   const hideDropdown = () => {
     setShow(false)
   }
   const handleLanguage = () => {
     hideDropdown()
-    changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
+    toggleLanguage()
   }
   return (
     <LanguagePanel left={left} top={top} onMouseLeave={hideDropdown}>
       <SimpleButton className="languageSelected" onClick={hideDropdown}>
-        {languageText(currentLanguage())}
+        {useLanguageText()}
       </SimpleButton>
       <div className="languageSeparate" />
       <SimpleButton className="languageNormal" onClick={handleLanguage}>
-        {languageText(currentLanguage(), true)}
+        {useOtherLanguageText()}
       </SimpleButton>
     </LanguagePanel>
   )

src/components/Header/LanguageComp/index.tsx

@@ -1,13 +1,13 @@
 import { useState, useLayoutEffect, FC } from 'react'
-import i18n, { currentLanguage, changeLanguage } from '../../../utils/i18n'
 import { HeaderLanguagePanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 import WhiteDropdownIcon from '../../../assets/white_dropdown.png'
 import WhiteDropUpIcon from '../../../assets/white_drop_up.png'
 import BlueDropUpIcon from '../../../assets/blue_drop_up.png'
 import GreenDropUpIcon from '../../../assets/green_drop_up.png'
 import { isMainnet } from '../../../utils/chain'
-import LanDropdown, { languageText } from '../../Dropdown/Language'
+import LanDropdown from '../../Dropdown/Language'
+import { useCurrentLanguage, useLanguageText, useOtherLanguageText, useToggleLanguage } from '../../../utils/i18n'
 
 const getDropdownIcon = (showDropdown: boolean) => {
   if (!showDropdown) return WhiteDropdownIcon
@@ -18,19 +18,20 @@ export const LanguageDropdown = () => {
   const [showLanguage, setShowLanguage] = useState(false)
   const [languageLeft, setLanguageLeft] = useState(0)
   const [languageTop, setLanguageTop] = useState(0)
+  const currentLanguage = useCurrentLanguage()
 
   useLayoutEffect(() => {
     if (showLanguage) {
       const languageDropdownComp = document.getElementById('header__language__panel')
       if (languageDropdownComp) {
         const languageDropdownReact = languageDropdownComp.getBoundingClientRect()
         if (languageDropdownReact) {
-          setLanguageLeft(languageDropdownReact.left + (currentLanguage() === 'en' ? -15 : 3))
+          setLanguageLeft(languageDropdownReact.left + (currentLanguage === 'en' ? -15 : 3))
           setLanguageTop(languageDropdownReact.bottom - 3)
         }
       }
     }
-  }, [showLanguage])
+  }, [showLanguage, currentLanguage])
 
   return (
     <HeaderLanguagePanel
@@ -47,7 +48,7 @@ export const LanguageDropdown = () => {
         }}
       >
         <div className="headerLanguageContentPanel">
-          <div className="headerLanguageContent">{languageText(currentLanguage())}</div>
+          <div className="headerLanguageContent">{useLanguageText()}</div>
           <img src={getDropdownIcon(showLanguage)} alt="dropdown icon" />
         </div>
       </SimpleButton>
@@ -58,6 +59,9 @@ export const LanguageDropdown = () => {
 
 export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMenu }) => {
   const [showSubMenu, setShowSubMenu] = useState(false)
+  const currentLanguageText = useLanguageText()
+  const otherLanguageText = useOtherLanguageText()
+  const toggleLanguage = useToggleLanguage()
 
   return (
     <MobileSubMenuPanel showSubMenu={false}>
@@ -67,9 +71,7 @@ export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMen
           setShowSubMenu(!showSubMenu)
         }}
       >
-        <div className="mobileMenusMainItemContent">
-          {currentLanguage() === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')}
-        </div>
+        <div className="mobileMenusMainItemContent">{currentLanguageText}</div>
         <img
           className="mobileMenusMainItemIcon"
           alt="mobile language icon"
@@ -84,16 +86,16 @@ export const LanguageMenu: FC<{ hideMobileMenu: () => void }> = ({ hideMobileMen
               hideMobileMenu()
             }}
           >
-            {currentLanguage() === 'en' ? i18n.t('navbar.language_en') : i18n.t('navbar.language_zh')}
+            {currentLanguageText}
           </SimpleButton>
           <SimpleButton
             className="mobileMenusSubItem"
             onClick={() => {
-              changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
+              toggleLanguage()
               hideMobileMenu()
             }}
           >
-            {currentLanguage() === 'en' ? i18n.t('navbar.language_zh') : i18n.t('navbar.language_en')}
+            {otherLanguageText}
           </SimpleButton>
         </>
       )}