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

Show asset supply & add responsive columns (#5125)

Browse Source 
* Show asset supply & add responsive columns

* Drop decimals column

* Allow decimals & symbol override
This commit is contained in:
Jaco 2021-04-23 10:48:32 +03:00 committed by GitHub
parent 5a8acb5eff
commit 732b3ca673
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/page-assets/src/Overview/Asset.tsx
View File

@ -3,9 +3,10 @@
import type { AssetInfo } from './types';
import React from 'react';
import React, { useMemo } from 'react';
import { AddressSmall } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
interface Props {
@ -14,17 +15,27 @@ interface Props {
}
function Asset ({ className, value: { details, id, metadata } }: Props): React.ReactElement<Props> {
const format = useMemo(
() => metadata && [metadata.decimals.toNumber(), metadata.symbol.toUtf8()],
[metadata]
);
return (
<tr className={className}>
<td className='number'><h1>{formatNumber(id)}</h1></td>
<td className='together'>{metadata?.name.toUtf8()}</td>
<td className='address'>{details && <AddressSmall value={details.owner} />}</td>
<td className='address'>{details && <AddressSmall value={details.admin} />}</td>
<td className='address'>{details && <AddressSmall value={details.issuer} />}</td>
<td className='address'>{details && <AddressSmall value={details.freezer} />}</td>
<td className='number all'>{formatNumber(metadata?.decimals)}</td>
<td className='upper'>{metadata?.symbol.toUtf8()}</td>
<td className='button' />
<td className='address media--1000'>{details && <AddressSmall value={details.owner} />}</td>
<td className='address media--1200'>{details && <AddressSmall value={details.admin} />}</td>
<td className='address media--1300'>{details && <AddressSmall value={details.issuer} />}</td>
<td className='address media--1400'>{details && <AddressSmall value={details.freezer} />}</td>
<td className='number all'>{details && format && (
<FormatBalance
format={format}
value={details.supply}
/>
)}</td>
{/* <td className='number'>{formatNumber(metadata?.decimals)}</td> */}
{/* <td className='upper'>{metadata?.symbol.toUtf8()}</td> */}
</tr>
);
}

12
packages/page-assets/src/Overview/Assets.tsx
View File

@ -22,13 +22,11 @@ function Assets ({ assetIds, className }: Props): React.ReactElement<Props> {
const headerRef = useRef([
[t('assets'), 'start', 2],
[t('owner'), 'address'],
[t('admin'), 'address'],
[t('issuer'), 'address'],
[t('freezer'), 'address'],
[t('decimals')],
[t('symbol'), 'start'],
[]
[t('owner'), 'address media--1000'],
[t('admin'), 'address media--1200'],
[t('issuer'), 'address media--1300'],
[t('freezer'), 'address media--1400'],
[t('supply')]
]);
return (

6
packages/react-components/src/InputBalance.tsx
View File

@ -30,6 +30,8 @@ interface Props {
onEnter?: () => void;
onEscape?: () => void;
placeholder?: string;
siDecimals?: number;
siSymbol?: string;
value?: BN;
withEllipsis?: boolean;
withLabel?: boolean;
@ -68,7 +70,7 @@ function reformat (value: string | BN, isDisabled?: boolean): string {
return formatBalance(value, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '');
}
function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
const defaultValue = useMemo(
() => inDefault ? reformat(inDefault, isDisabled) : undefined,
[inDefault, isDisabled]
@ -94,6 +96,8 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe
onEnter={onEnter}
onEscape={onEscape}
placeholder={placeholder}
siDecimals={siDecimals}
siSymbol={siSymbol}
value={value}
withEllipsis={withEllipsis}
withLabel={withLabel}

19
packages/react-components/src/InputNumber.tsx
View File

@ -6,7 +6,7 @@ import type { SiDef } from '@polkadot/util/types';
import type { BitLength } from './types';
import BN from 'bn.js';
import React, { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import { useApi } from '@polkadot/react-hooks';
@ -39,6 +39,8 @@ interface Props {
onEnter?: () => void;
onEscape?: () => void;
placeholder?: string;
siDecimals?: number;
siSymbol?: string;
value?: BN | null;
withEllipsis?: boolean;
withLabel?: boolean;
@ -69,10 +71,10 @@ function getRegex (isDecimal: boolean): RegExp {
);
}
function getSiOptions (): { text: string; value: string }[] {
return formatBalance.getOptions().map(({ power, text, value }): { text: string; value: string } => ({
function getSiOptions (symbol: string, decimals?: number): { text: string; value: string }[] {
return formatBalance.getOptions(decimals).map(({ power, text, value }): { text: string; value: string } => ({
text: power === 0
? TokenUnit.abbr
? symbol
: text,
value
}));
@ -166,7 +168,7 @@ function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | n
: getValuesFromString(api, value, si, bitLength, isZeroable, maxValue);
}
function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, value: propsValue }: Props): React.ReactElement<Props> {
function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value: propsValue }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const [si, setSi] = useState<SiDef | null>(isSi ? formatBalance.findSi('-') : null);
@ -175,6 +177,11 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
getValues(api, propsValue || defaultValue, si, bitLength, isZeroable, maxValue)
);
const siOptions = useMemo(
() => getSiOptions(siSymbol || TokenUnit.abbr, siDecimals),
[siDecimals, siSymbol]
);
useEffect((): void => {
onChange && onChange(isValid ? valueBn : undefined);
}, [isValid, onChange, valueBn]);
@ -279,7 +286,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
dropdownClassName='ui--SiDropdown'
isButton
onChange={_onSelectSiUnit}
options={getSiOptions()}
options={siOptions}
/>
)}
{children}

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

@ -16,6 +16,7 @@ import { useTranslation } from './translate';
interface Props {
children?: React.ReactNode;
className?: string;
format?: [number, string];
formatIndex?: number;
isShort?: boolean;
label?: React.ReactNode;
@ -44,7 +45,7 @@ function getFormat (registry: Registry, formatIndex = 0): [number, string] {
];
}
function formatDisplay (prefix: string, postfix: string, unit: string, label = '', isShort = false): React.ReactNode {
function createElement (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}</>;
}
@ -52,10 +53,10 @@ function splitFormat (value: string, label?: string, isShort?: boolean): React.R
const [prefix, postfixFull] = value.split('.');
const [postfix, unit] = postfixFull.split(' ');
return formatDisplay(prefix, postfix, unit, label, isShort);
return createElement(prefix, postfix, unit, label, isShort);
}
function format (value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
function applyFormat (value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
const unitPost = withCurrency ? token : '';
@ -68,16 +69,16 @@ function format (value: Compact<any> | BN | string, [decimals, token]: [number,
return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span><span className='ui--FormatBalance-unit'>{unit}{unit ? unitPost : ` ${unitPost}`}</span>{labelPost || ''}</>;
}
return formatDisplay(prefix, postfix, unitPost, labelPost, isShort);
return createElement(prefix, postfix, unitPost, labelPost, isShort);
}
function FormatBalance ({ children, className = '', formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
function FormatBalance ({ children, className = '', format, formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const formatInfo = useMemo(
() => getFormat(api.registry, formatIndex),
[api, formatIndex]
() => format || getFormat(api.registry, formatIndex),
[api, format, formatIndex]
);
// labelPost here looks messy, however we ensure we have one less text node
@ -89,7 +90,7 @@ function FormatBalance ({ children, className = '', formatIndex, isShort, label,
: value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, formatInfo, withCurrency, withSi, isShort, labelPost)
: applyFormat(value, formatInfo, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
}</span>{children}
</div>
@ -114,6 +115,7 @@ export default React.memo(styled(FormatBalance)`
.ui--FormatBalance-unit {
font-size: 0.825em;
text-transform: uppercase;
}
.ui--FormatBalance-value {