From a2e1bf0e6287e86c226b0801311f6f4498c893ed Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 1 Nov 2018 16:32:14 -0700 Subject: Getting rid of BigNumberInput in favor of BigNumber --- packages/instant/src/components/erc20_asset_amount_input.tsx | 8 ++++---- packages/instant/src/components/scaling_amount_input.tsx | 10 +++++----- packages/instant/src/components/zero_ex_instant_provider.tsx | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index b1fec6405..a67d7d5db 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; @@ -102,7 +102,7 @@ export class ERC20AssetAmountInput extends React.Component ); }; - 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..4b046e8da 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -1,8 +1,8 @@ +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 { util } from '../util/util'; import { ScalingInput } from './scaling_input'; @@ -12,8 +12,8 @@ export interface ScalingAmountInputProps { maxFontSizePx: number; textLengthThreshold: number; fontColor?: ColorOption; - value?: BigNumberInput; - onChange: (value?: BigNumberInput) => void; + value?: BigNumber; + onChange: (value?: BigNumber) => void; onFontSizeChange: (fontSizePx: number) => void; } @@ -32,7 +32,7 @@ export class ScalingAmountInput extends React.Component onFontSizeChange={onFontSizeChange} fontColor={fontColor} onChange={this._handleChange} - value={!_.isUndefined(value) ? value.toDisplayString() : ''} + value={!_.isUndefined(value) ? value.toString() : ''} placeholder="0.00" emptyInputWidthCh={3.5} isDisabled={this.props.isDisabled} @@ -44,7 +44,7 @@ export class ScalingAmountInput extends React.Component let bigNumberValue; if (!_.isEmpty(value)) { try { - bigNumberValue = new BigNumberInput(value); + bigNumberValue = new BigNumber(value); } catch { // We don't want to allow values that can't be a BigNumber, so don't even call onChange. return; diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 8c1025723..9391c03f7 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 { 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'; @@ -64,7 +64,7 @@ export class ZeroExInstantProvider extends React.Component Date: Thu, 1 Nov 2018 17:29:59 -0700 Subject: Have ScalingAmountInput trigger onChange with MaybeBigNumber and keep string value as state --- .../src/components/scaling_amount_input.tsx | 64 ++++++++++++++++++---- 1 file changed, 52 insertions(+), 12 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 4b046e8da..5d06c5242 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -3,6 +3,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; +import { MaybeBigNumber } from '../types'; import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; @@ -16,13 +17,52 @@ export interface ScalingAmountInputProps { onChange: (value?: BigNumber) => void; onFontSizeChange: (fontSizePx: number) => void; } +interface ScalingAmountInputState { + stringValue: string; +} + +const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => { + let maybeBigNumber: MaybeBigNumber; + try { + maybeBigNumber = new BigNumber(stringValue); + } catch { + maybeBigNumber = undefined; + } + return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber; +}; -export class ScalingAmountInput extends React.Component { +const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => { + if (!_.isUndefined(val1) && !_.isUndefined(val2)) { + return val1.equals(val2); + } + return _.isUndefined(val1) && _.isUndefined(val2); +}; + +export class ScalingAmountInput extends React.Component { public static defaultProps = { onChange: 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 + this.setState({ + stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(), + }); + } + } + public render(): React.ReactNode { const { textLengthThreshold, fontColor, maxFontSizePx, value, onFontSizeChange } = this.props; return ( @@ -32,7 +72,7 @@ export class ScalingAmountInput extends React.Component onFontSizeChange={onFontSizeChange} fontColor={fontColor} onChange={this._handleChange} - value={!_.isUndefined(value) ? value.toString() : ''} + value={this.state.stringValue} placeholder="0.00" emptyInputWidthCh={3.5} isDisabled={this.props.isDisabled} @@ -40,16 +80,16 @@ export class ScalingAmountInput extends React.Component ); } private readonly _handleChange = (event: React.ChangeEvent): void => { - const value = event.target.value; - let bigNumberValue; - if (!_.isEmpty(value)) { - try { - bigNumberValue = new BigNumber(value); - } catch { - // We don't want to allow values that can't be a BigNumber, so don't even call onChange. - return; - } - } + const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "." + this.setState({ + stringValue: sanitizedValue, + }); + + // Trigger onChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty + const bigNumberValue: MaybeBigNumber = _.isEmpty(sanitizedValue) + ? undefined + : stringToMaybeBigNumber(sanitizedValue); + this.props.onChange(bigNumberValue); }; } -- cgit From 620f439816b8c62edb5f0e2e140647176b8702c8 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 2 Nov 2018 13:22:10 -0700 Subject: Move MaybeBigNumber functions into helper --- .../instant/src/components/scaling_amount_input.tsx | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index 5d06c5242..a30c64b3a 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { MaybeBigNumber } from '../types'; +import { maybeBigNumberUtil } from '../util/maybe_big_number'; import { util } from '../util/util'; import { ScalingInput } from './scaling_input'; @@ -21,23 +22,7 @@ interface ScalingAmountInputState { stringValue: string; } -const stringToMaybeBigNumber = (stringValue: string): MaybeBigNumber => { - let maybeBigNumber: MaybeBigNumber; - try { - maybeBigNumber = new BigNumber(stringValue); - } catch { - maybeBigNumber = undefined; - } - return _.isNaN(maybeBigNumber) ? undefined : maybeBigNumber; -}; - -const areMaybeBigNumbersEqual = (val1: MaybeBigNumber, val2: MaybeBigNumber): boolean => { - if (!_.isUndefined(val1) && !_.isUndefined(val2)) { - return val1.equals(val2); - } - return _.isUndefined(val1) && _.isUndefined(val2); -}; - +const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil; export class ScalingAmountInput extends React.Component { public static defaultProps = { onChange: util.boundNoop, @@ -57,6 +42,8 @@ export class ScalingAmountInput extends React.Component Date: Fri, 2 Nov 2018 13:25:59 -0700 Subject: onChange -> onAmountChange --- packages/instant/src/components/erc20_asset_amount_input.tsx | 2 +- packages/instant/src/components/scaling_amount_input.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index a67d7d5db..6fb8f60f0 100644 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ b/packages/instant/src/components/erc20_asset_amount_input.tsx @@ -54,7 +54,7 @@ export class ERC20AssetAmountInput extends React.Component diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index a30c64b3a..ff74ccb4d 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -15,7 +15,7 @@ export interface ScalingAmountInputProps { textLengthThreshold: number; fontColor?: ColorOption; value?: BigNumber; - onChange: (value?: BigNumber) => void; + onAmountChange: (value?: BigNumber) => void; onFontSizeChange: (fontSizePx: number) => void; } interface ScalingAmountInputState { @@ -25,7 +25,7 @@ interface ScalingAmountInputState { const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil; export class ScalingAmountInput extends React.Component { public static defaultProps = { - onChange: util.boundNoop, + onAmountChange: util.boundNoop, onFontSizeChange: util.boundNoop, isDisabled: false, }; @@ -72,11 +72,11 @@ export class ScalingAmountInput extends React.Component Date: Fri, 2 Nov 2018 13:30:34 -0700 Subject: linting --- packages/instant/src/components/scaling_amount_input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index ff74ccb4d..ca8ccbe31 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -51,7 +51,7 @@ export class ScalingAmountInput extends React.Component Date: Fri, 2 Nov 2018 13:48:31 -0700 Subject: feat(instant): pass in provider through props, fallback to injected provider --- packages/instant/src/components/buy_button.tsx | 5 ++-- .../src/components/zero_ex_instant_provider.tsx | 30 ++++++++++++++-------- 2 files changed, 22 insertions(+), 13 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 12ac62601..9d9a8540c 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -1,4 +1,5 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { oc } from 'ts-optchain'; @@ -10,7 +11,6 @@ import { getBestAddress } from '../util/address'; import { balanceUtil } from '../util/balance'; import { gasPriceEstimator } from '../util/gas_price_estimator'; import { util } from '../util/util'; -import { web3Wrapper } from '../util/web3_wrapper'; import { Button, Text } from './ui'; @@ -50,7 +50,8 @@ export class BuyButton extends React.Component { } this.props.onValidationPending(buyQuote); - const takerAddress = await getBestAddress(); + const web3Wrapper = new Web3Wrapper(assetBuyer.provider); + const takerAddress = await getBestAddress(web3Wrapper); const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper); if (!hasSufficientEth) { diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index fce03a280..4bc840862 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -1,8 +1,11 @@ import { AssetBuyer } from '@0x/asset-buyer'; import { ObjectMap, SignedOrder } from '@0x/types'; +import { Web3Wrapper } from '@0x/web3-wrapper'; +import { Provider } from 'ethereum-types'; import * as _ from 'lodash'; import * as React from 'react'; -import { Provider } from 'react-redux'; +import { Provider as ReduxProvider } from 'react-redux'; +import { oc } from 'ts-optchain'; import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; import { asyncData } from '../redux/async_data'; @@ -14,8 +17,7 @@ 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'; -import { web3Wrapper } from '../util/web3_wrapper'; +import { getInjectedProvider } from '../util/injected_provider'; fonts.include(); @@ -29,6 +31,7 @@ export interface ZeroExInstantProviderRequiredProps { } export interface ZeroExInstantProviderOptionalProps { + provider: Provider; defaultAssetBuyAmount: number; additionalAssetMetaDataMap: ObjectMap; networkId: Network; @@ -39,8 +42,8 @@ export class ZeroExInstantProvider extends React.Component + {this.props.children} - + ); } private readonly _flashErrorIfWrongNetwork = async (): Promise => { const msToShowError = 30000; // 30 seconds const network = this._store.getState().network; - const networkOfProvider = await web3Wrapper.getNetworkIdAsync(); - if (network !== networkOfProvider) { - const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`; - errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError); + const assetBuyerIfExists = this._store.getState().assetBuyer; + const providerIfExists = oc(assetBuyerIfExists).provider(); + if (!_.isUndefined(providerIfExists)) { + const web3Wrapper = new Web3Wrapper(providerIfExists); + const networkOfProvider = await web3Wrapper.getNetworkIdAsync(); + if (network !== networkOfProvider) { + const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`; + errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError); + } } }; } -- cgit From 8284f9c2ba80992609149333f8feb70fbe9b1bd1 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 2 Nov 2018 15:33:00 -0700 Subject: Use generic Maybe --- packages/instant/src/components/scaling_amount_input.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/components') diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx index ca8ccbe31..5dc719293 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -2,8 +2,9 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; +import { Maybe } from '../types'; + import { ColorOption } from '../style/theme'; -import { MaybeBigNumber } from '../types'; import { maybeBigNumberUtil } from '../util/maybe_big_number'; import { util } from '../util/util'; @@ -35,7 +36,7 @@ export class ScalingAmountInput extends React.Component = _.isEmpty(sanitizedValue) ? undefined : stringToMaybeBigNumber(sanitizedValue); -- cgit