diff --git a/packages/apps/public/locales/en/react-components.json b/packages/apps/public/locales/en/react-components.json index 52b5bc340e..d88c131758 100644 --- a/packages/apps/public/locales/en/react-components.json +++ b/packages/apps/public/locales/en/react-components.json @@ -27,6 +27,7 @@ "You are about to remove this account from your list of available accounts. Once completed, should you need to access it again, you will have to re-create the account either via seed or via a backup file.": "You are about to remove this account from your list of available accounts. Once completed, should you need to access it again, you will have to re-create the account either via seed or via a backup file.", "You are about to remove this address from your address book. Once completed, should you need to access it again, you will have to re-add the address.": "You are about to remove this address from your address book. Once completed, should you need to access it again, you will have to re-add the address.", "You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract's address in the Instantiate tab.": "You are about to remove this contract from your list of available contracts. Once completed, should you need to access it again, you will have to manually add the contract's address in the Instantiate tab.", + "account balance": "account balance", "address copied": "address copied", "available to be unlocked": "available to be unlocked", "beneficiary": "beneficiary", diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index a962c44b16..1ccbc5e675 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -16,7 +16,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import styled, { ThemeContext } from 'styled-components'; import { ApiPromise } from '@polkadot/api'; -import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components'; +import { AddressInfo, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, 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_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util'; @@ -47,6 +47,7 @@ interface Props { proxy?: [ProxyDefinition[], BN]; setBalance: (address: string, value: AccountBalance) => void; toggleFavorite: (address: string) => void; + isEven: boolean; } interface DemocracyUnlockable { @@ -99,8 +100,9 @@ const transformRecovery = { transform: (opt: Option) => opt.unwrapOr(null) }; -function Account ({ account: { address, meta }, className = '', delegation, filter, isFavorite, proxy, setBalance, toggleFavorite }: Props): React.ReactElement | null { +function Account ({ account: { address, meta }, className = '', delegation, filter, isEven, isFavorite, proxy, setBalance, toggleFavorite }: Props): React.ReactElement | null { const { t } = useTranslation(); + const [isExpanded, toggleIsExpanded] = useToggle(false); const { theme } = useContext(ThemeContext); const { queueExtrinsic } = useContext(StatusContext); const api = useApi(); @@ -381,278 +383,334 @@ function Account ({ account: { address, meta }, className = '', delegation, filt } return ( - - - - - - {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 is only sets the genesis in the account JSON.')}

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

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

-
- {recoveryInfo.friends.map((friend, index): React.ReactNode => ( - - ))} -
- - - - - - - - - - - - - - - -
{t('threshold')}{formatNumber(recoveryInfo.threshold)}
{t('delay')}{formatNumber(recoveryInfo.delayPeriod)}
{t('deposit')}{formatBalance(recoveryInfo.deposit)}
- - } - icon='shield' + <> + + + - )} - {multiInfos && multiInfos.length !== 0 && ( - ('Multisig approvals pending')} - info={multiInfos.length} - /> - )} - {isProxied && !proxyInfo.hasOwned && ( - ('Proxied account has no owned proxies')} - info='0' - /> - )} - {delegation?.accountDelegated && ( - ('This account has a governance delegation')} - icon='calendar-check' - onClick={toggleDelegate} - /> - )} - {!!proxy?.[0].length && api.api.tx.utility && ( - ('This account has {{proxyNumber}} proxy set.', { - replace: { - proxyNumber: proxy[0].length - } - })} - icon='arrow-right' - onClick={toggleProxyOverview} - /> - )} - - - - {isBackupOpen && ( - - )} - {isDelegateOpen && ( - - )} - {isDeriveOpen && ( - - )} - {isForgetOpen && ( - - )} - {isIdentityMainOpen && ( - - )} - {isIdentitySubOpen && ( - - )} - {isPasswordOpen && ( - - )} - {isTransferOpen && ( - - )} - {isProxyOverviewOpen && ( - - )} - {isMultisigOpen && multiInfos && ( - - )} - {isRecoverAccountOpen && ( - - )} - {isRecoverSetupOpen && ( - - )} - {isUndelegateOpen && ( - - )} - - - {(meta.parentAddress as string) && ( - - )} - - - - - -
- -
- - - {balancesAll?.accountNonce.gt(BN_ZERO) && formatNumber(balancesAll.accountNonce)} - - - - - - {isFunction(api.api.tx.balances?.transfer) && ( -