From 23616a401b5fe47fe7f32ed72d8a29ea96128103 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 26 Oct 2024 10:49:01 +0330 Subject: [PATCH] refactor: add translation to account icons tooltips --- .../src/components/AccountIcons.tsx | 44 +++++++------ .../components/AccountIconsFs.tsx | 64 ++++--------------- .../extension-polkagate/src/hooks/index.ts | 3 + .../src/hooks/useHasIdentityTooltipText.ts | 28 ++++++++ .../src/hooks/useHasProxyTooltipText.ts | 28 ++++++++ .../src/hooks/useIsRecoverableTooltipText.ts | 28 ++++++++ .../src/popup/home/AccountPreview.tsx | 17 +---- 7 files changed, 127 insertions(+), 85 deletions(-) create mode 100644 packages/extension-polkagate/src/hooks/useHasIdentityTooltipText.ts create mode 100644 packages/extension-polkagate/src/hooks/useHasProxyTooltipText.ts create mode 100644 packages/extension-polkagate/src/hooks/useIsRecoverableTooltipText.ts diff --git a/packages/extension-polkagate/src/components/AccountIcons.tsx b/packages/extension-polkagate/src/components/AccountIcons.tsx index 2f89d5722..ce49bd1a8 100644 --- a/packages/extension-polkagate/src/components/AccountIcons.tsx +++ b/packages/extension-polkagate/src/components/AccountIcons.tsx @@ -3,43 +3,48 @@ /* eslint-disable react/jsx-max-props-per-line */ -import type { Chain } from '@polkadot/extension-chains/types'; import type { IconTheme } from '@polkadot/react-identicon/types'; -import type { Proxy } from '../util/types'; import { faShieldHalved, faSitemap } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Grid, IconButton, useTheme } from '@mui/material'; -import React, { useCallback, useContext } from 'react'; +import React, { useCallback, useContext, useEffect,useState } from 'react'; -import { useAnimateOnce, useTranslation } from '../hooks'; +import { useAnimateOnce, useHasProxyTooltipText, useInfo, useIsRecoverableTooltipText, useProxies } from '../hooks'; import { windowOpen } from '../messaging'; import { PROXY_CHAINS } from '../util/constants'; -import { getSubstrateAddress } from '../util/utils'; import { ActionContext } from './contexts'; import Identicon from './Identicon'; import { Infotip } from '.'; interface Props { - chain: Chain | null | undefined; - formatted: string | undefined; + address: string | undefined; identiconTheme: IconTheme; isSubId: boolean; judgements?: RegExpMatchArray | null | undefined; prefix?: number; - proxies: Proxy[] | undefined; - recoverable?: boolean; } -export default function AccountIcons ({ chain, formatted, identiconTheme, isSubId, judgements, prefix, proxies, recoverable = false }: Props): React.ReactElement { +function AccountIcons ({ address, identiconTheme, isSubId, judgements, prefix }: Props): React.ReactElement { const theme = useTheme(); - const { t } = useTranslation(); const onAction = useContext(ActionContext); - const address = getSubstrateAddress(formatted); + const { api, chain, formatted } = useInfo(address); + const proxies = useProxies(api, formatted); const shakeProxy = useAnimateOnce(!!proxies?.length); - const shakeShield = useAnimateOnce(recoverable); + + const [isRecoverable, setRecoverable] = useState(); + + const shakeShield = useAnimateOnce(isRecoverable); + const recoverableToolTipTxt = useIsRecoverableTooltipText(address, isRecoverable); + const hasProxy = proxies ? !!proxies.length : undefined; + const proxyTooltipTxt = useHasProxyTooltipText(address, hasProxy); + + useEffect((): void => { + api?.query?.['recovery']?.['recoverable'](formatted) + .then((r: any) => setRecoverable(!!r.isSome)).catch(console.error); + }, [api, formatted]); const openManageProxy = useCallback(() => { address && chain && PROXY_CHAINS.includes(chain.genesisHash ?? '') && onAction(`/manageProxies/${address}`); @@ -50,7 +55,7 @@ export default function AccountIcons ({ chain, formatted, identiconTheme, isSubI }, [address]); return ( - + - + + sx={{ height: '15px', width: '15px' }} + > - + ); } + +export default React.memo(AccountIcons); diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx index fc2fd394c..4bcfc7f75 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountIconsFs.tsx @@ -12,10 +12,10 @@ import type { Proxy } from '../../../util/types'; import { faChain, faCheckCircle, faCircleInfo, faShieldHalved, faSitemap } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Grid, IconButton, useTheme } from '@mui/material'; -import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { ActionContext, Infotip } from '../../../components'; -import { useAnimateOnce, useInfo, useTranslation } from '../../../hooks'; +import { useAnimateOnce, useHasIdentityTooltipText, useHasProxyTooltipText, useInfo, useIsRecoverableTooltipText } from '../../../hooks'; import { windowOpen } from '../../../messaging'; import { IDENTITY_CHAINS, PROXY_CHAINS, SOCIAL_RECOVERY_CHAINS } from '../../../util/constants'; @@ -24,8 +24,7 @@ interface AddressDetailsProps { accountInfo: DeriveAccountInfo | undefined | null } -function AccountIconsFs ({ accountInfo, address }: AddressDetailsProps): React.ReactElement { - const { t } = useTranslation(); +function AccountIconsFs({ accountInfo, address }: AddressDetailsProps): React.ReactElement { const theme = useTheme(); const onAction = useContext(ActionContext); @@ -39,57 +38,16 @@ function AccountIconsFs ({ accountInfo, address }: AddressDetailsProps): React.R const shakeIdentity = useAnimateOnce(hasID); const shakeShield = useAnimateOnce(isRecoverable); - const identityToolTipTxt = useMemo(() => { - if (!chain) { - return 'Account is in Any Chain mode'; - } - - switch (hasID) { - case true: - return 'Has Identity'; - case false: - return 'No Identity'; - default: - return 'Checking'; - } - }, [chain, hasID]); - - const recoverableToolTipTxt = useMemo(() => { - if (!chain) { - return 'Account is in Any Chain mode'; - } - - switch (isRecoverable) { - case true: - return 'Recoverable'; - case false: - return 'Not Recoverable'; - default: - return 'Checking'; - } - }, [chain, isRecoverable]); - - const proxyTooltipTxt = useMemo(() => { - if (!chain) { - return 'Account is in Any Chain mode'; - } - - switch (hasProxy) { - case true: - return 'Has Proxy'; - case false: - return 'No Proxy'; - default: - return 'Checking'; - } - }, [chain, hasProxy]); + const identityToolTipTxt = useHasIdentityTooltipText(address, hasID); + const recoverableToolTipTxt = useIsRecoverableTooltipText(address, isRecoverable); + const proxyTooltipTxt = useHasProxyTooltipText(address, hasProxy); useEffect((): void => { setHasID(undefined); setIsRecoverable(undefined); setHasProxy(undefined); - if (!api || !address || !account?.genesisHash || api.genesisHash.toHex() !== account.genesisHash) { + if (!api || !formatted || !account?.genesisHash || api.genesisHash.toHex() !== account.genesisHash) { return; } @@ -119,7 +77,7 @@ function AccountIconsFs ({ accountInfo, address }: AddressDetailsProps): React.R } else { setHasProxy(false); } - }, [api, address, formatted, account?.genesisHash, accountInfo]); + }, [api, formatted, account?.genesisHash, accountInfo]); const openIdentity = useCallback(() => { address && chain && windowOpen(`/manageIdentity/${address}`).catch(console.error); @@ -136,7 +94,7 @@ function AccountIconsFs ({ accountInfo, address }: AddressDetailsProps): React.R return ( - + {hasID ? accountInfo?.identity?.displayParent ? - + - + { + if (!chain) { + return anyChinModeText; + } + + switch (hasID) { + case true: + return t('Has identity'); + case false: + return t('No identity'); + default: + return t('Checking'); + } + }, [anyChinModeText, chain, hasID, t]); +} diff --git a/packages/extension-polkagate/src/hooks/useHasProxyTooltipText.ts b/packages/extension-polkagate/src/hooks/useHasProxyTooltipText.ts new file mode 100644 index 000000000..c1e2fd1e6 --- /dev/null +++ b/packages/extension-polkagate/src/hooks/useHasProxyTooltipText.ts @@ -0,0 +1,28 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { useMemo } from 'react'; + +import { useChain, useTranslation } from '.'; + +export default function useHasProxyTooltipText (address: string | undefined, hasProxy: boolean | undefined): string { + const { t } = useTranslation(); + + const chain = useChain(address); + const anyChinModeText = t('Account is in Any Chain mode'); + + return useMemo(() => { + if (!chain) { + return anyChinModeText; + } + + switch (hasProxy) { + case true: + return t('Has proxy'); + case false: + return t('No proxy'); + default: + return t('Checking'); + } + }, [anyChinModeText, chain, hasProxy, t]); +} diff --git a/packages/extension-polkagate/src/hooks/useIsRecoverableTooltipText.ts b/packages/extension-polkagate/src/hooks/useIsRecoverableTooltipText.ts new file mode 100644 index 000000000..5cb621b06 --- /dev/null +++ b/packages/extension-polkagate/src/hooks/useIsRecoverableTooltipText.ts @@ -0,0 +1,28 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { useMemo } from 'react'; + +import { useChain, useTranslation } from '.'; + +export default function useIsRecoverableTooltipText (address: string | undefined, isRecoverable: boolean | undefined): string { + const { t } = useTranslation(); + + const chain = useChain(address); + const anyChinModeText = t('Account is in Any Chain mode'); + + return useMemo(() => { + if (!chain) { + return anyChinModeText; + } + + switch (isRecoverable) { + case true: + return t('Recoverable'); + case false: + return t('Not recoverable'); + default: + return t('Checking'); + } + }, [anyChinModeText, chain, isRecoverable, t]); +} diff --git a/packages/extension-polkagate/src/popup/home/AccountPreview.tsx b/packages/extension-polkagate/src/popup/home/AccountPreview.tsx index a47b2ef4b..00d0916d7 100644 --- a/packages/extension-polkagate/src/popup/home/AccountPreview.tsx +++ b/packages/extension-polkagate/src/popup/home/AccountPreview.tsx @@ -12,7 +12,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { ActionContext } from '../../components'; import AccountFeatures from '../../components/AccountFeatures'; import AccountIcons from '../../components/AccountIcons'; -import { useInfo, useMyAccountIdentity, useProxies } from '../../hooks'; +import { useInfo, useMyAccountIdentity } from '../../hooks'; import useIsExtensionPopup from '../../hooks/useIsExtensionPopup'; import { showAccount } from '../../messaging'; import { AccountMenu } from '../../partials'; @@ -22,7 +22,6 @@ import AccountDetail from './AccountDetail'; export interface Props { actions?: React.ReactNode; address: string; - // children?: React.ReactNode; isExternal?: boolean | null; isHardware?: boolean | null; isHidden?: boolean; @@ -38,21 +37,14 @@ export interface Props { export default function AccountPreview ({ address, hideNumbers, isHidden, name, quickActionOpen, setQuickActionOpen, toggleActions, type }: Props): React.ReactElement { const onExtension = useIsExtensionPopup(); - const { api, chain, formatted } = useInfo(address); + const { chain, formatted } = useInfo(address); const onAction = useContext(ActionContext); - const proxies = useProxies(api, formatted); const identity = useMyAccountIdentity(address); const [showAccountMenu, setShowAccountMenu] = useState(false); - const [recoverable, setRecoverable] = useState(); const _judgement = identity && JSON.stringify(identity.judgements).match(/reasonable|knownGood/gi); - useEffect((): void => { - api?.query?.['recovery']?.['recoverable'](formatted) - .then((r: any) => setRecoverable(!!r.isSome)).catch(console.error); - }, [api, formatted]); - useEffect((): void => { setShowAccountMenu(false); }, [toggleActions]); @@ -83,14 +75,11 @@ export default function AccountPreview ({ address, hideNumbers, isHidden, name, return (