From de14b90bcb4b08449358c016fb7fbaa25abbb52d Mon Sep 17 00:00:00 2001
From: Viktoryia <viktoriabakun00@gmail.com>
Date: Mon, 4 Nov 2024 12:45:19 +0100
Subject: [PATCH] feat(staking): use tolgee keys (#976)

* feat: setup namespaces

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat: leave single translation file by lang with namespaces as keys in it

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(utils): use tolgee keys

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(utils): remove empty vals from json files

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* chore: get rid of `any` in localisation components

* feat(authz): use tolgee keys (#974)

* feat(tolgee-keys): revoke-button

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): granter-table

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): grantee-table and some corrections

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): grantee-card

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): authz-grants-actions

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): authz-page

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): select options

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

---------

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): stacking/stride, stacking validator page

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* feat(tolgee-keys): finish stacking

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

* fix(tolgee-keys): plurals

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>

---------

Signed-off-by: viktoriabakun <viktoriabakun00@gmail.com>
Co-authored-by: Oleg Shilov <me@olegshilov.com>
---
 apps/shell/src/i18n/en.json                   |  5 +-
 apps/shell/src/tolgee/shared.ts               |  2 +
 .../lib/components/delegate-modal-hooked.tsx  | 11 ++-
 .../src/lib/components/delegate-modal.tsx     | 40 +++++++---
 .../components/redelegate-modal-hooked.tsx    | 13 +++-
 .../src/lib/components/redelegate-modal.tsx   | 16 ++--
 .../src/lib/components/staking-info.tsx       | 15 +++-
 .../src/lib/components/staking-stats.tsx      | 27 ++++---
 .../liquid-staking-delegate-modal-hooked.tsx  | 17 +++-
 .../stride/liquid-staking-delegate-modal.tsx  | 45 ++++++++---
 ...liquid-staking-undelegate-modal-hooked.tsx | 21 ++++-
 .../liquid-staking-undelegate-modal.tsx       | 28 +++++--
 .../stride/statistics/stride-stats.tsx        | 31 +++++---
 .../components/undelegate-modal-hooked.tsx    | 13 +++-
 .../src/lib/components/undelegate-modal.tsx   | 32 +++++---
 .../lib/components/validator-block-mobile.tsx | 28 ++++---
 .../src/lib/components/validator-info.tsx     | 78 ++++++++++++-------
 .../lib/components/validator-list-desktop.tsx | 16 ++--
 .../components/validator-list-item-mobile.tsx | 24 ++++--
 .../lib/components/validator-list-mobile.tsx  |  4 +-
 .../src/lib/components/validator-list.tsx     | 27 ++++---
 .../src/lib/components/validator-select.tsx   |  4 +-
 .../src/lib/validator-details-page.tsx        |  6 +-
 libs/staking/src/lib/validator-list-page.tsx  |  4 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 ++
 26 files changed, 356 insertions(+), 160 deletions(-)

diff --git a/apps/shell/src/i18n/en.json b/apps/shell/src/i18n/en.json
index cc7f26936..3d4ae4773 100644
--- a/apps/shell/src/i18n/en.json
+++ b/apps/shell/src/i18n/en.json
@@ -44,7 +44,10 @@
   },
   "governance": {},
   "main": {},
