diff --git a/packages/ui-api/src/Api.tsx b/packages/ui-api/src/Api.tsx index 4b63e9b472..9c807ded08 100644 --- a/packages/ui-api/src/Api.tsx +++ b/packages/ui-api/src/Api.tsx @@ -88,12 +88,14 @@ export default class ApiWrapper extends React.PureComponent { tokenDecimals: 0, tokenSymbol: undefined }; + const tokenSymbol = properties.get('tokenSymbol') || found.tokenSymbol; console.log('api: found chain', chain, [...properties.entries()]); // first setup the UI helpers - formatBalance.setDefaultDecimals(properties.get('tokenDecimals') || found.tokenDecimals || 0); - InputNumber.setUnit(properties.get('tokenSymbol') || found.tokenSymbol); + formatBalance.setDefaultDecimals(properties.get('tokenDecimals') || found.tokenDecimals); + formatBalance.setDefaultUnits(tokenSymbol); + InputNumber.setUnit(tokenSymbol); // setup keyring (loadAll) only after prefix has been set keyring.setAddressPrefix(properties.get('networkId') || found.networkId as any || 42); diff --git a/packages/ui-app/src/util/formatBalance.spec.ts b/packages/ui-app/src/util/formatBalance.spec.ts index 1b4c22c7e7..2c62f4dd2e 100644 --- a/packages/ui-app/src/util/formatBalance.spec.ts +++ b/packages/ui-app/src/util/formatBalance.spec.ts @@ -12,49 +12,49 @@ describe('formatBalance', () => { it('formats 123,456,789,000 (decimals=15)', () => { expect( formatBalance(TESTVAL, true, 15) - ).toEqual('123.456µ'); + ).toEqual('123.456 µUnit'); }); it('formats 123,456,789,000 (decimals=12)', () => { expect( formatBalance(TESTVAL, true, 12) - ).toEqual('123.456m'); + ).toEqual('123.456 mUnit'); }); it('formats 123,456,789,000 (decimals=12, no SI)', () => { expect( formatBalance(TESTVAL, false, 12) - ).toEqual('123.456'); + ).toEqual('123.456 '); }); it('formats 123,456,789,000 (decimals=9)', () => { expect( formatBalance(TESTVAL, true, 9) - ).toEqual('123.456'); + ).toEqual('123.456 Unit'); }); it('formats 123,456,789,000 (decimals=6)', () => { expect( formatBalance(TESTVAL, true, 6) - ).toEqual('123.456k'); + ).toEqual('123.456 kUnit'); }); it('formats 123,456,789,000 * 10 (decimals=12)', () => { expect( formatBalance(TESTVAL.muln(10), true, 12) - ).toEqual('1.234'); + ).toEqual('1.234 Unit'); }); it('formats 123,456,789,000 * 100 (decimals=12)', () => { expect( formatBalance(TESTVAL.muln(100), true, 12) - ).toEqual('12.345'); + ).toEqual('12.345 Unit'); }); it('formats 123,456,789,000 * 1000 (decimals=12)', () => { expect( formatBalance(TESTVAL.muln(1000), true, 12) - ).toEqual('123.456'); + ).toEqual('123.456 Unit'); }); describe('findSi', () => { @@ -67,7 +67,7 @@ describe('formatBalance', () => { it('returns default on not found', () => { expect( formatBalance.findSi('blah') - ).toEqual({ power: 0, value: '-', text: '----' }); + ).toEqual({ power: 0, value: '-', text: 'Unit' }); }); }); @@ -77,7 +77,7 @@ describe('formatBalance', () => { expect( formatBalance(TESTVAL) - ).toEqual('123.456µ'); + ).toEqual('123.456 µUnit'); }); }); }); diff --git a/packages/ui-app/src/util/formatBalance.ts b/packages/ui-app/src/util/formatBalance.ts index b2bc7d48f1..c448853966 100644 --- a/packages/ui-app/src/util/formatBalance.ts +++ b/packages/ui-app/src/util/formatBalance.ts @@ -18,6 +18,7 @@ interface BalanceFormatter { getDefaultDecimals (): number; getOptions (decimals?: number): Array; setDefaultDecimals (decimals: number): void; + setDefaultUnits (unit: string): void; } const SI: Array = [ @@ -29,7 +30,7 @@ const SI: Array = [ { power: -9, value: 'n', text: 'nano' }, { power: -6, value: 'µ', text: 'micro' }, { power: -3, value: 'm', text: 'milli' }, - { power: 0, value: '-', text: '----' }, // position 8 + { power: 0, value: '-', text: 'Unit' }, // position 8 { power: 3, value: 'k', text: 'Kilo' }, { power: 6, value: 'M', text: 'Mega' }, { power: 9, value: 'G', text: 'Giga' }, @@ -63,8 +64,15 @@ function _formatBalance (input?: number | string | BN, withSi: boolean = true, d const mid = text.length - (decimals + si.power); const prefix = text.substr(0, mid); const postfix = `${text.substr(mid)}000`.substr(0, 3); + const units = withSi + ? ( + si.value === '-' + ? si.text + : `${si.value}${SI[SI_MID].text}` + ) + : ''; - return `${formatDecimal(prefix || '0')}.${postfix}${withSi ? (si.value === '-' ? '' : si.value) : ''}`; + return `${formatDecimal(prefix || '0')}.${postfix} ${units}`; } const formatBalance = _formatBalance as BalanceFormatter; @@ -92,4 +100,9 @@ formatBalance.setDefaultDecimals = (decimals: number = 0): void => { defaultDecimals = decimals; }; +// Sets the default decimals to use for formatting (chain-wide) +formatBalance.setDefaultUnits = (unit: string = 'Unit'): void => { + SI[SI_MID].text = unit; +}; + export default formatBalance;