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>
haqq-network · Oct 31, 2024 · 2896338 · 2896338
1 parent 1007f8e
commit 2896338
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 104 deletions.
diff --git a/apps/shell/src/i18n/en.json b/apps/shell/src/i18n/en.json
@@ -1,8 +1,46 @@
 {
-  "authz": {},
+  "authz": {
+    "revoke-button": "Revoke",
+    "revoke-loading": "Revoke in progress",
+    "revoke-success": "Revoke successful",
+    "access-you-granted": "Access you have granted",
+    "access-granted-to-you": "Access you have been granted",
+    "grantee": "Grantee",
+    "message": "Message",
+    "valid-thru": "Valid thru",
+    "selected-grantee": "Selected grantee",
+    "staked": "Staked",
+    "rewards": "Rewards",
+    "unbonding": "Unbonding",
+    "grant-access": "Grant access",
+    "grantee-address": "Grantee address",
+    "grant-type": "Grant type",
+    "grant-period": "Grant period",
+    "memo": "Memo",
+    "add-your-memo": "Add your memo",
+    "grant-access-button": "Grant Access",
+    "invalid-grantee-wallet-message": "You should enter valid grantee wallet to see info",
+    "submit-proposal": "Submit proposal",
+    "vote": "Vote",
+    "one-week": "1 week",
+    "one-month": "1 month",
+    "three-months": "3 months",
+    "six-months": "6 months",
+    "one-year": "1 year",
+    "five-years": "5 years",
+    "hundred-years": "100 years"
+  },
   "common": {
+    "address-label": "Address",
     "copied": "Copied!",
-    "click-to-copy": "Click to copy"
+    "click-to-copy": "Click to copy",
+    "connect-wallet-message": "You should connect wallet first",
+    "connect-wallet-button": "Connect wallet",
+    "governance": "Governance",
+    "staking": "Staking",
+    "delegate": "Delegate",
+    "undelegate": "Undelegate",
+    "redelegate": "Redelegate"
   },
   "governance": {},
   "main": {},
@@ -11,7 +49,6 @@
   "utils": {
     "invalid-address": "Please enter a valid address",
     "address-conversion-title": "Address Conversion",
-    "address-label": "Address",
     "converted-address-label": "Converted address",
     "balance-label": "Balance"
   }

diff --git a/libs/authz/src/lib/authz-grants-actions.tsx b/libs/authz/src/lib/authz-grants-actions.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { isAddress } from 'viem';
@@ -35,75 +36,77 @@ export const enum GRANT_TYPES {
   Undelegate = '/cosmos.staking.v1beta1.MsgUndelegate',
 }
 
-const GRANT_TYPE_OPTIONS = [
-  {
-    label: 'Governance',
-    options: [
-      {
-        label: 'Submit Proposal',
-        value: GRANT_TYPES.SubmitProposal,
-      },
-      {
-        label: 'Vote',
-        value: GRANT_TYPES.Vote,
-      },
-    ],
-  },
-  {
-    label: 'Staking',
-    options: [
-      {
-        label: 'Delegate',
-        value: GRANT_TYPES.Delegate,
-      },
-      {
-        label: 'Undelegate',
-        value: GRANT_TYPES.Undelegate,
-      },
-      {
-        label: 'Redelegate',
-        value: GRANT_TYPES.Redelegate,
-      },
-    ],
-  },
-];
+export function AuthzGrantsActions() {
+  const { t } = useTranslate();
 
-export const GRANT_TYPE_DEFAULT_OPTION = GRANT_TYPE_OPTIONS[0].options[0];
+  const GRANT_TYPE_OPTIONS = [
+    {
+      label: t('governance', 'Governance', { ns: 'common' }),
+      options: [
+        {
+          label: t('submit-proposal', 'Submit Proposal', { ns: 'authz' }),
+          value: GRANT_TYPES.SubmitProposal,
+        },
+        {
+          label: t('vote', 'Vote', { ns: 'authz' }),
+          value: GRANT_TYPES.Vote,
+        },
+      ],
+    },
+    {
+      label: t('staking', 'Staking', { ns: 'common' }),
+      options: [
+        {
+          label: t('delegate', 'Delegate', { ns: 'common' }),
+          value: GRANT_TYPES.Delegate,
+        },
+        {
+          label: t('undelegate', 'Undelegate', { ns: 'common' }),
+          value: GRANT_TYPES.Undelegate,
+        },
+        {
+          label: t('redelegate', 'Redelegate', { ns: 'common' }),
+          value: GRANT_TYPES.Redelegate,
+        },
+      ],
+    },
+  ];
 
-export const GRANT_PERIOD_OPTIONS = [
-  {
-    label: '1 Week',
-    value: '1w',
-  },
-  {
-    label: '1 Month',
-    value: '1m',
-  },
-  {
-    label: '3 Months',
-    value: '3m',
-  },
-  {
-    label: '6 Months',
-    value: '6m',
-  },
-  {
-    label: '1 Year',
-    value: '1y',
-  },
-  {
-    label: '5 Years',
-    value: '5y',
-  },
-  {
-    label: '100 Years',
-    value: '100y',
-  },
-];
+  const GRANT_TYPE_DEFAULT_OPTION = GRANT_TYPE_OPTIONS[0].options[0];
 
-export const GRANT_PERIOD_DEFAULT_OPTION = GRANT_PERIOD_OPTIONS[4];
+  const GRANT_PERIOD_OPTIONS = [
+    {
+      label: t('one-week', '1 Week', { ns: 'auth' }),
+      value: '1w',
+    },
+    {
+      label: t('one-month', '1 Month', { ns: 'auth' }),
+      value: '1m',
+    },
+    {
+      label: t('three-months', '3 Months', { ns: 'auth' }),
+      value: '3m',
+    },
+    {
+      label: t('six-months', '6 Months', { ns: 'auth' }),
+      value: '6m',
+    },
+    {
+      label: t('one-year', '1 Year', { ns: 'auth' }),
+      value: '1y',
+    },
+    {
+      label: t('five-years', '5 Years', { ns: 'auth' }),
+      value: '5y',
+    },
+    {
+      label: t('hundred-years', '100 Years', { ns: 'auth' }),
+      value: '100y',
+    },
+  ];
+
+  const GRANT_PERIOD_DEFAULT_OPTION = GRANT_PERIOD_OPTIONS[4];
 
-export function AuthzGrantsActions() {
   const [grantee, setGrantee] = useState('');
   const [isGranteeValid, setGranteeValid] = useState(false);
   const [granteeAddresses, setGranteeAddresses] = useState<{
@@ -194,15 +197,17 @@ export function AuthzGrantsActions() {
       });
 
       await toast.promise(grantPromise, {
-        loading: <ToastLoading>Grant in progress</ToastLoading>,
+        loading: (
+          <ToastLoading>{t('grant-loading', 'Grant in progress')}</ToastLoading>
+        ),
         success: (tx) => {
           console.log('Grant successful', { tx });
           const txHash = tx?.txhash;
 
           return (
             <ToastSuccess>
               <div className="flex flex-col items-center gap-[8px] text-[20px] leading-[26px]">
-                <div>Grant successful</div>
+                <div>{t('grant-success', 'Grant successful')}</div>
                 <div>
                   <Link
                     href={`${explorer.cosmos}/tx/${txHash}`}
@@ -242,6 +247,7 @@ export function AuthzGrantsActions() {
     invalidateQueries,
     isGranteeValid,
     memo,
+    t,
     toast,
   ]);
 
@@ -304,7 +310,7 @@ export function AuthzGrantsActions() {
           <div className="flex flex-1 flex-col gap-[32px] py-[32px] sm:py-[22px] lg:pb-[40px] lg:pt-[32px]">
             <div>
               <Heading level={3} className="mb-[-2px]">
-                Grant access
+                {t('grant-access', 'Grant access')}
               </Heading>
             </div>
 
@@ -317,7 +323,7 @@ export function AuthzGrantsActions() {
                         htmlFor="grantee"
                         className="cursor-pointer text-[12px] font-[500] uppercase leading-[24px] text-white/50"
                       >
-                        Grantee address
+                        {t('grantee-address', 'Grantee address')}
                       </label>
                     </div>
                     <div>
@@ -344,7 +350,7 @@ export function AuthzGrantsActions() {
 
                   <div>
                     <Select
-                      label="Grant type"
+                      label={t('grant-type', 'Grant type')}
                       selectContainerClassName="w-full max-w-xl"
                       onChange={(type) => {
                         if (type) {
@@ -358,7 +364,7 @@ export function AuthzGrantsActions() {
 
                   <div>
                     <Select
-                      label="Grant period"
+                      label={t('grant-period', 'Grant period')}
                       selectContainerClassName="w-full max-w-xl"
                       onChange={(period) => {
                         if (period) {
@@ -376,7 +382,7 @@ export function AuthzGrantsActions() {
                         htmlFor="memo"
                         className="cursor-pointer text-[12px] font-[500] uppercase leading-[24px] text-white/50"
                       >
-                        Memo
+                        {t('memo', 'Memo')}
                       </label>
                     </div>
                     <div>
@@ -389,7 +395,7 @@ export function AuthzGrantsActions() {
                           'max-w-xl',
                         )}
                         type="text"
-                        placeholder="Add your memo"
+                        placeholder={t('add-your-memo', 'Add your memo')}
                         id="memo"
                         name="memo"
                         value={memo}
@@ -408,7 +414,7 @@ export function AuthzGrantsActions() {
                       variant={2}
                       disabled={!isGranteeValid}
                     >
-                      Grant Access
+                      {t('grant-access', 'Grant access')}
                     </Button>
                   </div>
                 </div>
@@ -428,14 +434,17 @@ export function AuthzGrantsActions() {
                 <div className="flex w-full transform-gpu flex-col gap-[24px] overflow-hidden rounded-[8px] bg-[#FFFFFF14] px-[36px] py-[32px]">
                   <div>
                     <Heading level={3} className="mb-[-2px]">
-                      Selected grantee
+                      {t('selected-grantee', 'Selected grantee')}
                     </Heading>
                   </div>
 
                   <div className="flex flex-col justify-between gap-[24px] md:min-h-[230px]">
                     <div className="flex flex-1 flex-col items-center justify-center gap-[12px]">
                       <div className="font-guise text-[12px] leading-[22px] md:text-[14px] md:leading-[28px]">
-                        You should enter valid grantee wallet to see info
+                        {t(
+                          'invalid-grantee-wallet-message',
+                          'You should enter valid grantee wallet to see info',
+                        )}
                       </div>
                     </div>
                   </div>

diff --git a/libs/authz/src/lib/authz-page.tsx b/libs/authz/src/lib/authz-page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslate } from '@tolgee/react';
 import clsx from 'clsx';
 import { useAddress, useWallet } from '@haqq/shell-shared';
 import { Button } from '@haqq/shell-ui-kit';
@@ -10,6 +11,7 @@ import { GranterGrantsTable } from './granter-table';
 export function AuthzPage() {
   const { ethAddress } = useAddress();
   const { openSelectWallet, isHaqqWallet } = useWallet();
+  const { t } = useTranslate('common');
 
   return (
     <div>
@@ -32,10 +34,10 @@ export function AuthzPage() {
             )}
           >
             <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={openSelectWallet} variant={2}>
-              Connect wallet
+              {t('connect-wallet-button', 'Connect wallet')}
             </Button>
           </div>
         ) : (