Skip to content

Commit

Permalink
feat: Update formatter to handle negative numbers and withSign option (…
Browse files Browse the repository at this point in the history 
…#131)
  • Loading branch information
@cgero-eth
cgero-eth authored Mar 27, 2024
1 parent a7cceee commit 1af7dba
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 111 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- Implement `StatePingAnimation` core component
- Implement `addressUtils` and `ensUtils` module utilities
- Implement `useDebouncedValue` core hook and `clipboardUtils` core utility
- Support `withSign` option on formatter

### Changed

Expand All @@ -26,6 +27,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

- Library build process to avoid bundling dependencies and peer-dependencies when using subfolders import (e.g.
`wagmi/chains`)
- Formatter utility to support negative numbers

## [1.0.20] - 2024-03-13

Expand Down
16 changes: 8 additions & 8 deletions src/core/utils/formatterUtils/formatterUtils.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Generic quantities represent anything countable, such as members, proposals, vot
**Examples**:

<FormatExampleTable
values={[0, 123, 1234, 1234567, 1234567890, 1234567890123, 1234567890123456]}
values={[-1234, 0, 123, 1234, 1234567, 1234567890, 1234567890123, 1234567890123456]}
formatShort={NumberFormat.GENERIC_SHORT}
formatLong={NumberFormat.GENERIC_LONG}
/>
Expand All @@ -67,8 +67,8 @@ Fiat totals represent any summed monetary value, such as treasury amounts or fia

<FormatExampleTable
values={[
0, 0.0012345678, 0.012345678, 0.12345678, 123.45678, 1234.56789, 1234567.89012, 1234567890.12345,
1234567890123.45678, 1234567890123456.78901,
-1234.56789, -0.012345678, -0.0012345678, 0, 0.0012345678, 0.012345678, 0.12345678, 123.45678, 1234.56789,
1234567.89012, 1234567890.12345, 1234567890123.45678, 1234567890123456.78901,
]}
formatShort={NumberFormat.FIAT_TOTAL_SHORT}
formatLong={NumberFormat.FIAT_TOTAL_LONG}
Expand All @@ -82,8 +82,8 @@ Token amounts represent whole or fractional amounts of tokens, such as withdrawa

<FormatExampleTable
values={[
0, 0.0012, 0.0123456789012345678, 0.12345678901234567, 123.4567, 1234, 1234.5678, 1234567.8901, 1234567890.1234,
1234567890123.4567, 1234567890123456.789,
-1234.5678, -0.0123456789012345678, -0.0012, 0, 0.0012, 0.0123456789012345678, 0.12345678901234567, 123.4567,
1234, 1234.5678, 1234567.8901, 1234567890.1234, 1234567890123.4567, 1234567890123456.789,
]}
formatShort={NumberFormat.TOKEN_AMOUNT_SHORT}
formatLong={NumberFormat.TOKEN_AMOUNT_LONG}
Expand All @@ -98,8 +98,8 @@ the same.

<FormatExampleTable
values={[
0, 0.0012345678, 0.012345678, 0.12345678, 123.45678, 1234.56789, 1234567.89012, 1234567890.12345,
1234567890123.45678, 1234567890123456.78901,
-1234.56789, -0.0012345678, 0, 0.0012345678, 0.012345678, 0.12345678, 123.45678, 1234.56789, 1234567.89012,
1234567890.12345, 1234567890123.45678, 1234567890123456.78901,
]}
formatShort={NumberFormat.TOKEN_PRICE}
formatLong={NumberFormat.TOKEN_PRICE}
Expand All @@ -113,7 +113,7 @@ of the total supply.
**Examples**:

<FormatExampleTable
values={[0, 0.00012345, 0.0012345, 0.012345, 0.12345, 0.510001, 0.9985, 0.999001, 1]}
values={[-1, -0.999001, -0.00012345, 0, 0.00012345, 0.0012345, 0.012345, 0.12345, 0.510001, 0.9985, 0.999001, 1]}
formatShort={NumberFormat.PERCENTAGE_SHORT}
formatLong={NumberFormat.PERCENTAGE_LONG}
/>
99 changes: 77 additions & 22 deletions src/core/utils/formatterUtils/formatterUtils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,82 +8,116 @@ describe('formatter utils', () => {
describe('number formatting', () => {
describe('generic amounts', () => {
test.each([
{ value: -1234, result: '-1,234' },
{ value: -123, result: '-123' },
{ value: 0, result: '0' },
{ value: 123, result: '123' },
{ value: 123, result: '+123', withSign: true },
{ value: 1234, result: '1,234' },
{ value: 1234, result: '+1,234', withSign: true },
{ value: 1234567, result: '1,234,567' },
{ value: 1234567890, result: '1,234,567,890' },
{ value: 1234567890123, result: '1,234,567,890,123' },
{ value: 1234567890123456, result: '1,234,567,890,123,456' },
])('correctly apply the long generic formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.GENERIC_LONG })).toEqual(result);
])('formats $value as $result using long format', ({ value, result, ...options }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.GENERIC_LONG, ...options })).toEqual(
result,
);
});

test.each([
{ value: -1234, result: '-1.23K' },
{ value: -123, result: '-123' },
{ value: 0, result: '0' },
{ value: 123, result: '123' },
{ value: 123, result: '+123', withSign: true },
{ value: 1234, result: '1.23K' },
{ value: 1234, result: '+1.23K', withSign: true },
{ value: 1234567, result: '1.23M' },
{ value: 1234567890, result: '1.23B' },
{ value: 1234567890123, result: '1.23T' },
{ value: 1234567890123456, result: '1.23 x 10^15' },
])('correctly apply the short generic formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.GENERIC_SHORT })).toEqual(result);
])('formats $value as $result using short format', ({ value, result, ...options }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.GENERIC_SHORT, ...options })).toEqual(
result,
);
});
});

