diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index b46835bed9..d001f9e1fb 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -16,7 +16,7 @@ import styled, { ThemeContext } from 'styled-components'; import { ApiPromise } from '@polkadot/api'; import useAccountLocks from '@polkadot/app-referenda/useAccountLocks'; -import { AddressInfo, AddressSmall, Badge, Button, ChainLock, CryptoType, ExpandButton, Forget, Icon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components'; +import { AddressInfo, AddressSmall, Badge, Button, ChainLock, Columar, CryptoType, ExpandButton, Forget, Icon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components'; import { useAccountInfo, useApi, useBalancesAll, useBestNumber, useCall, useLedger, useStakingInfo, useToggle } from '@polkadot/react-hooks'; import { keyring } from '@polkadot/ui-keyring'; import { BN, BN_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util'; @@ -74,6 +74,7 @@ const BAL_OPTS_EXPANDED = { available: true, bonded: true, locked: true, + nonce: true, redeemable: true, reserved: true, total: false, @@ -585,118 +586,108 @@ function Account ({ account: { address, meta }, className = '', delegation, filt /> )} - +
-
- {meta.genesisHash - ? - : isDevelopment - ? ( - ('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')} - icon='wrench' - /> - ) - : ( - -

{t('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}

-

{t('This does not send any transaction, rather it only sets the genesis in the account JSON.')}

-
- } - icon='exclamation-triangle' - /> - ) - } - {recoveryInfo && ( - -

{t('This account is recoverable, with the following friends:')}

+ {meta.genesisHash + ? + : isDevelopment + ? ( + ('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')} + icon='wrench' + /> + ) + : ( + - {recoveryInfo.friends.map((friend, index): React.ReactNode => ( - - ))} +

{t('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}

+

{t('This does not send any transaction, rather it only sets the genesis in the account JSON.')}

- - - - - - - - - - - - - - - -
{t('threshold')}{formatNumber(recoveryInfo.threshold)}
{t('delay')}{formatNumber(recoveryInfo.delayPeriod)}
{t('deposit')}{formatBalance(recoveryInfo.deposit)}
+ } + icon='exclamation-triangle' + /> + ) + } + {recoveryInfo && ( + +

{t('This account is recoverable, with the following friends:')}

+
+ {recoveryInfo.friends.map((friend, index): React.ReactNode => ( + + ))}
- } - icon='redo' - /> - )} - {isProxied && !proxyInfo.hasOwned && ( - ('Proxied account has no owned proxies')} - icon='sitemap' - info='0' - /> - )} - -
- {multiInfos && multiInfos.length !== 0 && ( - ('Multisig approvals pending')} - hoverAction={t('View pending approvals')} - icon='file-signature' - onClick={toggleMultisig} - /> - )} - {delegation?.accountDelegated && ( - ('This account has a governance delegation')} - hoverAction={t('Manage delegation')} - icon='calendar-check' - onClick={toggleDelegate} - /> - )} - {proxy && proxy[0].length !== 0 && api.api.tx.utility && ( - ('This account has a proxy set') - : t('This account has {{proxyNumber}} proxies set', { replace: { proxyNumber: proxy[0].length } }) - } - hoverAction={t('Manage proxies')} - icon='sitemap' - onClick={toggleProxyOverview} - /> - )} -
+ + + + + + + + + + + + + + + +
{t('threshold')}{formatNumber(recoveryInfo.threshold)}
{t('delay')}{formatNumber(recoveryInfo.delayPeriod)}
{t('deposit')}{formatBalance(recoveryInfo.deposit)}
+ + } + icon='redo' + /> + )} + {isProxied && !proxyInfo.hasOwned && ( + ('Proxied account has no owned proxies')} + icon='sitemap' + info='0' + /> + )} + {multiInfos && multiInfos.length !== 0 && ( + ('Multisig approvals pending')} + hoverAction={t('View pending approvals')} + icon='file-signature' + onClick={toggleMultisig} + /> + )} + {delegation?.accountDelegated && ( + ('This account has a governance delegation')} + hoverAction={t('Manage delegation')} + icon='calendar-check' + onClick={toggleDelegate} + /> + )} + {proxy && proxy[0].length !== 0 && api.api.tx.utility && ( + ('This account has a proxy set') + : t('This account has {{proxyNumber}} proxies set', { replace: { proxyNumber: proxy[0].length } }) + } + hoverAction={t('Manage proxies')} + icon='sitemap' + onClick={toggleProxyOverview} + /> + )} - - - - - {balancesAll?.accountNonce.gt(BN_ZERO) && formatNumber(balancesAll.accountNonce)} -
- {isFunction(api.api.tx.balances?.transfer) && (