feat(staking): use tolgee keys

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",

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,

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,

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>

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,

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>

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,15 +97,19 @@ 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;
 
           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,15 +250,15 @@ 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
               onClick={openSelectWallet}
               variant={2}
               className="text-black hover:bg-transparent hover:text-white"
             >
-              Connect wallet
+              {t('connect-wallet-btn', 'Connect wallet')}
             </Button>
           </div>
         </Container>