feat: improve i18n

packages/app/i18next-parser.config.ts

@@ -0,0 +1,120 @@
+import { UserConfig } from 'i18next-parser'
+
+const config: UserConfig = {
+  // Key separator used in your translation keys
+  contextSeparator: '_',
+
+  // Save the \_old files
+  createOldCatalogs: false,
+
+  // Default namespace used in your i18next config
+  defaultNamespace: 'translation',
+
+  defaultValue(locale, namespace, key) {
+    return key ?? ''
+  },
+
+  // Indentation of the catalog files
+  indentation: 2,
+
+  // Keep keys from the catalog that are no longer in code
+  // You may either specify a boolean to keep or discard all removed keys.
+  // You may also specify an array of patterns: the keys from the catalog that are no long in the code but match one of the patterns will be kept.
+  // The patterns are applied to the full key including the namespace, the parent keys and the separators.
+  keepRemoved: false,
+
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  keySeparator: false,
+
+  // see below for more details
+  lexers: {
+    hbs: ['HandlebarsLexer'],
+    handlebars: ['HandlebarsLexer'],
+
+    htm: ['HTMLLexer'],
+    html: ['HTMLLexer'],
+
+    mjs: ['JavascriptLexer'],
+    js: ['JavascriptLexer'],
+    ts: [
+      {
+        lexer: 'JavascriptLexer',
+        functions: ['t', 'addI18nKey'],
+        namespaceFunctions: ['useTranslation', 'withTranslation', 'createI18nKeyAdder'],
+      },
+    ],
+    jsx: ['JsxLexer'],
+    tsx: ['JsxLexer'],
+
+    default: ['JavascriptLexer'],
+  },
+
+  // Control the line ending. See options at https://github.com/ryanve/eol
+  lineEnding: 'lf',
+
+  // An array of the locales in your applications
+  locales: ['en', 'zh'],
+
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  namespaceSeparator: false,
+
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+  output: 'public/locales/$LOCALE/$NAMESPACE.json',
+
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+  // If you don't want to generate keys for plurals (for example, in case you are using ICU format), set `pluralSeparator: false`.
+  pluralSeparator: '_',
+
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+  input: ['src/**/*.{ts,tsx}'],
+
+  // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+  sort: true,
+
+  // Display info about the parsing including some stats
+  verbose: false,
+
+  // Exit with an exit code of 1 on warnings
+  failOnWarnings: false,
+
+  // Exit with an exit code of 1 when translations are updated (for CI purpose)
+  failOnUpdate: false,
+
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+  customValueTemplate: null,
+
+  // The locale to compare with default values to determine whether a default value has been changed.
+  // If this is set and a default value differs from a translation in the specified locale, all entries
+  // for that key across locales are reset to the default value, and existing translations are moved to
+  // the `_old` file.
+  resetDefaultValueLocale: null,
+
+  // If you wish to customize options in internally used i18next instance, you can define an object with any
+  // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+  // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+  i18nextOptions: null,
+
+  // If you wish to customize options for yaml output, you can define an object here.
+  // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-).
+  // Example:
+  // {
+  //   lineWidth: -1,
+  // }
+  yamlOptions: null,
+}
+
+export default config

packages/app/next-i18next.config.js

@@ -14,6 +14,7 @@ module.exports = {
     locales: ['en', 'zh'],
     localeDetection: true,
   },
+  fallbackNS: 'common',
   localePath: typeof window === 'undefined' ? path.resolve('./public/locales') : '/locales',
 
   reloadOnPrerender: process.env.NODE_ENV === 'development',

packages/app/package.json

