Add better balance formatting rules for balances and usd values
This commit is contained in:
Brandon Millman
parent
300c9f09b9
commit
bc7e8ff471
@ -38,6 +38,7 @@
|
||||
"lodash": "^4.17.4",
|
||||
"material-ui": "^0.17.1",
|
||||
"moment": "2.21.0",
|
||||
"numeral": "^2.0.6",
|
||||
"polished": "^1.9.2",
|
||||
"query-string": "^6.0.0",
|
||||
"react": "15.6.1",
|
||||
@ -71,6 +72,7 @@
|
||||
"@types/lodash": "4.14.104",
|
||||
"@types/material-ui": "0.18.0",
|
||||
"@types/node": "^8.0.53",
|
||||
"@types/numeral": "^0.0.22",
|
||||
"@types/query-string": "^5.1.0",
|
||||
"@types/react": "16.3.13",
|
||||
"@types/react-copy-to-clipboard": "^4.2.0",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
|
||||
import { BigNumber, errorUtils } from '@0xproject/utils';
|
||||
import { Web3Wrapper } from '@0xproject/web3-wrapper';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
|
||||
@ -83,7 +82,6 @@ const ICON_DIMENSION = 28;
|
||||
const BODY_ITEM_KEY = 'BODY';
|
||||
const HEADER_ITEM_KEY = 'HEADER';
|
||||
const ETHER_ITEM_KEY = 'ETHER';
|
||||
const USD_DECIMAL_PLACES = 2;
|
||||
const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
|
||||
const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
|
||||
const PLACEHOLDER_COLOR = colors.grey300;
|
||||
@ -411,19 +409,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
|
||||
price?: BigNumber,
|
||||
isLoading: boolean = false,
|
||||
): React.ReactNode {
|
||||
let result;
|
||||
if (!isLoading) {
|
||||
if (_.isUndefined(price)) {
|
||||
result = '--';
|
||||
} else {
|
||||
const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
|
||||
const value = unitAmount.mul(price);
|
||||
const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
|
||||
result = `$${formattedAmount}`;
|
||||
}
|
||||
} else {
|
||||
result = '$0.00';
|
||||
}
|
||||
const result = !isLoading
|
||||
? _.isUndefined(price)
|
||||
? '--'
|
||||
: utils.getUsdValueFormattedAmount(amount, decimals, price)
|
||||
: '$0.00';
|
||||
return (
|
||||
<PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
|
||||
<Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">
|
||||
|
||||
@ -6,7 +6,7 @@ export const constants = {
|
||||
ETHER_TOKEN_SYMBOL: 'WETH',
|
||||
ZRX_TOKEN_SYMBOL: 'ZRX',
|
||||
ETHER_SYMBOL: 'ETH',
|
||||
TOKEN_AMOUNT_DISPLAY_PRECISION: 5,
|
||||
TOKEN_AMOUNT_DISPLAY_PRECISION: 4,
|
||||
GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
|
||||
1: 4145578,
|
||||
42: 3117574,
|
||||
@ -38,6 +38,7 @@ export const constants = {
|
||||
UNAVAILABLE_STATUS: 503,
|
||||
TAKER_FEE: new BigNumber(0),
|
||||
TESTNET_NAME: 'Kovan',
|
||||
NUMERAL_USD_FORMAT: '$0,0.00',
|
||||
PROJECT_URL_ETHFINEX: 'https://www.ethfinex.com/',
|
||||
PROJECT_URL_AMADEUS: 'http://amadeusrelay.org',
|
||||
PROJECT_URL_DDEX: 'https://ddex.io',
|
||||
|
||||
@ -8,6 +8,8 @@ import * as bowser from 'bowser';
|
||||
import deepEqual = require('deep-equal');
|
||||
import * as _ from 'lodash';
|
||||
import * as moment from 'moment';
|
||||
import * as numeral from 'numeral';
|
||||
|
||||
import {
|
||||
AccountState,
|
||||
BlockchainCallErrs,
|
||||
@ -380,10 +382,20 @@ export const utils = {
|
||||
},
|
||||
getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string {
|
||||
const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
|
||||
const precision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
|
||||
const formattedAmount = unitAmount.toFixed(precision);
|
||||
// if the unit amount is less than 1, show the natural number of decimal places with a max of 4
|
||||
// if the unit amount is greater than or equal to 1, show only 2 decimal places
|
||||
const precision = unitAmount.lt(1)
|
||||
? Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces())
|
||||
: 2;
|
||||
const format = `0,0.${_.repeat('0', precision)}`;
|
||||
const formattedAmount = numeral(unitAmount).format(format);
|
||||
return `${formattedAmount} ${symbol}`;
|
||||
},
|
||||
getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string {
|
||||
const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
|
||||
const value = unitAmount.mul(price);
|
||||
return numeral(value).format(constants.NUMERAL_USD_FORMAT);
|
||||
},
|
||||
openUrl(url: string): void {
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
|
||||
@ -350,6 +350,10 @@
|
||||
version "8.10.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.8.tgz#794cba23cc9f8d9715f6543fa8827433b5f5cd3b"
|
||||
|
||||
"@types/numeral@^0.0.22":
|
||||
version "0.0.22"
|
||||
resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.22.tgz#86bef1f0a2d743afdc2ef3168d45f2905e1a0b93"
|
||||
|
||||
"@types/opn@^5.1.0":
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/opn/-/opn-5.1.0.tgz#bff7bc371677f4bdbb37884400e03fd81f743927"
|
||||
@ -8119,6 +8123,10 @@ number-to-bn@1.7.0:
|
||||
bn.js "4.11.6"
|
||||
strip-hex-prefix "1.0.0"
|
||||
|
||||
numeral@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
|
||||
|
||||
nyc@^11.0.1:
|
||||
version "11.7.1"
|
||||
resolved "https://registry.yarnpkg.com/nyc/-/nyc-11.7.1.tgz#7cb0a422e501b88ff2c1634341dec2560299d67b"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user