diff options
Diffstat (limited to 'packages/instant')
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/erc20_asset_amount_input.tsx | 10 | ||||
-rw-r--r-- | packages/instant/src/components/scaling_amount_input.tsx | 64 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_provider.tsx | 34 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 9 | ||||
-rw-r--r-- | packages/instant/src/index.umd.ts | 6 | ||||
-rw-r--r-- | packages/instant/src/redux/actions.ts | 5 | ||||
-rw-r--r-- | packages/instant/src/redux/reducer.ts | 4 | ||||
-rw-r--r-- | packages/instant/src/types.ts | 1 | ||||
-rw-r--r-- | packages/instant/src/util/address.ts | 4 | ||||
-rw-r--r-- | packages/instant/src/util/assert.ts | 2 | ||||
-rw-r--r-- | packages/instant/src/util/big_number_input.ts | 34 | ||||
-rw-r--r-- | packages/instant/src/util/injected_provider.ts | 16 | ||||
-rw-r--r-- | packages/instant/src/util/maybe_big_number.ts | 25 | ||||
-rw-r--r-- | packages/instant/src/util/provider.ts | 12 | ||||
-rw-r--r-- | packages/instant/src/util/web3_wrapper.ts | 5 |
16 files changed, 132 insertions, 104 deletions
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<BuyButtonProps> { } 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/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx index 5e07dcf2f..6ad0e92e7 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, SimpleHandler } 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; @@ -56,7 +56,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> @@ -113,7 +113,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..5dc719293 100644 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ b/packages/instant/src/components/scaling_amount_input.tsx @@ -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); }; } diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 59a850bc5..0b9408329 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -1,8 +1,12 @@ 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'; 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'; @@ -11,11 +15,9 @@ 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'; -import { web3Wrapper } from '../util/web3_wrapper'; +import { getInjectedProvider } from '../util/injected_provider'; fonts.include(); @@ -27,6 +29,7 @@ export interface ZeroExInstantProviderRequiredProps { } export interface ZeroExInstantProviderOptionalProps { + provider: Provider; availableAssetDatas: string[]; defaultAssetBuyAmount: number; defaultSelectedAssetData: string; @@ -40,8 +43,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider // TODO(fragosti): Write tests for this beast once we inject a provider. private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State { const networkId = props.networkId || state.network; - // TODO: Provider needs to not be hard-coded to injected web3. - const provider = getProvider(); + // TODO: Proper wallet connect flow + const provider = props.provider || getInjectedProvider(); const assetBuyerOptions = { networkId, }; @@ -72,7 +75,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider ), selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount) ? state.selectedAssetAmount - : new BigNumberInput(props.defaultAssetBuyAmount), + : new BigNumber(props.defaultAssetBuyAmount), availableAssets: _.isUndefined(props.availableAssetDatas) ? undefined : assetUtils.createAssetsFromAssetDatas(props.availableAssetDatas, completeAssetMetaDataMap, networkId), @@ -108,19 +111,24 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider public render(): React.ReactNode { return ( - <Provider store={this._store}> + <ReduxProvider store={this._store}> <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider> - </Provider> + </ReduxProvider> ); } private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => { 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); + } } }; } 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 99999ee14..f7d56c564 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; numberOfAssetsAvailable?: number; @@ -35,16 +34,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; numberOfAssetsAvailable?: number; } diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts index a183932c6..59d1e646f 100644 --- a/packages/instant/src/index.umd.ts +++ b/packages/instant/src/index.umd.ts @@ -30,8 +30,12 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA assert.isNumber('props.zIndex', props.zIndex); } if (!_.isUndefined(props.affiliateInfo)) { - assert.isValidaffiliateInfo('props.affiliateInfo', props.affiliateInfo); + assert.isValidAffiliateInfo('props.affiliateInfo', props.affiliateInfo); } + if (!_.isUndefined(props.provider)) { + assert.isWeb3Provider('props.provider', props.provider); + } + assert.isString('selector', selector); const appendToIfExists = document.querySelector(selector); assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`); const appendTo = appendToIfExists as Element; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 879af07fc..c41c5054b 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -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, Asset } from '../types'; export interface PlainAction<T extends string> { @@ -43,8 +41,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 179c5902e..8c1902bb8 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -15,7 +15,7 @@ import { OrderProcessState, OrderState, } from '../types'; -import { BigNumberInput } from '../util/big_number_input'; +import { assetUtils } from '../util/asset'; import { Action, ActionTypes } from './actions'; @@ -25,7 +25,7 @@ export interface State { assetMetaDataMap: ObjectMap<AssetMetaData>; selectedAsset?: Asset; availableAssets?: 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 6d66be305..449bc0f31 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -1,6 +1,7 @@ import { AssetProxyId, ObjectMap } from '@0x/types'; // Reusable +export type Maybe<T> = T | undefined; export enum AsyncProcessState { NONE = 'None', PENDING = 'Pending', diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts index 14d42d8c0..b21863a8e 100644 --- a/packages/instant/src/util/address.ts +++ b/packages/instant/src/util/address.ts @@ -1,6 +1,6 @@ -import { web3Wrapper } from '../util/web3_wrapper'; +import { Web3Wrapper } from '@0x/web3-wrapper'; -export const getBestAddress = async (): Promise<string | undefined> => { +export const getBestAddress = async (web3Wrapper: Web3Wrapper): Promise<string | undefined> => { const addresses = await web3Wrapper.getAvailableAddressesAsync(); return addresses[0]; }; diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts index d02f58625..971c1eb96 100644 --- a/packages/instant/src/util/assert.ts +++ b/packages/instant/src/util/assert.ts @@ -44,7 +44,7 @@ export const assert = { assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl); } }, - isValidaffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void { + isValidAffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void { assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient); assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage); assert.assert( 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/injected_provider.ts b/packages/instant/src/util/injected_provider.ts new file mode 100644 index 000000000..40f9e2da5 --- /dev/null +++ b/packages/instant/src/util/injected_provider.ts @@ -0,0 +1,16 @@ +import { Provider } from 'ethereum-types'; +import * as _ from 'lodash'; + +export const getInjectedProvider = (): Provider => { + const injectedProviderIfExists = (window as any).ethereum; + if (!_.isUndefined(injectedProviderIfExists)) { + // TODO: call enable here when implementing wallet connection flow + return injectedProviderIfExists; + } + const injectedWeb3IfExists = (window as any).web3; + if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + return injectedWeb3IfExists.currentProvider; + } else { + throw new Error(`No injected web3 found`); + } +}; 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..9d3746e10 --- /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 { 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); + }, +}; diff --git a/packages/instant/src/util/provider.ts b/packages/instant/src/util/provider.ts deleted file mode 100644 index 49705fd11..000000000 --- a/packages/instant/src/util/provider.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Provider } from 'ethereum-types'; - -export const getProvider = (): Provider => { - const injectedWeb3 = (window as any).web3 || undefined; - try { - // Use MetaMask/Mist provider - return injectedWeb3.currentProvider; - } catch (err) { - // Throws when user doesn't have MetaMask/Mist running - throw new Error(`No injected web3 found: ${err}`); - } -}; diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts deleted file mode 100644 index 24dcd9076..000000000 --- a/packages/instant/src/util/web3_wrapper.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Web3Wrapper } from '@0x/web3-wrapper'; - -import { getProvider } from './provider'; - -export const web3Wrapper = new Web3Wrapper(getProvider()); |