Integrate react-i18n to bridge UI

Related to #131
alephium · Jun 24, 2024 · 9d230ff · 9d230ff
1 parent afb6128
commit 9d230ff
Show file tree

Hide file tree

Showing 88 changed files with 1,174 additions and 525 deletions.
diff --git a/bridge_ui/locales/en-US/translation.json b/bridge_ui/locales/en-US/translation.json
diff --git a/bridge_ui/package-lock.json b/bridge_ui/package-lock.json
diff --git a/bridge_ui/package.json b/bridge_ui/package.json
@@ -42,6 +42,7 @@
     "qrcode.react": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^14.1.2",
     "react-modal": "^3.15.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

diff --git a/bridge_ui/src/App.js b/bridge_ui/src/App.js
@@ -47,6 +47,7 @@ import { useWallet } from "@alephium/web3-react";
 import { useEffect } from "react";
 import { web3 } from "@alephium/web3";
 import backgroundGradient from "./images/top-gradient.png";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
@@ -129,6 +130,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function App() {
+  const { t } = useTranslation();
   const classes = useStyles();
   const isBeta = useBetaContext();
   const { push } = useHistory();
@@ -152,7 +154,7 @@ function App() {
       {CLUSTER === "mainnet" ? null : (
         <AppBar position="static" className={classes.betaBanner} elevation={0}>
           <Typography style={{ textAlign: "center" }}>
-            Caution! You are using the {CLUSTER} build of this app.
+            {t("Caution! You are using the {{ networkName }} build of this app.", { networkName: CLUSTER })}
           </Typography>
         </AppBar>
       )}
@@ -171,7 +173,7 @@ function App() {
           >
             <img
               src={Alephium}
-              alt="Alephium"
+              alt={t("Alephium")}
               className={classes.alephiumLogo}
             />
           </Link>
@@ -184,7 +186,7 @@ function App() {
                 color="inherit"
                 className={classes.link}
               >
-                Bridge
+                {t("Bridge")}
               </Link>
               <Link
                 href="https://explorer.bridge.alephium.org"
@@ -193,7 +195,7 @@ function App() {
                 color="inherit"
                 className={classes.link}
               >
-                Explorer
+                {t("Explorer")}
               </Link>
               <Link
                 href="https://alephium.org"
@@ -202,12 +204,12 @@ function App() {
                 color="inherit"
                 className={classes.link}
               >
-                Alephium
+                {t("Alephium")}
               </Link>
             </div>
           </Hidden>
           <Hidden implementation="css" smUp>
-            <Tooltip title="View the FAQ">
+            <Tooltip title={t("View the FAQ")}>
               <IconButton
                 href="https://docs.wormholenetwork.com/wormhole/faqs"
                 target="_blank"
@@ -224,8 +226,7 @@ function App() {
       {isBeta ? (
         <AppBar position="static" className={classes.betaBanner} elevation={0}>
           <Typography style={{ textAlign: "center" }}>
-            Caution! You have enabled the beta. Enter the secret code again to
-            disable.
+            {t("Caution! You have enabled the beta. Enter the secret code again to disable.")}
           </Typography>
         </AppBar>
       ) : null}
@@ -236,25 +237,24 @@ function App() {
             subtitle={
               <>
                 <Typography variant="h5">
-                  A bridge that offers unlimited transfers across chains for
-                  tokens.
+                  {t("A bridge that offers unlimited transfers across chains for tokens.")}
                 </Typography>
               </>
             }
           >
-            Token Bridge 🌉
+            {t("Token Bridge")} 🌉
           </HeaderText>
           <Tabs
             value={pathname}
             variant="fullWidth"
             onChange={handleTabChange}
             indicatorColor="primary"
           >
-            <Tab label="Tokens" value="/transfer" disableRipple />
+            <Tab label={t("Tokens_other")} value="/transfer" disableRipple />
             {/* <Tab label="NFTs" value="/nft" /> */}
-            <Tab label="Redeem" value="/redeem" to="/redeem" disableRipple />
+            <Tab label={t("Redeem")} value="/redeem" to="/redeem" disableRipple />
             <Tab
-              label="Transactions"
+              label={t("Transactions")}
               value="/transactions"
               to="/transactions"
               disableRipple

diff --git a/bridge_ui/src/components/Attest/Create.tsx b/bridge_ui/src/components/Attest/Create.tsx
@@ -1,5 +1,6 @@
 import { CHAIN_ID_TERRA } from "@alephium/wormhole-sdk";
 import { CircularProgress, makeStyles } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import useFetchForeignAsset from "../../hooks/useFetchForeignAsset";
 import { useHandleCreateWrapped } from "../../hooks/useHandleCreateWrapped";
@@ -26,6 +27,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function Create() {
+  const { t } = useTranslation();
   const classes = useStyles();
   const targetChain = useSelector(selectAttestTargetChain);
   const originAsset = useSelector(selectAttestSourceAsset);
@@ -61,7 +63,7 @@ function Create() {
             showLoader={showLoader}
             error={error}
           >
-            {shouldUpdate ? "Update" : "Create"}
+            {shouldUpdate ? t("Update") : t("Create")}
           </ButtonWithLoader>
           <WaitingForWalletMessage />
         </>