describe('fiat total amounts', () => {
test.each([
{ value: -1234.56789, result: '-$1,234.57' },
{ value: -0.012345678, result: '-$0.01' },
{ value: -0.0012345678, result: '-$0.001' },
{ value: 0, result: '$0.00' },
{ value: 0.0012345678, result: '<$0.01' },
{ value: 0.0012345678, result: '$0.001' },
{ value: 0.0012345678, result: '+$0.001', withSign: true },
{ value: 0.012345678, result: '$0.01' },
{ value: 0.012345678, result: '+$0.01', withSign: true },
{ value: 0.12345678, result: '$0.12' },
{ value: 123.45678, result: '$123.46' },
{ value: 1234.56789, result: '$1,234.57' },
{ value: 1234.56789, result: '+$1,234.57', withSign: true },
{ value: 1234567.89012, result: '$1,234,567.89' },
{ value: 1234567890.12345, result: '$1,234,567,890.12' },
{ value: 1234567890123.45678, result: '$1,234,567,890,123.46' },
{ value: 1234567890123456.78901, result: '$1,234,567,890,123,456.80' },
])('correctly apply the long fiat-total formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.FIAT_TOTAL_LONG })).toEqual(result);
])('formats $value as $result using long format', ({ value, result, ...options }) => {
expect(
formatterUtils.formatNumber(value, { format: NumberFormat.FIAT_TOTAL_LONG, ...options }),
).toEqual(result);
});

test.each([
{ value: -1234.56789, result: '-$1.23K' },
{ value: -0.0012345678, result: '-$0.001' },
{ value: 0, result: '$0.00' },
{ value: 0.0012345678, result: '<$0.01' },
{ value: 0.0012345678, result: '$0.001' },
{ value: 0.0012345678, result: '+$0.001', withSign: true },
{ value: 0.012345678, result: '$0.01' },
{ value: 0.12345678, result: '$0.12' },
{ value: 123.45678, result: '$123.46' },
{ value: 1234.56789, result: '$1.23K' },
{ value: 1234.56789, result: '+$1.23K', withSign: true },
{ value: 1234567.89012, result: '$1.23M' },
{ value: 1234567890.12345, result: '$1.23B' },
{ value: 1234567890123.45678, result: '$1.23T' },
{ value: 1234567890123456.78901, result: '$1.23 x 10^15' },
])('correctly apply the short fiat-total formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.FIAT_TOTAL_SHORT })).toEqual(result);
])('formats $value as $result using short format', ({ value, result, ...options }) => {
expect(
formatterUtils.formatNumber(value, { format: NumberFormat.FIAT_TOTAL_SHORT, ...options }),
).toEqual(result);
});
});

