feat: update keys

src/components/key_data/components/stats/components/stats_card/index.tsx

@@ -1,18 +1,16 @@
 import { Box, Typography } from "@mui/material";
 import { useCounter } from "@screens/staking/components/hooks";
 import { convertToMoney } from "@utils/convert_to_money";
-import useTranslation from "next-translate/useTranslation";
 
 import useStyles from "./useStyles";
 
 const StatsCard = ({ title, stats }: any) => {
-  const { t } = useTranslation("common");
   const styles = useStyles();
   const { counterValue, counterRef } = useCounter(stats);
 
   return (
     <Box ref={counterRef} css={styles.root}>
-      <Typography variant="h6">{t(title)}</Typography>
+      <Typography variant="h6">{title}</Typography>
       {title === "full tvl" && stats === "-" && (
         <Typography variant="h3">{`$ ${stats}`}</Typography>
       )}

src/screens/contact/index.tsx

@@ -40,10 +40,10 @@ const Contact = () => {
   const router = useRouter();
 
   const selectList = [
-    { label: "item_1", name: "collaboration" },
-    { label: "item_2", name: "enterprise_solution" },
-    { label: "item_3", name: "careers" },
-    { label: "item_4", name: "other" },
+    { label: t("item_1"), name: "collaboration" },
+    { label: t("item_2"), name: "enterprise_solution" },
+    { label: t("item_3"), name: "careers" },
+    { label: t("item_4"), name: "other" },
   ] as const;
 
   const inputRef = useRef<HTMLInputElement>(null);

src/screens/staking/components/hero/components/stats/hooks.tsx

@@ -13,11 +13,30 @@ import {
 } from "@graphql/queries";
 import { networkFunctions } from "@utils/network_functions";
 import { networkNumber } from "@utils/network_info";
+import useTranslation from "next-translate/useTranslation";
 import { useEffect, useMemo, useState } from "react";
 
-import { statsItems } from "./config";
-
 export const useStatsHook = () => {
+  const { t } = useTranslation("common");
+
+  const statsItems = useMemo(
+    () => [
+      {
+        title: t("full tvl"),
+        stats: "-",
+      },
+      {
+        title: t("users staking"),
+        stats: "-",
+      },
+      {
+        title: t("supporting networks"),
+        stats: 0,
+      },
+    ],
+    [t],
+  );
+
   const [stats, setStats] = useState(statsItems);
   const [cosmosTVL, setCosmosTVL] = useState(0);
   const [elrondTotalTVL, setElrondTotalTVL] = useState(0);
@@ -130,7 +149,7 @@ export const useStatsHook = () => {
       setTotalUsers(userCount);
     }
     statsItems.map((item, i) =>
-      item.title === "users staking"
+      item.title === t("users staking")
         ? setStats((prevStats) => ({
             ...prevStats,
             [i]: {
@@ -148,6 +167,7 @@ export const useStatsHook = () => {
     radixUser,
     totalUsers,
     setTotalUsers,
+    t,
   ]);
 
   useEffect(() => {
@@ -209,7 +229,7 @@ export const useStatsHook = () => {
       setTotalTVL(tvl);
     }
     statsItems.map((item, i) =>
-      item.title === "full tvl"
+      item.title === t("full tvl")
         ? setStats((prevStats) => ({
             ...prevStats,
             [i]: {
@@ -228,12 +248,13 @@ export const useStatsHook = () => {
     radixTotalTVL,
     totalTVL,
     setTotalTVL,
+    t,
   ]);
 
   useMemo(() => {
     if (networkNumber !== 0) {
       statsItems.map((item, i) =>
-        item.title === "supporting networks"
+        item.title === t("supporting networks")
           ? setStats((prevStats) => ({
               ...prevStats,
               [i]: {
@@ -245,7 +266,7 @@ export const useStatsHook = () => {
       );
     }
     return stats;
-  }, [networkNumber]);
+  }, [networkNumber, t]);
 
   return stats;
 };

src/screens/staking/components/how_it_works/components/how_to_card/index.tsx

@@ -1,10 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import useTranslation from "next-translate/useTranslation";
 import Image from "next/image";
 
 const HowToCard = (props: any) => {
-  const { t } = useTranslation("staking");
   const theme = useTheme();
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
   const { id, image, title, desc } = props;
@@ -52,7 +50,7 @@ const HowToCard = (props: any) => {
           }}
           variant="h4"
         >
-          {t(title)}
+          {title}
         </Typography>
         <Typography
           color={theme.palette.custom.forbole.blue}
@@ -66,7 +64,7 @@ const HowToCard = (props: any) => {
           }}
           variant="body1"
         >
-          {t(desc)}
+          {desc}
         </Typography>
       </Box>
     </Box>

src/screens/staking/components/how_it_works/index.tsx

@@ -1,14 +1,44 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
+import { useMemo } from "react";
 
 import { HowToCard } from "./components";
-import { howTos } from "./config";
 
 const Trans = dynamic(() => import("next-translate/Trans"), { ssr: false });
 
 const HowItWorks = () => {
   const { t } = useTranslation("staking");
+  const howTos = useMemo(
+    () => [
+      {
+        id: 1,
+        image: "/images/assets/image_provider.png",
+        title: t("trusted provider"),
+        desc: t("trusted provider desc"),
+      },
+      {
+        id: 2,
+        image: "/images/assets/image_stake.png",
+        title: t("stake"),
+        desc: t("stake desc"),
+      },
+      {
+        id: 3,
+        image: "/images/assets/image_rewards.png",
+        title: t("rewards"),
+        desc: t("rewards desc"),
+      },
+      {
+        id: 4,
+        image: "/images/assets/image_non-custodial.png",
+        title: t("non-custodial"),
+        desc: t("non-custodial desc"),
+      },
+    ],
+    [t],
+  );
+
   const theme = useTheme();
   return (
     <Box display="flex" justifyContent="center">

src/screens/staking/components/why_forbole/index.tsx

@@ -2,13 +2,34 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
 import Image from "next/image";
-
-import { reasons } from "./config";
+import { useMemo } from "react";
 
 const Trans = dynamic(() => import("next-translate/Trans"), { ssr: false });
 
 const WhyForbole = () => {
   const { t } = useTranslation("staking");
+
+  const reasons = useMemo(
+    () => [
+      {
+        title: t("reputable validator"),
+        desc: t("reputable validator desc"),
+        image: "/images/assets/image_journey.png",
+      },
+      {
+        title: t("security focus"),
+        desc: t("security focus desc"),
+        image: "/images/assets/image_security.png",
+      },
+      {
+        title: t("our future"),
+        desc: t("our future desc"),
+        image: "/images/assets/image_future.png",
+      },
+    ],
+    [t],
+  );
+
   const theme = useTheme();
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
   return (