HenryNguyen5 8fe664c171 Replace bignumber.js with bn.js (#319)
* 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
2017-11-12 11:45:52 -08:00

75 lines
2.4 KiB
TypeScript

import React from 'react';
import translate, { translateRaw } from 'translations';
import UnitDropdown from './UnitDropdown';
import { Wei } from 'libs/units';
import { UnitConverter } from 'components/renderCbs';
interface Props {
decimal: number;
unit: string;
tokens: string[];
balance: number | null | Wei;
isReadOnly: boolean;
onAmountChange(value: string, unit: string): void;
onUnitChange(unit: string): void;
}
export default class AmountField extends React.Component {
public props: Props;
get active() {
return !this.props.isReadOnly;
}
public render() {
const { unit, balance, decimal, isReadOnly } = this.props;
return (
<div className="row form-group">
<div className="col-xs-11">
<label>{translate('SEND_amount')}</label>
<div className="input-group">
<UnitConverter decimal={decimal} onChange={this.callWithBaseUnit}>
{({ onUserInput, convertedUnit }) => (
<input
className={`form-control ${isFinite(Number(convertedUnit)) &&
Number(convertedUnit) > 0
? 'is-valid'
: 'is-invalid'}`}
type="text"
placeholder={translateRaw('SEND_amount_short')}
value={convertedUnit}
disabled={isReadOnly}
onChange={onUserInput}
/>
)}
</UnitConverter>
<UnitDropdown
value={unit}
options={['ether'].concat(this.props.tokens)}
onChange={isReadOnly ? void 0 : this.onUnitChange}
/>
</div>
{!isReadOnly &&
balance && (
<span className="help-block">
<a onClick={this.onSendEverything}>
<span className="strong">
{translate('SEND_TransferTotal')}
</span>
</a>
</span>
)}
</div>
</div>
);
}
public onUnitChange = (unit: string) =>
this.active && this.props.onUnitChange(unit); // thsi needs to be converted unit
public callWithBaseUnit = ({ currentTarget: { value } }) =>
this.active && this.props.onAmountChange(value, this.props.unit);
public onSendEverything = () =>
this.active && this.props.onAmountChange('everything', this.props.unit);
}