From 466a1be22f485e8684e66b74225c49c3f60dc225 Mon Sep 17 00:00:00 2001 From: Marcin Wachulski Date: Thu, 19 Aug 2021 16:42:46 +0200 Subject: [PATCH] Account row collapsible row details (#5894) * Retrofitting basic unit tests to Accounts Extraction of useAccounts and useBalance hooks * Retrofitting basic unit tests to Accounts Extraction of useAccounts and useBalance hooks * Fixing accounts unit tests - basic account balances * Cleaning up after PR remarks * Fixing arrangements of balances 1/3 Moving ArrangedAccount around * Add useStakingInfo hook * Adopt linter suggestions * Fixing arrangements of balances 2/3 Linking arranged balances values to mocked balances calls. * Fixing arrangements of balances 3/3 Formatting utils made consistent * Details row odd-even + (un)hide * Improving th/td/footer layout * Add tags to details row * Changing layout of account balance with details * Add total/details balances unit tests * Add tags unit tests * Clean up of TODOs, adding comments * Improve tags unit testing * Alternate account row details coloring unit test * Row details toggling unit tests * Row details toggling unit tests - bad commit fix * Style address balances (#5897) * Fix jumping column problem * Improve balances positioning * Format sidebar * Position header * Extract common formatting of balances in tests. Thx @vitaliyworks, great hint. * Revert Sidebar styling * Use rems * Lint * Use useToggle for expanding account row * Add tags header * Apply FormatBalance review comments * Display parent account info above account name (#5947) * Display parent address * Improve layout * Set keyring in tests * Remove redundant code from components * Use derivedAccount only in specific test * Apply lint fixes * Remove parent column from expanded row * Apply review suggestions * Improve styling in ParentAddress component * Improve layout of parent address and add short address * Apply review suggestions * Use map instead of for loops Co-authored-by: Marcin Wachulski Co-authored-by: Vitaliy Mysak Co-authored-by: MiZiet <55240109+MiZiet@users.noreply.github.com> Co-authored-by: MiZiet Co-authored-by: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com> Co-authored-by: Ewa Kowalska --- .../public/locales/en/react-components.json | 1 + .../page-accounts/src/Accounts/Account.tsx | 603 ++++++++++-------- .../page-accounts/src/Accounts/index.spec.ts | 345 ++++++---- packages/page-accounts/src/Accounts/index.tsx | 8 +- packages/page-accounts/test/hooks/default.ts | 15 + .../page-accounts/test/pages/accountsPage.tsx | 70 +- packages/react-components/src/AddressInfo.tsx | 43 +- .../react-components/src/AddressSmall.tsx | 75 ++- .../react-components/src/ParentAddress.tsx | 42 ++ .../react-components/src/StakingUnbonding.tsx | 28 +- packages/react-components/src/Table/Head.tsx | 5 + packages/react-query/src/FormatBalance.tsx | 22 +- 12 files changed, 819 insertions(+), 438 deletions(-) create mode 100644 packages/react-components/src/ParentAddress.tsx 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) && ( -