feat: add initial i18n support

etclabscore · Sep 27, 2019 · 9c39810 · 9c39810
1 parent a596b8a
commit 9c39810
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 140 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,11 +36,14 @@
     "ethereumjs-util": "^6.1.0",
     "ethjs-unit": "^0.1.6",
     "history": "^4.9.0",
+    "i18next": "^17.0.16",
+    "i18next-browser-languagedetector": "^3.0.3",
     "moment": "^2.24.0",
     "qs": "^6.5.2",
     "raf": "^3.4.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-i18next": "^10.13.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "reusable": "^1.0.0-alpha.12",

diff --git a/src/App.tsx b/src/App.tsx
@@ -23,11 +23,13 @@ import useServiceRunnerStore from "./stores/useServiceRunnerStore";
 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 { createBrowserHistory } from "history";
 const history = createBrowserHistory();
 
 function App(props: any) {
+  const { t } = useTranslation();
   const darkMode = useDarkMode();
   const [search, setSearch] = useState();
   const theme = darkMode.value ? darkTheme : lightTheme;
@@ -138,7 +140,7 @@ function App(props: any) {
                     </Grid>
                     <Grid>
                       <Typography color="textSecondary" variant="h6">
-                        Explorer
+                        {t("Explorer")}
                       </Typography>
                     </Grid>
                   </Grid>
@@ -147,7 +149,7 @@ function App(props: any) {
               <Hidden only="xs">
                 <Grid item md={7} lg={8}>
                   <InputBase
-                    placeholder="Enter an Address, Transaction Hash or Block Number"
+                    placeholder={t("Enter an Address, Transaction Hash or Block Number")}
                     onKeyDown={
                       (event: KeyboardEvent<HTMLInputElement>) => {
                         if (event.keyCode === 13) {
@@ -171,15 +173,15 @@ function App(props: any) {
                 </Grid>
               </Hidden>
               <Grid item>
-                <Tooltip title="JSON-RPC API Documentation">
+                <Tooltip title={t("JSON-RPC API Documentation")}>
                   <IconButton
                     onClick={() =>
                       window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json") //tslint:disable-line
                     }>
                     <NotesIcon />
                   </IconButton>
                 </Tooltip>
-                <Tooltip title="Jade Explorer Github">
+                <Tooltip title={t("Jade Explorer Github")}>
                   <IconButton
                     onClick={() =>
                       window.open("https://github.com/etclabscore/jade-explorer")
@@ -188,7 +190,7 @@ function App(props: any) {
                   </IconButton>
                 </Tooltip>
                 <ConfigurationMenu onChange={handleConfigurationChange} />
-                <Tooltip title="Toggle Dark Mode">
+                <Tooltip title={t("Toggle Dark Mode")}>
                   <IconButton onClick={darkMode.toggle}>
                     {darkMode.value ? <Brightness3Icon /> : <WbSunnyIcon />}
                   </IconButton>

diff --git a/src/components/AddressView/AddressView.tsx b/src/components/AddressView/AddressView.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Typography, Card, CardContent } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 
 export interface IAddressViewProps {
   address: string;
@@ -8,17 +9,18 @@ export interface IAddressViewProps {
   code: string;
 }
 
-function renderGeneral(props: IAddressViewProps) {
+function AddressView(props: IAddressViewProps) {
   const { address, balance, txCount, code } = props;
+  const { t } = useTranslation();
   return (
     <Card>
       <CardContent>
-        <Typography variant="h6">Address: {address}</Typography>
-        <Typography variant="h6">Balance: {balance}</Typography>
-        <Typography variant="h6">Transactions: {txCount}</Typography>
+        <Typography variant="h6">{t("Address")}: {address}</Typography>
+        <Typography variant="h6">{t("Balance")}: {balance}</Typography>
+        <Typography variant="h6">{t("Transactions")}: {txCount}</Typography>
         <br />
         <div>
-          <div>Code</div>
+          <div>{t("Code")}</div>
           <pre>
             <code>{code}</code>
           </pre>
@@ -28,12 +30,4 @@ function renderGeneral(props: IAddressViewProps) {
   );
 }
 
-function AddressView(props: IAddressViewProps) {
-  return (
-    <React.Fragment>
-      {renderGeneral(props)}
-    </React.Fragment>
-  );
-}
-
 export default AddressView;
diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx
@@ -3,12 +3,14 @@ import * as React from "react";
 import Link from "@material-ui/core/Link";
 import hexToDate from "../../helpers/hexToDate";
 import { Link as RouterLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const rightPaddingFix = {
   paddingRight: "24px",
 };
 
 function BlockList({ blocks }: any) {
+  const { t } = useTranslation();
   if (!blocks) {
     return null;
   }
@@ -20,10 +22,10 @@ function BlockList({ blocks }: any) {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell><Typography>Block Number</Typography></TableCell>
-            <TableCell><Typography>Hash</Typography></TableCell>
-            <TableCell><Typography>Timestamp</Typography></TableCell>
-            <TableCell><Typography>Transactions</Typography></TableCell>
+            <TableCell><Typography>{t("Block Number")}</Typography></TableCell>
+            <TableCell><Typography>{t("Hash")}</Typography></TableCell>
+            <TableCell><Typography>{t("Timestamp")}</Typography></TableCell>
+            <TableCell><Typography>{t("Transactions")}</Typography></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>

diff --git a/src/components/BlockView/BlockView.tsx b/src/components/BlockView/BlockView.tsx
@@ -5,11 +5,13 @@ import TxList from "../TxList";
 import hexToDate from "../../helpers/hexToDate";
 import hexToNumber from "../../helpers/hexToNumber";
 import hexToString from "../../helpers/hexToString";
+import { useTranslation } from "react-i18next";
 
 import { Table, TableBody, TableCell, TableRow } from "@material-ui/core";
 
 function BlockView(props: any) {
   const { block } = props;
+  const { t } = useTranslation();
 
   if (!block) {
     return (<div>Loading...</div>);
@@ -25,22 +27,22 @@ function BlockView(props: any) {
       <Table>
         <TableBody>
           <TableRow>
-            <TableCell>Number</TableCell>
+            <TableCell>{t("Number")}</TableCell>
             <TableCell>{hexToNumber(block.number)}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Timestamp</TableCell>
+            <TableCell>{t("Timestamp")}</TableCell>
             <TableCell>{hexToDate(timestamp)}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Hash</TableCell>
+            <TableCell>{t("Hash")}</TableCell>
             <TableCell>{hash}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>ParentHash</TableCell>
+            <TableCell>{t("ParentHash")}</TableCell>
             <TableCell>
               <Link
                 component={({ className, children }: { children: any, className: string }) => (
@@ -54,7 +56,7 @@ function BlockView(props: any) {
           </TableRow>
 
           <TableRow>
-            <TableCell>Miner</TableCell>
+            <TableCell>{t("Miner")}</TableCell>
             <TableCell>
               <Link
                 component={({ className, children }: { children: any, className: string }) => (
@@ -68,32 +70,32 @@ function BlockView(props: any) {
           </TableRow>
 
           <TableRow>
-            <TableCell>Nonce</TableCell>
+            <TableCell>{t("Nonce")}</TableCell>
             <TableCell>{hexToNumber(nonce)}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Difficulty</TableCell>
+            <TableCell>{t("Difficulty")}</TableCell>
             <TableCell>{hexToNumber(difficulty)}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Extra Data</TableCell>
+            <TableCell>{t("Extra Data")}</TableCell>
             <TableCell>{hexToString(extraData)}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>State Root</TableCell>
+            <TableCell>{t("State Root")}</TableCell>
             <TableCell>{stateRoot}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Transaction Root</TableCell>
+            <TableCell>{t("Transaction Root")}</TableCell>
             <TableCell>{transactionsRoot}</TableCell>
           </TableRow>
 
           <TableRow>
-            <TableCell>Receipts Root</TableCell>
+            <TableCell>{t("Receipts Root")}</TableCell>
             <TableCell>{receiptsRoot}</TableCell>
           </TableRow>
         </TableBody>