Expand pool details (w/ all accounts) (#7469)

2022-04-27 16:14:59 +02:00 · 2022-04-27 16:14:59 +02:00 · d831783009
commit d831783009
parent 85c3919dbe
4 changed files with 109 additions and 48 deletions
--- 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<Props> {
  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 (
    <>
      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
@ -142,7 +138,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
            />
            <ExpandButton
              expanded={isExpanded}
-              onClick={handleOnIconClick}
+              onClick={toggleExpanded}
            />
          </div>
        </td>
@ -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;

      & > * + * {
--- 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<Props> | null {
+function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): React.ReactElement<Props> | 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 (
-    <tr className={className}>
-      <td className='number'><h1>{formatNumber(poolId)}</h1></td>
-      <td className='start'>{info.metadata}</td>
-      <td className='number'>{info.bonded.state.type}</td>
-      <td className='number'><FormatBalance value={info.bonded.points} /></td>
-      <td className='number media--1100'>{!info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
-      <td className='number'>
-        {members && members.length !== 0 && (
-          <ExpanderScroll
-            empty={t<string>('No members')}
-            renderChildren={renderMembers}
-            summary={t<string>('Members ({{count}})', { replace: { count: members.length } })}
+    <>
+      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+        <td className='number'><h1>{formatNumber(poolId)}</h1></td>
+        <td className='start'>{info.metadata}</td>
+        <td className='number'>{info.bonded.state.type}</td>
+        <td className='number'><FormatBalance value={info.bonded.points} /></td>
+        <td className='number media--1100'>{!info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
+        <td className='number'>
+          {members && members.length !== 0 && (
+            <ExpanderScroll
+              empty={t<string>('No members')}
+              renderChildren={renderMembers}
+              summary={t<string>('Members ({{count}})', { replace: { count: members.length } })}
+            />
+          )}
+        </td>
+        <td className='button'>
+          <Join
+            isDisabled={!info.bonded.state.isOpen || !info.bonded.memberCounter.ltn(params.maxMembersPerPool)}
+            ownAccounts={ownAccounts}
+            params={params}
+            poolId={poolId}
          />
-        )}
-      </td>
-      <td className='button'>
-        <Join
-          isDisabled={!info.bonded.state.isOpen || !info.bonded.memberCounter.ltn(params.maxMembersPerPool)}
-          ownAccounts={ownAccounts}
-          params={params}
-          poolId={poolId}
-        />
-      </td>
-    </tr>
+          <ExpandButton
+            expanded={isExpanded}
+            onClick={toggleExpanded}
+          />
+        </td>
+      </tr>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+        <td colSpan={4}>
+          <div className='label-column-right'>
+            <div className='label'>{t('root')}</div>
+            <div className='inline-balance'><AddressMini value={info.bonded.roles.root} /></div>
+          </div>
+          <div className='label-column-right'>
+            <div className='label'>{t('creator')}</div>
+            <div className='inline-balance'><AddressMini value={info.bonded.roles.depositor} /></div>
+          </div>
+          <div className='label-column-right'>
+            <div className='label'>{t('nominator')}</div>
+            <div className='inline-balance'><AddressMini value={info.bonded.roles.nominator} /></div>
+          </div>
+          <div className='label-column-right'>
+            <div className='label'>{t('toggler')}</div>
+            <div className='inline-balance'><AddressMini value={info.bonded.roles.stateToggler} /></div>
+          </div>
+        </td>
+        <td className='number media--1100' />
+        <td colSpan={2}>
+          <div className='label-column-right'>
+            <div className='label'>{t('stash')}</div>
+            <div className='inline-balance'><AddressMini value={info.stashId} /></div>
+          </div>
+          <div className='label-column-right'>
+            <div className='label'>{t('rewards')}</div>
+            <div className='inline-balance'><AddressMini value={info.rewardId} /></div>
+          </div>
+        </td>
+      </tr>
+    </>
  );
 }

-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;
+  }
+`);
--- 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<string>('No available nomination pools')}
        emptySpinner={t<string>('Retrieving nomination pools')}
        header={header}
+        withCollapsibleRows
      >
        {membersMap && filtered && filtered.map((poolId) => (
          <Pool
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@ -128,11 +128,19 @@ export default React.memo(styled(Table)`

    &.withCollapsibleRows tbody tr {
      background-color: unset;
+
      &:nth-child(4n - 2),
      &:nth-child(4n - 3) {
        background-color: var(--bg-table);
      }
    }
+
+    &:not(.withCollapsibleRows) tbody tr {
+      &.isOdd,
+      &:nth-child(odd):not(.isEven) {
+        background: var(--bg-table);
+      }
+    }
  }

  tbody {
@ -180,6 +188,9 @@ export default React.memo(styled(Table)`
      }

      &.button {
+        align-items: center;
+        display: flex;
+        justify-content: flex-end;
        padding: 0.25rem 0.5rem;
        text-align: right;
        white-space: nowrap;
@ -291,11 +302,6 @@ export default React.memo(styled(Table)`
    }

    tr {
-      &.isOdd,
-      &:nth-child(odd):not(.isEven) {
-        background: var(--bg-table);
-      }
-
      &:first-child {
        td {
          border-top: 0.25rem solid var(--bg-page);
@ -333,6 +339,14 @@ export default React.memo(styled(Table)`
        padding-bottom: 0 !important;
      }

+      &.isCollapsed {
+        visibility: collapse;
+      }
+
+      &.isExpanded {
+        visibility: visible;
+      }
+
      .ui--Button-Group {
        margin: 0;
      }