feat(governance): use tolgee for translation (#984)

* feat(tolgee-keys): governance Signed-off-by: viktoriabakun <[email protected]> * feat(tolgee-keys): governance Signed-off-by: viktoriabakun <[email protected]> * fix(governance): simplify your-balance params Signed-off-by: viktoriabakun <[email protected]> * feat(governance): extract tolgee keys Signed-off-by: viktoriabakun <[email protected]> * chore: fix build Signed-off-by: viktoriabakun <[email protected]> --------- Signed-off-by: viktoriabakun <[email protected]>
haqq-network · Nov 5, 2024 · 55ef532 · 55ef532
1 parent 67e622d
commit 55ef532
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 91 deletions.
diff --git a/apps/shell/messages/en.json b/apps/shell/messages/en.json
@@ -45,7 +45,51 @@
     "confirm-button": "Confirm",
     "send-button": "Send"
   },
-  "governance": {},
+  "governance": {
+    "add-memo": "Add memo",
+    "add-your-memo": "Add your memo",
+    "amount-error-min": "Bellow minimal value",
+    "amount-error-more-than-have": "More than you have",
+    "cast-vote": "Cast your vote",
+    "change-vote-message": "You can change your vote while the voting is in progress",
+    "confirm-delegation": "Confirm delegation",
+    "created-at": "Created at (gmt)",
+    "dates": "Dates",
+    "deposit": "Deposit",
+    "deposit-end": "Deposit end",
+    "description": "Description",
+    "enter-amount": "Enter Amount",
+    "enter-deposit-message": "Enter the amount you want to deposit",
+    "fetching-proposal-details": "Fetching proposal details",
+    "fetching-proposals": "Fetching proposals",
+    "info": "Info",
+    "my-balance": "My balance",
+    "parameter-changes": "Parameter changes",
+    "proposal-deposit-alert": "If the proposal does not collect the required number of deposits in a certain time, it will reject",
+    "proposal-types": {
+      "cancel-software-upgrade": "Cancel software upgrade",
+      "client-update": "Client update",
+      "parameter-change": "Parameter change",
+      "register-coin": "Register coin",
+      "register-erc20": "Register ERC20",
+      "software-upgrade": "Software upgrade",
+      "text": "Text"
+    },
+    "show-all-dates": "Show all dates",
+    "total-deposit": "Total deposit",
+    "upgrade-plan": "Upgrade plan",
+    "vote-end": "Vote end (gmt)",
+    "vote-fail-error": "For some reason your vote failed.",
+    "vote-in-progress": "Vote in progress",
+    "vote-option-abstain": "Abstain",
+    "vote-option-no": "No",
+    "vote-option-veto": "Veto",
+    "vote-option-yes": "Yes",
+    "vote-start": "Vote start (gmt)",
+    "vote-will-count": "Your vote will be counted!!!",
+    "voting-end": "Voting end",
+    "your-balance": "Your balance: {{balance}} {{symbol}}"
+  },
   "main": {},
   "staking": {
     "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}}",

diff --git a/apps/shell/src/components/locale-dropdown.tsx b/apps/shell/src/components/locale-dropdown.tsx
@@ -1,5 +1,5 @@
-import { useLocaleSwitcher } from '../hooks/use-locale-switcher';
 import { LocaleDropdown } from '@haqq/shell-ui-kit';
+import { useLocaleSwitcher } from '../hooks/use-locale-switcher';
 
 export function AppLocaleDropdown() {
   const { switchLocale, locales, currentLocale } = useLocaleSwitcher();

diff --git a/libs/governance/src/index.ts b/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';
diff --git a/libs/governance/src/lib/components/parameter-change-proposal.tsx b/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>

diff --git a/libs/governance/src/lib/components/proposal-deposit-modal.tsx b/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>

diff --git a/libs/governance/src/lib/components/proposal-list-card.tsx b/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}
     />

diff --git a/libs/governance/src/lib/components/software-upgrade-proposal.tsx b/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>
 

diff --git a/libs/governance/src/lib/hooks/useGetProposalTypeText.tsx b/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;
+  }
+}