@@ -6,7 +6,8 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "update:locales": "i18next"
   },
   "dependencies": {
     "@docsearch/css": "3",
@@ -58,6 +59,7 @@
     "eslint": "^8.41.0",
     "eslint-config-next": "^13.4.4",
     "eslint-config-prettier": "^8.8.0",
+    "i18next-parser": "^8.7.0",
     "postcss": "^8.4.24",
     "postcss-scss": "^4.0.6",
     "stylelint": "^15.6.2",

packages/app/public/locales/en/app.json

@@ -0,0 +1,3 @@
+{
+  "Neuron Troubleshooting": "Neuron Troubleshooting"
+}

packages/app/public/locales/en/changelog.json

@@ -1,3 +1,4 @@
 {
-  "changelog": "Changelog"
+  "Changelog": "Changelog",
+  "Neuron wallet new features and updates summary, join <link1>Github</link1> to learn more about the project progress.": "Neuron wallet new features and updates summary, join <link1>Github</link1> to learn more about the project progress."
 }

packages/app/public/locales/en/common.json

@@ -1 +1,30 @@
-{}
+{
+  "All services are online": "All services are online",
+  "Announcement": "Announcement",
+  "Axon Explorer": "Axon Explorer",
+  "Backup wallet": "Backup wallet",
+  "Beginner's Guide": "Beginner's Guide",
+  "Change log": "Change log",
+  "Changelog": "Changelog",
+  "CKB Explorer": "CKB Explorer",
+  "CKBNode": "CKBNode",
+  "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase All Rights Reserved.",
+  "Create wallet": "Create wallet",
+  "Develop guide": "Develop guide",
+  "Download Neuron": "Download Neuron",
+  "Foundation": "Foundation",
+  "Frequently Asked Questions": "Frequently Asked Questions",
+  "Godwoke Explorer": "Godwoke Explorer",
+  "Help Center": "Help Center",
+  "Home": "Home",
+  "Kuai": "Kuai",
+  "Language": "Language",
+  "Migration": "Migration",
+  "Nervos": "Nervos",
+  "Neuron Wallet": "Neuron Wallet",
+  "Public Node": "Public Node",
+  "Services": "Services",
+  "Sync": "Sync",
+  "Transaction": "Transaction",
+  "Transfer and receive": "Transfer and receive"
+}

packages/app/public/locales/en/download.json

@@ -1,3 +1,4 @@
 {
-  "download_neuron": "Download Neuron"
+  "Current Version": "Current Version",
+  "Download Neuron": "Download Neuron"
 }

packages/app/public/locales/en/help_center.json

@@ -1,3 +1,5 @@
-{
-  "help_center": "Help Center"
-}
+{
+  "Help Center": "Help Center",
+  "More": "More",
+  "Please enter keywords": "Please enter keywords"
+}

packages/app/public/locales/en/home.json

@@ -1,3 +1,13 @@
 {
-  "hello_world": "Hello World"
+  "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.": "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.",
+  "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.": "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.",
+  "Download Neuron": "Download Neuron",
+  "Easy to use": "Easy to use",
+  "Get Neuron Now": "Get Neuron Now",
+  "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.": "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.",
+  "Private and Secure": "Private and Secure",
+  "Reliable Support": "Reliable Support",
+  "Secure and reliable, you can navigate the world of Nervos CKB": "Secure and reliable, you can navigate the world of Nervos CKB",
+  "Securely Manage Your <tag1>CKB Assets</tag1> with Ease": "Securely Manage Your <tag1>CKB Assets</tag1> with Ease",
+  "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data.": "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data."
 }

packages/app/public/locales/en/posts.json

@@ -0,0 +1,7 @@
+{
+  "© 2023 by Magickbase.": "© 2023 by Magickbase.",
+  "Home": "Home",
+  "Language": "Language",
+  "Neuron Help Documents": "Neuron Help Documents",
+  "Please enter keywords": "Please enter keywords"
+}

packages/app/public/locales/zh/app.json

@@ -0,0 +1,3 @@
+{
+  "Neuron Troubleshooting": "Neuron 帮助中心"
+}

packages/app/public/locales/zh/changelog.json

@@ -1,3 +1,4 @@
 {
-  "changelog": "更新日志"
+  "Changelog": "更新日志",
+  "Neuron wallet new features and updates summary, join <link1>Github</link1> to learn more about the project progress.": "Neuron 钱包新功能和更新摘要，加入 <link1>Github</link1> 了解更多项目进展。"
 }

packages/app/public/locales/zh/common.json

@@ -1 +1,30 @@
-{}
+{
+  "All services are online": "所有服务均可用",
+  "Announcement": "公告",
+  "Axon Explorer": "Axon 区块浏览器",
+  "Backup wallet": "备份钱包",
+  "Beginner's Guide": "新手指南",
+  "Change log": "更新日志",
+  "Changelog": "更新日志",
+  "CKB Explorer": "CKB 区块浏览器",
+  "CKBNode": "CKB 节点",
+  "Copyright © 2023 Magickbase All Rights Reserved.": "Copyright © 2023 Magickbase 版权所有",
+  "Create wallet": "创建钱包",
+  "Develop guide": "开发指南",
+  "Download Neuron": "下载 Neuron",
+  "Foundation": "基金会",
+  "Frequently Asked Questions": "常见问题",
+  "Godwoke Explorer": "Godwoke 区块浏览器",
+  "Help Center": "帮助中心",
+  "Home": "首页",
+  "Kuai": "Kuai",
+  "Language": "语言",
+  "Migration": "迁移",
+  "Nervos": "Nervos",
+  "Neuron Wallet": "Neuron 钱包",
+  "Public Node": "公共节点",
+  "Services": "服务",
+  "Sync": "同步",
+  "Transaction": "交易",
+  "Transfer and receive": "转账和接收"
+}

packages/app/public/locales/zh/download.json

@@ -1,3 +1,4 @@
 {
-  "download_neuron": "下载 Neuron"
+  "Current Version": "当前版本",
+  "Download Neuron": "下载 Neuron"
 }

packages/app/public/locales/zh/help_center.json

@@ -1,3 +1,5 @@
-{
-  "help_center": "帮助中心"
-}
+{
+  "Help Center": "帮助中心",
+  "More": "更多",
+  "Please enter keywords": "请输入关键词"
+}

packages/app/public/locales/zh/home.json

@@ -1,3 +1,13 @@
 {
-  "hello_world": "你好世界"
+  "A friendly and clean user interface, complete with features designed to help you easily participate in Nervos network activities using your wallet.": "友好、简洁的用户界面，具备旨在帮助您使用钱包轻松参与 Nervos 网络活动的功能。",
+  "Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.": "专为 Nervos CKB 区块链设计，允许用户安全地存储和管理其 CKB 资产，参与 Nervos 网络治理，并创建和管理 CKB 标准或锁定脚本。",
+  "Download Neuron": "下载 Neuron",
+  "Easy to use": "易于使用",
+  "Get Neuron Now": "立即获取 Neuron",
+  "Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved in building the community and getting a head start on supporting new features.": "由 Nervos 基金会提供支持，与 Nervos CKB 区块链密切合作，深度参与社区建设，积极支持新功能。",
+  "Private and Secure": "私密且安全",
+  "Reliable Support": "可靠的支持",
+  "Secure and reliable, you can navigate the world of Nervos CKB": "安全可靠，您可以畅游 Nervos CKB 的世界",
+  "Securely Manage Your <tag1>CKB Assets</tag1> with Ease": "轻松安全地管理您的 <tag1>CKB 资产</tag1>",
+  "The code is completely open source, no registration and login is required, only you can access your wallet, we do not collect any personal data.": "代码完全开源，无需注册和登录，只有您可以访问您的钱包，我们不收集任何个人数据。"
 }

packages/app/public/locales/zh/posts.json

@@ -0,0 +1,7 @@
+{
+  "© 2023 by Magickbase.": "© 2023 Magickbase.",
+  "Home": "首页",
+  "Language": "语言",
+  "Neuron Help Documents": "Neuron 帮助文档",
+  "Please enter keywords": "请输入关键词"
+}

packages/app/src/components/Footer/index.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps, FC } from 'react'
 import clsx from 'clsx'
 import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
 import styles from './index.module.scss'
 import IconFullLogo from './full-logo.svg'
 import { Contacts } from '../Contacts'
