mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-02-17 21:47:47 +00:00
8fe664c171
* Add definition file for bn.js * Remove types-bn * make isBN a static property * progress commit -- swap out bignumber.js for bn.js * Swap out bignumber for bn in vendor * Change modn to number return * Start to strip out units lib for a string manipulation based lib * Convert codebase to only base units * Get rid of useless component * Handle only wei in values * Use unit conversion in sidebar * Automatically strip hex prefix, and handle decimal edge case * Handle base 16 wei in transactions * Make a render callback component for dealing with unit conversion * Switch contracts to use bn.js, and get transaction values from signedTx instead of state * Get send transaction working with bn.js * Remove redundant hex stripping, return base value of tokens * Cleanup unit file * Re-implement toFixed for strings * Use formatNumber in codebase * Cleanup code * Undo package test changes * Update snapshot and remove console logs * Use TokenValue / Wei more consistently where applicable * Add typing to deterministicWallets, fix confirmation modal, make UnitDisplay more flexible * Clean up prop handling in UnitDisplay * Change instanceof to typeof check, change boolean of displayBalance * Fix tsc errors * Fix token row displaying wrong decimals * Fix deterministic modal token display * Handle hex and non hex strings automatically in BN conversion * Fix handling of strings and numbers for BN * add web3 fixes & comments * Display short balances on deterministic modals * add more tests, fix rounding * Add spacer to balance sidebar network name * Fix tsc error
74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
fromTokenBase,
|
|
getDecimal,
|
|
UnitKey,
|
|
Wei,
|
|
TokenValue
|
|
} from 'libs/units';
|
|
import { formatNumber as format } from 'utils/formatters';
|
|
|
|
interface Props {
|
|
/**
|
|
* @description base value of the token / ether, incase of waiting for API calls, we can return '???'
|
|
* @type {TokenValue | Wei}
|
|
* @memberof Props
|
|
*/
|
|
value?: TokenValue | Wei;
|
|
/**
|
|
* @description Symbol to display to the right of the value, such as 'ETH'
|
|
* @type {string}
|
|
* @memberof Props
|
|
*/
|
|
symbol?: string;
|
|
/**
|
|
* @description display the long balance, if false, trims it to 3 decimal places, if a number is specified then that number is the number of digits to be displayed.
|
|
* @type {boolean}
|
|
* @memberof Props
|
|
*/
|
|
displayShortBalance?: boolean | number;
|
|
}
|
|
|
|
interface EthProps extends Props {
|
|
unit: UnitKey;
|
|
}
|
|
interface TokenProps extends Props {
|
|
decimal: number;
|
|
}
|
|
|
|
const isEthereumUnit = (param: EthProps | TokenProps): param is EthProps =>
|
|
!!(param as EthProps).unit;
|
|
|
|
const UnitDisplay: React.SFC<EthProps | TokenProps> = params => {
|
|
const { value, symbol, displayShortBalance } = params;
|
|
|
|
if (!value) {
|
|
return <span>???</span>;
|
|
}
|
|
|
|
const convertedValue = isEthereumUnit(params)
|
|
? fromTokenBase(value, getDecimal(params.unit))
|
|
: fromTokenBase(value, params.decimal);
|
|
|
|
let formattedValue;
|
|
|
|
if (displayShortBalance) {
|
|
const digits =
|
|
typeof displayShortBalance === 'number' && displayShortBalance;
|
|
formattedValue = digits
|
|
? format(convertedValue, digits)
|
|
: format(convertedValue);
|
|
} else {
|
|
formattedValue = convertedValue;
|
|
}
|
|
|
|
return (
|
|
<span>
|
|
{formattedValue}
|
|
{symbol ? ` ${symbol}` : ''}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default UnitDisplay;
|