LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(governance,utils,react-helpers): token locale formatting issue (#4678)

Browse Source
This commit is contained in:
Sam Keen 2023-09-04 12:09:38 +01:00 committed by GitHub
parent 66f25603d3
commit b5ba4f99d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/governance/src/components/wallet-card/wallet-card.tsx
View File

@ -54,7 +54,7 @@ export const WalletCardRow = ({
}) => { }) => {
const ref = React.useRef<HTMLDivElement | null>(null); const ref = React.useRef<HTMLDivElement | null>(null);
useAnimateValue(ref, value); useAnimateValue(ref, value);
const [integers, decimalsPlaces] = useNumberParts(value, decimals); const [integers, decimalsPlaces, separator] = useNumberParts(value, decimals);
return ( return (
<div <div
@ -75,7 +75,10 @@ export const WalletCardRow = ({
className="font-mono flex-1 text-right" className="font-mono flex-1 text-right"
data-testid="associated-amount" data-testid="associated-amount"
> >
<span>{integers}.</span> <span>
{integers}
{separator}
</span>
<span>{decimalsPlaces}</span> <span>{decimalsPlaces}</span>
</span> </span>
)} )}
@ -110,7 +113,10 @@ export const WalletCardAsset = ({
border, border,
subheading, subheading,
}: WalletCardAssetProps) => { }: WalletCardAssetProps) => {
const [integers, decimalsPlaces] = useNumberParts(balance, decimals); const [integers, decimalsPlaces, separator] = useNumberParts(
balance,
decimals
);
return ( return (
<div className="flex flex-nowrap mt-2 mb-4"> <div className="flex flex-nowrap mt-2 mb-4">
@ -132,7 +138,10 @@ export const WalletCardAsset = ({
</div> </div>
</div> </div>
<div className="px-2 basis-full font-mono" data-testid="currency-value"> <div className="px-2 basis-full font-mono" data-testid="currency-value">
<span>{integers}.</span> <span>
{integers}
{separator}
</span>
<span className="text-neutral-400">{decimalsPlaces}</span> <span className="text-neutral-400">{decimalsPlaces}</span>
</div> </div>
</div> </div>

2
libs/react-helpers/src/hooks/use-number-parts.ts
View File

@ -5,6 +5,6 @@ import { toNumberParts } from '@vegaprotocol/utils';
export const useNumberParts = ( export const useNumberParts = (
value: BigNumber | null | undefined, value: BigNumber | null | undefined,
decimals: number decimals: number
): [integers: string, decimalPlaces: string] => { ): [integers: string, decimalPlaces: string, separator: string | undefined] => {
return useMemo(() => toNumberParts(value, decimals), [decimals, value]); return useMemo(() => toNumberParts(value, decimals), [decimals, value]);
}; };

16
libs/utils/src/lib/format/number.spec.ts
View File

@ -86,17 +86,17 @@ describe('number utils', () => {
describe('toNumberParts', () => { describe('toNumberParts', () => {
it.each([ it.each([
{ v: null, d: 3, o: ['0', '000'] }, { v: null, d: 3, o: ['0', '000', '.'] },
{ v: undefined, d: 3, o: ['0', '000'] }, { v: undefined, d: 3, o: ['0', '000', '.'] },
{ v: new BigNumber(123), d: 3, o: ['123', '00'] }, { v: new BigNumber(123), d: 3, o: ['123', '00', '.'] },
{ v: new BigNumber(123.123), d: 3, o: ['123', '123'] }, { v: new BigNumber(123.123), d: 3, o: ['123', '123', '.'] },
{ v: new BigNumber(123.123), d: 6, o: ['123', '123'] }, { v: new BigNumber(123.123), d: 6, o: ['123', '123', '.'] },
{ v: new BigNumber(123.123), d: 0, o: ['123', ''] }, { v: new BigNumber(123.123), d: 0, o: ['123', '', '.'] },
{ v: new BigNumber(123), d: undefined, o: ['123', '00'] }, { v: new BigNumber(123), d: undefined, o: ['123', '00', '.'] },
{ {
v: new BigNumber(30000), v: new BigNumber(30000),
d: undefined, d: undefined,
o: ['30,000', '00'], o: ['30,000', '00', '.'],
}, },
])('returns correct tuple given the different arguments', ({ v, d, o }) => { ])('returns correct tuple given the different arguments', ({ v, d, o }) => {
expect(toNumberParts(v, d)).toStrictEqual(o); expect(toNumberParts(v, d)).toStrictEqual(o);

6
libs/utils/src/lib/format/number.ts
View File

@ -165,15 +165,15 @@ export const formatNumberPercentage = (value: BigNumber, decimals?: number) => {
export const toNumberParts = ( export const toNumberParts = (
value: BigNumber | null | undefined, value: BigNumber | null | undefined,
decimals = 18 decimals = 18
): [integers: string, decimalPlaces: string] => { ): [integers: string, decimalPlaces: string, separator: string] => {
if (!value) { if (!value) {
return ['0', '0'.repeat(decimals)]; return ['0', '0'.repeat(decimals), '.'];
} }
const separator = getDecimalSeparator() || '.'; const separator = getDecimalSeparator() || '.';
const [integers, decimalsPlaces] = formatNumber(value, decimals) const [integers, decimalsPlaces] = formatNumber(value, decimals)
.toString() .toString()
.split(separator); .split(separator);
return [integers, decimalsPlaces || '']; return [integers, decimalsPlaces || '', separator];
}; };
export const isNumeric = ( export const isNumeric = (