feat(tolgee-keys): governance

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

apps/shell/src/i18n/en.json

@@ -42,7 +42,9 @@
     "undelegate": "Undelegate",
     "redelegate": "Redelegate"
   },
-  "governance": {},
+  "governance": {
+    "your-balance": "Your balance: {{localedBalance}} {{localedSymbolUpperCase}}"
+  },
   "main": {},
   "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}}",

libs/governance/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/proposal-list-page';
 export * from './lib/proposal-details-page';
 export * from './lib/components/proposal-list-card';
+export * from './lib/hooks/useGetProposalTypeText';

libs/governance/src/lib/components/parameter-change-proposal.tsx

@@ -1,4 +1,5 @@
 import { ParameterChangeProposalContent } from '@evmos/provider';
+import { useTranslate } from '@tolgee/react';
 import { Heading } from '@haqq/shell-ui-kit/server';
 import { Metadata } from './metadata';
 
@@ -7,6 +8,7 @@ export function ParameterChangeProposalDetails({
 }: {
   content: ParameterChangeProposalContent;
 }) {
+  const { t } = useTranslate('governance');
   return (
     <div>
       <div className="mb-[16px] flex flex-row items-center">
@@ -26,7 +28,7 @@ export function ParameterChangeProposalDetails({
         </svg>
 
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Parameter changes
+          {t('parameter-changes', 'Parameter changes')}
         </Heading>
       </div>
       <Metadata>{JSON.stringify(content.changes, null, 2)}</Metadata>

libs/governance/src/lib/components/proposal-deposit-modal.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import {
   Button,
@@ -65,6 +66,7 @@ export function ProposalDepositModal({
   onSubmit: (amount: number) => void;
   isPending?: boolean;
 }) {
+  const { t } = useTranslate('governance');
   const [depositAmount, setDepositAmount] = useState<number | undefined>(
     undefined,
   );
@@ -101,13 +103,21 @@ export function ProposalDepositModal({
 
   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 handleMaxButtonClick = useCallback(() => {
     setDepositAmount(balance);
@@ -129,12 +139,12 @@ export function ProposalDepositModal({
         <div className="flex w-full flex-col space-y-6">
           <div className="divide-haqq-border divide-y divide-dashed">
             <div className="pb-[24px] pt-[24px] sm:pt-[4px]">
-              <ModalHeading>Deposit</ModalHeading>
+              <ModalHeading>{t('deposit', 'Deposit')}</ModalHeading>
             </div>
             <div className="py-[24px]">
               <div className="flex flex-col gap-[8px]">
                 <DepositModalDetails
-                  title="My balance"
+                  title={t('my-balance', 'My balance')}
                   value={`${balance.toLocaleString()} ${symbol.toUpperCase()}`}
                 />
               </div>
@@ -157,7 +167,7 @@ export function ProposalDepositModal({
                   disabled={!isDepositEnabled || !depositAmount}
                   isLoading={isPending}
                 >
-                  Confirm delegation
+                  {t('confirm-delegation', 'Confirm delegation')}
                 </Button>
               </div>
             </div>

libs/governance/src/lib/components/proposal-list-card.tsx

@@ -6,7 +6,7 @@ import {
   TallyResults,
 } from '@haqq/data-access-cosmos';
 import { ProposalCard, ProposalStatusEnum } from '@haqq/shell-ui-kit/server';
-import { getProposalTypeText } from '../proposal-details-page';
+import { useGetProposalTypeText } from '../hooks/useGetProposalTypeText';
 
 export function ProposalListCard({
   proposal,
@@ -54,7 +54,7 @@ export function ProposalListCard({
       minDeposit={minDeposit}
       results={proposalTally}
       symbol={symbol}
-      type={getProposalTypeText(proposal.content['@type'])}
+      type={useGetProposalTypeText(proposal.content['@type'])}
       userVote={userVote}
       className={className}
     />

libs/governance/src/lib/components/software-upgrade-proposal.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useTranslate } from '@tolgee/react';
 import { Heading } from '@haqq/shell-ui-kit/server';
 import { Metadata } from './metadata';
 
@@ -15,6 +16,7 @@ export function SoftwareUpgradeProposalDetails({
 }: {
   plan: SoftwareUpgradeProposalPlan;
 }) {
+  const { t } = useTranslate('governance');
   const formattedPlan = useMemo(() => {
     return {
       name: plan.name,
@@ -44,7 +46,7 @@ export function SoftwareUpgradeProposalDetails({
         </svg>
 
         <Heading level={3} className="mb-[-2px] ml-[8px]">
-          Upgrade plan
+          {t('upgrade-plan', 'Upgrade plan')}
         </Heading>
       </div>
 

libs/governance/src/lib/hooks/useGetProposalTypeText.tsx

@@ -0,0 +1,44 @@
+import { useTranslate } from '@tolgee/react';
+
+export const enum ProposalTypes {
+  Text = '/cosmos.gov.v1beta1.TextProposal',
+  SoftwareUpgrade = '/cosmos.upgrade.v1beta1.SoftwareUpgradeProposal',
+  CancelSoftwareUpgrade = '/cosmos.upgrade.v1beta1.CancelSoftwareUpgradeProposal',
+  ParameterChange = '/cosmos.params.v1beta1.ParameterChangeProposal',
+  ClientUpdate = '/ibc.core.client.v1.ClientUpdateProposal',
+  RegisterCoin = '/evmos.erc20.v1.RegisterCoinProposal',
+  RegisterERC20 = '/evmos.erc20.v1.RegisterERC20Proposal',
+}
+
+export function useGetProposalTypeText(type: string) {
+  const { t } = useTranslate('governance');
+
+  switch (type) {
+    case ProposalTypes.Text:
+      return t('proposal-types.text', 'Text');
+
+    case ProposalTypes.SoftwareUpgrade:
+      return t('proposal-types.software-upgrade', 'Software upgrade');
+
+    case ProposalTypes.CancelSoftwareUpgrade:
+      return t(
+        'proposal-types.cancel-software-upgrade',
+        'Cancel software upgrade',
+      );
+
+    case ProposalTypes.ClientUpdate:
+      return t('proposal-types.client-update', 'Client update');
+
+    case ProposalTypes.ParameterChange:
+      return t('proposal-types.parameter-change', 'Parameter change');
+
+    case ProposalTypes.RegisterCoin:
+      return t('proposal-types.register-coin', 'Register coin');
+
+    case ProposalTypes.RegisterERC20:
+      return t('proposal-types.register-erc20', 'Register ERC20');
+
+    default:
+      return type;
+  }
+}