From d831783009dbf1900346332c76387e08881a6754 Mon Sep 17 00:00:00 2001 From: Jaco Date: Wed, 27 Apr 2022 16:14:59 +0200 Subject: [PATCH] Expand pool details (w/ all accounts) (#7469) --- packages/page-bounties/src/Bounty.tsx | 22 +--- packages/page-staking/src/Pools/Pool.tsx | 110 +++++++++++++----- packages/page-staking/src/Pools/Pools.tsx | 1 + packages/react-components/src/Table/index.tsx | 24 +++- 4 files changed, 109 insertions(+), 48 deletions(-) diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx index 3a3d6641db..64223eb390 100644 --- a/packages/page-bounties/src/Bounty.tsx +++ b/packages/page-bounties/src/Bounty.tsx @@ -4,10 +4,11 @@ import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; import type { BlockNumber, Bounty as BountyType, BountyIndex } from '@polkadot/types/interfaces'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import styled from 'styled-components'; import { AddressSmall, ExpandButton, LinkExternal } from '@polkadot/react-components'; +import { useToggle } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; @@ -36,7 +37,7 @@ const EMPTY_CELL = '-'; function Bounty ({ bestNumber, bounty, className = '', description, index, proposals }: Props): React.ReactElement { const { t } = useTranslation(); - const [isExpanded, setIsExpanded] = useState(false); + const [isExpanded, toggleExpanded] = useToggle(false); const { bond, curatorDeposit, fee, proposer, status, value } = bounty; const { beneficiary, bountyStatus, curator, unlockAt, updateDue } = useBountyStatus(status); @@ -56,11 +57,6 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo : null; }, [curator, proposals, status]); - const handleOnIconClick = useCallback( - () => setIsExpanded((isExpanded) => !isExpanded), - [] - ); - return ( <> @@ -142,7 +138,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo /> @@ -201,14 +197,6 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo } export default React.memo(styled(Bounty)` - &.isCollapsed { - visibility: collapse; - } - - &.isExpanded { - visibility: visible; - } - .description-column { max-width: 200px; @@ -228,8 +216,8 @@ export default React.memo(styled(Bounty)` width: 1%; .fast-actions-row { - display: flex; align-items: center; + display: flex; justify-content: flex-end; & > * + * { diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx index 48d175132d..d370699687 100644 --- a/packages/page-staking/src/Pools/Pool.tsx +++ b/packages/page-staking/src/Pools/Pool.tsx @@ -5,8 +5,10 @@ import type { BN } from '@polkadot/util'; import type { MembersMapEntry, Params } from './types'; import React, { useCallback } from 'react'; +import styled from 'styled-components'; -import { AddressMini, ExpanderScroll } from '@polkadot/react-components'; +import { AddressMini, ExpandButton, ExpanderScroll } from '@polkadot/react-components'; +import { useToggle } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; @@ -22,9 +24,10 @@ interface Props { poolId: BN; } -function Pool ({ className, members, ownAccounts, params, poolId }: Props): React.ReactElement | null { +function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): React.ReactElement | null { const { t } = useTranslation(); const info = usePoolInfo(poolId); + const [isExpanded, toggleExpanded] = useToggle(false); const renderMembers = useCallback( () => members.map(({ accountId, member }, count) => ( @@ -44,31 +47,86 @@ function Pool ({ className, members, ownAccounts, params, poolId }: Props): Reac } return ( - -

{formatNumber(poolId)}

- {info.metadata} - {info.bonded.state.type} - - {!info.rewardClaimable.isZero() && } - - {members && members.length !== 0 && ( - ('No members')} - renderChildren={renderMembers} - summary={t('Members ({{count}})', { replace: { count: members.length } })} + <> + +

{formatNumber(poolId)}

+ {info.metadata} + {info.bonded.state.type} + + {!info.rewardClaimable.isZero() && } + + {members && members.length !== 0 && ( + ('No members')} + renderChildren={renderMembers} + summary={t('Members ({{count}})', { replace: { count: members.length } })} + /> + )} + + + - )} - - - - - + + + + + +
+
{t('root')}
+
+
+
+
{t('creator')}
+
+
+
+
{t('nominator')}
+
+
+
+
{t('toggler')}
+
+
+ + + +
+
{t('stash')}
+
+
+
+
{t('rewards')}
+
+
+ + + ); } -export default React.memo(Pool); +export default React.memo(styled(Pool)` + .label-column-right, + .label-column-left{ + display: flex; + align-items: center; + + .label { + width: 50%; + } + } + + .label { + text-align: right; + padding: 0 1.7rem 0 0; + line-height: normal; + color: var(--color-label); + text-transform: lowercase; + } +`); diff --git a/packages/page-staking/src/Pools/Pools.tsx b/packages/page-staking/src/Pools/Pools.tsx index 62f2eb28c2..b6f9d1e020 100644 --- a/packages/page-staking/src/Pools/Pools.tsx +++ b/packages/page-staking/src/Pools/Pools.tsx @@ -78,6 +78,7 @@ function Pools ({ className, ids, ownPools, params }: Props): React.ReactElement empty={filtered && t('No available nomination pools')} emptySpinner={t('Retrieving nomination pools')} header={header} + withCollapsibleRows > {membersMap && filtered && filtered.map((poolId) => (