aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx10
-rw-r--r--packages/instant/src/components/scaling_amount_input.tsx61
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx4
-rw-r--r--packages/instant/src/containers/selected_erc20_asset_amount_input.ts9
-rw-r--r--packages/instant/src/redux/actions.ts7
-rw-r--r--packages/instant/src/redux/reducer.ts3
-rw-r--r--packages/instant/src/types.ts2
-rw-r--r--packages/instant/src/util/big_number_input.ts34
-rw-r--r--packages/instant/src/util/maybe_big_number.ts25
9 files changed, 85 insertions, 70 deletions
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b1fec6405..6fb8f60f0 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -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 => {
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index cfbf3b7cc..ff74ccb4d 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -1,8 +1,10 @@
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { BigNumberInput } from '../util/big_number_input';
+import { MaybeBigNumber } from '../types';
+import { maybeBigNumberUtil } from '../util/maybe_big_number';
import { util } from '../util/util';
import { ScalingInput } from './scaling_input';
@@ -12,17 +14,42 @@ 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(prevProps: ScalingAmountInputProps): 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;
return (
@@ -32,7 +59,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 +67,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: MaybeBigNumber = _.isEmpty(sanitizedValue)
+ ? undefined
+ : stringToMaybeBigNumber(sanitizedValue);
+
+ this.props.onAmountChange(bigNumberValue);
};
}
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index fce03a280..a09ab68dc 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,5 +1,6 @@
import { AssetBuyer } from '@0x/asset-buyer';
import { ObjectMap, SignedOrder } from '@0x/types';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { Provider } from 'react-redux';
@@ -11,7 +12,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 { getProvider } from '../util/provider';
@@ -65,7 +65,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,
};
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index fcbd0efe3..12bc7040e 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -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;
}
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index 885f09c7c..16bda0208 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,9 +2,7 @@ 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';
+import { ActionsUnion, OrderState } from '../types';
export interface PlainAction<T extends string> {
type: T;
@@ -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) =>
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index d1537b49b..1b4fdabbc 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -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;
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 82dc77d2e..739556801 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,6 +1,8 @@
import { AssetProxyId, ObjectMap } from '@0x/types';
+import { BigNumber } from '@0x/utils';
// Reusable
+export type MaybeBigNumber = BigNumber | undefined;
export enum AsyncProcessState {
NONE = 'None',
PENDING = 'Pending',
diff --git a/packages/instant/src/util/big_number_input.ts b/packages/instant/src/util/big_number_input.ts
deleted file mode 100644
index 370d91a0a..000000000
--- a/packages/instant/src/util/big_number_input.ts
+++ /dev/null
@@ -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;
- }
-}
diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts
new file mode 100644
index 000000000..113ba552f
--- /dev/null
+++ b/packages/instant/src/util/maybe_big_number.ts
@@ -0,0 +1,25 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { MaybeBigNumber } from '../types';
+
+export const maybeBigNumberUtil = {
+ // converts a string to a MaybeBigNumber
+ // if string is a NaN, considered undefined
+ stringToMaybeBigNumber: (stringValue: string): MaybeBigNumber => {
+ let validBigNumber: BigNumber;
+ try {
+ validBigNumber = new BigNumber(stringValue);
+ } catch {
+ return undefined;
+ }
+
+ return validBigNumber.isNaN() ? undefined : validBigNumber;
+ },
+ areMaybeBigNumbersEqual: (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => {
+ if (!_.isUndefined(val1) && !_.isUndefined(val2)) {
+ return val1.equals(val2);
+ }
+ return _.isUndefined(val1) && _.isUndefined(val2);
+ },
+};
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-29 19:53:59 +0800