[#80] implement i18next

IntersectMBO · Feb 7, 2024 · 75d423d · 75d423d
1 parent 2664950
commit 75d423d
Show file tree

Hide file tree

Showing 60 changed files with 1,172 additions and 582 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,16 +10,14 @@ changes.
 
 ## [Unreleased]
 - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)
-
-## [sancho-v1.0.1](https://github.com/IntersectMBO/govtool/releases/tag/sancho-v1.0.1) 2023-12-XX
-
-### Added
--
+- i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)
 
 ### Fixed
--
+- Fixed vote calculation problems related to NoConfidence DRep [Issue 59](https://github.com/IntersectMBO/govtool/issues/59)
+- Fixed ada-holder/get-current-delegation error when delegated to NoConfidence or AlwaysAbstain dreps. [Issue 82](https://github.com/IntersectMBO/govtool/issues/82)
 
 ### Changed
+- Changed and improved working conventions docs, PR template and codeowners file, addressing [Issue 88](https://github.com/IntersectMBO/govtool/issues/88).
 - Changed Node version from 8.7.1-pre to 8.7.2 and Db-sync version from sancho-2-3-0 to sancho-3-0-0.
 - (`docs/update-working-conventions`) Addressing [Issue 25](https://github.com/IntersectMBO/govtool/issues/25) changed working conventions documentation to improve intended flows.
 

diff --git a/govtool/frontend/package.json b/govtool/frontend/package.json
@@ -30,11 +30,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/govtool/frontend/src/components/atoms/CopyButton.tsx b/govtool/frontend/src/components/atoms/CopyButton.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 
 import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
+import { useTranslation } from "@hooks";
 
 interface Props {
   isChecked?: boolean;
@@ -11,6 +12,8 @@ interface Props {
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
+  const { t } = useTranslation();
+
   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/govtool/frontend/src/components/atoms/StakeRadio.tsx b/govtool/frontend/src/components/atoms/StakeRadio.tsx
@@ -3,7 +3,11 @@ import { Box, IconButton, Typography } from "@mui/material";
 
 import { ICONS } from "@consts";
 import { theme } from "@/theme";
-import { useGetAdaHolderVotingPowerQuery, useScreenDimension } from "@/hooks";
+import {
+  useGetAdaHolderVotingPowerQuery,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
 import { correctAdaFormat } from "@/utils/adaFormat";
 
 type StakeRadioProps = {
@@ -21,6 +25,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
   const { isMobile } = useScreenDimension();
   const { powerIsLoading, votingPower } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -65,12 +70,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/govtool/frontend/src/components/atoms/VotingPowerChips.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.tsx
@@ -7,10 +7,10 @@ import {
   useGetAdaHolderVotingPowerQuery,
   useGetDRepVotingPowerQuery,
   useScreenDimension,
+  useTranslation,
 } from "@hooks";
 import { correctAdaFormat } from "@utils";
 import { Tooltip } from "@atoms";
-import { tooltips } from "@/consts/texts";
 
 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 } = useTranslation();
 
   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 && isDRepVotingPowerLoading) ||

diff --git a/govtool/frontend/src/components/molecules/DRepInfoCard.tsx b/govtool/frontend/src/components/molecules/DRepInfoCard.tsx
@@ -2,15 +2,17 @@ import { Box, Typography } from "@mui/material";
 
 import { useCardano } from "@context";
 import { CopyButton } from "@atoms";
+import { useTranslation } from "@hooks";
 
 export const DRepInfoCard = () => {
   const { dRepIDBech32 } = useCardano();
+  const { t } = useTranslation();
 
   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/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -3,8 +3,7 @@ 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 { useScreenDimension, useTranslation } from "@hooks";
 import { theme } from "@/theme";
 import {
   formatDisplayDate,
@@ -43,6 +42,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
     index,
   } = props;
   const { isMobile, screenWidth } = useScreenDimension();
+  const { t } = useTranslation();
 
   const {
     palette: { lightBlue },
@@ -85,7 +85,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           }}
         >
           <Typography color="#DEA029" variant="body2">
-            In progress
+            {t("inProgress")}
           </Typography>
         </Box>
       )}
@@ -101,7 +101,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
       >
         <Box data-testid="governance-action-type">
           <Typography color="neutralGray" variant="caption">
-            Governance Action Type:
+            {t("govActions.governanceActionType")}
           </Typography>
           <Box display={"flex"}>
             <Box
@@ -122,7 +122,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         </Box>
         <Box mt={5}>
           <Typography color="neutralGray" variant="caption">
-            Governance Action ID:
+            {t("govActions.governanceActionId")}
           </Typography>
           <Box display={"flex"} mt={0.25}>
             <Box
@@ -156,7 +156,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 +166,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 +196,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 +206,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 +237,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           }}
           data-testid={`govaction-${govActionId}-view-detail`}
         >
-          {inProgress ? "See transaction" : "View proposal details"}
+          {t(inProgress ? "seeTransaction" : "govActions.viewProposalDetails")}
         </Button>
       </Box>
     </Box>

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsFilters.tsx
@@ -8,6 +8,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
+import { useTranslation } from "@hooks";
 
 interface Props {
   chosenFilters: string[];
@@ -32,6 +33,8 @@ export const GovernanceActionsFilters = ({
     [chosenFilters, setChosenFilters]
   );
 
+  const { t } = useTranslation();
+
   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/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx b/govtool/frontend/src/components/molecules/GovernanceActionsSorting.tsx
@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 
 import { GOVERNANCE_ACTIONS_SORTING } from "@consts";
+import { useTranslation } from "@hooks";
 
 interface Props {
   chosenSorting: string;
@@ -19,6 +20,8 @@ export const GovernanceActionsSorting = ({
   chosenSorting,
   setChosenSorting,
 }: Props) => {
+  const { t } = useTranslation();
+
   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>