crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1206 from 0xProject/fix/instant/decimal-fields-scaling-amount-input-bn

Browse Source 
[instant] Fix decimal input issues on instant
This commit is contained in:
Steve Klebanoff
2018-11-02 15:45:58 -07:00
committed by GitHub
parent 18fef7ade4 f5c7a3c26a
commit d0f20a4fd5
9 changed files with 85 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/instant/src/components/erc20_asset_amount_input.tsx
View File

@@ -1,10 +1,10 @@
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption, transparentWhite } from '../style/theme';
import { ERC20Asset } from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { util } from '../util/util';
import { ScalingAmountInput } from './scaling_amount_input';
@@ -13,8 +13,8 @@ import { Container, Flex, Icon, Text } from './ui';
// Asset amounts only apply to ERC20 assets
export interface ERC20AssetAmountInputProps {
asset?: ERC20Asset;
value?: BigNumberInput;
onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
value?: BigNumber;
onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
onSelectAssetClick?: (asset?: ERC20Asset) => void;
startingFontSizePx: number;
fontColor?: ColorOption;
@@ -54,7 +54,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
{...rest}
textLengthThreshold={this._textLengthThresholdForAsset(asset)}
maxFontSizePx={this.props.startingFontSizePx}
onChange={this._handleChange}
onAmountChange={this._handleChange}
onFontSizeChange={this._handleFontSizeChange}
/>
</Container>
@@ -102,7 +102,7 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
</Container>
);
};
private readonly _handleChange = (value?: BigNumberInput): void => {
private readonly _handleChange = (value?: BigNumber): void => {
this.props.onChange(value, this.props.asset);
};
private readonly _handleFontSizeChange = (fontSizePx: number): void => {

64
packages/instant/src/components/scaling_amount_input.tsx
View File

@@ -1,8 +1,11 @@
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { Maybe } from '../types';
import { ColorOption } from '../style/theme';
import { BigNumberInput } from '../util/big_number_input';
import { maybeBigNumberUtil } from '../util/maybe_big_number';
import { util } from '../util/util';
import { ScalingInput } from './scaling_input';
@@ -12,19 +15,44 @@ export interface ScalingAmountInputProps {
maxFontSizePx: number;
textLengthThreshold: number;
fontColor?: ColorOption;
value?: BigNumberInput;
onChange: (value?: BigNumberInput) => void;
value?: BigNumber;
onAmountChange: (value?: BigNumber) => void;
onFontSizeChange: (fontSizePx: number) => void;
}
interface ScalingAmountInputState {
stringValue: string;
}
export class ScalingAmountInput extends React.Component<ScalingAmountInputProps> {
const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil;
export class ScalingAmountInput extends React.Component<ScalingAmountInputProps, ScalingAmountInputState> {
public static defaultProps = {
onChange: util.boundNoop,
onAmountChange: util.boundNoop,
onFontSizeChange: util.boundNoop,
isDisabled: false,
};
public constructor(props: ScalingAmountInputProps) {
super(props);
this.state = {
stringValue: _.isUndefined(props.value) ? '' : props.value.toString(),
};
}
public componentDidUpdate(): void {
const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue);
const currentValue = this.props.value;
if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) {
// we somehow got into the state in which the value passed in and the string value
// in state have differed, reset state
// we dont expect to ever get into this state, but let's make sure
// we reset if we do since we're dealing with important numbers
this.setState({
stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(),
});
}
}
public render(): React.ReactNode {
const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props;
const { textLengthThreshold, fontColor, maxFontSizePx, onFontSizeChange } = this.props;
return (
<ScalingInput
maxFontSizePx={maxFontSizePx}
@@ -32,7 +60,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
onFontSizeChange={onFontSizeChange}
fontColor={fontColor}
onChange={this._handleChange}
value={!_.isUndefined(value) ? value.toDisplayString() : ''}
value={this.state.stringValue}
placeholder="0.00"
emptyInputWidthCh={3.5}
isDisabled={this.props.isDisabled}
@@ -40,16 +68,16 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
);
}
private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
const value = event.target.value;
let bigNumberValue;
if (!_.isEmpty(value)) {
try {
bigNumberValue = new BigNumberInput(value);
} catch {
// We don't want to allow values that can't be a BigNumber, so don't even call onChange.
return;
}
}
this.props.onChange(bigNumberValue);
const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "."
this.setState({
stringValue: sanitizedValue,
});
// Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty
const bigNumberValue: Maybe<BigNumber> = _.isEmpty(sanitizedValue)
? undefined
: stringToMaybeBigNumber(sanitizedValue);
this.props.onAmountChange(bigNumberValue);
};
}

4
packages/instant/src/components/zero_ex_instant_provider.tsx
View File

