neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve poll loading experience (#7522)

Browse Source
This commit is contained in:
Jaco 2022-05-04 14:15:05 +02:00 committed by GitHub
parent 341c13aed7
commit ba5b3c45a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
packages/page-staking/src/Pools/Pool.tsx
View File

@ -7,7 +7,7 @@ import type { MembersMapEntry, Params } from './types';
import React, { useCallback } from 'react';
import styled from 'styled-components';
import { AddressMini, ExpandButton, ExpanderScroll } from '@polkadot/react-components';
import { AddressMini, ExpandButton, ExpanderScroll, Spinner } from '@polkadot/react-components';
import { useToggle } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
@ -24,7 +24,7 @@ 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> {
const { t } = useTranslation();
const info = usePoolInfo(poolId);
const [isExpanded, toggleExpanded] = useToggle(false);
@ -42,18 +42,14 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
[members]
);
if (!info) {
return null;
}
return (
<>
<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='start'>{info && info.metadata}</td>
<td className='number'>{info && info.bonded.state.type}</td>
<td className='number'>{info && <FormatBalance value={info.bonded.points} />}</td>
<td className='number media--1100'>{info && !info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
<td className='number'>
{members && members.length !== 0 && (
<ExpanderScroll
@ -64,49 +60,58 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
)}
</td>
<td className='button'>
<Join
isDisabled={!info.bonded.state.isOpen || (!!params.maxMembersPerPool && !info.bonded.memberCounter.ltn(params.maxMembersPerPool))}
ownAccounts={ownAccounts}
params={params}
poolId={poolId}
/>
<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>
{info
? (
<>
<Join
isDisabled={!info.bonded.state.isOpen || (!!params.maxMembersPerPool && !info.bonded.memberCounter.ltn(params.maxMembersPerPool))}
ownAccounts={ownAccounts}
params={params}
poolId={poolId}
/>
<ExpandButton
expanded={isExpanded}
onClick={toggleExpanded}
/>
</>
)
: <Spinner noLabel />
}
</td>
</tr>
{info && (
<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>
)}
</>
);
}

2
packages/page-staking/src/Pools/Pools.tsx
View File

@ -75,7 +75,7 @@ function Pools ({ className, ids, ownPools, params }: Props): React.ReactElement
</Button.Group>
<Table
className={className}
empty={filtered && t<string>('No available nomination pools')}
empty={membersMap && filtered && t<string>('No available nomination pools')}
emptySpinner={t<string>('Retrieving nomination pools')}
header={header}
withCollapsibleRows