diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-27 02:41:09 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-27 02:41:09 +0800 |
commit | a414dc9b83c14b277af90ce8397db3736a51a4d3 (patch) | |
tree | e9814de850892932b539c88e1798d44b00db563a /packages/instant/src/containers/selected_erc20_asset_amount_input.ts | |
parent | 951a5271e15cebb010281de3b8cbfb3972ecec83 (diff) | |
parent | 0f6307169604f36b0316f236eb96d6001b788f50 (diff) | |
download | dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.gz dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.bz2 dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.lz dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.xz dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.tar.zst dexon-sol-tools-a414dc9b83c14b277af90ce8397db3736a51a4d3.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/fixed-orders-in-render-method
Diffstat (limited to 'packages/instant/src/containers/selected_erc20_asset_amount_input.ts')
-rw-r--r-- | packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts new file mode 100644 index 000000000..ee76e9d66 --- /dev/null +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -0,0 +1,124 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import { AssetProxyId } from '@0x/types'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { Action, actions } from '../redux/actions'; +import { State } from '../redux/reducer'; +import { ColorOption } from '../style/theme'; +import { ERC20Asset, OrderProcessState } from '../types'; +import { BigNumberInput } from '../util/big_number_input'; +import { errorUtil } from '../util/error'; + +import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input'; + +export interface SelectedERC20AssetAmountInputProps { + fontColor?: ColorOption; + startingFontSizePx: number; +} + +interface ConnectedState { + assetBuyer?: AssetBuyer; + value?: BigNumberInput; + asset?: ERC20Asset; +} + +interface ConnectedDispatch { + updateBuyQuote: (assetBuyer?: AssetBuyer, value?: BigNumberInput, asset?: ERC20Asset) => void; +} + +interface ConnectedProps { + value?: BigNumberInput; + asset?: ERC20Asset; + onChange: (value?: BigNumberInput, asset?: ERC20Asset) => void; +} + +type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; + +const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { + const selectedAsset = state.selectedAsset; + if (_.isUndefined(selectedAsset) || selectedAsset.metaData.assetProxyId !== AssetProxyId.ERC20) { + return { + value: state.selectedAssetAmount, + }; + } + return { + assetBuyer: state.assetBuyer, + value: state.selectedAssetAmount, + asset: selectedAsset as ERC20Asset, + }; +}; + +const updateBuyQuoteAsync = async ( + assetBuyer: AssetBuyer, + dispatch: Dispatch<Action>, + asset: ERC20Asset, + assetAmount: BigNumber, +): Promise<void> => { + // get a new buy quote. + const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals); + + // mark quote as pending + dispatch(actions.setQuoteRequestStatePending()); + + let newBuyQuote: BuyQuote | undefined; + try { + newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); + } catch (error) { + dispatch(actions.setQuoteRequestStateFailure()); + errorUtil.errorFlasher.flashNewError(dispatch, error); + return; + } + // We have a successful new buy quote + errorUtil.errorFlasher.clearError(dispatch); + // invalidate the last buy quote. + dispatch(actions.updateLatestBuyQuote(newBuyQuote)); +}; + +const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true }); + +const mapDispatchToProps = ( + dispatch: Dispatch<Action>, + _ownProps: SelectedERC20AssetAmountInputProps, +): ConnectedDispatch => ({ + updateBuyQuote: (assetBuyer, value, asset) => { + // Update the input + dispatch(actions.updateSelectedAssetAmount(value)); + // invalidate the last buy quote. + dispatch(actions.updateLatestBuyQuote(undefined)); + // reset our buy state + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE })); + + if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { + // even if it's debounced, give them the illusion it's loading + dispatch(actions.setQuoteRequestStatePending()); + // tslint:disable-next-line:no-floating-promises + debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value); + } + }, +}); + +const mergeProps = ( + connectedState: ConnectedState, + connectedDispatch: ConnectedDispatch, + ownProps: SelectedERC20AssetAmountInputProps, +): FinalProps => { + return { + ...ownProps, + asset: connectedState.asset, + value: connectedState.value, + onChange: (value, asset) => { + connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset); + }, + }; +}; + +export const SelectedERC20AssetAmountInput: React.ComponentClass<SelectedERC20AssetAmountInputProps> = connect( + mapStateToProps, + mapDispatchToProps, + mergeProps, +)(ERC20AssetAmountInput); |