-  "stacking": {},
+  "stacking": {
+    "attention-withdrawal-warning": "Attention! If in the future you want to withdraw the staked funds, it will take {{count}} day{count, plural, one {} other {s}}",
+    "funds-undelegated-in-days": "The funds will be undelegated within {count, plural, one {# day} other {# days}}"
+  },
   "uc-dao": {},
   "utils": {
     "invalid-address": "Please enter a valid address",
diff --git a/apps/shell/src/tolgee/shared.ts b/apps/shell/src/tolgee/shared.ts
index af64acc1e..fbaf89ba0 100644
--- a/apps/shell/src/tolgee/shared.ts
+++ b/apps/shell/src/tolgee/shared.ts
@@ -1,3 +1,4 @@
+import { FormatIcu } from '@tolgee/format-icu';
 import { DevTools, Tolgee, FormatSimple, TolgeeStaticData } from '@tolgee/web';
 
 export type Locale = 'en' | 'ar' | 'id' | 'tr';
@@ -53,6 +54,7 @@ export function TolgeeBase() {
     Tolgee()
       .use(FormatSimple())
       .use(DevTools())
+      .use(FormatIcu())
       // Preset shared settings
       .updateDefaults({
         apiKey,
diff --git a/libs/staking/src/lib/components/delegate-modal-hooked.tsx b/libs/staking/src/lib/components/delegate-modal-hooked.tsx
index d3e002df6..797b1cd95 100644
--- a/libs/staking/src/lib/components/delegate-modal-hooked.tsx
+++ b/libs/staking/src/lib/components/delegate-modal-hooked.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -45,6 +46,7 @@ export function DelegateModalHooked({
   unboundingTime,
   validatorCommission,
 }: DelegateModalProps) {
+  const { t } = useTranslate('staking');
   const { delegate, getDelegateEstimatedFee } = useStakingActions();
   const [delegateAmount, setDelegateAmount] = useState<number | undefined>(
     undefined,
@@ -96,7 +98,11 @@ export function DelegateModalHooked({
       await toast.promise(
         delegationPromise,
         {
-          loading: <ToastLoading>Delegation in progress</ToastLoading>,
+          loading: (
+            <ToastLoading>
+              {t('delegation-progress', 'Delegation in progress')}
+            </ToastLoading>
+          ),
           success: (tx) => {
             console.log('Delegation successful', { tx });
             const txHash = tx?.txhash;
@@ -115,7 +121,7 @@ export function DelegateModalHooked({
             return (
               <ToastSuccess>
                 <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                  <div>Delegation successful</div>
+                  <div>{t('delegation-success', 'Delegation successful')}</div>
                   <div>
                     <Link
                       href={`${explorerLink}/tx/${txHash}`}
@@ -174,6 +180,7 @@ export function DelegateModalHooked({
     memo,
     fee,
     toast,
+    t,
     onClose,
     explorerLink,
     invalidateQueries,
diff --git a/libs/staking/src/lib/components/delegate-modal.tsx b/libs/staking/src/lib/components/delegate-modal.tsx
index 1ffa0e200..d92e11fb1 100644
--- a/libs/staking/src/lib/components/delegate-modal.tsx
+++ b/libs/staking/src/lib/components/delegate-modal.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import {
   Modal,
@@ -134,6 +135,7 @@ export function DelegateModal({
   onSubmit,
   onMemoChange,
 }: DelegateModalProps) {
+  const { t } = useTranslate('stacking');
   const [isMemoVisible, setMemoVisible] = useState(false);
 
   const handleMaxButtonClick = useCallback(() => {
@@ -163,13 +165,21 @@ export function DelegateModal({
 
   const amountHint = useMemo(() => {
     if (amountError === 'min') {
-      return <span className="text-haqq-danger">Bellow minimal value</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-min', 'Bellow minimal value')}
+        </span>
+      );
     } else if (amountError === 'max') {
-      return <span className="text-haqq-danger">More than you have</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-more-than-have', 'More than you have')}
+        </span>
+      );
     }
 
     return undefined;
-  }, [amountError]);
+  }, [amountError, t]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -183,25 +193,31 @@ export function DelegateModal({
           <div className="divide-haqq-modal-border divide-y divide-dashed">
             <div className="pb-[24px]">
               <ModalHeading className="mt-[24px] sm:mt-[4px]">
-                Delegate
+                {t('delegate', 'Delegate')}
               </ModalHeading>
               <WarningMessage light wrapperClassName="mt-[24px]">
-                {`Attention! If in the future you want to withdraw the staked funds, it will take ${unboundingTime} ${unboundingTime === 1 ? 'day' : 'days'}`}
+                {t(
+                  'attention-withdrawal-warning',
+                  'Attention! If in the future you want to withdraw the staked funds, it will take {count} day{count, plural, one {} other {s}}',
+                  {
+                    count: unboundingTime,
+                  },
+                )}
               </WarningMessage>
             </div>
 
             <div className="py-[24px]">
               <div className="flex flex-col gap-[8px]">
                 <DelegateModalDetails
-                  title="My balance"
+                  title={t('my-balance', 'My balance')}
                   value={`${formatNumber(balance)} ${symbol.toUpperCase()}`}
                 />
                 <DelegateModalDetails
-                  title="My delegation"
+                  title={t('my-delegation', 'My delegation')}
                   value={`${formatNumber(delegation)} ${symbol.toUpperCase()}`}
                 />
                 <DelegateModalDetails
-                  title="Commission"
+                  title={t('commission', 'Commission')}
                   value={`${formatNumber(validatorCommission)}%`}
                 />
               </div>
@@ -227,7 +243,7 @@ export function DelegateModal({
                         setMemoVisible(true);
                       }}
                     >
-                      Add memo
+                      {t('add-memo', 'Add memo')}
                     </OrangeLink>
                   </div>
                 ) : (
@@ -245,14 +261,14 @@ export function DelegateModal({
                         'px-[16px] py-[12px] text-[14px] font-[500] leading-[22px]',
                         'bg-[#E7E7E7]',
                       )}
-                      placeholder="Add your memo"
+                      placeholder={t('memo-placeholder', 'Add your memo')}
                     />
                   </div>
                 )}
 
                 <div>
                   <DelegateModalDetails
-                    title="Estimated fee"
+                    title={t('estimated-fee', 'Estimated fee')}
                     value={`${fee ? formatNumber(fee, 0, 7) : '---'} ${symbol.toUpperCase()}`}
                     isValuePending={isFeePending}
                   />
@@ -265,7 +281,7 @@ export function DelegateModal({
                     className="w-full"
                     disabled={isDisabled}
                   >
-                    Confirm delegation
+                    {t('confirm-delegation', 'Confirm delegation')}
                   </Button>
                 </div>
               </div>
diff --git a/libs/staking/src/lib/components/redelegate-modal-hooked.tsx b/libs/staking/src/lib/components/redelegate-modal-hooked.tsx
index 0ae4129eb..69eaaa7e7 100644
--- a/libs/staking/src/lib/components/redelegate-modal-hooked.tsx
+++ b/libs/staking/src/lib/components/redelegate-modal-hooked.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Validator } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -48,6 +49,7 @@ export function RedelegateModalHooked({
   validatorsList,
   balance,
 }: RedelegateModalProps) {
+  const { t } = useTranslate('stacking');
   const { haqqAddress, ethAddress } = useAddress();
 
   const { data: redelegationValidatorAmount } = useRedelegationValidatorAmount(
@@ -107,7 +109,11 @@ export function RedelegateModalHooked({
         await toast.promise(
           redelegationPromise,
           {
-            loading: <ToastLoading>Redelegate in progress</ToastLoading>,
+            loading: (
+              <ToastLoading>
+                {t('redelegate-progress', 'Redelegate in progress')}
+              </ToastLoading>
+            ),
             success: (tx) => {
               console.log('Redelegation successful', { tx });
               const txHash = tx?.txhash;
@@ -126,7 +132,9 @@ export function RedelegateModalHooked({
               return (
                 <ToastSuccess>
                   <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                    <div>Redelegation successful</div>
+                    <div>
+                      {t('redelegate-success', 'Redelegation successful')}
+                    </div>
                     <div>
                       <Link
                         href={`${explorerLink}/tx/${txHash}`}
@@ -181,6 +189,7 @@ export function RedelegateModalHooked({
     memo,
     fee,
     toast,
+    t,
     onClose,
     explorerLink,
     invalidateQueries,
diff --git a/libs/staking/src/lib/components/redelegate-modal.tsx b/libs/staking/src/lib/components/redelegate-modal.tsx
index c2b090eef..4a501d1ad 100644
--- a/libs/staking/src/lib/components/redelegate-modal.tsx
+++ b/libs/staking/src/lib/components/redelegate-modal.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { formatUnits } from 'viem';
 import {
@@ -84,6 +85,7 @@ export function RedelegateModal({
   onMemoChange,
   redelegationValidatorAmount,
 }: RedelegateModalProps) {
+  const { t } = useTranslate('stacking');
   const [isMemoVisible, setMemoVisible] = useState(false);
 
   const delegationNumber = useMemo(() => {
@@ -133,14 +135,14 @@ export function RedelegateModal({
           <div className="divide-haqq-modal-border divide-y divide-dashed">
             <div className="pb-[24px]">
               <ModalHeading className="mt-[24px] sm:mt-[4px]">
-                Redelegate
+                {t('redelegate', 'Redelegate')}
               </ModalHeading>
             </div>
 
             <div className="py-[24px]">
               <div className="flex flex-col gap-[8px]">
                 <DelegateModalDetails
-                  title="My delegation"
+                  title={t('my-delegation', 'My delegation')}
                   value={`${formatNumber(delegationNumber)} ${symbol.toUpperCase()}`}
                 />
               </div>
@@ -150,7 +152,7 @@ export function RedelegateModal({
               <div className="py-[24px]">
                 <div className="flex flex-col gap-[8px]">
                   <DelegateModalDetails
-                    title="Redelegation amount"
+                    title={t('redelegate-amount', 'Redelegation amount')}
                     value={`${formatNumber(redelegationValidatorAmountNumber)} ${symbol.toUpperCase()}`}
                   />
                 </div>
@@ -183,7 +185,7 @@ export function RedelegateModal({
                         setMemoVisible(true);
                       }}
                     >
-                      Add memo
+                      {t('add-memo', 'Add memo')}
                     </OrangeLink>
                   </div>
                 ) : (
@@ -201,14 +203,14 @@ export function RedelegateModal({
                         'px-[16px] py-[12px] text-[14px] font-[500] leading-[22px]',
                         'bg-[#E7E7E7]',
                       )}
-                      placeholder="Add your memo"
+                      placeholder={t('memo-placeholder', 'Add your memo')}
                     />
                   </div>
                 )}
 
                 <div>
                   <DelegateModalDetails
-                    title="Estimated fee"
+                    title={t('estimated-fee', 'Estimated fee')}
                     value={`${fee ? formatNumber(fee, 0, 7) : '---'} ${symbol.toUpperCase()}`}
                     isValuePending={isFeePending}
                   />
@@ -221,7 +223,7 @@ export function RedelegateModal({
                     className="w-full"
                     disabled={isDisabled}
                   >
-                    Confirm redelegation
+                    {t('confirm-redelegation', 'Confirm redelegation')}
                   </Button>
                 </div>
               </div>
diff --git a/libs/staking/src/lib/components/staking-info.tsx b/libs/staking/src/lib/components/staking-info.tsx
index 4148fb038..8539e6e54 100644
--- a/libs/staking/src/lib/components/staking-info.tsx
+++ b/libs/staking/src/lib/components/staking-info.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
@@ -37,6 +38,7 @@ import { StakingStatsDesktop, StakingStatsMobile } from './staking-stats';
 import { shouldUsePrecompile } from '../constants';
 
 function useStakingStats() {
+  const { t } = useTranslate('staking');
   const [delegatedValsAddrs, setDelegatedValsAddrs] = useState<Array<string>>(
     [],
   );
@@ -95,7 +97,11 @@ function useStakingStats() {
       });
 
       await toast.promise(claimAllRewardPromise, {
-        loading: <ToastLoading>Rewards claim in progress</ToastLoading>,
+        loading: (
+          <ToastLoading>
+            {t('rewards-progress', 'Rewards claim in progress')}
+          </ToastLoading>
+        ),
         success: (tx) => {
           console.log('Rewards claimed', { tx });
           const txHash = tx?.txhash;
@@ -103,7 +109,7 @@ function useStakingStats() {
           return (
             <ToastSuccess>
               <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                <div>Rewards claimed</div>
+                <div>{t('rewards-claimed', 'Rewards claimed')}</div>
                 <div>
                   <Link
                     href={`${explorerLink}/tx/${txHash}`}
@@ -212,6 +218,7 @@ function useStakingStats() {
 }
 
 export function StakingInfo() {
+  const { t } = useTranslate('common');
   const { ethAddress, haqqAddress } = useAddress();
   const { openSelectWallet, isHaqqWallet } = useWallet();
   const isWalletConnected = Boolean(ethAddress && haqqAddress);
@@ -243,7 +250,7 @@ export function StakingInfo() {
       >
         <Container className="flex min-h-[100px] flex-col items-center justify-center gap-[12px]">
           <div className="font-guise text-[14px] leading-[22px] md:text-[18px] md:leading-[28px]">
-            You should connect wallet first
+            {t('connect-wallet-message', 'You should connect wallet first')}
           </div>
           <div>
             <Button
@@ -251,7 +258,7 @@ export function StakingInfo() {
               variant={2}
               className="text-black hover:bg-transparent hover:text-white"
             >
-              Connect wallet
+              {t('connect-wallet-btn', 'Connect wallet')}
             </Button>
           </div>
         </Container>
diff --git a/libs/staking/src/lib/components/staking-stats.tsx b/libs/staking/src/lib/components/staking-stats.tsx
index fa49c28de..5872fe576 100644
--- a/libs/staking/src/lib/components/staking-stats.tsx
+++ b/libs/staking/src/lib/components/staking-stats.tsx
@@ -1,3 +1,4 @@
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { Button, Tooltip } from '@haqq/shell-ui-kit';
 import {
@@ -58,12 +59,13 @@ export function StakingStatsDesktop({
   onRewardsClaim,
   isRewardsPending = false,
 }: StakingStatsProps) {
+  const { t } = useTranslate('staking');
   return (
     <Container className="flex min-h-[100px] flex-col justify-center gap-[24px]">
       <div className="flex flex-row items-center">
         <WalletIcon />
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Regular staking
+          {t('regular-staking', 'Regular staking')}
         </Heading>
       </div>
 
@@ -72,7 +74,7 @@ export function StakingStatsDesktop({
           <div className="flex flex-row gap-[24px]">
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Available"
+                title={t('available', 'Available')}
                 value={balance}
                 symbol={symbol}
               />
@@ -80,7 +82,7 @@ export function StakingStatsDesktop({
 
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Staked"
+                title={t('staked', 'Staked')}
                 value={delegated}
                 symbol={symbol}
               />
@@ -88,7 +90,7 @@ export function StakingStatsDesktop({
 
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Unbonding"
+                title={t('unbonding', 'Unbonding')}
                 value={unbounded}
                 symbol={symbol}
               />
@@ -96,7 +98,7 @@ export function StakingStatsDesktop({
 
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Rewards"
+                title={t('rewards', 'Rewards')}
                 value={rewards}
                 symbol={symbol}
                 isGreen
@@ -108,7 +110,7 @@ export function StakingStatsDesktop({
             <Tooltip
               text={
                 Number.parseFloat(rewards) < MIN_REWARDS_TO_CLAIM
-                  ? `Minimum amount to claim rewards is ${MIN_REWARDS_TO_CLAIM} ISLM`
+                  ? `${t('min-amount-to-claim-rewards', 'Minimum amount to claim rewards is')} ${MIN_REWARDS_TO_CLAIM} ISLM`
                   : ''
               }
             >
@@ -118,7 +120,7 @@ export function StakingStatsDesktop({
                 variant={2}
                 isLoading={isRewardsPending}
               >
-                Claim all rewards
+                {t('claim-all-rewards', 'Claim all rewards')}
               </Button>
             </Tooltip>
           </div>
@@ -173,6 +175,7 @@ export function StakingStatsMobile({
   unbounded,
   isRewardsPending = false,
 }: StakingStatsProps) {
+  const { t } = useTranslate('staking');
   return (
     <div className="flex flex-col items-start gap-[16px] overflow-x-auto px-[16px] py-[20px] sm:gap-[32px] sm:px-[48px] sm:py-[32px]">
       <div className="flex flex-row items-center">
@@ -184,22 +187,22 @@ export function StakingStatsMobile({
 
       <div className="mt-[8px] flex w-full flex-1 flex-col gap-[8px]">
         <StakingStatsMobileAmountBlock
-          title="Available"
+          title={t('available', 'Available')}
           value={balance}
           symbol={symbol}
         />
         <StakingStatsMobileAmountBlock
-          title="Staked"
+          title={t('staked', 'Staked')}
           value={delegated}
           symbol={symbol}
         />
         <StakingStatsMobileAmountBlock
-          title="Unbonding"
+          title={t('unbonding', 'Unbonding')}
           value={unbounded}
           symbol={symbol}
         />
         <StakingStatsMobileAmountBlock
-          title="Rewards"
+          title={t('rewards', 'Rewards')}
           value={rewards}
           symbol={symbol}
           isGreen
@@ -222,7 +225,7 @@ export function StakingStatsMobile({
             disabled={Number.parseFloat(rewards) < MIN_REWARDS_TO_CLAIM}
             data-attr="get-rewards"
           >
-            Get rewards
+            {t('get-rewards', 'Get rewards')}
           </Button>
         </Tooltip>
       </div>
diff --git a/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal-hooked.tsx b/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal-hooked.tsx
index ce23d9edd..385dc8fec 100644
--- a/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal-hooked.tsx
+++ b/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal-hooked.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -37,6 +38,7 @@ export function LiquidStakingDelegateModalHooked({
   balance,
   unboundingTime,
 }: LiquidStakingDelegateModalProps) {
+  const { t } = useTranslate('staking');
   const [delegateAmount, setDelegateAmount] = useState<number | undefined>(
     undefined,
   );
@@ -83,13 +85,21 @@ export function LiquidStakingDelegateModalHooked({
       await toast.promise(
         delegationPromise,
         {
-          loading: <ToastLoading>Delegation in progress</ToastLoading>,
+          loading: (
+            <ToastLoading>
+              {t('delegation-progress', 'Delegation in progress')}
+            </ToastLoading>
+          ),
           success: (tx) => {
             console.log('Delegation successful', { tx });
             const txHash = tx?.txhash;
 
             if (!txHash) {
-              return <ToastError>Delegation declined</ToastError>;
+              return (
+                <ToastError>
+                  {t('delegation-declined', 'Delegation declined')}
+                </ToastError>
+              );
             }
 
             posthog.capture('delegate success', {
@@ -106,7 +116,7 @@ export function LiquidStakingDelegateModalHooked({
             return (
               <ToastSuccess>
                 <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                  <div>Delegation successful</div>
+                  <div>{t('delegation-success', 'Delegation successful')}</div>
                   <div>
                     <Link
                       href={`${explorer.cosmos}/tx/${txHash}`}
@@ -153,6 +163,7 @@ export function LiquidStakingDelegateModalHooked({
     delegate,
     debouncedDelegateAmount,
     toast,
+    t,
     onClose,
     explorer.cosmos,
     invalidateQueries,
diff --git a/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal.tsx b/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal.tsx
index 90597f43e..688998111 100644
--- a/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal.tsx
+++ b/libs/staking/src/lib/components/stride/liquid-staking-delegate-modal.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import {
   Modal,
@@ -131,6 +132,7 @@ export function LiquidStakingDelegateModal({
   strideAddress,
   setStrideAddress,
 }: LiquidStakingDelegateModalProps) {
+  const { t } = useTranslate('stacking');
   const handleMaxButtonClick = useCallback(() => {
     onChange(Math.floor(balance));
   }, [balance, onChange]);
@@ -158,13 +160,21 @@ export function LiquidStakingDelegateModal({
 
   const amountHint = useMemo(() => {
     if (amountError === 'min') {
-      return <span className="text-haqq-danger">Bellow minimal value</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-min', 'Bellow minimal value')}
+        </span>
+      );
     } else if (amountError === 'max') {
-      return <span className="text-haqq-danger">More than you have</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-more-than-have', 'More than you have')}
+        </span>
+      );
     }
 
     return undefined;
-  }, [amountError]);
+  }, [amountError, t]);
 
   const { stIslmFormIslm } = useStIslmFormIslm(delegateAmount || 0);
 
@@ -186,26 +196,32 @@ export function LiquidStakingDelegateModal({
           <div className="divide-haqq-modal-border divide-y divide-dashed">
             <div className="pb-[24px]">
               <ModalHeading className="mt-[24px] sm:mt-[4px]">
-                Delegate
+                {t('delegate-title', 'Delegate')}
               </ModalHeading>
               <WarningMessage light wrapperClassName="mt-[24px]">
-                {`Attention! If in the future you want to withdraw the staked funds, it will take ${unboundingTime} ${unboundingTime === 1 ? 'day' : 'days'}`}
+                {t(
+                  'attention-withdrawal-warning',
+                  'Attention! If in the future you want to withdraw the staked funds, it will take {count} day{count, plural, one {} other {s}}',
+                  {
+                    count: unboundingTime,
+                  },
+                )}
               </WarningMessage>
             </div>
 
             <div className="py-[24px]">
               <div className="flex flex-col gap-[8px]">
                 <LiquidStakingDelegateModalDetails
-                  title="My balance"
+                  title={t('my-balance', 'My balance')}
                   value={`${formatNumber(balance)} ${symbol.toUpperCase()}`}
                 />
                 <LiquidStakingDelegateModalDetails
-                  title="APY"
+                  title={t('apy', 'APY')}
                   isValuePending={isLoading}
                   value={`${apy}%`}
                 />
                 <LiquidStakingDelegateModalDetails
-                  title="Commission"
+                  title={t('commission', 'Commission')}
                   value={`${strideFee}%`}
                 />
               </div>
@@ -227,7 +243,10 @@ export function LiquidStakingDelegateModal({
                   placeholder="Use your Stride address here"
                   hint={
                     <span className="text-haqq-danger">
-                      Stride address is required to delegate
+                      {t(
+                        'stride-address-required',
+                        'Stride address is required to delegate',
+                      )}
                     </span>
                   }
                 />
@@ -235,9 +254,10 @@ export function LiquidStakingDelegateModal({
                 <div className="flex flex-col items-center justify-center gap-[16px]">
                   <div className="flex flex-col items-center justify-center">
                     <div className="font-guise mb-2 text-[11px] leading-[16px] text-[#0D0D0E80] lg:text-[12px] lg:leading-[18px]">
-                      What you'll get:
+                      {t('you-will-get', "What you'll get:")}
                     </div>
                     <div className="text-[20px] font-semibold leading-[26px]">
+                      {/* eslint-disable-next-line i18next/no-literal-string */}
                       {formatNumber(stIslmFormIslm)} stISLM
                     </div>
                   </div>
@@ -245,9 +265,10 @@ export function LiquidStakingDelegateModal({
                   {annualizedYield ? (
                     <div className="flex w-full flex-col items-center justify-center rounded-[4px] border-[1px] border-[#01B26E] p-[8px]">
                       <div className="font-guise mb-2 text-[11px] leading-[16px] text-[#0D0D0E80] lg:text-[12px] lg:leading-[18px]">
-                        Annual percentage yield
+                        {t('annualized-yield', 'Annual percentage yield')}
                       </div>
                       <div className="text-[20px] font-semibold leading-[26px] text-[#01B26E]">
+                        {/* eslint-disable-next-line i18next/no-literal-string */}
                         {formatNumber(annualizedYield)} stISLM
                       </div>
                     </div>
@@ -261,7 +282,7 @@ export function LiquidStakingDelegateModal({
                     className="w-full"
                     disabled={isDisabled}
                   >
-                    Confirm delegation
+                    {t('confirm-delegation', 'Confirm delegation')}
                   </Button>
                 </div>
               </div>
diff --git a/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal-hooked.tsx b/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal-hooked.tsx
index 987b5d63e..61bfefc18 100644
--- a/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal-hooked.tsx
+++ b/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal-hooked.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -39,6 +40,7 @@ export function LiquidStakingUndelegateModalHooked({
   delegation,
   unboundingTime,
 }: LiquidStakingUndelegateModalProps) {
+  const { t } = useTranslate('stacking');
   const { undelegate, setStrideAddress, strideAddress } =
     useLiquidStakingUndelegate();
   const [undelegateAmount, setUndelegateAmount] = useState<number | undefined>(
@@ -80,13 +82,21 @@ export function LiquidStakingUndelegateModalHooked({
       await toast.promise(
         undelegationPromise,
         {
-          loading: <ToastLoading>Undlegation in progress</ToastLoading>,
+          loading: (
+            <ToastLoading>
+              {t('undelegation-progress', 'Undelegation in progress')}
+            </ToastLoading>
+          ),
           success: (tx) => {
-            console.log('Undlegation successful', { tx });
+            console.log('Undelegation successful', { tx });
             const txHash = tx?.txhash;
 
             if (!txHash) {
-              return <ToastError>Undelegation declined</ToastError>;
+              return (
+                <ToastError>
+                  {t('undelegation-declined', 'Undelegation declined')}
+                </ToastError>
+              );
             }
 
             posthog.capture('undelegate success', {
@@ -103,7 +113,9 @@ export function LiquidStakingUndelegateModalHooked({
             return (
               <ToastSuccess>
                 <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                  <div>Undelegation successful</div>
+                  <div>
+                    {t('undelegation-success', 'Undelegation successful')}
+                  </div>
                   <div>
                     <Link
                       href={`${explorer.cosmos}/tx/${txHash}`}
@@ -149,6 +161,7 @@ export function LiquidStakingUndelegateModalHooked({
     chainId,
     undelegate,
     toast,
+    t,
     onClose,
     explorer.cosmos,
     invalidateQueries,
diff --git a/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal.tsx b/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal.tsx
index e8dc14939..1953d5a8d 100644
--- a/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal.tsx
+++ b/libs/staking/src/lib/components/stride/liquid-staking-undelegate-modal.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import {
   Modal,
   ModalCloseButton,
@@ -45,6 +46,7 @@ export function LiquidStakingUndelegateModal({
   strideAddress,
   setStrideAddress,
 }: LiquidStakingUndelegateModalProps) {
+  const { t } = useTranslate();
   const handleMaxButtonClick = useCallback(() => {
     onChange(delegation);
   }, [delegation, onChange]);
@@ -72,15 +74,23 @@ export function LiquidStakingUndelegateModal({
 
   const amountHint = useMemo(() => {
     if (amountError === 'min') {
-      return <span className="text-haqq-danger">Bellow minimal value</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-min', 'Bellow minimal value', { ns: 'stacking' })}
+        </span>
+      );
     } else if (amountError === 'max') {
       return (
-        <span className="text-haqq-danger">More than your delegation</span>
+        <span className="text-haqq-danger">
+          {t('amount-error-more-than-delegation', 'More than your delegation', {
+            ns: 'stacking',
+          })}
+        </span>
       );
     }
 
     return undefined;
-  }, [amountError]);
+  }, [amountError, t]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -94,7 +104,7 @@ export function LiquidStakingUndelegateModal({
           <div className="divide-haqq-modal-border divide-y divide-dashed">
             <div className="pb-[24px]">
               <ModalHeading className="mt-[24px] sm:mt-[4px]">
-                Undelegate
+                {t('undelegate', 'Undelegate', { ns: 'common' })}
               </ModalHeading>
 
               <WarningMessage
@@ -133,7 +143,11 @@ export function LiquidStakingUndelegateModal({
                   placeholder="Use your Stride address here"
                   hint={
                     <span className="text-haqq-danger">
-                      Stride address is required to undelegate
+                      {t(
+                        'stride-address-required',
+                        'Stride address is required to undelegate',
+                        { ns: 'stacking' },
+                      )}
                     </span>
                   }
                 />
@@ -145,7 +159,9 @@ export function LiquidStakingUndelegateModal({
                     className="w-full"
                     disabled={isDisabled}
                   >
-                    Confirm undelegation
+                    {t('confirm-undelegation', 'Confirm undelegation', {
+                      ns: 'stacking',
+                    })}
                   </Button>
                 </div>
               </div>
diff --git a/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx b/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx
index 2ee16d41a..f5ff7ca83 100644
--- a/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx
+++ b/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { useRouter } from 'next/navigation';
 import { useMediaQuery } from 'usehooks-ts';
@@ -118,6 +119,7 @@ function StrideStatsDesktop({
   stIslmBalance: number;
   islmAmountFromStIslm: number;
 }) {
+  const { t } = useTranslate();
   const { handleDelegateContinue, handleUndelegateContinue } =
     useHandleDelegateContinue();
 
@@ -126,7 +128,7 @@ function StrideStatsDesktop({
       <div className="flex flex-row items-center">
         <WalletIcon />
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Liquid staking
+          {t('liquid-staking', 'Liquid staking', { ns: 'stacking' })}
         </Heading>
       </div>
 
@@ -135,7 +137,7 @@ function StrideStatsDesktop({
           <div className="flex flex-row gap-[24px]">
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Available"
+                title={t('available', 'Available', { ns: 'stacking' })}
                 value={formatNumber(balance)}
                 symbol="ISLM"
                 uppercaseSymbol={false}
@@ -143,7 +145,7 @@ function StrideStatsDesktop({
             </div>
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="Staked"
+                title={t('staked', 'Staked', { ns: 'stacking' })}
                 value={formatNumber(stIslmBalance)}
                 symbol="stISLM"
                 uppercaseSymbol={false}
@@ -151,7 +153,9 @@ function StrideStatsDesktop({
             </div>
             <div className="w-[240px]">
               <StakingStatsDesktopAmountBlock
-                title="stISLM in ISLM"
+                title={t('stISLM-in-ISLM', 'stISLM in ISLM', {
+                  ns: 'stacking',
+                })}
                 value={`≈${formatNumber(islmAmountFromStIslm)}`}
                 symbol="ISLM"
                 uppercaseSymbol={false}
@@ -170,7 +174,7 @@ function StrideStatsDesktop({
                 }}
                 data-attr="liquid-staking-delegate"
               >
-                Delegate
+                {t('delegate', 'Delegate', { ns: 'common' })}
               </Button>
             </div>
 
@@ -184,7 +188,7 @@ function StrideStatsDesktop({
                   handleUndelegateContinue();
                 }}
               >
-                Undelegate
+                {t('undelegate', 'Undelegate', { ns: 'common' })}
               </Button>
             </div>
           </div>
@@ -203,6 +207,7 @@ function StrideStatsMobile({
   stIslmBalance: number;
   islmAmountFromStIslm: number;
 }) {
+  const { t } = useTranslate();
   const { handleDelegateContinue, handleUndelegateContinue } =
     useHandleDelegateContinue();
 
@@ -211,25 +216,27 @@ function StrideStatsMobile({
       <div className="flex flex-row items-center">
         <WalletIcon />
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Liquid staking
+          {t('liquid-staking', 'Liquid staking', { ns: 'stacking' })}
         </Heading>
       </div>
 
       <div className="mt-[8px] flex w-full flex-1 flex-col gap-[8px]">
         <StakingStatsMobileAmountBlock
-          title="Available"
+          title={t('available', 'Available', { ns: 'stacking' })}
           value={formatNumber(balance)}
           symbol="ISLM"
           uppercaseSymbol={false}
         />
         <StakingStatsMobileAmountBlock
-          title="Staked"
+          title={t('staked', 'Staked', { ns: 'stacking' })}
           value={formatNumber(stIslmBalance)}
           symbol="stISLM"
           uppercaseSymbol={false}
         />
         <StakingStatsMobileAmountBlock
-          title="stISLM in ISLM"
+          title={t('stISLM-in-ISLM', 'stISLM in ISLM', {
+            ns: 'stacking',
+          })}
           value={`≈${formatNumber(islmAmountFromStIslm)}`}
           symbol="ISLM"
           uppercaseSymbol={false}
@@ -246,7 +253,7 @@ function StrideStatsMobile({
           }}
           data-attr="liquid-staking-delegate"
         >
-          Delegate
+          {t('delegate', 'Delegate', { ns: 'common' })}
         </Button>
 
         <Button
@@ -258,7 +265,7 @@ function StrideStatsMobile({
             handleUndelegateContinue();
           }}
         >
-          Undelegate
+          {t('undelegate', 'Undelegate', { ns: 'common' })}
         </Button>
       </div>
     </div>
diff --git a/libs/staking/src/lib/components/undelegate-modal-hooked.tsx b/libs/staking/src/lib/components/undelegate-modal-hooked.tsx
index 1a212d6e5..283c6617e 100644
--- a/libs/staking/src/lib/components/undelegate-modal-hooked.tsx
+++ b/libs/staking/src/lib/components/undelegate-modal-hooked.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { usePostHog } from 'posthog-js/react';
 import { useDebounceValue } from 'usehooks-ts';
@@ -43,6 +44,7 @@ export function UndelegateModalHooked({
   unboundingTime,
   validatorAddress,
 }: UndelegateModalProps) {
+  const { t } = useTranslate('staking');
   const { undelegate, getUndelegateEstimatedFee } = useStakingActions();
   const [undelegateAmount, setUndelegateAmount] = useState<number | undefined>(
     undefined,
@@ -94,7 +96,11 @@ export function UndelegateModalHooked({
       await toast.promise(
         undelegationPromise,
         {
-          loading: <ToastLoading>Undlegation in progress</ToastLoading>,
+          loading: (
+            <ToastLoading>
+              {t('undelegation-progress', 'Undelegation in progress')}
+            </ToastLoading>
+          ),
           success: (tx) => {
             console.log('Undlegation successful', { tx });
             const txHash = tx?.txhash;
@@ -112,7 +118,9 @@ export function UndelegateModalHooked({
             return (
               <ToastSuccess>
                 <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                  <div>Undelegation successful</div>
+                  <div>
+                    {t('undelegation-success', 'Undelegation successful')}
+                  </div>
                   <div>
                     <Link
                       href={`${explorerLink}/tx/${txHash}`}
@@ -166,6 +174,7 @@ export function UndelegateModalHooked({
     memo,
     fee,
     toast,
+    t,
     onClose,
     invalidateQueries,
     chain.id,
diff --git a/libs/staking/src/lib/components/undelegate-modal.tsx b/libs/staking/src/lib/components/undelegate-modal.tsx
index b28d1eb13..7b43823df 100644
--- a/libs/staking/src/lib/components/undelegate-modal.tsx
+++ b/libs/staking/src/lib/components/undelegate-modal.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import {
   Modal,
@@ -50,6 +51,7 @@ export function UndelegateModal({
   onSubmit,
   onMemoChange,
 }: UndelegateModalProps) {
+  const { t } = useTranslate('staking');
   const [isMemoVisible, setMemoVisible] = useState(false);
 
   const handleMaxButtonClick = useCallback(() => {
@@ -79,15 +81,21 @@ export function UndelegateModal({
 
   const amountHint = useMemo(() => {
     if (amountError === 'min') {
-      return <span className="text-haqq-danger">Bellow minimal value</span>;
+      return (
+        <span className="text-haqq-danger">
+          {t('amount-error-min', 'Bellow minimal value')}
+        </span>
+      );
     } else if (amountError === 'max') {
       return (
-        <span className="text-haqq-danger">More than your delegation</span>
+        <span className="text-haqq-danger">
+          {t('amount-error-more-than-delegation', 'More than your delegation')}
+        </span>
       );
     }
 
     return undefined;
-  }, [amountError]);
+  }, [amountError, t]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -101,7 +109,7 @@ export function UndelegateModal({
           <div className="divide-haqq-modal-border divide-y divide-dashed">
             <div className="pb-[24px]">
               <ModalHeading className="mt-[24px] sm:mt-[4px]">
-                Undelegate
+                {t('undelegate', 'Undelegate')}
               </ModalHeading>
 
               <WarningMessage
@@ -109,17 +117,19 @@ export function UndelegateModal({
                 className="mt-[3px]"
                 wrapperClassName="mt-[24px]"
               >
-                {`The funds will be undelegate within ${unboundingTime} day`}
+                {t('funds-undelegated-in-days', {
+                  count: unboundingTime,
+                })}
               </WarningMessage>
             </div>
             <div className="py-[24px]">
               <div className="flex flex-col gap-[8px]">
                 <DelegateModalDetails
-                  title="My balance"
+                  title={t('my-balance', 'My balance')}
                   value={`${formatNumber(balance)} ${symbol.toUpperCase()}`}
                 />
                 <DelegateModalDetails
-                  title="My delegation"
+                  title={t('my-delegation', 'My delegation')}
                   value={`${formatNumber(delegation)} ${symbol.toUpperCase()}`}
                 />
               </div>
@@ -144,7 +154,7 @@ export function UndelegateModal({
                         setMemoVisible(true);
                       }}
                     >
-                      Add memo
+                      {t('add-memo', 'Add memo')}
                     </OrangeLink>
                   </div>
                 ) : (
@@ -162,14 +172,14 @@ export function UndelegateModal({
                         'px-[16px] py-[12px] text-[14px] font-[500] leading-[22px]',
                         'bg-[#E7E7E7]',
                       )}
-                      placeholder="Add your memo"
+                      placeholder={t('memo-placeholder', 'Add your memo')}
                     />
                   </div>
                 )}
 
                 <div>
                   <DelegateModalDetails
-                    title="Estimated fee"
+                    title={t('estimated-fee', 'Estimated fee')}
                     value={`${fee ? formatNumber(fee, 0, 7) : '---'} ${symbol.toUpperCase()}`}
                     isValuePending={isFeePending}
                   />
@@ -182,7 +192,7 @@ export function UndelegateModal({
                     className="w-full"
                     disabled={isDisabled}
                   >
-                    Confirm undelegation
+                    {t('confirm-undelegation', 'Confirm undelegation')}
                   </Button>
                 </div>
               </div>
diff --git a/libs/staking/src/lib/components/validator-block-mobile.tsx b/libs/staking/src/lib/components/validator-block-mobile.tsx
index 002dd926a..e8cc38837 100644
--- a/libs/staking/src/lib/components/validator-block-mobile.tsx
+++ b/libs/staking/src/lib/components/validator-block-mobile.tsx
@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { Button, Tooltip } from '@haqq/shell-ui-kit';
 import {
@@ -77,42 +78,49 @@ export function ValidatorBlockMobileComponent({
   isRewardPending = false,
   minRewardsToClaim = 1,
 }: ValidatorBlockMobileProps) {
+  const { t } = useTranslate('staking');
   return (
     <Container className="py-[24px] md:py-[40px]">
       <div className="flex flex-col items-start gap-y-[24px] md:gap-y-[12px]">
         <div className="flex flex-row items-center">
           <ValidatorIcon />
           <Heading level={3} className="mb-[-2px] ml-[8px]">
-            Validator
+            {t('validator', 'Validator')}
           </Heading>
         </div>
 
         {isWarningShown && (
           <div className="w-full">
             <WarningMessage wrapperClassName="w-full">
-              While the validator is inactive, you will not be able to receive a
-              reward.
+              {t(
+                'validator-inactive-warning',
+                'While the validator is inactive, you will not be able to receive a reward.',
+              )}
             </WarningMessage>
           </div>
         )}
 
         <div className="flex w-full flex-col gap-[12px]">
           <div className="flex flex-1 flex-row items-center justify-between">
-            <GrayDescription>My delegation</GrayDescription>
+            <GrayDescription>
+              {t('my-delegation', 'My delegation')}
+            </GrayDescription>
             <DescriptionAmount>
               {formatNumber(delegation)} {symbol.toLocaleUpperCase()}
             </DescriptionAmount>
           </div>
           {undelegate && undelegate > 0 && (
             <div className="flex flex-1 flex-row items-center justify-between">
-              <GrayDescription>Undelegate in process</GrayDescription>
+              <GrayDescription>
+                {t('undelegate-process', 'Undelegate in process')}
+              </GrayDescription>
               <DescriptionAmount>
                 {formatNumber(undelegate)} {symbol.toLocaleUpperCase()}
               </DescriptionAmount>
             </div>
           )}
           <div className="flex flex-1 flex-row items-center justify-between">
-            <GrayDescription>My rewards</GrayDescription>
+            <GrayDescription>{t('my-rewards', 'My rewards')}</GrayDescription>
             <DescriptionAmount className="!text-[#01B26E]">
               {formatNumber(rewards)} {symbol.toLocaleUpperCase()}
             </DescriptionAmount>
@@ -129,7 +137,7 @@ export function ValidatorBlockMobileComponent({
                 disabled={isDelegateDisabled}
                 data-attr="delegate"
               >
-                Delegate
+                {t('delegate', 'Delegate')}
               </Button>
             </div>
             <div className="flex-1">
@@ -140,7 +148,7 @@ export function ValidatorBlockMobileComponent({
                 disabled={isUndelegateDisabled}
                 data-attr="undelegate"
               >
-                Undelegate
+                {t('undelegate', 'Undelegate')}
               </Button>
             </div>
           </div>
@@ -152,7 +160,7 @@ export function ValidatorBlockMobileComponent({
               disabled={isRedelegateDisabled}
               data-attr="redelegate"
             >
-              Redelegate
+              {t('redelegate', 'Redelegate')}
             </Button>
           </div>
           <div>
@@ -171,7 +179,7 @@ export function ValidatorBlockMobileComponent({
                 isLoading={isRewardPending}
                 data-attr="get-my-rewards"
               >
-                Get my rewards
+                {t('get-my-rewards', 'Get my rewards')}
               </Button>
             </Tooltip>
           </div>
diff --git a/libs/staking/src/lib/components/validator-info.tsx b/libs/staking/src/lib/components/validator-info.tsx
index 05048bf36..f4aa5b730 100644
--- a/libs/staking/src/lib/components/validator-info.tsx
+++ b/libs/staking/src/lib/components/validator-info.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import type { Validator } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import Markdown from 'marked-react';
 import dynamic from 'next/dynamic';
@@ -137,28 +138,29 @@ function CommissionCardInnerBlock({
 }
 
 function CommissionCard({ commission }: CommissionCardProps) {
+  const { t } = useTranslate('stacking');
   return (
     <div>
       <div className="mb-[16px] flex flex-row items-center">
         <PercentIcon />
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Commission
+          {t('comission', 'Commission')}
         </Heading>
       </div>
 
       <div className="divide-haqq-border border-haqq-border flex max-w-fit flex-row divide-x rounded-lg border py-[16px] lg:py-[24px]">
         <CommissionCardInnerBlock
-          title="Current"
+          title={t('current', 'Current')}
           value={commission.current}
           valueClassName="text-white"
         />
         <CommissionCardInnerBlock
-          title="Max"
+          title={t('max', 'Max')}
           value={commission.max}
           valueClassName="text-white/50"
         />
         <CommissionCardInnerBlock
-          title="Max Change"
+          title={t('max-change', 'Max Change')}
           value={commission.maxChange}
           valueClassName="text-white/50"
         />
@@ -182,6 +184,7 @@ export function ValidatorInfoComponent({
   isRewardPending,
   isRewardsPending,
 }: ValidatorInfoComponentProps) {
+  const { t } = useTranslate('stacking');
   const [isHaqqAddressCopy, setHaqqAddressCopy] = useState(false);
   const { copyText } = useClipboard();
   const isDesktop = useMediaQuery('(min-width: 1024px)', {
@@ -250,7 +253,7 @@ export function ValidatorInfoComponent({
                 <div className="mb-[16px] flex flex-row items-center">
                   <InfoIcon />
                   <Heading level={3} className="mb-[-2px] ml-[8px]">
-                    Info
+                    {t('info', 'Info')}
                   </Heading>
                 </div>
 
@@ -264,7 +267,7 @@ export function ValidatorInfoComponent({
                           target="_blank"
                           rel="noreferrer noreferrer"
                         >
-                          <OrangeLink>Website</OrangeLink>
+                          <OrangeLink>{t('website', 'Website')}</OrangeLink>
                         </Link>
                       )}
 
@@ -272,7 +275,7 @@ export function ValidatorInfoComponent({
                         <Link
                           href={`mailto:${validatorInfo.description?.security_contact}`}
                         >
-                          <OrangeLink>E-mail</OrangeLink>
+                          <OrangeLink>{t('email', 'E-mail')}</OrangeLink>
                         </Link>
                       )}
                     </div>
@@ -280,12 +283,14 @@ export function ValidatorInfoComponent({
 
                   <div className="flex flex-row gap-[28px]">
                     <div>
-                      <InfoBlock title="Voting power">
+                      <InfoBlock title={t('voting-power', 'Voting power')}>
                         {formatNumber(votingPower)} {symbol.toLocaleUpperCase()}
                       </InfoBlock>
                     </div>
                     <div>
-                      <InfoBlock title="Voting power %">
+                      <InfoBlock
+                        title={`${t('voting-power', 'Voting power')} %`}
+                      >
                         {votingPowerInPercents}
                       </InfoBlock>
                     </div>
@@ -293,7 +298,7 @@ export function ValidatorInfoComponent({
                   {validatorInfo.description?.details && (
                     <div>
                       <div className="font-guise text-[12px] leading-[18px] text-white/50">
-                        Description
+                        {t('description', 'Description')}
                       </div>
                       <div
                         className={clsx(
@@ -309,7 +314,7 @@ export function ValidatorInfoComponent({
                     </div>
                   )}
 
-                  <InfoBlock title="Address">
+                  <InfoBlock title={t('address', 'Address')}>
                     <Tooltip
                       text={
                         isHaqqAddressCopy
@@ -424,18 +429,19 @@ function ConnectWallet({
 }: {
   onConnectWalletClick: () => void;
 }) {
+  const { t } = useTranslate('common');
   return (
     <Container className="py-[24px] md:py-[40px]">
       <div className="flex flex-col items-center justify-center gap-[12px]">
         <div className="font-guise text-[14px] leading-[22px] md:text-[18px] md:leading-[28px]">
-          You should connect wallet first
+          {t('connect-wallet-message', 'You should connect wallet first')}
         </div>
         <Button
           onClick={onConnectWalletClick}
           variant={2}
           className="text-black hover:bg-transparent hover:text-white"
         >
-          Connect wallet
+          {t('connect-wallet-btn', 'Connect wallet')}
         </Button>
       </div>
     </Container>
@@ -447,6 +453,7 @@ export function ValidatorInfo({
 }: {
   validatorAddress: string;
 }) {
+  const { t } = useTranslate('stacking');
   const { haqqAddress } = useAddress();
   const chains = useChains();
   const { chain = chains[0] } = useAccount();
@@ -550,7 +557,11 @@ export function ValidatorInfo({
       });
 
       await toast.promise(claimRewardPromise, {
-        loading: <ToastLoading>Rewards claim in progress</ToastLoading>,
+        loading: (
+          <ToastLoading>
+            {t('rewards-claim-in-progress', 'Rewards claim in progress')}
+          </ToastLoading>
+        ),
         success: (tx) => {
           console.log('Rewards claimed', { tx });
           const txHash = tx?.txhash;
@@ -558,7 +569,7 @@ export function ValidatorInfo({
           return (
             <ToastSuccess>
               <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                <div>Rewards claimed</div>
+                <div>{t('rewards-claimed', 'Rewards claimed')}</div>
                 <div>
                   <Link
                     href={`${explorerLink}/tx/${txHash}`}
@@ -604,6 +615,7 @@ export function ValidatorInfo({
     getClaimRewardEstimatedFee,
     invalidateQueries,
     posthog,
+    t,
     toast,
     validatorAddress,
   ]);
@@ -667,21 +679,25 @@ export function ValidatorInfo({
       });
 
       await toast.promise(claimAllRewardPromise, {
-        loading: <ToastLoading>Rewards claim in progress</ToastLoading>,
+        loading: (
+          <ToastLoading>
+            {t('rewards-claim-in-progress', 'Rewards claim in progress')}
+          </ToastLoading>
+        ),
         success: (tx) => {
           console.log('All rewards claimed', { tx });
           const txHash = tx?.txhash;
 
           return (
             <div className="flex flex-col gap-[8px] text-center">
-              <div>Rewards claimed</div>
+              <div>{t('rewards-claimed', 'Rewards claimed')}</div>
               <Link
                 href={`${explorerLink}/tx/${txHash}`}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-haqq-orange hover:text-haqq-light-orange transition-colors duration-300"
               >
-                Explorer link
+                {t('explorer-link', 'Explorer link')}
               </Link>
             </div>
           );
@@ -716,6 +732,7 @@ export function ValidatorInfo({
     getTotalRewards,
     invalidateQueries,
     posthog,
+    t,
     toast,
   ]);
 
@@ -724,7 +741,7 @@ export function ValidatorInfo({
       <div className="pointer-events-none flex min-h-[320px] flex-1 select-none flex-col items-center justify-center space-y-8">
         <SpinnerLoader />
         <div className="font-guise text-[10px] uppercase leading-[1.2em]">
-          Fetching validator information
+          {t('validator-info-loading', 'Fetching validator information')}
         </div>
       </div>
     );
@@ -772,6 +789,7 @@ export function ValidatorBlockDesktop({
   symbol: string;
   isRewardPending?: boolean;
 }) {
+  const { t } = useTranslate('stacking');
   const router = useRouter();
   const isWarningShown =
     validatorInfo.jailed || validatorInfo.status === 'BOND_STATUS_UNBONDED';
@@ -797,15 +815,17 @@ export function ValidatorBlockDesktop({
       <div className="flex flex-row items-center">
         <ValidatorIcon />
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Validator
+          {t('validator', 'Validator')}
         </Heading>
       </div>
 
       {isWarningShown && (
         <div>
           <WarningMessage>
-            While the validator is inactive, you will not be able to receive a
-            reward.
+            {t(
+              'validator-inactive-warning',
+              'While the validator is inactive, you will not be able to receive a reward.',
+            )}
           </WarningMessage>
         </div>
       )}
@@ -813,7 +833,7 @@ export function ValidatorBlockDesktop({
       <div className="flex flex-col gap-y-[12px]">
         <div className="flex flex-col gap-y-[6px]">
           <span className="text-[10px] font-semibold uppercase leading-[12px] text-white/50 lg:text-[12px] lg:leading-[14px]">
-            My delegation
+            {t('my-delegation', 'My delegation')}
           </span>
           <span className="font-clash text-[24px] uppercase leading-[30px] text-white">
             {formatNumber(delegation)} {symbol.toLocaleUpperCase()}
@@ -834,7 +854,7 @@ export function ValidatorBlockDesktop({
               }}
               data-attr="delegate"
             >
-              Delegate
+              {t('delegate', 'Delegate')}
             </Button>
           </div>
           <div className="flex-1">
@@ -852,7 +872,7 @@ export function ValidatorBlockDesktop({
               }}
               data-attr="undelegate"
             >
-              Undelegate
+              {t('undelegate', 'Undelegate')}
             </Button>
           </div>
         </div>
@@ -871,14 +891,14 @@ export function ValidatorBlockDesktop({
             }}
             data-attr="redelegate"
           >
-            Redelegate
+            {t('redelegate', 'Redelegate')}
           </Button>
         </div>
       </div>
       <div className="flex flex-col gap-y-[12px]">
         <div className="flex flex-col gap-y-[6px]">
           <span className="text-[10px] font-semibold uppercase leading-[12px] text-white/50 lg:text-[12px] lg:leading-[14px]">
-            My rewards
+            {t('my-rewards', 'My rewards')}
           </span>
           <span className="font-clash text-[24px] uppercase leading-[30px] text-[#01B26E]">
             {formatNumber(rewards)} {symbol.toLocaleUpperCase()}
@@ -888,7 +908,7 @@ export function ValidatorBlockDesktop({
         <Tooltip
           text={
             rewards < MIN_REWARDS_TO_CLAIM
-              ? `Minimum amount to claim rewards is ${MIN_REWARDS_TO_CLAIM} ISLM`
+              ? `${t('min-amount-to-claim-rewards', 'Minimum amount to claim rewards is')} ${MIN_REWARDS_TO_CLAIM} ISLM`
               : ''
           }
         >
@@ -900,7 +920,7 @@ export function ValidatorBlockDesktop({
             className="w-full"
             data-attr="get-my-rewards"
           >
-            Get my rewards
+            {t('get-my-rewards', 'Get my rewards')}
           </Button>
         </Tooltip>
       </div>
diff --git a/libs/staking/src/lib/components/validator-list-desktop.tsx b/libs/staking/src/lib/components/validator-list-desktop.tsx
index ad21c0233..4a9f74816 100644
--- a/libs/staking/src/lib/components/validator-list-desktop.tsx
+++ b/libs/staking/src/lib/components/validator-list-desktop.tsx
@@ -4,6 +4,7 @@ import {
   GetDelegationsResponse,
   Validator,
 } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { ValidatorListItemDesktop } from './validator-list-item-desktop';
 import { SortDirection, SortState } from '../hooks/use-validator-sort';
@@ -37,6 +38,7 @@ export function ValidatorsListDesktop({
   onDesktopSortClick: (key: string) => void;
   sortState: SortState;
 }) {
+  const { t } = useTranslate('staking');
   const getValidatorRewards = useCallback(
     (address: string) => {
       const rewards = rewardsInfo?.rewards?.find((rewardsItem) => {
@@ -82,7 +84,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('name');
               }}
             >
-              Name
+              {t('name', 'Name')}
               {sortState.key !== 'random' && sortState.key === 'name' && (
                 <SortDirectionArrow direction={sortState.direction} />
               )}
@@ -90,7 +92,7 @@ export function ValidatorsListDesktop({
           </th>
           <th className="w-[100px] p-[8px] text-left lg:p-[12px]">
             <div className="select-none">
-              Status
+              {t('status', 'Status')}
               {sortState.key !== 'random' && sortState.key === 'status' && (
                 <SortDirectionArrow direction={sortState.direction} />
               )}
@@ -108,7 +110,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('fee');
               }}
             >
-              Fee
+              {t('fee', 'Fee')}
               {sortState.key !== 'random' && sortState.key === 'fee' && (
                 <SortDirectionArrow direction={sortState.direction} />
               )}
@@ -126,7 +128,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('votingPower');
               }}
             >
-              Voting power
+              {t('voting-power', 'Voting power')}
               {sortState.key !== 'random' &&
                 sortState.key === 'votingPower' && (
                   <SortDirectionArrow direction={sortState.direction} />
@@ -145,7 +147,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('votingPowerPercent');
               }}
             >
-              Voting power %
+              {t('voting-power', 'Voting power')} %
               {sortState.key !== 'random' &&
                 sortState.key === 'votingPowerPercent' && (
                   <SortDirectionArrow direction={sortState.direction} />
@@ -164,7 +166,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('staked');
               }}
             >
-              My stake
+              {t('my-stake', 'My stake')}
               {sortState.key !== 'random' && sortState.key === 'staked' && (
                 <SortDirectionArrow direction={sortState.direction} />
               )}
@@ -182,7 +184,7 @@ export function ValidatorsListDesktop({
                 onDesktopSortClick('reward');
               }}
             >
-              My rewards
+              {t('my-rewards', 'My rewards')}
               {sortState.key !== 'random' && sortState.key === 'reward' && (
                 <SortDirectionArrow direction={sortState.direction} />
               )}
diff --git a/libs/staking/src/lib/components/validator-list-item-mobile.tsx b/libs/staking/src/lib/components/validator-list-item-mobile.tsx
index ccc9d92f6..c8ee2f99c 100644
--- a/libs/staking/src/lib/components/validator-list-item-mobile.tsx
+++ b/libs/staking/src/lib/components/validator-list-item-mobile.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { PropsWithChildren, useCallback, useMemo } from 'react';
 import type { Validator, DelegationResponse, Reward } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import { formatUnits, parseUnits } from 'viem';
 import { formatNumber, Card } from '@haqq/shell-ui-kit/server';
 
@@ -35,6 +36,7 @@ export function ValidatorListItemMobileComponent({
   votingPower,
   votingPowerPercent,
 }: ValidatorListItemMobileProps) {
+  const { t } = useTranslate('staking');
   return (
     <Card className="p-[14px]">
       <div className="flex flex-col gap-[8px]">
@@ -43,28 +45,34 @@ export function ValidatorListItemMobileComponent({
         </ColumnLine>
         <ColumnLine columnName="Status">
           {status === 'jailed' && (
-            <span className="text-[#FF5454]">Jailed</span>
+            <span className="text-[#FF5454]">
+              {t('jailed-status', 'Jailed')}
+            </span>
           )}
           {status === 'active' && (
-            <span className="text-[#01B26E]">Active</span>
+            <span className="text-[#01B26E]">
+              {t('active-status', 'Active')}
+            </span>
           )}
           {status === 'inactive' && (
-            <span className="text-[#E3A13F]">Inactive</span>
+            <span className="text-[#E3A13F]">
+              {t('inactive-status', 'Inactive')}
+            </span>
           )}
         </ColumnLine>
-        <ColumnLine columnName="Fee">
+        <ColumnLine columnName={t('fee', 'Fee')}>
           <span className="text-white">{fee}</span>
         </ColumnLine>
-        <ColumnLine columnName="Voting power">
+        <ColumnLine columnName={t('voting-power', 'Voting power')}>
           <span className="text-white">{votingPower}</span>
         </ColumnLine>
-        <ColumnLine columnName="Voting power %">
+        <ColumnLine columnName={`${t('voting-power', 'Voting power')} %`}>
           <span className="text-white">{votingPowerPercent}</span>
         </ColumnLine>
-        <ColumnLine columnName="Staked">
+        <ColumnLine columnName={t('stacked', 'Staked')}>
           <span className="text-white">{staked}</span>
         </ColumnLine>
-        <ColumnLine columnName="Reward">
+        <ColumnLine columnName={t('reward', 'Reward')}>
           <span className="text-white">{reward}</span>
         </ColumnLine>
       </div>
diff --git a/libs/staking/src/lib/components/validator-list-mobile.tsx b/libs/staking/src/lib/components/validator-list-mobile.tsx
index e625477d5..538e203f5 100644
--- a/libs/staking/src/lib/components/validator-list-mobile.tsx
+++ b/libs/staking/src/lib/components/validator-list-mobile.tsx
@@ -4,6 +4,7 @@ import {
   GetDelegationsResponse,
   Validator,
 } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import { ValidatorListItemMobile } from './validator-list-item-mobile';
 
 export function ValidatorsListMobile({
@@ -19,6 +20,7 @@ export function ValidatorsListMobile({
   onValidatorClick: (validatorAddress: string) => void;
   totalStaked: number;
 }) {
+  const { t } = useTranslate('common');
   const getValidatorRewards = useCallback(
     (address: string) => {
       const rewards = rewardsInfo?.rewards?.find((rewardsItem) => {
@@ -47,7 +49,7 @@ export function ValidatorsListMobile({
     return (
       <div className="flex min-h-full flex-1 flex-col items-center justify-center space-y-8">
         <div className="font-guise text-[10px] uppercase leading-[1.2em]">
-          Nothing found
+          {t('nothing-found', 'Nothing found')}
         </div>
       </div>
     );
diff --git a/libs/staking/src/lib/components/validator-list.tsx b/libs/staking/src/lib/components/validator-list.tsx
index 270ee61a2..ec5b89c3f 100644
--- a/libs/staking/src/lib/components/validator-list.tsx
+++ b/libs/staking/src/lib/components/validator-list.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { useRouter } from 'next/navigation';
 import { useMediaQuery } from 'usehooks-ts';
@@ -23,6 +24,7 @@ export function ValidatorList({
   isMobileUserAgent: boolean;
   seedPhrase: string;
 }) {
+  const { t } = useTranslate('staking');
   const {
     totalStaked,
     valsTotal,
@@ -109,7 +111,7 @@ export function ValidatorList({
           <div className="flex flex-row items-center">
             <ValidatorIcon />
             <Heading level={3} className="mb-[-2px] ml-[8px]">
-              Validators
+              {t('validators', 'Validators')}
               {status !== 'pending' && (
                 <span className="text-white/50">
                   &nbsp;(<span>{validatorsCounterText}</span>)
@@ -121,17 +123,17 @@ export function ValidatorList({
           <div className="flex flex-col gap-[12px] lg:flex-row lg:items-center lg:gap-[24px]">
             <SearchInput value={filter} onChange={setFilter} />
             <SortSelect
-              placeholder="Sorting by"
+              placeholder={t('sort-by', 'Sorting by')}
               current={`${sortState.key}-${sortState.direction}`}
               onChange={handleMobileSortChange}
               variants={[
-                { id: 'random', title: 'Random' },
-                { id: 'name-asc', title: 'By name (a-z)' },
-                { id: 'name-desc', title: 'By name (z-a)' },
-                { id: 'power-asc', title: 'By power (a-z)' },
-                { id: 'power-desc', title: 'By power (z-a)' },
-                { id: 'fee-asc', title: 'By fee (a-z)' },
-                { id: 'fee-desc', title: 'By fee (z-a)' },
+                { id: 'random', title: t('random', 'Random') },
+                { id: 'name-asc', title: t('name-asc', 'By name (a-z)') },
+                { id: 'name-desc', title: t('name-desc', 'By name (z-a)') },
+                { id: 'power-asc', title: t('power-asc', 'By power (a-z)') },
+                { id: 'power-desc', title: t('power-desc', 'By power (z-a)') },
+                { id: 'fee-asc', title: t('fee-asc', 'By fee (a-z)') },
+                { id: 'fee-desc', title: t('fee-desc', 'By fee (z-a)') },
               ]}
               className="lg:hidden"
             />
@@ -143,7 +145,7 @@ export function ValidatorList({
                   disabled={!isWalletConnected}
                   value={isWalletConnected ? isShowMyDelegation : false}
                 >
-                  My delegations
+                  {t('my-delegations', 'My delegations')}
                 </Checkbox>
               </div>
               <div className="leading-[0]">
@@ -151,7 +153,7 @@ export function ValidatorList({
                   onChange={setInactiveValidatorsVisible}
                   value={isInactiveValidatorsVisible}
                 >
-                  Show Inactive
+                  {t('show-inactive', 'Show inactive')}
                 </Checkbox>
               </div>
             </div>
@@ -163,12 +165,13 @@ export function ValidatorList({
             <div className="flex min-h-full flex-1 flex-col items-center justify-center space-y-8">
               <SpinnerLoader />
               <div className="font-guise text-[10px] uppercase leading-[1.2em]">
-                Fetching validators list
+                {t('fetching-validators-message', 'Fetching validators list')}
               </div>
             </div>
           </div>
         )}
 
+        {/* TODO: how to translate such errors if they come from BE?*/}
         {status === 'error' && (
           <p>Error: {error?.message ?? 'unknown error'}</p>
         )}
diff --git a/libs/staking/src/lib/components/validator-select.tsx b/libs/staking/src/lib/components/validator-select.tsx
index 8131924e6..d87c241f9 100644
--- a/libs/staking/src/lib/components/validator-select.tsx
+++ b/libs/staking/src/lib/components/validator-select.tsx
@@ -1,5 +1,6 @@
 'uce client';
 import { useCallback, useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import Select, {
   components as validatorSelectComponents,
@@ -33,6 +34,7 @@ export function ValidatorSelect({
   validators: Array<ValidatorSelectOption>;
   onChange: (validatorAddress?: string) => void;
 }) {
+  const { t } = useTranslate('stacking');
   const handleFilterOption = useCallback(
     ({ label, value }: ValidatorSelectOption, inputValue: string) => {
       const inputLower = inputValue.toLowerCase();
@@ -94,7 +96,7 @@ export function ValidatorSelect({
 
   return (
     <Select
-      placeholder="Select new validator"
+      placeholder={t('select-new-validator', 'Select new validator')}
       options={validators}
       onChange={(validator) => {
         onChange(validator?.value);
diff --git a/libs/staking/src/lib/validator-details-page.tsx b/libs/staking/src/lib/validator-details-page.tsx
index 667be5760..bd14fa0f4 100644
--- a/libs/staking/src/lib/validator-details-page.tsx
+++ b/libs/staking/src/lib/validator-details-page.tsx
@@ -1,15 +1,19 @@
 import { Fragment } from 'react';
+import { useTranslate } from '@tolgee/react';
 import Link from 'next/link';
 import { BackButton, Container } from '@haqq/shell-ui-kit/server';
 import { ValidatorInfo } from './components/validator-info';
 
 export function ValidatorDetailsPage({ address }: { address: string }) {
+  const { t } = useTranslate();
   return (
     <Fragment>
       <Container>
         <div className="py-[18px] sm:py-[26px] lg:py-[34px]">
           <Link href="/staking">
-            <BackButton>Staking</BackButton>
+            <BackButton>
+              {t('stacking', 'Staking', { ns: 'common' })}
+            </BackButton>
           </Link>
         </div>
       </Container>
diff --git a/libs/staking/src/lib/validator-list-page.tsx b/libs/staking/src/lib/validator-list-page.tsx
index 6cedf1ed5..ca39846cd 100644
--- a/libs/staking/src/lib/validator-list-page.tsx
+++ b/libs/staking/src/lib/validator-list-page.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { Fragment } from 'react';
+import { useTranslate } from '@tolgee/react';
 import { useWallet } from '@haqq/shell-shared';
 import { Container } from '@haqq/shell-ui-kit/server';
 import { StakingInfo } from './components/staking-info';
@@ -13,6 +14,7 @@ export function ValidatorListPage({
   seedPhrase: string;
 }) {
   const { isHaqqWallet } = useWallet();
+  const { t } = useTranslate();
 
   return (
     <Fragment>
@@ -20,7 +22,7 @@ export function ValidatorListPage({
         <div className="py-[32px] lg:py-[68px]">
           <Container>
             <div className="font-clash text-[28px] uppercase leading-none sm:text-[48px] lg:text-[70px]">
-              Staking
+              {t('stacking', 'Staking', { ns: 'common' })}
             </div>
           </Container>
         </div>
diff --git a/package.json b/package.json
index 0efb60b9d..b8064c206 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@t3-oss/env-nextjs": "0.11.1",
     "@tanstack/react-query": "5.59.16",
     "@tanstack/react-query-devtools": "5.59.16",
+    "@tolgee/format-icu": "5.31.1",
     "@tolgee/react": "5.31.1",
     "@tolgee/web": "5.31.1",
     "@vercel/speed-insights": "1.0.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 279d4647a..706d60222 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: 5.59.16
         version: 5.59.16(@tanstack/react-query@5.59.16(react@18.3.1))(react@18.3.1)
+      '@tolgee/format-icu':
+        specifier: 5.31.1
+        version: 5.31.1
       '@tolgee/react':
         specifier: 5.31.1
         version: 5.31.1(react@18.3.1)
@@ -4306,6 +4309,9 @@ packages:
   '@tolgee/core@5.31.1':
     resolution: {integrity: sha512-VTksKYjW0QoqrJ1czeftE7Y0zZYUfdZM7TRKbhqGpXXMmoF6Sq5EHx2qMOtAOfOksyOeqc8f8Rdhpo56qST9Xg==}
 
+  '@tolgee/format-icu@5.31.1':
+    resolution: {integrity: sha512-ZjfZZuDxWzl8OiPhVf+7eSK6cRWm+oyIcOPV1KFswC9w1+JHrAD2FOvkqanOw01yj/DWTAyfW3hQ8JnZZpTu0w==}
+
   '@tolgee/react@5.31.1':
     resolution: {integrity: sha512-/Tq4UdTaFGv0fZOrvv8ONCgiEUV1kx40SUdsauLpuhPEsfxQ+bXPaSzUSKWqTwsZawwI0idqabvEzeAvM+ZPNg==}
     peerDependencies:
@@ -17836,6 +17842,8 @@ snapshots:
 
   '@tolgee/core@5.31.1': {}
 
+  '@tolgee/format-icu@5.31.1': {}
+
   '@tolgee/react@5.31.1(react@18.3.1)':
     dependencies:
       '@tolgee/web': 5.31.1