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

Align validator expansion with UI (#8712)

Browse Source
This commit is contained in:
Jaco 2023-01-06 16:51:40 +02:00 committed by GitHub
parent 02bbaf8d74
commit d987bbadae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 105 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
packages/page-staking/src/Validators/Address/index.tsx
View File

@ -11,12 +11,13 @@ import type { NominatorValue } from './types';
import React, { useMemo } from 'react';
import { ApiPromise } from '@polkadot/api';
import { AddressSmall, Icon, LinkExternal, Table } from '@polkadot/react-components';
import { AddressSmall, Columar, Icon, LinkExternal, Table } from '@polkadot/react-components';
import { checkVisibility } from '@polkadot/react-components/util';
import { useApi, useCall, useDeriveAccountInfo } from '@polkadot/react-hooks';
import { useApi, useCall, useDeriveAccountInfo, useToggle } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
import { BN_ZERO } from '@polkadot/util';
import { useTranslation } from '../../translate';
import NominatedBy from './NominatedBy';
import StakeOther from './StakeOther';
import Status from './Status';
@ -90,7 +91,9 @@ function useAddressCalls (api: ApiPromise, address: string, isMain?: boolean) {
}
function Address ({ address, className = '', filterName, hasQueries, isElected, isFavorite, isMain, isPara, lastBlock, minCommission, nominatedBy, points, recentlyOnline, toggleFavorite, validatorInfo, withIdentity }: Props): React.ReactElement<Props> | null {
const { t } = useTranslation();
const { api } = useApi();
const [isExpanded, toggleIsExpanded] = useToggle(false);
const { accountInfo, slashingSpans } = useAddressCalls(api, address, isMain);
const { commission, isChilled, nominators, stakeOther, stakeOwn } = useMemo(
@ -115,78 +118,111 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
}
return (
<tr className={className}>
<Table.Column.Favorite
address={address}
isFavorite={isFavorite}
toggle={toggleFavorite}
/>
<td className='badge together'>
<Status
isChilled={isChilled}
isElected={isElected}
isMain={isMain}
isPara={isPara}
isRelay={!!(api.query.parasShared || api.query.shared)?.activeValidatorIndices}
nominators={isMain ? nominators : nominatedBy}
onlineCount={recentlyOnline?.blockCount}
onlineMessage={recentlyOnline?.hasMessage}
<>
<tr className={`${className} ${isExpanded ? 'packedBottom' : ''}`}>
<Table.Column.Favorite
address={address}
isFavorite={isFavorite}
toggle={toggleFavorite}
/>
</td>
<td className='address'>
<AddressSmall value={address} />
</td>
{isMain
? (
<StakeOther
nominators={nominators}
stakeOther={stakeOther}
<td className='badge together'>
<Status
isChilled={isChilled}
isElected={isElected}
isMain={isMain}
isPara={isPara}
isRelay={!!(api.query.parasShared || api.query.shared)?.activeValidatorIndices}
nominators={isMain ? nominators : nominatedBy}
onlineCount={recentlyOnline?.blockCount}
onlineMessage={recentlyOnline?.hasMessage}
/>
)
: (
<NominatedBy
nominators={nominatedBy}
slashingSpans={slashingSpans}
/>
)
}
{isMain && (
<td className='number media--1100'>
{stakeOwn?.gtn(0) && (
<FormatBalance value={stakeOwn} />
)}
</td>
)}
<td className='number'>
{commission}
</td>
{isMain && (
<>
<td className='number'>
{points}
</td>
<td className='number'>
{lastBlock}
</td>
</>
)}
<td>
{hasQueries && (
<a href={statsLink}>
<Icon
className='highlight--color'
icon='chart-line'
<td className='address all'>
<AddressSmall value={address} />
</td>
{isMain
? (
<StakeOther
nominators={nominators}
stakeOther={stakeOther}
/>
</a>
)
: (
<NominatedBy
nominators={nominatedBy}
slashingSpans={slashingSpans}
/>
)
}
<td className='number'>
{commission}
</td>
{isMain && (
<>
<td className='number'>
{points}
</td>
<td className='number'>
{lastBlock}
</td>
</>
)}
</td>
<td className='links media--1200'>
<LinkExternal
data={address}
type={isMain ? 'validator' : 'intention'}
<Table.Column.Expand
isExpanded={isExpanded}
toggle={toggleIsExpanded}
/>
</td>
</tr>
</tr>
{isExpanded && (
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<td colSpan={2} />
<td
className='columar'
colSpan={
isMain
? 5
: 3
}
>
<Columar size='small'>
<Columar.Column>
{isMain && stakeOwn?.gtn(0) && (
<>
<h5>{t<string>('own stake')}</h5>
<FormatBalance
value={stakeOwn}
/>
</>
)}
</Columar.Column>
<Columar.Column>
{hasQueries && (
<>
<h5>{t<string>('graphs')}</h5>
<a href={statsLink}>
<Icon
className='highlight--color'
icon='chart-line'
/>
&nbsp;{t<string>('historic results')}
</a>
</>
)}
</Columar.Column>
</Columar>
<Columar is100>
<Columar.Column>
<LinkExternal
data={address}
type='validator' // {isMain ? 'validator' : 'intention'}
withTitle
/>
</Columar.Column>
</Columar>
</td>
<td />
</tr>
)}
</>
);
}

5
packages/page-staking/src/Validators/CurrentList.tsx
View File

@ -144,18 +144,15 @@ function CurrentList ({ className, favorites, hasQueries, isIntentions, isOwn, m
[t('intentions'), 'start', 3],
[t('nominators'), 'expand'],
[t('commission'), 'number'],
[],
[]
]
: [
[t('validators'), 'start', 3],
[t('other stake'), 'expand'],
[t('own stake'), 'media--1100'],
[t('commission')],
[t('points')],
[t('last #')],
[],
[undefined, 'media--1200']
[]
]
);