Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: 'Account' instead of 'Account Holder' #1585

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+729 −1,684
Open

refactor: 'Account' instead of 'Account Holder' #1585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/extension-polkagate/src/components/AccountHolder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,26 @@ import { Identity, ShortAddress } from '.';

interface Props {
address: string | undefined;
direction?: 'row' | 'column' ;
style?: SxProps<Theme> | undefined;
title?: string;
}

function AccountHolder ({ address, style, title }: Props): React.ReactElement {
function AccountHolder ({ address, direction = 'column', style, title }: Props): React.ReactElement {
const { t } = useTranslation();
const isExtensionPopup = useIsExtensionPopup();

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

return (
<Grid alignItems='center' container direction='column' justifyContent='center' py='5px' sx={style}>
<Grid alignItems='center' container direction= 'column' justifyContent='center' py='5px' sx={style}>
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved
<Typography fontSize='16px' fontWeight={isExtensionPopup ? 300 : 400} height='18px' textAlign='center'>
{title ?? t('Account holder')}
{title ?? t('Account')}
</Typography>
<Identity
address={address}
api={api}
direction= {direction}
identiconSize={31}
showSocial={false}
style={{
Expand Down
11 changes: 8 additions & 3 deletions packages/extension-polkagate/src/components/AccountHolderWithProxy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { Chain } from '@polkadot/extension-chains/types';
import { Divider, Grid, type SxProps, type Theme } from '@mui/material';
import React from 'react';

import { useChain } from '../hooks';
import ThroughProxy from '../partials/ThroughProxy';
import { AccountHolder } from '.';

Expand All @@ -17,20 +18,24 @@ interface Props {
style?: SxProps<Theme> | undefined;
selectedProxyAddress?: string;
title?: string;
chain: Chain | null | undefined;
chain?: Chain | null | undefined;
direction?: 'row' | 'column' ;
}

function AccountHolderWithProxy ({ address, chain, selectedProxyAddress, showDivider = false, style, title }: Props): React.ReactElement {
function AccountHolderWithProxy ({ address, chain, direction = 'column', selectedProxyAddress, showDivider = false, style, title }: Props): React.ReactElement {
const _chain = useChain(address);

return (
<Grid alignItems='center' container direction='column' justifyContent='center' sx={{ fontWeight: 300, letterSpacing: '-0.015em', pt: '5px', ...style }}>
<AccountHolder
address={address}
direction={direction}
title={title}
/>
{selectedProxyAddress &&
<ThroughProxy
address={selectedProxyAddress}
chain={chain}
chain={chain || _chain}
showDivider
style={{ pb: '5px' }}
/>
Expand Down
50 changes: 50 additions & 0 deletions packages/extension-polkagate/src/components/AccountWithProxyInConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0

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

import type { TxInfo } from '../util/types';

import { Grid, Typography } from '@mui/material';
import React from 'react';

import { useTranslation } from '../hooks';
import { ThroughProxy } from '../partials';
import { ShortAddress } from '.';

interface Props {
txInfo: TxInfo;
label?: string;
}

export default function AccountWithProxyInConfirmation ({ label, txInfo }: Props): React.ReactElement {
const { t } = useTranslation();

return (
<>
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
{ label || t('Account')}:
</Typography>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
{txInfo.from.name}
</Typography>
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
<ShortAddress
address={txInfo.from.address}
inParentheses
style={{ fontSize: '16px' }}
/>
</Grid>
</Grid>
{txInfo.throughProxy &&
<Grid container m='auto' maxWidth='92%'>
<ThroughProxy
address={txInfo.throughProxy.address}
chain={txInfo.chain}
/>
</Grid>
}
</>
);
}
34 changes: 34 additions & 0 deletions packages/extension-polkagate/src/components/DisplayInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0

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

import { Divider, Grid, Typography } from '@mui/material';
import React from 'react';

interface Props {
caption: string;
value: any | React.ReactNode | string | undefined;
showDivider?: boolean;
fontSize?: string;
fontWeight?: number;
}
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved

export default function DisplayInfo ({ caption, fontSize = '16px', fontWeight = 400, showDivider = true, value }: Props) {
return (
<Grid alignItems='center' container direction='column' fontSize={fontSize} fontWeight={fontWeight} justifyContent='center'>
<Grid container item width='fit-content'>
<Typography lineHeight='40px' pr='5px'>
{caption}
</Typography>
<Typography lineHeight='40px'>
{value || ''}
</Typography>
</Grid>
{showDivider &&
<Grid alignItems='center' container item justifyContent='center'>
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
</Grid>}
</Grid>
);
}
7 changes: 4 additions & 3 deletions packages/extension-polkagate/src/components/Identity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface Props {
direction?: 'row' | 'column';
formatted?: string | AccountId;
identiconSize?: number;
inParentheses?: boolean;
judgement?: unknown;
name?: string;
noIdenticon?: boolean;
Expand All @@ -39,7 +40,7 @@ interface Props {
subIdOnly?: boolean;
}

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> {
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> {
const { t } = useTranslation();
const theme = useTheme();

Expand Down Expand Up @@ -153,13 +154,13 @@ function Identity ({ accountInfo, address, api, chain, direction = 'column', for
}
{withShortAddress && direction === 'column' &&
<Grid container item>
<ShortAddress address={_formatted} charsCount={6} style={{ fontSize: '11px', justifyContent: 'flex-start', lineHeight: '15px' }} />
<ShortAddress address={_formatted} charsCount={6} inParentheses={inParentheses} style={{ fontSize: '11px', justifyContent: 'flex-start', lineHeight: '15px' }} />
</Grid>
}
</Grid>
{withShortAddress && direction === 'row' &&
<Grid container item justifyContent='flex-end' sx={{ height: 'inherit', minWidth: 'fit-content', mt: '3%', px: '5px', width: 'fit-content' }}>
<ShortAddress address={_formatted} charsCount={6} style={{ fontSize: '11px', justifyContent: 'flex-start' }} />
<ShortAddress address={_formatted} charsCount={6} inParentheses={inParentheses} style={{ fontSize: '11px', justifyContent: 'flex-start' }} />
</Grid>
}
{_showSocial &&
Expand Down
2 changes: 2 additions & 0 deletions packages/extension-polkagate/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export { default as AccountHolderWithProxy } from './AccountHolderWithProxy';
export { default as AccountInputWithIdentity } from './AccountInputWithIdentity';
export { default as AccountNamePasswordCreation } from './AccountNamePasswordCreation';
export { default as AccountsTable } from './AccountsTable';
export { default as AccountWithProxyInConfirmation } from './AccountWithProxyInConfirmation';
export { default as ActionText } from './ActionText';
export { default as Address } from './Address';
export { default as AddressInput } from './AddressInput';
Expand All @@ -29,6 +30,7 @@ export { default as ColorContext } from './ColorContext';
export * from './contexts';
export { default as Convictions } from './Convictions';
export { default as CopyAddressButton } from './CopyAddressButton';
export { default as DisplayInfo } from './DisplayInfo';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

DisplayInfo Component Export Does Not Match Expected Pattern

  • The DisplayInfo component is exported correctly as the file exists.
  • However, its export structure does not match the expected export default function DisplayInfo pattern.
  • Please update the export statement to follow the standardized format or provide clarification if an alternative export method is intended.
🔗 Analysis chain

LGTM! Verify the new component and clarify its purpose.

The export for DisplayInfo has been correctly added and follows the established pattern in this file.

To ensure the component exists and is implemented correctly, run the following script:

Could you please clarify how the DisplayInfo component relates to the PR objective of refactoring "account" instead of "Account Holder"? This will help ensure that all changes are aligned with the intended purpose of the PR.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the existence and basic structure of the DisplayInfo component

# Test: Check if the file exists
fd -t f "DisplayInfo.tsx" -X echo "File exists: {}"

# Test: Verify the component's basic structure
ast-grep --lang typescript --pattern $'export default function DisplayInfo($_) {
  $$$
}'

Length of output: 217

export { default as ErrorBoundary } from './ErrorBoundary';
export { default as FormatBalance } from './FormatBalance';
export { default as FormatBalance2 } from './FormatBalance2';
Expand Down
53 changes: 12 additions & 41 deletions packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// 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 { TxInfo } from '../../../util/types';

import { Container, Divider, Grid, Typography } from '@mui/material';
import React from 'react';

import { PButton, ShortAddress } from '../../../components';
import { useChainName, useToken, useTranslation } from '../../../hooks';
import { SubTitle, ThroughProxy } from '../../../partials';
import { AccountWithProxyInConfirmation, DisplayInfo, PButton, ShortAddress } from '../../../components';
import { useInfo, useTranslation } from '../../../hooks';
import { SubTitle } from '../../../partials';
import Explorer from '../../../popup/history/Explorer';
import FailSuccessIcon from '../../../popup/history/partials/FailSuccessIcon';
import type { TxInfo } from '../../../util/types';

interface Props {
address: string | undefined;
Expand All @@ -21,57 +21,28 @@ interface Props {
onPrimaryBtnClick: () => void;
}

export default function Confirmation({ address, onPrimaryBtnClick, txInfo }: Props): React.ReactElement {
export default function Confirmation ({ address, onPrimaryBtnClick, txInfo }: Props): React.ReactElement {
const { t } = useTranslation();
const token = useToken(address);
const chainName = useChainName(address);
const { chainName, token } = useInfo(address);

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

const DisplayInfo = ({ caption, showDivider = true, value }: { caption: string, value: string, showDivider?: boolean }) => {
return (
<Grid alignItems='center' container direction='column' fontSize='16px' fontWeight={400} justifyContent='center'>
<Grid container item width='fit-content'>
<Typography lineHeight='40px' pr='5px'>{caption}</Typography>
<Typography lineHeight='40px'>{value}</Typography>
</Grid>
{showDivider &&
<Grid alignItems='center' container item justifyContent='center'>
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
</Grid>}
</Grid>
);
};

return (
<Container disableGutters>
<SubTitle label={txInfo.success ? t('Completed') : t('Failed')} style={{ paddingTop: '25px' }} />
<FailSuccessIcon
showLabel={false}
style={{ fontSize: '87px', m: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
style={{ fontSize: '87px', margin: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
success={txInfo.success}
/>
{txInfo?.failureText &&
<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%'>
{txInfo.failureText}
</Typography>
}
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
{t('Account holder')}:
</Typography>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
{txInfo.from.name}
</Typography>
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
<ShortAddress address={txInfo.from.address} inParentheses style={{ fontSize: '16px' }} />
</Grid>
</Grid>
{txInfo.throughProxy &&
<Grid container m='auto' maxWidth='92%'>
<ThroughProxy address={txInfo.throughProxy.address} chain={txInfo.chain} />
</Grid>
}
<AccountWithProxyInConfirmation
txInfo={txInfo}
/>
<Grid alignItems='center' container item justifyContent='center' pt='8px'>
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', width: '240px' }} />
</Grid>
Expand All @@ -96,7 +67,7 @@ export default function Confirmation({ address, onPrimaryBtnClick, txInfo }: Pro
</Grid>
}
{
txInfo?.txHash &&
txInfo?.txHash && chainName &&
<Grid container justifyContent='center' pt='5px'>
<Explorer chainName={chainName} txHash={txInfo?.txHash} />
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup,
selectedProxyAddress={selectedProxyAddress}
showDivider
style={{ mt: '-5px' }}
title={t('Account holder')}
title={t('Account')}
/>
<AmountFee
address={address}
Expand Down
41 changes: 7 additions & 34 deletions packages/extension-polkagate/src/fullscreen/governance/delegate/partial/Confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import type { DelegateInformation } from '..';
import { Divider, Grid, Typography } from '@mui/material';
import React from 'react';

import { Motion, PButton, ShortAddress } from '../../../../components';
import { AccountWithProxyInConfirmation, DisplayInfo, Motion, PButton, ShortAddress } from '../../../../components';
import { useToken, useTranslation } from '../../../../hooks';
import { SubTitle, ThroughProxy } from '../../../../partials';
import { SubTitle } from '../../../../partials';
import Explorer from '../../../../popup/history/Explorer';
import FailSuccessIcon from '../../../../popup/history/partials/FailSuccessIcon';

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

const DisplayInfo = ({ caption, showDivider = true, value }: { caption: string, value: string, showDivider?: boolean }) => {
return (
<Grid alignItems='center' container direction='column' fontSize='16px' fontWeight={400} justifyContent='center'>
<Grid container item width='fit-content'>
<Typography lineHeight='40px' pr='5px'>{caption}</Typography>
<Typography lineHeight='40px'>{value}</Typography>
</Grid>
{showDivider &&
<Grid alignItems='center' container item justifyContent='center'>
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', mx: '6px', width: '240px' }} />
</Grid>}
</Grid>
);
};

return (
<Motion>
<SubTitle label={txInfo.success ? t('Completed') : t('Failed')} style={{ paddingTop: '25px' }} />
<FailSuccessIcon
showLabel={false}
style={{ fontSize: '87px', m: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
style={{ fontSize: '87px', margin: `${txInfo?.failureText ? 15 : 20}px auto`, textAlign: 'center', width: 'fit-content' }}
success={txInfo.success}
/>
{txInfo?.failureText &&
<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%'>
{txInfo.failureText}
</Typography>
}
<Grid alignItems='end' container justifyContent='center' sx={{ m: 'auto', pt: '5px', width: '90%' }}>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px'>
{status === 'Remove' ? t('Account holder') : t('Delegation from')}:
</Typography>
<Typography fontSize='16px' fontWeight={400} lineHeight='23px' maxWidth='45%' overflow='hidden' pl='5px' textOverflow='ellipsis' whiteSpace='nowrap'>
{txInfo.from.name}
</Typography>
<Grid fontSize='16px' fontWeight={400} item lineHeight='22px' pl='5px'>
<ShortAddress address={txInfo.from.address} inParentheses style={{ fontSize: '16px' }} />
</Grid>
</Grid>
{txInfo.throughProxy &&
<Grid container m='auto' maxWidth='92%'>
<ThroughProxy address={txInfo.throughProxy.address} chain={txInfo.chain} />
</Grid>
}
<AccountWithProxyInConfirmation
label={status === 'Remove' ? t('Account') : t('Delegation from')}
txInfo={txInfo}
/>
<Grid alignItems='center' container item justifyContent='center' pt='8px'>
<Divider sx={{ bgcolor: 'secondary.main', height: '2px', width: '240px' }} />
</Grid>
Expand Down
Loading
Loading