From 28963389729cc1a7394aa52d42c0394be8f2f571 Mon Sep 17 00:00:00 2001 From: Viktoryia Date: Thu, 31 Oct 2024 13:52:56 +0100 Subject: [PATCH] feat(authz): use tolgee keys (#974) * feat(tolgee-keys): revoke-button Signed-off-by: viktoriabakun * feat(tolgee-keys): granter-table Signed-off-by: viktoriabakun * feat(tolgee-keys): grantee-table and some corrections Signed-off-by: viktoriabakun * feat(tolgee-keys): grantee-card Signed-off-by: viktoriabakun * feat(tolgee-keys): authz-grants-actions Signed-off-by: viktoriabakun * feat(tolgee-keys): authz-page Signed-off-by: viktoriabakun * feat(tolgee-keys): select options Signed-off-by: viktoriabakun --------- Signed-off-by: viktoriabakun --- apps/shell/src/i18n/en.json | 43 +++++- libs/authz/src/lib/authz-grants-actions.tsx | 161 +++++++++++--------- libs/authz/src/lib/authz-page.tsx | 6 +- libs/authz/src/lib/grantee-card.tsx | 24 +-- libs/authz/src/lib/grantee-table.tsx | 10 +- libs/authz/src/lib/granter-table.tsx | 10 +- libs/authz/src/lib/revoke-button.tsx | 13 +- 7 files changed, 163 insertions(+), 104 deletions(-) diff --git a/apps/shell/src/i18n/en.json b/apps/shell/src/i18n/en.json index 58a18e3c3..cc7f26936 100644 --- 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 index 3f2a716c0..bb3042385 100644 --- 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,7 +197,9 @@ export function AuthzGrantsActions() { }); await toast.promise(grantPromise, { - loading: Grant in progress, + loading: ( + {t('grant-loading', 'Grant in progress')} + ), success: (tx) => { console.log('Grant successful', { tx }); const txHash = tx?.txhash; @@ -202,7 +207,7 @@ export function AuthzGrantsActions() { return (
-
Grant successful
+
{t('grant-success', 'Grant successful')}
- Grant access + {t('grant-access', 'Grant access')}
@@ -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')}
@@ -344,7 +350,7 @@ export function AuthzGrantsActions() {
{ 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')}
@@ -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')}
@@ -428,14 +434,17 @@ export function AuthzGrantsActions() {
- Selected grantee + {t('selected-grantee', 'Selected grantee')}
- You should enter valid grantee wallet to see info + {t( + 'invalid-grantee-wallet-message', + 'You should enter valid grantee wallet to see info', + )}
diff --git a/libs/authz/src/lib/authz-page.tsx b/libs/authz/src/lib/authz-page.tsx index c140c7ccb..19fab975b 100644 --- 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 (
@@ -32,10 +34,10 @@ export function AuthzPage() { )} >
- You should connect wallet first + {t('connect-wallet-message', 'You should connect wallet first')}
) : ( diff --git a/libs/authz/src/lib/grantee-card.tsx b/libs/authz/src/lib/grantee-card.tsx index a38f4ca5a..d3d819919 100644 --- a/libs/authz/src/lib/grantee-card.tsx +++ b/libs/authz/src/lib/grantee-card.tsx @@ -6,6 +6,7 @@ import { useMemo, useState, } from 'react'; +import { useTranslate } from '@tolgee/react'; import clsx from 'clsx'; import { formatUnits, parseUnits } from 'viem'; import { @@ -72,6 +73,7 @@ export function GranteeCard({ haqq: string; }; }) { + const { t } = useTranslate(); const [isEthAddressCopy, setEthAddressCopy] = useState(false); const [isHaqqAddressCopy, setHaqqAddressCopy] = useState(false); const { copyText } = useClipboard(); @@ -152,22 +154,22 @@ export function GranteeCard({
- Selected grantee + {t('selected-grantee', 'Selected grantee', { ns: 'authz' })}
@@ -226,7 +226,7 @@ export function GranteeCard({
diff --git a/libs/authz/src/lib/grantee-table.tsx b/libs/authz/src/lib/grantee-table.tsx index c1ceec8c8..8fd61dbc5 100644 --- a/libs/authz/src/lib/grantee-table.tsx +++ b/libs/authz/src/lib/grantee-table.tsx @@ -1,9 +1,11 @@ import { useMemo } from 'react'; +import { useTranslate } from '@tolgee/react'; import { useAddress, useAuthzGranteeGrants } from '@haqq/shell-shared'; import { Container, Heading } from '@haqq/shell-ui-kit/server'; import { mapRPCGrantToWebGrant } from './utils/map-rpc-grant-to-web-grant'; export function GranteeGrantsTable() { + const { t } = useTranslate('authz'); const { haqqAddress } = useAddress(); const { data: granteeGrants } = useAuthzGranteeGrants(haqqAddress ?? ''); @@ -25,7 +27,7 @@ export function GranteeGrantsTable() {
- Access you have been granted + {t('access-granted-to-you', 'Access you have been granted')}
@@ -33,13 +35,13 @@ export function GranteeGrantsTable() { - Granter + {t('granter', 'Granter')} - Message + {t('message', 'Message')} {/* - Valid tru + {t('valid-thru', 'Valid thru')} */} diff --git a/libs/authz/src/lib/granter-table.tsx b/libs/authz/src/lib/granter-table.tsx index 049c3272e..078fdf4c2 100644 --- a/libs/authz/src/lib/granter-table.tsx +++ b/libs/authz/src/lib/granter-table.tsx @@ -1,4 +1,5 @@ import { useMemo } from 'react'; +import { useTranslate } from '@tolgee/react'; import dynamic from 'next/dynamic'; import { useAddress, useAuthzGranterGrants } from '@haqq/shell-shared'; import { Container, Heading, formatDate } from '@haqq/shell-ui-kit/server'; @@ -17,6 +18,7 @@ const RevokeButton = dynamic( ); export function GranterGrantsTable() { + const { t } = useTranslate('authz'); const { haqqAddress } = useAddress(); const { data: granterGrants } = useAuthzGranterGrants(haqqAddress ?? ''); @@ -38,7 +40,7 @@ export function GranterGrantsTable() {
- Access you have granted + {t('access-you-granted', 'Access you have granted')}
@@ -46,13 +48,13 @@ export function GranterGrantsTable() { - Grantee + {t('grantee', 'Grantee')} - Message + {t('message', 'Message')} - Valid thru + {t('valid-thru', 'Valid thru')}   diff --git a/libs/authz/src/lib/revoke-button.tsx b/libs/authz/src/lib/revoke-button.tsx index 59a10f553..1ba2b8d06 100644 --- a/libs/authz/src/lib/revoke-button.tsx +++ b/libs/authz/src/lib/revoke-button.tsx @@ -1,5 +1,6 @@ 'use client'; import { useCallback } from 'react'; +import { useTranslate } from '@tolgee/react'; import Link from 'next/link'; import { useAccount, useChains } from 'wagmi'; import { haqqMainnet } from 'wagmi/chains'; @@ -27,6 +28,7 @@ export function RevokeButton({ grantee: string; msg: string; }) { + const { t } = useTranslate('authz'); const invalidateQueries = useQueryInvalidate(); const { revoke, getRevokeEstimatedFee } = useAuthzActions(); const toast = useToast(); @@ -48,7 +50,11 @@ export function RevokeButton({ ); await toast.promise(revokePromise, { - loading: Revoke in progress, + loading: ( + + {t('revoke-loading', 'Revoke in progress')} + + ), success: (tx) => { console.log('Revoke successful', { tx }); const txHash = tx?.txhash; @@ -56,7 +62,7 @@ export function RevokeButton({ return (
-
Revoke successful
+
{t('revoke-success', 'Revoke successful')}
- Revoke + {t('revoke-button', 'Revoke')} ); }