@@ -9,6 +10,7 @@ import { useIsMobile } from '../../hooks'
 export type FooterProps = ComponentProps<'div'>
 
 export const Footer: FC<FooterProps> = props => {
+  const { t } = useTranslation('common')
   const isMobile = useIsMobile()
 
   return (
@@ -20,35 +22,37 @@ export const Footer: FC<FooterProps> = props => {
           <div className={styles.serversState}>
             {/* TODO: There is a need for API integration */}
             <div className={styles.dot} />
-            All services are online
+            {t('All services are online')}
           </div>
 
           <Contacts className={styles.contacts} />
 
-          {!isMobile && <div className={styles.copyright}>Copyright © 2023 Magickbase All Rights Reserved.</div>}
+          {!isMobile && <div className={styles.copyright}>{t('Copyright © 2023 Magickbase All Rights Reserved.')}</div>}
         </div>
 
         <div className={styles.right}>
           <div className={styles.linkList}>
-            <div className={styles.title}>Services</div>
+            <div className={styles.title}>{t('Services')}</div>
             <div className={styles.linksContainer}>
-              <Link href="https://docs.nervos.org/docs/basics/guides/crypto%20wallets/neuron">Neuron Wallet</Link>
-              <Link href="https://explorer.nervos.org/">CKB Explorer</Link>
-              <Link href="https://v1.gwscan.com/">Godwoke Explorer</Link>
-              <Link href="https://github.com/Magickbase/blockscan">Axon Explorer</Link>
-              <Link href="https://github.com/ckb-js/kuai">Kuai</Link>
-              <Link href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes">Public Node</Link>
+              <Link href="https://docs.nervos.org/docs/basics/guides/crypto%20wallets/neuron">
+                {t('Neuron Wallet')}
+              </Link>
+              <Link href="https://explorer.nervos.org/">{t('CKB Explorer')}</Link>
+              <Link href="https://v1.gwscan.com/">{t('Godwoke Explorer')}</Link>
+              <Link href="https://github.com/Magickbase/blockscan">{t('Axon Explorer')}</Link>
+              <Link href="https://github.com/ckb-js/kuai">{t('Kuai')}</Link>
+              <Link href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes">{t('Public Node')}</Link>
             </div>
           </div>
 
           <div className={styles.linkList}>
-            <div className={styles.title}>Foundation</div>
+            <div className={styles.title}>{t('Foundation')}</div>
             <div className={styles.linksContainer}>
-              <Link href="https://www.nervos.org/">Nervos</Link>
+              <Link href="https://www.nervos.org/">{t('Nervos')}</Link>
             </div>
           </div>
 
-          {isMobile && <div className={styles.copyright}>Copyright © 2023 Magickbase All Rights Reserved.</div>}
+          {isMobile && <div className={styles.copyright}>{t('Copyright © 2023 Magickbase All Rights Reserved.')}</div>}
         </div>
       </div>
     </div>