fix: add i18n language dropdown

src/App.tsx

@@ -24,6 +24,7 @@ import useMultiGethStore from "./stores/useMultiGethStore";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import ETHJSONSpec from "@etclabscore/ethereum-json-rpc-specification/openrpc.json";
 import { useTranslation } from "react-i18next";
+import LanguageMenu from "./containers/LanguageMenu"
 
 import { createBrowserHistory } from "history";
 const history = createBrowserHistory();
@@ -173,6 +174,7 @@ function App(props: any) {
                 </Grid>
               </Hidden>
               <Grid item>
+                <LanguageMenu />
                 <Tooltip title={t("JSON-RPC API Documentation")}>
                   <IconButton
                     onClick={() =>

src/components/BlockList/BlockList.tsx

@@ -44,7 +44,7 @@ function BlockList({ blocks }: any) {
                   </Link>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
-                  <Typography>{hexToDate(b.timestamp)}</Typography>
+                  <Typography>{t("Timestamp Date", { date: hexToDate(b.timestamp)})}</Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
                   <Typography>{b.transactions.length}</Typography>

src/components/BlockView/BlockView.tsx

@@ -33,7 +33,7 @@ function BlockView(props: any) {
 
           <TableRow>
             <TableCell>{t("Timestamp")}</TableCell>
-            <TableCell>{hexToDate(timestamp)}</TableCell>
+            <TableCell>{t("Timestamp Date", { date: hexToDate(timestamp)})}</TableCell>
           </TableRow>
 
           <TableRow>

src/containers/Dashboard.tsx

@@ -20,7 +20,7 @@ const useState = React.useState;
 
 const config = {
   blockTime: 15, // seconds
-  blockHistoryLength: 100,
+  blockHistoryLength: 1,
   chartHeight: 200,
   chartWidth: 400,
 };

src/containers/LanguageMenu/LanguageMenu.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { IconButton, Menu, MenuItem, Tooltip, Button } from "@material-ui/core"; //tslint:disable-line
+import { useTranslation } from "react-i18next";
+import { supportedLanguages, reverseSupportedLanguages } from "../../i18n";
+
+const LanguageMenu: React.FC = (props) => {
+  const { t, i18n } = useTranslation();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (lang: string) => {
+    setAnchorEl(null);
+    // this forces language change for react + i18n react
+    i18n.changeLanguage(reverseSupportedLanguages[lang]);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Tooltip title={t("Change Language")}>
+        <Button onClick={handleClick}>{supportedLanguages[i18n.language]}</Button>
+      </Tooltip>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {Object.values(supportedLanguages).map((lang, i) => (
+          <MenuItem onClick={(event) => handleMenuItemClick(lang)}>{lang}</MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+};
+
+export default LanguageMenu;

src/containers/LanguageMenu/index.tsx

@@ -0,0 +1,2 @@
+import LanguageMenu from "./LanguageMenu";
+export default LanguageMenu;

src/helpers/hexToDate.ts

@@ -1,9 +1,7 @@
 import moment from "moment";
 
 const hexToDate = (hexTimestamp: string) => {
-  return moment(
-    new Date(parseInt(hexTimestamp, 16) * 1000).toISOString(),
-  ).format("MMMM Do YYYY, h:mm:ss a");
+  return new Date(parseInt(hexTimestamp, 16) * 1000).toISOString();
 };
 
 export default hexToDate;

src/i18n.ts

@@ -2,12 +2,62 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import enJSON from "./translations/en";
+import krJSON from "./translations/kr";
+import cnJSON from "./translations/cn";
+import moment from "moment";
+import "moment/locale/ko";
+import "moment/locale/zh-cn";
+import "moment/locale/en-ca";
+import i18next from "i18next";
+
+interface IMap {
+  [key: string]: string;
+}
+
+
+const momentMap: IMap = {
+  "kr": "ko",
+  "cn": "zh-cn",
+  "en-US": "en-ca",
+};
 
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     resources: {
       en: { translation: enJSON },
+      kr: { translation: krJSON },
+      cn: { translation: cnJSON },
+    },
+    interpolation: {
+      escapeValue: false,
+      format: (value, format, lng) => {
+        if (!lng) {
+          return;
+        }
+        if (format !== "date") {
+          return;
+        }
+        const ln = momentMap[lng];
+        const result = moment(value).locale(ln || "en").format("MMMM Do YYYY, h:mm:ss a");
+        return result as any;
+      },
     },
   });
+
+export const reverseSupportedLanguages: IMap = {
+  "EN": "en-US", //tslint:disable-line
+  "中文": "cn", //tslint:disable-line
+  "한국어": "kr", //tslint:disable-line
+};
+
+export const supportedLanguages: IMap = {
+  "en-US": "EN",
+  "cn": "中文",
+  "kr": "한국어",
+};
+
+export const changeLanguage = (l: string) => {
+  return i18next.changeLanguage(l);
+};

src/index.tsx

@@ -1,12 +1,16 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import App from "./App";
+import { I18nextProvider } from "react-i18next";
+import i18n from "i18next";
 import { ReusableProvider } from "reusable";
 import "./i18n";
 
 ReactDOM.render(
-  <ReusableProvider>
-    <App />
-  </ReusableProvider>,
+  <I18nextProvider i18n={i18n}>
+    <ReusableProvider>
+      <App />
+    </ReusableProvider>
+  </I18nextProvider>,
   document.getElementById("root") as HTMLElement,
 );

src/translations/cn.ts

@@ -0,0 +1,61 @@
+export default {
+  // Moment integration
+  "Timestamp Date": "{{date, date}}",
+  // App Bar
+  "Explorer": "浏览器",
+  "Enter an Address, Transaction Hash or Block Number": "输入地址 交易哈希或区块号",
+  "JSON-RPC API Documentation": "JSON-RPC API 文档",
+  "Jade Explorer Github": "Jade Explorer Github",
+  "Toggle Dark Mode": "切换黑暗模式",
+  // Dashboard
+  "Block Height": "区块高度",
+  "Chain ID": "Chain ID",
+  "Syncing": "同步中",
+  "Gas Price": "Gas 费用",
+  "Network Hash Rate": "算力",
+  "Pending Transactions": "等待中的交易",
+  "Peers": "端点",
+  "Hash Rate last blocks": "上个区块算力",
+  "Hash Rate last blocks_plural": "前{{count}}个区块算力",
+  "Transaction count last blocks": "上个区块交易数量",
+  "Transaction count last blocks_plural": "前 {{count}}个区块交易数量",
+  "Gas Used last blocks": "上个区块Gas消耗",
+  "Gas Used last blocks_plural": "前{{count}}个区块Gas消耗",
+  "Uncles last blocks": "上个区块叔块",
+  "Uncles last blocks_plural": "前{{count}}个区块叔块",
+  // block list
+  "Block Number": "区块编号",
+  "Hash": "哈希",
+  "Timestamp": "时间戳",
+  "Transactions": "交易",
+  // block view
+  "Number": "数量",
+  "ParentHash": "父哈希",
+  "Miner": "矿工",
+  "Nonce": "随机数",
+  "Difficulty": "难度",
+  "Extra Data": "额外数据",
+  "State Root": "状态根",
+  "Transaction Root": "交易根",
+  "Receipts Root": "接收根",
+  // transaction view
+  "Block": "区块",
+  "Gas Used": "Gas 消耗",
+  "Cumulative Gas Used": "累计Gas消耗",
+  "Value in Ether": "Ether值",
+  "From": "从",
+  "To": "到",
+  "Contract Address": "合约地址",
+  "Transaction Index": "交易索引",
+  "Receipt Status": "接收状态",
+  "Receipt Logs": "接收日志",
+  // address view
+  "Address": "地址",
+  "Balance": "余额",
+  "Code": "代码",
+  // configuration menu
+  "Configuration": "配置",
+  "Back": "返回",
+  "Ethereum RPC": "Ethereum RPC",
+  "Service Runner RPC": "Service Runner RPC",
+};

src/translations/en.ts

@@ -1,11 +1,11 @@
 export default {
-  // App Bar
+  // Moment integration
+  "Timestamp Date": "{{date, date}}",
   "Explorer": "Explorer",
   "Enter an Address, Transaction Hash or Block Number": "Enter an Address, Transaction Hash or Block Number",
   "JSON-RPC API Documentation": "JSON-RPC API Documentation",
   "Jade Explorer Github": "Jade Explorer Github",
   "Toggle Dark Mode": "Toggle Dark Mode",
-  // Dashboard
   "Block Height": "Block Height",
   "Chain ID": "Chain ID",
   "Syncing": "Syncing",
@@ -21,12 +21,10 @@ export default {
   "Gas Used last blocks_plural": "Gas Used last {{count}} blocks",
   "Uncles last blocks": "Uncles last block",
   "Uncles last blocks_plural": "Uncles last {{count}} blocks",
-  // block list
   "Block Number": "Block Number",
   "Hash": "Hash",
   "Timestamp": "Timestamp",
   "Transactions": "Transactions",
-  // block view
   "Number": "Number",
   "ParentHash": "ParentHash",
   "Miner": "Miner",
@@ -36,7 +34,6 @@ export default {
   "State Root": "State Root",
   "Transaction Root": "Transaction Root",
   "Receipts Root": "Receipts Root",
-  // transaction view
   "Block": "Block",
   "Gas Used": "Gas Used",
   "Cumulative Gas Used": "Cumulative Gas Used",
@@ -47,11 +44,9 @@ export default {
   "Transaction Index": "Transaction Index",
   "Receipt Status": "Receipt Status",
   "Receipt Logs": "Receipt Logs",
-  // address view
   "Address": "Address",
   "Balance": "Balance",
   "Code": "Code",
-  // configuration menu
   "Configuration": "Configuration",
   "Back": "Back",
   "Ethereum RPC": "Ethereum RPC",

src/translations/kr.ts

@@ -0,0 +1,61 @@
+export default {
+  // Moment integration
+  "Timestamp Date": "{{date, date}}",
+  // App Bar
+  "Explorer": "브라우저",
+  "Enter an Address, Transaction Hash or Block Number": "거래주소 해시값 혹은 블록번호 입력",
+  "JSON-RPC API Documentation": "JSON-RPC API 문서",
+  "Jade Explorer Github": "Jade Explorer Github",
+  "Toggle Dark Mode": "블랙모드 변경",
+  // Dashboard
+  "Block Height": "블록높이",
+  "Chain ID": "Chain ID",
+  "Syncing": "동기화",
+  "Gas Price": "Gas 비용",
+  "Network Hash Rate": "해시파워",
+  "Pending Transactions": "대기인 거래",
+  "Peers": "거점",
+  "Hash Rate last blocks": "이전 블록 해시파워",
+  "Hash Rate last blocks_plural": "{{count}}개 이전 블록 해시파워",
+  "Transaction count last blocks": "이전 블록 거래수량",
+  "Transaction count last blocks_plural": "{{count}}개 이전 블록 해시파워",
+  "Gas Used last blocks": "이전 블록 Gas소모",
+  "Gas Used last blocks_plural": "{{count}}개 이전 블록 Gas소모",
+  "Uncles last blocks": "이번 블록의 엉클블록",
+  "Uncles last blocks_plural": "{{count}}개 이전 블록의 엉클블록",
+  // block list
+  "Block Number": "블록번호",
+  "Hash": "해시",
+  "Timestamp": "타임 스탬프",
+  "Transactions": "거래",
+  // block view
+  "Number": "수량",
+  "ParentHash": "ParentHash",
+  "Miner": "마이너",
+  "Nonce": "목하",
+  "Difficulty": "난이도",
+  "Extra Data": "추가 데이터",
+  "State Root": "주 루트",
+  "Transaction Root": "거래 루트",
+  "Receipts Root": "영수 루트",
+  // transaction view
+  "Block": "블록",
+  "Gas Used": "Gas 소모",
+  "Cumulative Gas Used": "누적 Gas소모",
+  "Value in Ether": "Ether값",
+  "From": "부터",
+  "To": "으로",
+  "Contract Address": "계약주소",
+  "Transaction Index": "거래 인덱스",
+  "Receipt Status": "수신상태",
+  "Receipt Logs": "수신일지",
+  // address view
+  "Address": "주소",
+  "Balance": "잔액",
+  "Code": "코드",
+  // configuration menu
+  "Configuration": "구성",
+  "Back": "뒤로",
+  "Ethereum RPC": "Ethereum RPC",
+  "Service Runner RPC": "Service Runner RPC",
+};