@@ -1,5 +1,6 @@
import { AssetBuyer } from '@0x/asset-buyer';
import { ObjectMap, SignedOrder } from '@0x/types';
import { BigNumber } from '@0x/utils';
import { Web3Wrapper } from '@0x/web3-wrapper';
import { Provider } from 'ethereum-types';
import * as _ from 'lodash';
@@ -14,7 +15,6 @@ import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
import { AffiliateInfo, AssetMetaData, Network } from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { errorFlasher } from '../util/error_flasher';
import { gasPriceEstimator } from '../util/gas_price_estimator';
import { getInjectedProvider } from '../util/injected_provider';
@@ -68,7 +68,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
? state.selectedAssetAmount
: new BigNumberInput(props.defaultAssetBuyAmount),
: new BigNumber(props.defaultAssetBuyAmount),
assetMetaDataMap: completeAssetMetaDataMap,
affiliateInfo: props.affiliateInfo,
};

9
packages/instant/src/containers/selected_erc20_asset_amount_input.ts
View File

@@ -14,7 +14,6 @@ import { State } from '../redux/reducer';
import { ColorOption } from '../style/theme';
import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { errorFlasher } from '../util/error_flasher';
export interface SelectedERC20AssetAmountInputProps {
@@ -25,7 +24,7 @@ export interface SelectedERC20AssetAmountInputProps {
interface ConnectedState {
assetBuyer?: AssetBuyer;
value?: BigNumberInput;
value?: BigNumber;
asset?: ERC20Asset;
isDisabled: boolean;
affiliateInfo?: AffiliateInfo;
@@ -34,16 +33,16 @@ interface ConnectedState {
interface ConnectedDispatch {
updateBuyQuote: (
assetBuyer?: AssetBuyer,
value?: BigNumberInput,
value?: BigNumber,
asset?: ERC20Asset,
affiliateInfo?: AffiliateInfo,
) => void;
}
interface ConnectedProps {
value?: BigNumberInput;
value?: BigNumber;
asset?: ERC20Asset;
onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void;
onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
isDisabled: boolean;
}

5
packages/instant/src/redux/actions.ts
View File

@@ -2,8 +2,6 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import { BigNumberInput } from '../util/big_number_input';
import { ActionsUnion } from '../types';
export interface PlainAction<T extends string> {
@@ -42,8 +40,7 @@ export enum ActionTypes {
export const actions = {
updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
updateSelectedAssetAmount: (amount?: BigNumberInput) =>
createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>

3
packages/instant/src/redux/reducer.ts
View File

@@ -16,7 +16,6 @@ import {
OrderState,
} from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { Action, ActionTypes } from './actions';
@@ -25,7 +24,7 @@ export interface State {
assetBuyer?: AssetBuyer;
assetMetaDataMap: ObjectMap<AssetMetaData>;
selectedAsset?: Asset;
selectedAssetAmount?: BigNumberInput;
selectedAssetAmount?: BigNumber;
buyOrderState: OrderState;
ethUsdPrice?: BigNumber;
latestBuyQuote?: BuyQuote;

1
packages/instant/src/types.ts
View File

@@ -1,6 +1,7 @@
import { AssetProxyId, ObjectMap } from '@0x/types';
// Reusable
export type Maybe<T> = T | undefined;
export enum AsyncProcessState {
NONE = 'None',
PENDING = 'Pending',

34
packages/instant/src/util/big_number_input.ts
View File

@@ -1,34 +0,0 @@
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
/**
* A BigNumber extension that is more flexible about decimal strings.
* Such as allowing:
* new BigNumberInput('0.') => 0
* new BigNumberInput('1.') => 1
* new BigNumberInput('1..') => still throws
*/
export class BigNumberInput extends BigNumber {
private readonly _isEndingWithDecimal: boolean;
constructor(numberOrString: string | number) {
if (_.isString(numberOrString)) {
const hasDecimalPeriod = _.endsWith(numberOrString, '.');
let internalString = numberOrString;
if (hasDecimalPeriod) {
internalString = numberOrString.slice(0, -1);
}
super(internalString);
this._isEndingWithDecimal = hasDecimalPeriod;
} else {
super(numberOrString);
this._isEndingWithDecimal = false;
}
}
public toDisplayString(): string {
const internalString = super.toString();
if (this._isEndingWithDecimal) {
return `${internalString}.`;
}
return internalString;
}
}

25
packages/instant/src/util/maybe_big_number.ts Normal file
View File

@@ -0,0 +1,25 @@
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import { Maybe } from '../types';
export const maybeBigNumberUtil = {
// converts a string to a Maybe<BigNumber>
// if string is a NaN, considered undefined
stringToMaybeBigNumber: (stringValue: string): Maybe<BigNumber> => {
let validBigNumber: BigNumber;
try {
validBigNumber = new BigNumber(stringValue);
} catch {
return undefined;
}
return validBigNumber.isNaN() ? undefined : validBigNumber;
},
areMaybeBigNumbersEqual: (val1: Maybe<BigNumber>, val2: Maybe<BigNumber>): boolean => {
if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
return val1.equals(val2);
}
return _.isUndefined(val1) && _.isUndefined(val2);
},
};