Skip to content

Commit a496f1d

Browse files
Nick-1979Nick-1979
authored
refactor: put reused codes into 2 components (#1614)
* refactor: put reused codes into 2 components * style: decrease identicon size in FS
1 parent e4a22ac commit a496f1d

File tree

5 files changed

+145
-122
lines changed

5 files changed

+145
-122
lines changed

‎packages/extension-polkagate/src/components/ShortAddress2.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
22
// SPDX-License-Identifier: Apache-2.0
3-
// @ts-nocheck
43

54
/* eslint-disable react/jsx-max-props-per-line */
65

6+
import type { AccountId } from '@polkadot/types/interfaces/runtime';
7+
78
import { Grid, type SxProps, type Theme } from '@mui/material';
89
import React, { useCallback, useEffect, useRef, useState } from 'react';
910

10-
import type { AccountId } from '@polkadot/types/interfaces/runtime';
11-
1211
import { SHORT_ADDRESS_CHARACTERS } from '../util/constants';
1312
import CopyAddressButton from './CopyAddressButton';
1413

@@ -21,7 +20,7 @@ interface Props {
2120
clipped?: boolean;
2221
}
2322

24-
function ShortAddress2({ address, clipped = false, charsCount = SHORT_ADDRESS_CHARACTERS, style, showCopy = false, inParentheses = false }: Props): React.ReactElement {
23+
function ShortAddress2 ({ address, charsCount = SHORT_ADDRESS_CHARACTERS, clipped = false, inParentheses = false, showCopy = false, style }: Props): React.ReactElement {
2524
const [charactersCount, setCharactersCount] = useState<number>(charsCount);
2625
const pRef = useRef<HTMLDivElement>(null);
2726
const cRef = useRef<HTMLDivElement>(null);

‎packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx

Lines changed: 12 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,18 @@ import type { HexString } from '@polkadot/util/types';
88
import type { FetchedBalance } from '../../../hooks/useAssetsBalances';
99
import type { BalancesInfo, Prices } from '../../../util/types';
1010

11-
import { Divider, Grid, IconButton, Skeleton, Typography, useTheme } from '@mui/material';
11+
import { Divider, Grid, Skeleton, Typography, useTheme } from '@mui/material';
1212
import React, { useCallback, useEffect, useMemo } from 'react';
1313

14-
import { AssetLogo, FormatBalance2, FormatPrice, Identicon, Identity, Infotip, Infotip2, OptionalCopyButton, ShortAddress2, VaadinIcon } from '../../../components';
15-
import { useIdentity, useInfo, useTranslation } from '../../../hooks';
16-
import { showAccount, tieAccount } from '../../../messaging';
14+
import { AssetLogo, FormatBalance2, FormatPrice, Infotip, Infotip2 } from '../../../components';
15+
import { useInfo, useTranslation } from '../../../hooks';
16+
import { tieAccount } from '../../../messaging';
1717
import { getValue } from '../../../popup/account/util';
1818
import { BALANCES_VALIDITY_PERIOD } from '../../../util/constants';
1919
import getLogo2 from '../../../util/getLogo2';
2020
import { amountToHuman } from '../../../util/utils';
21-
import AccountIconsFs from './AccountIconsFs';
21+
import AccountBodyFs from '../../homeFullScreen/partials/AccountBodyFs';
22+
import AccountIdenticonIconsFS from '../../homeFullScreen/partials/AccountIdenticonIconsFS';
2223
import AOC from './AOC';
2324

2425
interface PriceJSXType {
@@ -147,24 +148,10 @@ interface AddressDetailsProps {
147148
setAssetIdOnAssetHub: React.Dispatch<React.SetStateAction<number | string | undefined>>;
148149
}
149150

150-
export const EyeIconFullScreen = ({ isHidden, onClick }: { isHidden: boolean | undefined, onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined }) => {
151-
const { t } = useTranslation();
152-
const theme = useTheme();
153-
154-
return (
155-
<Infotip text={isHidden ? t('This account is hidden from websites') : t('This account is visible to websites')}>
156-
<IconButton onClick={onClick} sx={{ height: '20px', ml: '7px', mt: '13px', p: 0, width: '28px' }}>
157-
<VaadinIcon icon={isHidden ? 'vaadin:eye-slash' : 'vaadin:eye'} style={{ color: `${theme.palette.secondary.light}`, height: '20px' }} />
158-
</IconButton>
159-
</Infotip>
160-
);
161-
};
162-
163151
function AccountInformationForDetails ({ accountAssets, address, label, price, pricesInCurrency, selectedAsset, setAssetIdOnAssetHub, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
164152
const theme = useTheme();
165-
const { account, api, chain, formatted, genesisHash, token } = useInfo(address);
153+
const { account, chain, genesisHash, token } = useInfo(address);
166154

167-
const accountInfo = useIdentity(genesisHash, formatted);
168155

169156
const calculatePrice = useCallback((amount: BN, decimal: number, _price: number) => {
170157
return parseFloat(amountToHuman(amount, decimal)) * _price;
@@ -210,56 +197,17 @@ function AccountInformationForDetails ({ accountAssets, address, label, price, p
210197
}).catch(console.error);
211198
}, [address, setSelectedAsset, setAssetIdOnAssetHub]);
212199

213-
const toggleVisibility = useCallback((): void => {
214-
address && showAccount(address, account?.isHidden || false).catch(console.error);
215-
}, [account?.isHidden, address]);
216-
217200
return (
218201
<Grid alignItems='center' container item sx={{ bgcolor: 'background.paper', border: '0px solid', borderBottomWidth: '8px', borderBottomColor: theme.palette.mode === 'light' ? 'black' : 'secondary.light', borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', mb: '15px', p: `20px 20px ${showAOC ? '5px' : '20px'} 20px`, position: 'relative' }}>
219202
{label}
220203
<Grid container item>
221-
<Grid container item sx={{ borderRight: '1px solid', borderRightColor: 'divider', pr: '8px', width: 'fit-content' }}>
222-
<Grid container item pr='7px' sx={{ '> div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}>
223-
<Identicon
224-
iconTheme={chain?.icon ?? 'polkadot'}
225-
prefix={chain?.ss58Format ?? 42}
226-
size={70}
227-
value={formatted || address}
228-
/>
229-
</Grid>
230-
<AccountIconsFs
231-
accountInfo={accountInfo}
204+
<AccountIdenticonIconsFS
205+
address={address}
206+
/>
207+
<Grid container item sx={{ display: 'grid', gridTemplateColumns: 'minmax(150px, 60%) max-content' }} xs>
208+
<AccountBodyFs
232209
address={address}
233210
/>
234-
</Grid>
235-
<Grid container item sx={{ display: 'grid', gridTemplateColumns: 'minmax(150px, 60%) max-content' }} xs>
236-
<Grid container direction='column' item sx={{ borderRight: '1px solid', borderRightColor: 'divider', px: '7px' }}>
237-
<Grid container item justifyContent='space-between'>
238-
<Identity
239-
accountInfo={accountInfo}
240-
address={address}
241-
api={api}
242-
chain={chain}
243-
noIdenticon
244-
style={{ width: 'calc(100% - 40px)' }}
245-
// subIdOnly
246-
/>
247-
<Grid item width='40px'>
248-
<EyeIconFullScreen
249-
isHidden={account?.isHidden}
250-
onClick={toggleVisibility}
251-
/>
252-
</Grid>
253-
</Grid>
254-
<Grid alignItems='center' container item>
255-
<Grid container item sx={{ '> div div:last-child': { width: 'auto' } }} xs>
256-
<ShortAddress2 address={formatted || address} clipped style={{ fontSize: '10px', fontWeight: 300 }} />
257-
</Grid>
258-
<Grid container item width='fit-content'>
259-
<OptionalCopyButton address={address} />
260-
</Grid>
261-
</Grid>
262-
</Grid>
263211
<SelectedAssetBox
264212
balanceToShow={selectedAsset as unknown as BalancesInfo}
265213
genesisHash={chain === null ? null : genesisHash}

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
/* eslint-disable react/jsx-first-prop-new-line */
5+
/* eslint-disable react/jsx-max-props-per-line */
6+
7+
import { Grid, IconButton, useTheme } from '@mui/material';
8+
import React, { useCallback } from 'react';
9+
10+
import { noop } from '@polkadot/util';
11+
12+
import { Identity, Infotip, OptionalCopyButton, ShortAddress2, VaadinIcon } from '../../../components';
13+
import { useIdentity, useInfo, useTranslation } from '../../../hooks';
14+
import { showAccount } from '../../../messaging';
15+
16+
export const EyeIconFullScreen = ({ isHidden, onClick }: { isHidden: boolean | undefined, onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined }) => {
17+
const { t } = useTranslation();
18+
const theme = useTheme();
19+
20+
return (
21+
<Infotip text={isHidden ? t('This account is hidden from websites') : t('This account is visible to websites')}>
22+
<IconButton onClick={onClick} sx={{ height: '20px', ml: '7px', mt: '13px', p: 0, width: '28px' }}>
23+
<VaadinIcon icon={isHidden ? 'vaadin:eye-slash' : 'vaadin:eye'} style={{ color: `${theme.palette.secondary.light}`, height: '20px' }} />
24+
</IconButton>
25+
</Infotip>
26+
);
27+
};
28+
29+
interface Props {
30+
address: string | undefined;
31+
goToDetails?: () => void;
32+
gridSize?: number;
33+
}
34+
35+
function AccountBodyFs ({ address, goToDetails = noop, gridSize }: Props): React.ReactElement {
36+
const { account, api, chain, formatted, genesisHash } = useInfo(address);
37+
38+
const accountInfo = useIdentity(genesisHash, formatted);
39+
40+
const toggleVisibility = useCallback((): void => {
41+
address && showAccount(address, account?.isHidden || false).catch(console.error);
42+
}, [account?.isHidden, address]);
43+
44+
return (
45+
<Grid container direction='column' item sx={{ borderRight: '1px solid', borderRightColor: 'divider', px: '7px' }} xs={gridSize}>
46+
<Grid container item justifyContent='space-between'>
47+
<Identity
48+
accountInfo={accountInfo}
49+
address={address}
50+
api={api}
51+
chain={chain}
52+
noIdenticon
53+
onClick={goToDetails}
54+
style={{ width: 'calc(100% - 40px)' }}
55+
subIdOnly
56+
/>
57+
<Grid item width='40px'>
58+
<EyeIconFullScreen
59+
isHidden={account?.isHidden}
60+
onClick={toggleVisibility}
61+
/>
62+
</Grid>
63+
</Grid>
64+
<Grid alignItems='center' container item>
65+
<Grid container item sx={{ '> div div:last-child': { width: 'auto' } }} xs>
66+
<ShortAddress2 address={formatted || address} charsCount={40} style={{ fontSize: '10px', fontWeight: 300 }} />
67+
</Grid>
68+
<Grid container item width='fit-content'>
69+
<OptionalCopyButton address={address} />
70+
</Grid>
71+
</Grid>
72+
</Grid>
73+
);
74+
}
75+
76+
export default React.memo(AccountBodyFs);

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountIdenticonIconsFS.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
/* eslint-disable react/jsx-max-props-per-line */
5+
6+
import { Grid } from '@mui/material';
7+
import React from 'react';
8+
9+
import { Identicon } from '../../../components';
10+
import { useIdentity, useInfo } from '../../../hooks';
11+
import AccountIconsFs from '../../accountDetails/components/AccountIconsFs';
12+
13+
interface Props {
14+
address: string | undefined;
15+
}
16+
17+
function AccountIdenticonIconsFS ({ address }: Props): React.ReactElement {
18+
const { chain, formatted, genesisHash } = useInfo(address);
19+
20+
const accountInfo = useIdentity(genesisHash, formatted);
21+
22+
return (
23+
<Grid container item sx={{ borderRight: '1px solid', borderRightColor: 'divider', pr: '8px', width: 'fit-content' }}>
24+
<Grid container item pr='7px' sx={{ '> div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}>
25+
<Identicon
26+
iconTheme={chain?.icon ?? 'polkadot'}
27+
prefix={chain?.ss58Format ?? 42}
28+
size={55}
29+
value={formatted || address}
30+
/>
31+
</Grid>
32+
<AccountIconsFs
33+
accountInfo={accountInfo}
34+
address={address}
35+
/>
36+
</Grid>
37+
);
38+
}
39+
40+
export default React.memo(AccountIdenticonIconsFS);

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx

Lines changed: 14 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,19 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
1616
import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util';
1717

1818
import { stars6Black, stars6White } from '../../../assets/icons';
19-
import { ActionContext, Identicon, Identity, OptionalCopyButton, ShortAddress2 } from '../../../components';
19+
import { ActionContext } from '../../../components';
2020
import FormatPrice from '../../../components/FormatPrice';
21-
import { useCurrency, useIdentity, useInfo, usePrices, useTranslation } from '../../../hooks';
22-
import { showAccount, tieAccount } from '../../../messaging';
21+
import { useAccount, useCurrency, usePrices, useTranslation } from '../../../hooks';
22+
import { tieAccount } from '../../../messaging';
2323
import { amountToHuman } from '../../../util/utils';
24-
import AccountIconsFs from '../../accountDetails/components/AccountIconsFs';
25-
import { EyeIconFullScreen } from '../../accountDetails/components/AccountInformationForDetails';
2624
import AOC from '../../accountDetails/components/AOC';
2725
import { openOrFocusTab } from '../../accountDetails/components/CommonTasks';
2826
import DeriveAccountModal from '../../partials/DeriveAccountModal';
2927
import ExportAccountModal from '../../partials/ExportAccountModal';
3028
import ForgetAccountModal from '../../partials/ForgetAccountModal';
3129
import RenameModal from '../../partials/RenameAccountModal';
30+
import AccountBodyFs from './AccountBodyFs';
31+
import AccountIdenticonIconsFS from './AccountIdenticonIconsFS';
3232
import FullScreenAccountMenu from './FullScreenAccountMenu';
3333

3434
interface AddressDetailsProps {
@@ -96,11 +96,9 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi
9696
const theme = useTheme();
9797
const pricesInCurrencies = usePrices();
9898
const currency = useCurrency();
99-
const { account, api, chain, formatted, genesisHash } = useInfo(address);
99+
const account = useAccount(address);
100100
const onAction = useContext(ActionContext);
101101

102-
const accountInfo = useIdentity(genesisHash, formatted);
103-
104102
const [displayPopup, setDisplayPopup] = useState<number>();
105103

106104
const calculatePrice = useCallback((amount: BN, decimal: number, price: number) => parseFloat(amountToHuman(amount, decimal)) * price, []);
@@ -135,10 +133,6 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi
135133
}).catch(console.error);
136134
}, [address, setSelectedAsset]);
137135

138-
const toggleVisibility = useCallback((): void => {
139-
address && showAccount(address, account?.isHidden || false).catch(console.error);
140-
}, [account?.isHidden, address]);
141-
142136
const openSettings = useCallback((): void => {
143137
address && onAction();
144138
}, [onAction, address]);
@@ -151,48 +145,14 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi
151145
<>
152146
<Grid alignItems='center' container item sx={{ bgcolor: 'background.paper', border: isChild ? '0.1px dashed' : 'none', borderColor: 'secondary.main', borderRadius: '5px', p: '20px 10px 15px 30px' }}>
153147
<Grid container item>
154-
<Grid container item sx={{ borderRight: '1px solid', borderRightColor: 'divider', pr: '8px', width: 'fit-content' }}>
155-
<Grid container item pr='7px' sx={{ '> div': { height: 'fit-content' }, m: 'auto', width: 'fit-content' }}>
156-
<Identicon
157-
iconTheme={chain?.icon ?? 'polkadot'}
158-
prefix={chain?.ss58Format ?? 42}
159-
size={70}
160-
value={formatted || address}
161-
/>
162-
</Grid>
163-
<AccountIconsFs
164-
accountInfo={accountInfo}
165-
address={address}
166-
/>
167-
</Grid>
168-
<Grid container direction='column' item sx={{ borderRight: '1px solid', borderRightColor: 'divider', px: '7px' }} xs={5.6}>
169-
<Grid container item justifyContent='space-between'>
170-
<Identity
171-
accountInfo={accountInfo}
172-
address={address}
173-
api={api}
174-
chain={chain}
175-
noIdenticon
176-
onClick={goToDetails}
177-
style={{ width: 'calc(100% - 40px)' }}
178-
subIdOnly
179-
/>
180-
<Grid item width='40px'>
181-
<EyeIconFullScreen
182-
isHidden={account?.isHidden}
183-
onClick={toggleVisibility}
184-
/>
185-
</Grid>
186-
</Grid>
187-
<Grid alignItems='center' container item>
188-
<Grid container item sx={{ '> div div:last-child': { width: 'auto' } }} xs>
189-
<ShortAddress2 address={formatted || address} charsCount={40} style={{ fontSize: '10px', fontWeight: 300 }} />
190-
</Grid>
191-
<Grid container item width='fit-content'>
192-
<OptionalCopyButton address={address} />
193-
</Grid>
194-
</Grid>
195-
</Grid>
148+
<AccountIdenticonIconsFS
149+
address={address}
150+
/>
151+
<AccountBodyFs
152+
address={address}
153+
goToDetails={goToDetails}
154+
gridSize={5.6}
155+
/>
196156
<AccountTotal
197157
hideNumbers={hideNumbers}
198158
totalBalance={totalBalance}

0 commit comments

Comments
 (0)