Skip to content

Commit 6f42e7a

Browse files
Nick-1979Nick-1979
committed
refactor: account instead of Account Holder
1 parent ea87286 commit 6f42e7a

File tree

69 files changed

+729
-1684
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+729
-1684
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,26 @@ import { Identity, ShortAddress } from '.';
1111

1212
interface Props {
1313
address: string | undefined;
14+
direction?: 'row' | 'column' ;
1415
style?: SxProps<Theme> | undefined;
1516
title?: string;
1617
}
1718

18-
function AccountHolder ({ address, style, title }: Props): React.ReactElement {
19+
function AccountHolder ({ address, direction = 'column', style, title }: Props): React.ReactElement {
1920
const { t } = useTranslation();
2021
const isExtensionPopup = useIsExtensionPopup();
2122

2223
const { api, formatted } = useInfo(address);
2324

2425
return (
25-
<Grid alignItems='center' container direction='column' justifyContent='center' py='5px' sx={style}>
26+
<Grid alignItems='center' container direction= 'column' justifyContent='center' py='5px' sx={style}>
2627
<Typography fontSize='16px' fontWeight={isExtensionPopup ? 300 : 400} height='18px' textAlign='center'>
27-
{title ?? t('Account holder')}
28+
{title ?? t('Account')}
2829
</Typography>
2930
<Identity
3031
address={address}
3132
api={api}
33+
direction= {direction}
3234
identiconSize={31}
3335
showSocial={false}
3436
style={{

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type { Chain } from '@polkadot/extension-chains/types';
88
import { Divider, Grid, type SxProps, type Theme } from '@mui/material';
99
import React from 'react';
1010

11+
import { useChain } from '../hooks';
1112
import ThroughProxy from '../partials/ThroughProxy';
1213
import { AccountHolder } from '.';
1314

@@ -17,20 +18,24 @@ interface Props {
1718
style?: SxProps<Theme> | undefined;
1819
selectedProxyAddress?: string;
1920
title?: string;
20-
chain: Chain | null | undefined;
21+
chain?: Chain | null | undefined;
22+
direction?: 'row' | 'column' ;
2123
}
2224

23-
function AccountHolderWithProxy ({ address, chain, selectedProxyAddress, showDivider = false, style, title }: Props): React.ReactElement {
25+
function AccountHolderWithProxy ({ address, chain, direction = 'column', selectedProxyAddress, showDivider = false, style, title }: Props): React.ReactElement {
26+
const _chain = useChain(address);
27+
2428
return (
2529
<Grid alignItems='center' container direction='column' justifyContent='center' sx={{ fontWeight: 300, letterSpacing: '-0.015em', pt: '5px', ...style }}>
2630
<AccountHolder
2731
address={address}
32+
direction={direction}
2833
title={title}
2934
/>
3035
{selectedProxyAddress &&
3136
<ThroughProxy
3237
address={selectedProxyAddress}
33-
chain={chain}
38+
chain={chain || _chain}
3439
showDivider
3540
style={{ pb: '5px' }}
3641
/>

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 type { TxInfo } from '../util/types';
7+
8+
import { Grid, Typography } from '@mui/material';
9+
import React from 'react';
10+
11+
import { useTranslation } from '../hooks';
12+
import { ThroughProxy } from '../partials';
13+
import { ShortAddress } from '.';
14+
15+
interface Props {
16+
txInfo: TxInfo;
17+
label?: string;
18+
}
19+
20+
export default function AccountWithProxyInConfirmation ({ label, txInfo }: Props): React.ReactElement {
21+
const { t } = useTranslation();
22+
23+
return (
24+
<>
25+
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
26+
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
27+
{ label || t('Account')}:
28+
</Typography>
29+
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
30+
{txInfo.from.name}
31+
</Typography>
32+
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
33+
<ShortAddress
34+
address={txInfo.from.address}
35+
inParentheses
36+
style={{ fontSize: '16px' }}
37+
/>
38+
</Grid>
39+
</Grid>
40+
{txInfo.throughProxy &&
41+
<Grid container m='auto' maxWidth='92%'>
42+
<ThroughProxy
43+
address={txInfo.throughProxy.address}
44+
chain={txInfo.chain}
45+
/>
46+
</Grid>
47+
}
48+
</>
49+
);
50+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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 { Divider, Grid, Typography } from '@mui/material';
7+
import React from 'react';
8+
9+
interface Props {
10+
caption: string;
11+
value: any | React.ReactNode | string | undefined;
12+
showDivider?: boolean;
13+
fontSize?: string;
14+
fontWeight?: number;
15+
}
16+
17+
export default function DisplayInfo ({ caption, fontSize = '16px', fontWeight = 400, showDivider = true, value }: Props) {
18+
return (
19+
<Grid alignItems='center' container direction='column' fontSize={fontSize} fontWeight={fontWeight} justifyContent='center'>
20+
<Grid container item width='fit-content'>
21+
<Typography lineHeight='40px' pr='5px'>
22+
{caption}
23+
</Typography>
24+
<Typography lineHeight='40px'>
25+
{value || ''}
26+
</Typography>
27+
</Grid>
28+
{showDivider &&
29+
<Grid alignItems='center' container item justifyContent='center'>
30+
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
31+
</Grid>}
32+
</Grid>
33+
);
34+
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface Props {
2626
direction?: 'row' | 'column';
2727
formatted?: string | AccountId;
2828
identiconSize?: number;
29+
inParentheses?: boolean;
2930
judgement?: unknown;
3031
name?: string;
3132
noIdenticon?: boolean;
@@ -39,7 +40,7 @@ interface Props {
3940
subIdOnly?: boolean;
4041
}
4142

42-
function Identity ({ accountInfo, address, api, chain, direction = 'column', formatted, identiconSize = 40, judgement, name, noIdenticon = false, onClick, returnIdentity, showChainLogo = false, showShortAddress, showSocial = true, style, subIdOnly = false, withShortAddress }: Props): React.ReactElement<Props> {
43+
function Identity ({ accountInfo, address, api, chain, direction = 'column', formatted, identiconSize = 40, inParentheses = false, judgement, name, noIdenticon = false, onClick, returnIdentity, showChainLogo = false, showShortAddress, showSocial = true, style, subIdOnly = false, withShortAddress }: Props): React.ReactElement<Props> {
4344
const { t } = useTranslation();
4445
const theme = useTheme();
4546

@@ -153,13 +154,13 @@ function Identity ({ accountInfo, address, api, chain, direction = 'column', for
153154
}
154155
{withShortAddress && direction === 'column' &&
155156
<Grid container item>
156-
<ShortAddress address={_formatted} charsCount={6} style={{ fontSize: '11px', justifyContent: 'flex-start', lineHeight: '15px' }} />
157+
<ShortAddress address={_formatted} charsCount={6} inParentheses={inParentheses} style={{ fontSize: '11px', justifyContent: 'flex-start', lineHeight: '15px' }} />
157158
</Grid>
158159
}
159160
</Grid>
160161
{withShortAddress && direction === 'row' &&
161162
<Grid container item justifyContent='flex-end' sx={{ height: 'inherit', minWidth: 'fit-content', mt: '3%', px: '5px', width: 'fit-content' }}>
162-
<ShortAddress address={_formatted} charsCount={6} style={{ fontSize: '11px', justifyContent: 'flex-start' }} />
163+
<ShortAddress address={_formatted} charsCount={6} inParentheses={inParentheses} style={{ fontSize: '11px', justifyContent: 'flex-start' }} />
163164
</Grid>
164165
}
165166
{_showSocial &&

‎packages/extension-polkagate/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export { default as AccountHolderWithProxy } from './AccountHolderWithProxy';
66
export { default as AccountInputWithIdentity } from './AccountInputWithIdentity';
77
export { default as AccountNamePasswordCreation } from './AccountNamePasswordCreation';
88
export { default as AccountsTable } from './AccountsTable';
9+
export { default as AccountWithProxyInConfirmation } from './AccountWithProxyInConfirmation';
910
export { default as ActionText } from './ActionText';
1011
export { default as Address } from './Address';
1112
export { default as AddressInput } from './AddressInput';
@@ -29,6 +30,7 @@ export { default as ColorContext } from './ColorContext';
2930
export * from './contexts';
3031
export { default as Convictions } from './Convictions';
3132
export { default as CopyAddressButton } from './CopyAddressButton';
33+
export { default as DisplayInfo } from './DisplayInfo';
3234
export { default as ErrorBoundary } from './ErrorBoundary';
3335
export { default as FormatBalance } from './FormatBalance';
3436
export { default as FormatBalance2 } from './FormatBalance2';

‎packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Confirmation.tsx

Lines changed: 12 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
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 { TxInfo } from '../../../util/types';
7+
78
import { Container, Divider, Grid, Typography } from '@mui/material';
89
import React from 'react';
910

10-
import { PButton, ShortAddress } from '../../../components';
11-
import { useChainName, useToken, useTranslation } from '../../../hooks';
12-
import { SubTitle, ThroughProxy } from '../../../partials';
11+
import { AccountWithProxyInConfirmation, DisplayInfo, PButton, ShortAddress } from '../../../components';
12+
import { useInfo, useTranslation } from '../../../hooks';
13+
import { SubTitle } from '../../../partials';
1314
import Explorer from '../../../popup/history/Explorer';
1415
import FailSuccessIcon from '../../../popup/history/partials/FailSuccessIcon';
15-
import type { TxInfo } from '../../../util/types';
1616

1717
interface Props {
1818
address: string | undefined;
@@ -21,57 +21,28 @@ interface Props {
2121
onPrimaryBtnClick: () => void;
2222
}
2323

24-
export default function Confirmation({ address, onPrimaryBtnClick, txInfo }: Props): React.ReactElement {
24+
export default function Confirmation ({ address, onPrimaryBtnClick, txInfo }: Props): React.ReactElement {
2525
const { t } = useTranslation();
26-
const token = useToken(address);
27-
const chainName = useChainName(address);
26+
const { chainName, token } = useInfo(address);
2827

2928
const fee = txInfo.api.createType('Balance', txInfo.fee);
3029

31-
const DisplayInfo = ({ caption, showDivider = true, value }: { caption: string, value: string, showDivider?: boolean }) => {
32-
return (
33-
<Grid alignItems='center' container direction='column' fontSize='16px' fontWeight={400} justifyContent='center'>
34-
<Grid container item width='fit-content'>
35-
<Typography lineHeight='40px' pr='5px'>{caption}</Typography>
36-
<Typography lineHeight='40px'>{value}</Typography>
37-
</Grid>
38-
{showDivider &&
39-
<Grid alignItems='center' container item justifyContent='center'>
40-
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
41-
</Grid>}
42-
</Grid>
43-
);
44-
};
45-
4630
return (
4731
<Container disableGutters>
4832
<SubTitle label={txInfo.success ? t('Completed') : t('Failed')} style={{ paddingTop: '25px' }} />
4933
<FailSuccessIcon
5034
showLabel={false}
51-
style={{ fontSize: '87px', m: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
35+
style={{ fontSize: '87px', margin: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
5236
success={txInfo.success}
5337
/>
5438
{txInfo?.failureText &&
5539
<Typography fontSize='16px' fontWeight={400} m='auto' sx={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', display: '-webkit-box', mb: '15px', overflow: 'hidden', textOverflow: 'ellipsis' }} textAlign='center' width='92%'>
5640
{txInfo.failureText}
5741
</Typography>
5842
}
59-
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
60-
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
61-
{t('Account holder')}:
62-
</Typography>
63-
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
64-
{txInfo.from.name}
65-
</Typography>
66-
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
67-
<ShortAddress address={txInfo.from.address} inParentheses style={{ fontSize: '16px' }} />
68-
</Grid>
69-
</Grid>
70-
{txInfo.throughProxy &&
71-
<Grid container m='auto' maxWidth='92%'>
72-
<ThroughProxy address={txInfo.throughProxy.address} chain={txInfo.chain} />
73-
</Grid>
74-
}
43+
<AccountWithProxyInConfirmation
44+
txInfo={txInfo}
45+
/>
7546
<Grid alignItems='center' container item justifyContent='center' pt='8px'>
7647
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', width: '240px' }} />
7748
</Grid>
@@ -96,7 +67,7 @@ export default function Confirmation({ address, onPrimaryBtnClick, txInfo }: Pro
9667
</Grid>
9768
}
9869
{
99-
txInfo?.txHash &&
70+
txInfo?.txHash && chainName &&
10071
<Grid container justifyContent='center' pt='5px'>
10172
<Explorer chainName={chainName} txHash={txInfo?.txHash} />
10273
</Grid>

‎packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup,
138138
selectedProxyAddress={selectedProxyAddress}
139139
showDivider
140140
style={{ mt: '-5px' }}
141-
title={t('Account holder')}
141+
title={t('Account')}
142142
/>
143143
<AmountFee
144144
address={address}

‎packages/extension-polkagate/src/fullscreen/governance/delegate/partial/Confirmation.tsx

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import type { DelegateInformation } from '..';
99
import { Divider, Grid, Typography } from '@mui/material';
1010
import React from 'react';
1111

12-
import { Motion, PButton, ShortAddress } from '../../../../components';
12+
import { AccountWithProxyInConfirmation, DisplayInfo, Motion, PButton, ShortAddress } from '../../../../components';
1313
import { useToken, useTranslation } from '../../../../hooks';
14-
import { SubTitle, ThroughProxy } from '../../../../partials';
14+
import { SubTitle } from '../../../../partials';
1515
import Explorer from '../../../../popup/history/Explorer';
1616
import FailSuccessIcon from '../../../../popup/history/partials/FailSuccessIcon';
1717

@@ -32,50 +32,23 @@ export default function Confirmation ({ address, allCategoriesLength, delegateIn
3232
const chainName = txInfo.chain.name.replace(' Relay Chain', '');
3333
const fee = txInfo.api.createType('Balance', txInfo.fee);
3434

35-
const DisplayInfo = ({ caption, showDivider = true, value }: { caption: string, value: string, showDivider?: boolean }) => {
36-
return (
37-
<Grid alignItems='center' container direction='column' fontSize='16px' fontWeight={400} justifyContent='center'>
38-
<Grid container item width='fit-content'>
39-
<Typography lineHeight='40px' pr='5px'>{caption}</Typography>
40-
<Typography lineHeight='40px'>{value}</Typography>
41-
</Grid>
42-
{showDivider &&
43-
<Grid alignItems='center' container item justifyContent='center'>
44-
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
45-
</Grid>}
46-
</Grid>
47-
);
48-
};
49-
5035
return (
5136
<Motion>
5237
<SubTitle label={txInfo.success ? t('Completed') : t('Failed')} style={{ paddingTop: '25px' }} />
5338
<FailSuccessIcon
5439
showLabel={false}
55-
style={{ fontSize: '87px', m: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
40+
style={{ fontSize: '87px', margin: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
5641
success={txInfo.success}
5742
/>
5843
{txInfo?.failureText &&
5944
<Typography fontSize='16px' fontWeight={400} m='auto' sx={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', display: '-webkit-box', mb: '15px', overflow: 'hidden', textOverflow: 'ellipsis' }} textAlign='center' width='92%'>
6045
{txInfo.failureText}
6146
</Typography>
6247
}
63-
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
64-
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
65-
{status === 'Remove' ? t('Account holder') : t('Delegation from')}:
66-
</Typography>
67-
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
68-
{txInfo.from.name}
69-
</Typography>
70-
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
71-
<ShortAddress address={txInfo.from.address} inParentheses style={{ fontSize: '16px' }} />
72-
</Grid>
73-
</Grid>
74-
{txInfo.throughProxy &&
75-
<Grid container m='auto' maxWidth='92%'>
76-
<ThroughProxy address={txInfo.throughProxy.address} chain={txInfo.chain} />
77-
</Grid>
78-
}
48+
<AccountWithProxyInConfirmation
49+
label={status === 'Remove' ? t('Account') : t('Delegation from')}
50+
txInfo={txInfo}
51+
/>
7952
<Grid alignItems='center' container item justifyContent='center' pt='8px'>
8053
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', width: '240px' }} />
8154
</Grid>

0 commit comments

Comments
 (0)