Skip to content

Commit

Permalink
Fix balance format (#182) (#183)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yashirooooo
yashirooooo committed Jun 16, 2021
1 parent b9aad2e commit 9075527
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 97 deletions.
59 changes: 11 additions & 48 deletions packages/react-query/src/FormatCru18.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,22 @@
// SPDX-License-Identifier: Apache-2.0

import type { Compact } from '@polkadot/types';
import type { Registry } from '@polkadot/types/types';

import BN from 'bn.js';
import React, { useMemo } from 'react';
import React from 'react';
import styled from 'styled-components';

import { useApi } from '@polkadot/react-hooks';
import { formatBalance } from '@polkadot/util';

import { useTranslation } from './translate';

interface Props {
children?: React.ReactNode;
className?: string;
formatIndex?: number;
isShort?: boolean;
label?: React.ReactNode;
labelPost?: string;
value?: Compact<any> | BN | string | null | 'all';
valueFormatted?: string;
withCurrency?: boolean;
withSi?: boolean;
}
Expand All @@ -30,67 +26,34 @@ interface Props {
const M_LENGTH = 6 + 1;
const K_LENGTH = 3 + 1;

function getFormat (registry: Registry, formatIndex = 0): [number, string] {
const decimals = registry.chainDecimals;
const tokens = registry.chainTokens;

return [
formatIndex < decimals.length
? decimals[formatIndex]
: decimals[0],
formatIndex < tokens.length
? tokens[formatIndex]
: tokens[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, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
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);
const unitPost = 'CRU18';

if (prefix.length > M_LENGTH) {
const [major, rest] = formatBalance(value, { decimals, withUnit: false }).split('.');
const [major, rest] = formatBalance(value, { withUnit: false }).split('.');
const minor = rest.substr(0, 4);
const unit = rest.substr(4);

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 <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unitPost}</span>{labelPost || ''}</>;
}

function FormatCru18 ({ children, className = '', formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
function FormatCru18 ({ children, className = '', isShort, label, labelPost, value, withCurrency, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();

const formatInfo = useMemo(
() => getFormat(api.registry, formatIndex),
[api, formatIndex]
);

// 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'>{
valueFormatted
? splitFormat(valueFormatted, labelPost, isShort)
: value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, formatInfo, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
}</span>{children}
</div>
);
Expand Down
61 changes: 12 additions & 49 deletions packages/react-query/src/FormatCsmBalance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,22 @@
// SPDX-License-Identifier: Apache-2.0

import type { Compact } from '@polkadot/types';
import type { Registry } from '@polkadot/types/types';

import BN from 'bn.js';
import React, { useMemo } from 'react';
import React from 'react';
import styled from 'styled-components';

import { useApi } from '@polkadot/react-hooks';
import { formatBalance } from '@polkadot/util';

import { useTranslation } from './translate';

interface Props {
children?: React.ReactNode;
className?: string;
formatIndex?: number;
isShort?: boolean;
label?: React.ReactNode;
labelPost?: string;
value?: Compact<any> | BN | string | null | 'all';
valueFormatted?: string;
withCurrency?: boolean;
withSi?: boolean;
}
Expand All @@ -30,67 +26,34 @@ interface Props {
const M_LENGTH = 6 + 1;
const K_LENGTH = 3 + 1;

function getFormat (registry: Registry, formatIndex = 0): [number, string] {
const decimals = registry.chainDecimals;
const tokens = registry.chainTokens;

return [
formatIndex < decimals.length
? decimals[formatIndex]
: decimals[0],
formatIndex < tokens.length
? tokens[formatIndex]
: tokens[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, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
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);
const unitPost = 'CSM';

if (prefix.length > M_LENGTH) {
const [major, rest] = formatBalance(value, { decimals, withUnit: false }).split('.');
const [major, rest] = formatBalance(value, { withUnit: false }).split('.');
const minor = rest.substr(0, 4);
const unit = 'CSM';
const unit = rest.substr(4);

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 <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unitPost}</span>{labelPost || ''}</>;
}

function FormatCsmBalance ({ children, className = '', formatIndex, isShort, label, labelPost, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
function FormatCsmBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();

const formatInfo = useMemo(
() => getFormat(api.registry, formatIndex),
[api, formatIndex]
);

// 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'>{
valueFormatted
? splitFormat(valueFormatted, labelPost, isShort)
: value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, formatInfo, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
value
? value === 'all'
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, withCurrency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
}</span>{children}
</div>
);
Expand Down

0 comments on commit 9075527

Please sign in to comment.