describe('token amounts', () => {
test.each([
{ value: -1234.5678, result: '-1,234.5678' },
{ value: -0.0123456789012345678, result: '-0.012345678901234568' },
{ value: 0, result: '0' },
{ value: 0.0012, result: '0.0012' },
{ value: 0.0012, result: '+0.0012', withSign: true },
{ value: 0.0123456789012345678, result: '0.012345678901234568' },
{ value: 0.12345678901234567, result: '0.12345678901234566' },
{ value: 123.4567, result: '123.4567' },
{ value: 1234, result: '1,234' },
{ value: 1234, result: '+1,234', withSign: true },
{ value: 1234.5678, result: '1,234.5678' },
{ value: 1234567.8901, result: '1,234,567.8901' },
{ value: 1234567890.1234, result: '1,234,567,890.1234' },
{ value: 1234567890123.4567, result: '1,234,567,890,123.4568' },
{ value: 1234567890123456.789, result: '1,234,567,890,123,456.8' },
])('correctly apply the long token formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.TOKEN_AMOUNT_LONG })).toEqual(result);
])('formats $value as $result using long format', ({ value, result, ...options }) => {
expect(
formatterUtils.formatNumber(value, { format: NumberFormat.TOKEN_AMOUNT_LONG, ...options }),
).toEqual(result);
});

test.each([
{ value: -1234, result: '-1.23K' },
{ value: -0.0012, result: '-0.001' },
{ value: 0, result: '0' },
{ value: 0.0012, result: '<0.01' },
{ value: 0.0012, result: '0.001' },
{ value: 0.0123456789012345678, result: '0.01' },
{ value: 0.12345678901234567, result: '0.12' },
{ value: 123.4567, result: '123.46' },
Expand All @@ -93,55 +127,76 @@ describe('formatter utils', () => {
{ value: 1234567890.1234, result: '1.23B' },
{ value: 1234567890123.4567, result: '1.23T' },
{ value: 1234567890123456.789, result: '1.23 x 10^15' },
])('correctly apply the short token formatting for value $value', ({ value, result }) => {
])('formats $value as $result using short format', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.TOKEN_AMOUNT_SHORT })).toEqual(result);
});
});

describe('token prices', () => {
test.each([
{ value: -1234.56789, result: '-$1,234.57' },
{ value: -0.0012345678, result: '-$0.001235' },
{ value: 0, result: 'Unknown' },
{ value: 0.0012345678, result: '$0.001235' },
{ value: 0.0012345678, result: '+$0.001235', withSign: true },
{ value: 0.012345678, result: '$0.01235' },
{ value: 0.12345678, result: '$0.1235' },
{ value: 123.45678, result: '$123.46' },
{ value: 1234.56789, result: '$1,234.57' },
{ value: 1234.56789, result: '+$1,234.57', withSign: true },
{ value: 1234567.89012, result: '$1,234,567.89' },
{ value: 1234567890.12345, result: '$1,234,567,890.12' },
{ value: 1234567890123.45678, result: '$1,234,567,890,123.46' },
{ value: 1234567890123456.78901, result: '$1,234,567,890,123,456.80' },
])('correctly apply the token-price formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.TOKEN_PRICE })).toEqual(result);
])('formats $value as $result using token format', ({ value, result, ...options }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.TOKEN_PRICE, ...options })).toEqual(
result,
);
});
});

describe('percentages', () => {
test.each([
{ value: -1, result: '-100.00%' },
{ value: -0.999001, result: '-99.90%' },
{ value: -0.00012345, result: '-0.01%' },
{ value: 0, result: '0.00%' },
{ value: 0, result: '0.00%', withSign: true },
{ value: 0.00012345, result: '0.01%' },
{ value: 0.0012345, result: '0.12%' },
{ value: 0.012345, result: '1.23%' },
{ value: 0.12345, result: '12.35%' },
{ value: 0.12345, result: '+12.35%', withSign: true },
{ value: 0.510001, result: '51.00%' },
{ value: 0.9985, result: '99.85%' },
{ value: 0.999001, result: '99.90%' },
{ value: 1, result: '100.00%' },
])('correctly apply the long percentage formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.PERCENTAGE_LONG })).toEqual(result);
])('formats $value as $result using long format', ({ value, result, ...options }) => {
expect(
formatterUtils.formatNumber(value, { format: NumberFormat.PERCENTAGE_LONG, ...options }),
).toEqual(result);
});

test.each([
{ value: -0.999001, result: '-99.9%' },
{ value: -0.12345, result: '-12.3%' },
{ value: -0.00012345, result: '-0.01%' },
{ value: 0, result: '0%' },
{ value: 0.00012345, result: '<0.1%' },
{ value: 0.00012345, result: '0.01%' },
{ value: 0.00012345, result: '+0.01%', withSign: true },
{ value: 0.0012345, result: '0.1%' },
{ value: 0.012345, result: '1.2%' },
{ value: 0.12345, result: '12.3%' },
{ value: 0.12345, result: '+12.3%', withSign: true },
{ value: 0.510001, result: '51%' },
{ value: 0.9985, result: '99.9%' },
{ value: 0.999001, result: '>99.9%' },
{ value: 0.999001, result: '99.9%' },
{ value: 0.999001, result: '+99.9%', withSign: true },
{ value: 1, result: '100%' },
])('correctly apply the short percentage formatting for value $value', ({ value, result }) => {
expect(formatterUtils.formatNumber(value, { format: NumberFormat.PERCENTAGE_SHORT })).toEqual(result);
])('formats $value as $result using short format', ({ value, result, ...options }) => {
expect(
formatterUtils.formatNumber(value, { format: NumberFormat.PERCENTAGE_SHORT, ...options }),
).toEqual(result);
});
});
});
Expand Down
Loading

0 comments on commit 1af7dba

Please sign in to comment.