From a496f1dd35dfdfc4feb7aeed959639062c2eb0ee Mon Sep 17 00:00:00 2001 From: "G. Kami Ekbatanifard" <46442452+Nick-1979@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:05:18 +0330 Subject: [PATCH] refactor: put reused codes into 2 components (#1614) * refactor: put reused codes into 2 components * style: decrease identicon size in FS --- .../src/components/ShortAddress2.tsx | 7 +- .../AccountInformationForDetails.tsx | 76 +++---------------- .../homeFullScreen/partials/AccountBodyFs.tsx | 76 +++++++++++++++++++ .../partials/AccountIdenticonIconsFS.tsx | 40 ++++++++++ .../partials/AccountInformationForHome.tsx | 68 ++++------------- 5 files changed, 145 insertions(+), 122 deletions(-) create mode 100644 packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx create mode 100644 packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountIdenticonIconsFS.tsx diff --git a/packages/extension-polkagate/src/components/ShortAddress2.tsx b/packages/extension-polkagate/src/components/ShortAddress2.tsx index efa411d9b..d6489416e 100644 --- a/packages/extension-polkagate/src/components/ShortAddress2.tsx +++ b/packages/extension-polkagate/src/components/ShortAddress2.tsx @@ -1,14 +1,13 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ +import type { AccountId } from '@polkadot/types/interfaces/runtime'; + import { Grid, type SxProps, type Theme } from '@mui/material'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import type { AccountId } from '@polkadot/types/interfaces/runtime'; - import { SHORT_ADDRESS_CHARACTERS } from '../util/constants'; import CopyAddressButton from './CopyAddressButton'; @@ -21,7 +20,7 @@ interface Props { clipped?: boolean; } -function ShortAddress2({ address, clipped = false, charsCount = SHORT_ADDRESS_CHARACTERS, style, showCopy = false, inParentheses = false }: Props): React.ReactElement { +function ShortAddress2 ({ address, charsCount = SHORT_ADDRESS_CHARACTERS, clipped = false, inParentheses = false, showCopy = false, style }: Props): React.ReactElement { const [charactersCount, setCharactersCount] = useState(charsCount); const pRef = useRef(null); const cRef = useRef(null); diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx index 4ae19ba65..51155e7b9 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx @@ -8,17 +8,18 @@ import type { HexString } from '@polkadot/util/types'; import type { FetchedBalance } from '../../../hooks/useAssetsBalances'; import type { BalancesInfo, Prices } from '../../../util/types'; -import { Divider, Grid, IconButton, Skeleton, Typography, useTheme } from '@mui/material'; +import { Divider, Grid, Skeleton, Typography, useTheme } from '@mui/material'; import React, { useCallback, useEffect, useMemo } from 'react'; -import { AssetLogo, FormatBalance2, FormatPrice, Identicon, Identity, Infotip, Infotip2, OptionalCopyButton, ShortAddress2, VaadinIcon } from '../../../components'; -import { useIdentity, useInfo, useTranslation } from '../../../hooks'; -import { showAccount, tieAccount } from '../../../messaging'; +import { AssetLogo, FormatBalance2, FormatPrice, Infotip, Infotip2 } from '../../../components'; +import { useInfo, useTranslation } from '../../../hooks'; +import { tieAccount } from '../../../messaging'; import { getValue } from '../../../popup/account/util'; import { BALANCES_VALIDITY_PERIOD } from '../../../util/constants'; import getLogo2 from '../../../util/getLogo2'; import { amountToHuman } from '../../../util/utils'; -import AccountIconsFs from './AccountIconsFs'; +import AccountBodyFs from '../../homeFullScreen/partials/AccountBodyFs'; +import AccountIdenticonIconsFS from '../../homeFullScreen/partials/AccountIdenticonIconsFS'; import AOC from './AOC'; interface PriceJSXType { @@ -147,24 +148,10 @@ interface AddressDetailsProps { setAssetIdOnAssetHub: React.Dispatch>; } -export const EyeIconFullScreen = ({ isHidden, onClick }: { isHidden: boolean | undefined, onClick?: React.MouseEventHandler | undefined }) => { - const { t } = useTranslation(); - const theme = useTheme(); - - return ( - - ); -}; - function AccountInformationForDetails ({ accountAssets, address, label, price, pricesInCurrency, selectedAsset, setAssetIdOnAssetHub, setSelectedAsset }: AddressDetailsProps): React.ReactElement { const theme = useTheme(); - const { account, api, chain, formatted, genesisHash, token } = useInfo(address); + const { account, chain, genesisHash, token } = useInfo(address); - const accountInfo = useIdentity(genesisHash, formatted); const calculatePrice = useCallback((amount: BN, decimal: number, _price: number) => { return parseFloat(amountToHuman(amount, decimal)) * _price; @@ -210,56 +197,17 @@ function AccountInformationForDetails ({ accountAssets, address, label, price, p }).catch(console.error); }, [address, setSelectedAsset, setAssetIdOnAssetHub]); - const toggleVisibility = useCallback((): void => { - address && showAccount(address, account?.isHidden || false).catch(console.error); - }, [account?.isHidden, address]); - return ( {label} - - div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}> - - - + + - - - - - - - - - - - div div:last-child': { width: 'auto' } }} xs> - - - - - - - | undefined }) => { + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + + ); +}; + +interface Props { + address: string | undefined; + goToDetails?: () => void; + gridSize?: number; +} + +function AccountBodyFs ({ address, goToDetails = noop, gridSize }: Props): React.ReactElement { + const { account, api, chain, formatted, genesisHash } = useInfo(address); + + const accountInfo = useIdentity(genesisHash, formatted); + + const toggleVisibility = useCallback((): void => { + address && showAccount(address, account?.isHidden || false).catch(console.error); + }, [account?.isHidden, address]); + + return ( + + + + + + + + + div div:last-child': { width: 'auto' } }} xs> + + + + + + + + ); +} + +export default React.memo(AccountBodyFs); diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountIdenticonIconsFS.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountIdenticonIconsFS.tsx new file mode 100644 index 000000000..145c6d67a --- /dev/null +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountIdenticonIconsFS.tsx @@ -0,0 +1,40 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +/* eslint-disable react/jsx-max-props-per-line */ + +import { Grid } from '@mui/material'; +import React from 'react'; + +import { Identicon } from '../../../components'; +import { useIdentity, useInfo } from '../../../hooks'; +import AccountIconsFs from '../../accountDetails/components/AccountIconsFs'; + +interface Props { + address: string | undefined; +} + +function AccountIdenticonIconsFS ({ address }: Props): React.ReactElement { + const { chain, formatted, genesisHash } = useInfo(address); + + const accountInfo = useIdentity(genesisHash, formatted); + + return ( + + div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}> + + + + + ); +} + +export default React.memo(AccountIdenticonIconsFS); diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx index d879b2567..a17773e67 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx @@ -16,19 +16,19 @@ import React, { useCallback, useContext, useMemo, useState } from 'react'; import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util'; import { stars6Black, stars6White } from '../../../assets/icons'; -import { ActionContext, Identicon, Identity, OptionalCopyButton, ShortAddress2 } from '../../../components'; +import { ActionContext } from '../../../components'; import FormatPrice from '../../../components/FormatPrice'; -import { useCurrency, useIdentity, useInfo, usePrices, useTranslation } from '../../../hooks'; -import { showAccount, tieAccount } from '../../../messaging'; +import { useAccount, useCurrency, usePrices, useTranslation } from '../../../hooks'; +import { tieAccount } from '../../../messaging'; import { amountToHuman } from '../../../util/utils'; -import AccountIconsFs from '../../accountDetails/components/AccountIconsFs'; -import { EyeIconFullScreen } from '../../accountDetails/components/AccountInformationForDetails'; import AOC from '../../accountDetails/components/AOC'; import { openOrFocusTab } from '../../accountDetails/components/CommonTasks'; import DeriveAccountModal from '../../partials/DeriveAccountModal'; import ExportAccountModal from '../../partials/ExportAccountModal'; import ForgetAccountModal from '../../partials/ForgetAccountModal'; import RenameModal from '../../partials/RenameAccountModal'; +import AccountBodyFs from './AccountBodyFs'; +import AccountIdenticonIconsFS from './AccountIdenticonIconsFS'; import FullScreenAccountMenu from './FullScreenAccountMenu'; interface AddressDetailsProps { @@ -96,11 +96,9 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi const theme = useTheme(); const pricesInCurrencies = usePrices(); const currency = useCurrency(); - const { account, api, chain, formatted, genesisHash } = useInfo(address); + const account = useAccount(address); const onAction = useContext(ActionContext); - const accountInfo = useIdentity(genesisHash, formatted); - const [displayPopup, setDisplayPopup] = useState(); const calculatePrice = useCallback((amount: BN, decimal: number, price: number) => parseFloat(amountToHuman(amount, decimal)) * price, []); @@ -135,10 +133,6 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi }).catch(console.error); }, [address, setSelectedAsset]); - const toggleVisibility = useCallback((): void => { - address && showAccount(address, account?.isHidden || false).catch(console.error); - }, [account?.isHidden, address]); - const openSettings = useCallback((): void => { address && onAction(); }, [onAction, address]); @@ -151,48 +145,14 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi <> - - div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}> - - - - - - - - - - - - - div div:last-child': { width: 'auto' } }} xs> - - - - - - - + +