feature/80-i18next-implementation

IntersectMBO · Jan 27, 2024 · 1dd0154 · 1dd0154
1 parent cfe2b2b
commit 1dd0154
Show file tree

Hide file tree

Showing 61 changed files with 1,134 additions and 486 deletions.
diff --git a/src/vva-fe/package.json b/src/vva-fe/package.json
@@ -28,11 +28,13 @@
     "buffer": "^6.0.3",
     "date-fns": "^2.30.0",
     "esbuild": "^0.19.8",
+    "i18next": "^23.7.19",
     "keen-slider": "^6.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.47.0",
+    "react-i18next": "^14.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.13.0",
     "storybook-addon-manual-mocks": "^1.0.3",

diff --git a/src/vva-fe/src/components/atoms/CopyButton.tsx b/src/vva-fe/src/components/atoms/CopyButton.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 
 import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
+import { usei18n } from "@translations";
 
 interface Props {
   isChecked?: boolean;
@@ -11,6 +12,8 @@ interface Props {
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
+  const { t } = usei18n();
+
   const iconSrc = useMemo(() => {
     if (variant === "blue") {
       return ICONS.copyBlueIcon;
@@ -29,7 +32,7 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       alt="copy"
       onClick={(e) => {
         navigator.clipboard.writeText(text);
-        addSuccessAlert("Copied to clipboard.");
+        addSuccessAlert(t("alerts.copiedToClipboard"));
         e.stopPropagation();
       }}
       src={iconSrc}

diff --git a/src/vva-fe/src/components/atoms/StakeRadio.tsx b/src/vva-fe/src/components/atoms/StakeRadio.tsx
@@ -3,7 +3,8 @@ import { Box, IconButton, Typography } from "@mui/material";
 
 import { ICONS } from "@consts";
 import { theme } from "@/theme";
-import { useGetAdaHolderVotingPowerQuery, useScreenDimension } from "@/hooks";
+import { useGetAdaHolderVotingPowerQuery, useScreenDimension } from "@hooks";
+import { usei18n } from "@translations";
 import { correctAdaFormat } from "@/utils/adaFormat";
 
 type StakeRadioProps = {
@@ -21,6 +22,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
   const { isMobile } = useScreenDimension();
   const { powerIsLoading, votingPower } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { t } = usei18n();
 
   return (
     <Box
@@ -65,12 +67,11 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
         </Box>
         <Box alignItems="center" display="flex">
           <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
-            Voting power:
+            {t("votingPower")}
           </Typography>
           {powerIsLoading ? (
             <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
-              {" "}
-              Loading...
+              {t("loading")}
             </Typography>
           ) : (
             <Typography

diff --git a/src/vva-fe/src/components/atoms/VotingPowerChips.tsx b/src/vva-fe/src/components/atoms/VotingPowerChips.tsx
@@ -10,7 +10,7 @@ import {
 } from "@hooks";
 import { correctAdaFormat } from "@utils";
 import { Tooltip } from "@atoms";
-import { tooltips } from "@/consts/texts";
+import { usei18n } from "@translations";
 
 export const VotingPowerChips = () => {
   const { dRep, stakeKey, isDrepLoading } = useCardano();
@@ -19,6 +19,7 @@ export const VotingPowerChips = () => {
   const { votingPower, powerIsLoading } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
   const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = usei18n();
 
   return (
     <Box
@@ -34,9 +35,9 @@ export const VotingPowerChips = () => {
     >
       {dRep?.isRegistered && (
         <Tooltip
-          heading={tooltips.votingPower.heading}
-          paragraphOne={tooltips.votingPower.paragraphOne}
-          paragraphTwo={tooltips.votingPower.paragraphTwo}
+          heading={t("tooltips.votingPower.heading")}
+          paragraphOne={t("tooltips.votingPower.paragraphOne")}
+          paragraphTwo={t("tooltips.votingPower.paragraphTwo")}
           placement={"bottom-end"}
           arrow
         >
@@ -51,7 +52,7 @@ export const VotingPowerChips = () => {
       )}
       {screenWidth >= 1024 && (
         <Typography color="#A5A6A5" sx={{ mr: 1.5 }} variant="body2">
-          Voting power:
+          {t("votingPower")}
         </Typography>
       )}
       {(dRep?.isRegistered && drepPowerIsLoading) ||

diff --git a/src/vva-fe/src/components/molecules/DRepInfoCard.tsx b/src/vva-fe/src/components/molecules/DRepInfoCard.tsx
@@ -2,15 +2,17 @@ import { Box, Typography } from "@mui/material";
 
 import { useCardano } from "@context";
 import { CopyButton } from "@atoms";
+import { usei18n } from "@translations";
 
 export const DRepInfoCard = () => {
   const { dRepIDBech32 } = useCardano();
+  const { t } = usei18n();
 
   return (
     <Box border={1} borderColor="#D6E2FF" py={1} px={2} borderRadius={3}>
       <Box sx={{ display: "flex", justifyContent: "space-between" }}>
         <Typography color="gray" fontSize={12} fontWeight={500}>
-          My DRep ID:
+          {t("myDRepId")}
         </Typography>
         <CopyButton text={dRepIDBech32} variant="blue" />
       </Box>

diff --git a/src/vva-fe/src/components/molecules/GovernanceActionCard.tsx b/src/vva-fe/src/components/molecules/GovernanceActionCard.tsx
@@ -3,7 +3,6 @@ import { Box } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 import { Button, Typography, Tooltip } from "@atoms";
-import { tooltips } from "@consts";
 import { useScreenDimension } from "@hooks";
 import { theme } from "@/theme";
 import {
@@ -12,6 +11,7 @@ import {
   getProposalTypeLabel,
   getShortenedGovActionId,
 } from "@utils";
+import { usei18n } from "@translations";
 
 interface ActionTypeProps
   extends Omit<
@@ -43,6 +43,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
     index,
   } = props;
   const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = usei18n();
 
   const {
     palette: { lightBlue },
@@ -85,7 +86,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           }}
         >
           <Typography color="#DEA029" variant="body2">
-            In progress
+            {t("inProgress")}
           </Typography>
         </Box>
       )}
@@ -101,7 +102,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
       >
         <Box data-testid="governance-action-type">
           <Typography color="neutralGray" variant="caption">
-            Governance Action Type:
+            {t("govActions.type")}
           </Typography>
           <Box display={"flex"}>
             <Box
@@ -122,7 +123,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         </Box>
         <Box mt={5}>
           <Typography color="neutralGray" variant="caption">
-            Governance Action ID:
+            {t("govActions.id")}
           </Typography>
           <Box display={"flex"} mt={0.25}>
             <Box
@@ -156,7 +157,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
             sx={{ flexWrap: "nowrap", mr: 1 }}
             variant="caption"
           >
-            Submission date:
+            {t("govActions.submissionDate")}
           </Typography>
           <Typography
             fontWeight={600}
@@ -166,8 +167,8 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
             {formatDisplayDate(createdDate)}
           </Typography>
           <Tooltip
-            heading={tooltips.submissionDate.heading}
-            paragraphOne={tooltips.submissionDate.paragraphOne}
+            heading={t("tooltips.submissionDate.heading")}
+            paragraphOne={t("tooltips.submissionDate.paragraphOne")}
             placement={"bottom-end"}
             arrow
           >
@@ -196,7 +197,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
             sx={{ flexWrap: "nowrap", mr: 1 }}
             variant="caption"
           >
-            Expiry date:
+            {t("govActions.expiryDate")}
           </Typography>
           <Typography
             fontWeight={600}
@@ -206,9 +207,9 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
             {formatDisplayDate(expiryDate)}
           </Typography>
           <Tooltip
-            heading={tooltips.expiryDate.heading}
-            paragraphOne={tooltips.expiryDate.paragraphOne}
-            paragraphTwo={tooltips.expiryDate.paragraphTwo}
+            heading={t("tooltips.expiryDate.heading")}
+            paragraphOne={t("tooltips.expiryDate.paragraphOne")}
+            paragraphTwo={t("tooltips.expiryDate.paragraphTwo")}
             placement={"bottom-end"}
             arrow
           >
@@ -237,7 +238,9 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           }}
           data-testid={`govaction-${govActionId}-view-detail`}
         >
-          {inProgress ? "See transaction" : "View proposal details"}
+          {inProgress
+            ? t("seeTransaction")
+            : t("govActions.viewProposalDetails")}
         </Button>
       </Box>
     </Box>

diff --git a/src/vva-fe/src/components/molecules/GovernanceActionsFilters.tsx b/src/vva-fe/src/components/molecules/GovernanceActionsFilters.tsx
@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
+import { usei18n } from "@translations";
 
 interface Props {
   chosenFilters: string[];
@@ -32,6 +33,8 @@ export const GovernanceActionsFilters = ({
     [chosenFilters, setChosenFilters]
   );
 
+  const { t } = usei18n();
+
   return (
     <Box
       display={"flex"}
@@ -54,7 +57,7 @@ export const GovernanceActionsFilters = ({
           paddingX: "20px",
         }}
       >
-        Governance Action Type
+        {t("govActions.filterTitle")}
       </FormLabel>
       {GOVERNANCE_ACTIONS_FILTERS.map((item) => {
         return (

diff --git a/src/vva-fe/src/components/molecules/GovernanceActionsSorting.tsx b/src/vva-fe/src/components/molecules/GovernanceActionsSorting.tsx
@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_SORTING } from "@consts";
+import { usei18n } from "@translations";
 
 interface Props {
   chosenSorting: string;
@@ -19,6 +20,8 @@ export const GovernanceActionsSorting = ({
   chosenSorting,
   setChosenSorting,
 }: Props) => {
+  const { t } = usei18n();
+
   return (
     <Box
       display={"flex"}
@@ -36,11 +39,11 @@ export const GovernanceActionsSorting = ({
       <FormControl>
         <Box display="flex" justifyContent="space-between" px={"20px"}>
           <Typography sx={{ fontSize: 14, fontWeight: 500, color: "#9792B5" }}>
-            Sort by
+            {t("sortBy")}
           </Typography>
           <Box sx={{ cursor: "pointer" }} onClick={() => setChosenSorting("")}>
             <Typography fontSize={14} fontWeight={500} color="primary">
-              Clear
+              {t("clear")}
             </Typography>
           </Box>
         </Box>