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

Display parachain issuance (#4399)

Browse Source
This commit is contained in:
Jaco Greeff 2021-01-13 19:49:34 +01:00 committed by GitHub
parent 6db079136f
commit 68a90cbc76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/page-parachains/src/Overview/Parachain.tsx
View File

@ -3,13 +3,13 @@
import type { LinkOption } from '@polkadot/apps-config/settings/types';
import type { Option } from '@polkadot/types';
import type { BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
import type { Balance, BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React, { useMemo } from 'react';
import { useApi, useCall, useParaApi } from '@polkadot/react-hooks';
import { BlockToTime } from '@polkadot/react-query';
import { BlockToTime, FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
import { sliceHex } from './util';
@ -50,7 +50,7 @@ function Parachain ({ bestNumberFinalized, className = '', id }: Props): React.R
const headHex = useCall<string | null>(api.query.paras.heads, [id], transformHead);
const watermark = useCall<BlockNumber | null>(api.query.hrmp?.hrmpWatermarks, [id], transformMark);
const paraBest = useCall<BlockNumber>(paraApi?.derive.chain.bestNumber);
// const endpoints = useParaEndpoints(id);
const paraIssu = useCall<Balance>(paraApi?.query.balances?.totalIssuance);
const blockDelay = useMemo(
() => watermark && bestNumberFinalized && bestNumberFinalized.sub(watermark),
@ -68,8 +68,9 @@ function Parachain ({ bestNumberFinalized, className = '', id }: Props): React.R
<td className='together'>{chainLink}</td>
<td className='all start together hash'>{headHex}</td>
<td className='number'>{blockDelay && <BlockToTime blocks={blockDelay} />}</td>
<td className='number'>{formatNumber(watermark)}</td>
<td className='number'>{watermark && formatNumber(watermark)}</td>
<td className='number'>{paraBest && formatNumber(paraBest)}</td>
<td className='number'>{paraIssu && <FormatBalance valueFormatted={paraIssu.toHuman()} />}</td>
</tr>
);
}

3
packages/page-parachains/src/Overview/ParachainList.tsx
View File

@ -25,7 +25,8 @@ function ParachainList ({ ids }: Props): React.ReactElement<Props> {
[t('parachains'), 'start', 2],
[t('heads'), 'start'],
[t('watermark'), 'undefined', 2],
[t('chain best')]
[t('chain best')],
[t('issuance')]
]);
return (

28
packages/react-query/src/FormatBalance.tsx
View File

@ -19,6 +19,7 @@ interface Props {
label?: React.ReactNode;
labelPost?: string;
value?: Compact<any> | BN | string | null | 'all';
valueFormatted?: string;
withCurrency?: boolean;
withSi?: boolean;
}
@ -27,6 +28,17 @@ interface Props {
const M_LENGTH = 6 + 1;
const K_LENGTH = 3 + 1;
function formatDisplay (prefix: string, postfix: string, unit: string, label = '', isShort = false): React.ReactNode {
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unit}</span>{label}</>;
}
function splitFormat (value: string, label?: string, isShort?: boolean): React.ReactNode {
const [prefix, postfixFull] = value.split('.');
const [postfix, unit] = postfixFull.split(' ');
return formatDisplay(prefix, postfix, unit, label, isShort);
}
function format (value: Compact<any> | BN | string, withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
@ -40,21 +52,23 @@ function format (value: Compact<any> | BN | string, withCurrency = true, withSi?
return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span><span className='ui--FormatBalance-unit'>{unit}{unit ? unitPost : ` ${unitPost}`}</span>{labelPost || ''}</>;
}
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unitPost}</span>{labelPost || ''}</>;
return formatDisplay(prefix, postfix, unitPost, labelPost, isShort);
}
function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency, withSi }: Props): React.ReactElement<Props> {
function FormatBalance ({ children, className = '', isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
// labelPost here looks messy, however we ensure we have one less text node
return (
<div className={`ui--FormatBalance ${className}`}>
{label ? <>{label}&nbsp;</> : ''}<span className='ui--FormatBalance-value'>{
value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
valueFormatted
? splitFormat(valueFormatted, labelPost, isShort)
: value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
}</span>{children}
</div>
);