diff options
Diffstat (limited to 'packages/instant/src')
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 28 | ||||
-rw-r--r-- | packages/instant/src/components/buy_order_state_buttons.tsx | 8 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_provider.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/constants.ts | 14 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts | 14 | ||||
-rw-r--r-- | packages/instant/src/redux/actions.ts | 13 | ||||
-rw-r--r-- | packages/instant/src/redux/async_data.ts | 40 | ||||
-rw-r--r-- | packages/instant/src/redux/reducer.ts | 43 | ||||
-rw-r--r-- | packages/instant/src/types.ts | 5 | ||||
-rw-r--r-- | packages/instant/src/util/balance.ts | 13 | ||||
-rw-r--r-- | packages/instant/src/util/provider_state_factory.ts | 10 |
11 files changed, 148 insertions, 42 deletions
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 5b07e7416..877ab275c 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 { BigNumber } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; @@ -7,16 +8,17 @@ import { oc } from 'ts-optchain'; import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; import { ColorOption } from '../style/theme'; import { AffiliateInfo, ZeroExInstantError } from '../types'; -import { getBestAddress } from '../util/address'; -import { balanceUtil } from '../util/balance'; import { gasPriceEstimator } from '../util/gas_price_estimator'; import { util } from '../util/util'; import { Button } from './ui/button'; export interface BuyButtonProps { + accountAddress?: string; + accountEthBalanceInWei?: BigNumber; buyQuote?: BuyQuote; assetBuyer: AssetBuyer; + web3Wrapper: Web3Wrapper; affiliateInfo?: AffiliateInfo; onValidationPending: (buyQuote: BuyQuote) => void; onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void; @@ -33,7 +35,8 @@ export class BuyButton extends React.Component<BuyButtonProps> { onBuyFailure: util.boundNoop, }; public render(): React.ReactNode { - const shouldDisableButton = _.isUndefined(this.props.buyQuote); + const { buyQuote, accountAddress } = this.props; + const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress); return ( <Button width="100%" @@ -48,30 +51,25 @@ export class BuyButton extends React.Component<BuyButtonProps> { } private readonly _handleClick = async () => { // The button is disabled when there is no buy quote anyway. - const { buyQuote, assetBuyer, affiliateInfo } = this.props; - if (_.isUndefined(buyQuote)) { + const { buyQuote, assetBuyer, affiliateInfo, accountAddress, accountEthBalanceInWei, web3Wrapper } = this.props; + if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) { return; } - this.props.onValidationPending(buyQuote); - - // TODO(bmillman): move address and balance fetching to the async state - const web3Wrapper = new Web3Wrapper(assetBuyer.provider); - const takerAddress = await getBestAddress(web3Wrapper); - - const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper); + const ethNeededForBuy = buyQuote.worstCaseQuoteInfo.totalEthAmount; + // if we don't have a balance for the user, let the transaction through, it will be handled by the wallet + const hasSufficientEth = _.isUndefined(accountEthBalanceInWei) || accountEthBalanceInWei.gte(ethNeededForBuy); if (!hasSufficientEth) { this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH); return; } - let txHash: string | undefined; const gasInfo = await gasPriceEstimator.getGasInfoAsync(); const feeRecipient = oc(affiliateInfo).feeRecipient(); try { txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { feeRecipient, - takerAddress, + takerAddress: accountAddress, gasPrice: gasInfo.gasPriceInWei, }); } catch (e) { @@ -86,7 +84,6 @@ export class BuyButton extends React.Component<BuyButtonProps> { } throw e; } - const startTimeUnix = new Date().getTime(); const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs; this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix); @@ -99,7 +96,6 @@ export class BuyButton extends React.Component<BuyButtonProps> { } throw e; } - this.props.onBuySuccess(buyQuote, txHash); }; } diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx index bdac25cf2..6041bf4f5 100644 --- a/packages/instant/src/components/buy_order_state_buttons.tsx +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -1,4 +1,6 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as React from 'react'; import { ColorOption } from '../style/theme'; @@ -12,9 +14,12 @@ import { Button } from './ui/button'; import { Flex } from './ui/flex'; export interface BuyOrderStateButtonProps { + accountAddress?: string; + accountEthBalanceInWei?: BigNumber; buyQuote?: BuyQuote; buyOrderProcessingState: OrderProcessState; assetBuyer: AssetBuyer; + web3Wrapper: Web3Wrapper; affiliateInfo?: AffiliateInfo; onViewTransaction: () => void; onValidationPending: (buyQuote: BuyQuote) => void; @@ -49,8 +54,11 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP return ( <BuyButton + accountAddress={props.accountAddress} + accountEthBalanceInWei={props.accountEthBalanceInWei} buyQuote={props.buyQuote} assetBuyer={props.assetBuyer} + web3Wrapper={props.web3Wrapper} affiliateInfo={props.affiliateInfo} onValidationPending={props.onValidationPending} onValidationFail={props.onValidationFail} diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 58e78c522..cceb44377 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -93,6 +93,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store); } // tslint:disable-next-line:no-floating-promises + asyncData.fetchAccountInfoAndDispatchToStore(this._store); + // tslint:disable-next-line:no-floating-promises asyncData.fetchCurrentBuyQuoteAndDispatchToStore(this._store); // warm up the gas price estimator cache just in case we can't // grab the gas price estimate when submitting the transaction diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 34548f26f..b5c4f96e4 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -1,6 +1,6 @@ import { BigNumber } from '@0x/utils'; -import { Network } from './types'; +import { AccountNotReady, AccountState, Network } from './types'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; @@ -22,3 +22,15 @@ export const ETHEREUM_NODE_URL_BY_NETWORK = { [Network.Kovan]: 'https://kovan.infura.io/', }; export const BLOCK_POLLING_INTERVAL_MS = 10000; // 10s +export const NO_ACCOUNT: AccountNotReady = { + state: AccountState.None, +}; +export const LOADING_ACCOUNT: AccountNotReady = { + state: AccountState.Loading, +}; +export const LOCKED_ACCOUNT: AccountNotReady = { + state: AccountState.Locked, +}; +export const ERROR_ACCOUNT: AccountNotReady = { + state: AccountState.Error, +}; diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts index c3a5e88b9..610335243 100644 --- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts +++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts @@ -1,4 +1,6 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; +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'; @@ -7,14 +9,17 @@ import { Dispatch } from 'redux'; import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; -import { AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types'; +import { AccountState, AffiliateInfo, OrderProcessState, ZeroExInstantError } from '../types'; import { errorFlasher } from '../util/error_flasher'; import { etherscanUtil } from '../util/etherscan'; interface ConnectedState { + accountAddress?: string; + accountEthBalanceInWei?: BigNumber; buyQuote?: BuyQuote; buyOrderProcessingState: OrderProcessState; assetBuyer: AssetBuyer; + web3Wrapper: Web3Wrapper; affiliateInfo?: AffiliateInfo; onViewTransaction: () => void; } @@ -31,9 +36,16 @@ interface ConnectedDispatch { export interface SelectedAssetBuyOrderStateButtons {} const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => { const assetBuyer = state.providerState.assetBuyer; + const web3Wrapper = state.providerState.web3Wrapper; + const account = state.providerState.account; + const accountAddress = account.state === AccountState.Ready ? account.address : undefined; + const accountEthBalanceInWei = account.state === AccountState.Ready ? account.ethBalanceInWei : undefined; return { + accountAddress, + accountEthBalanceInWei, buyOrderProcessingState: state.buyOrderState.processState, assetBuyer, + web3Wrapper, buyQuote: state.latestBuyQuote, affiliateInfo: state.affiliateInfo, onViewTransaction: () => { diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index c41c5054b..fc89e3d0e 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; -import { ActionsUnion, Asset } from '../types'; +import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types'; export interface PlainAction<T extends string> { type: T; @@ -21,6 +21,11 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> | } export enum ActionTypes { + SET_ACCOUNT_STATE_LOADING = 'SET_ACCOUNT_STATE_LOADING', + SET_ACCOUNT_STATE_LOCKED = 'SET_ACCOUNT_STATE_LOCKED', + SET_ACCOUNT_STATE_ERROR = 'SET_ACCOUNT_STATE_ERROR', + SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY', + UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE', UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE', UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT', SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE', @@ -40,6 +45,12 @@ export enum ActionTypes { } export const actions = { + setAccountStateLoading: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOADING), + setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED), + setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR), + setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address), + updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) => + createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance), updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE), diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index 839a90778..a8f632009 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -2,7 +2,7 @@ import { AssetProxyId } from '@0x/types'; import * as _ from 'lodash'; import { BIG_NUMBER_ZERO } from '../constants'; -import { ERC20Asset } from '../types'; +import { AccountState, ERC20Asset } from '../types'; import { assetUtils } from '../util/asset'; import { buyQuoteUpdater } from '../util/buy_quote_updater'; import { coinbaseApi } from '../util/coinbase_api'; @@ -36,6 +36,44 @@ export const asyncData = { store.dispatch(actions.setAvailableAssets([])); } }, + fetchAccountInfoAndDispatchToStore: async (store: Store) => { + const { providerState } = store.getState(); + const web3Wrapper = providerState.web3Wrapper; + if (providerState.account.state !== AccountState.Loading) { + store.dispatch(actions.setAccountStateLoading()); + } + let availableAddresses: string[]; + try { + availableAddresses = await web3Wrapper.getAvailableAddressesAsync(); + } catch (e) { + store.dispatch(actions.setAccountStateError()); + return; + } + if (!_.isEmpty(availableAddresses)) { + const activeAddress = availableAddresses[0]; + store.dispatch(actions.setAccountStateReady(activeAddress)); + // tslint:disable-next-line:no-floating-promises + asyncData.fetchAccountBalanceAndDispatchToStore(store); + } else { + store.dispatch(actions.setAccountStateLocked()); + } + }, + fetchAccountBalanceAndDispatchToStore: async (store: Store) => { + const { providerState } = store.getState(); + const web3Wrapper = providerState.web3Wrapper; + const account = providerState.account; + if (account.state !== AccountState.Ready) { + return; + } + try { + const address = account.address; + const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); + store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); + } catch (e) { + // leave balance as is + return; + } + }, fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => { const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState(); const assetBuyer = providerState.assetBuyer; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 4a939839a..a5a1b6f7d 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -4,8 +4,12 @@ import { BigNumber } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; +import { ERROR_ACCOUNT, LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants'; import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { + Account, + AccountReady, + AccountState, AffiliateInfo, Asset, AssetMetaData, @@ -57,6 +61,32 @@ export const DEFAULT_STATE: DefaultState = { export const createReducer = (initialState: State) => { const reducer = (state: State = initialState, action: Action): State => { switch (action.type) { + case ActionTypes.SET_ACCOUNT_STATE_LOADING: + return reduceStateWithAccount(state, LOADING_ACCOUNT); + case ActionTypes.SET_ACCOUNT_STATE_LOCKED: + return reduceStateWithAccount(state, LOCKED_ACCOUNT); + case ActionTypes.SET_ACCOUNT_STATE_ERROR: + return reduceStateWithAccount(state, ERROR_ACCOUNT); + case ActionTypes.SET_ACCOUNT_STATE_READY: { + const account: AccountReady = { + state: AccountState.Ready, + address: action.data, + }; + return reduceStateWithAccount(state, account); + } + case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: { + const { address, ethBalanceInWei } = action.data; + const currentAccount = state.providerState.account; + if (currentAccount.state !== AccountState.Ready || currentAccount.address !== address) { + return state; + } else { + const newAccount: AccountReady = { + ...currentAccount, + ethBalanceInWei, + }; + return reduceStateWithAccount(state, newAccount); + } + } case ActionTypes.UPDATE_ETH_USD_PRICE: return { ...state, @@ -80,7 +110,6 @@ export const createReducer = (initialState: State) => { } else { return state; } - case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING: return { ...state, @@ -191,6 +220,18 @@ export const createReducer = (initialState: State) => { return reducer; }; +const reduceStateWithAccount = (state: State, account: Account) => { + const oldProviderState = state.providerState; + const newProviderState: ProviderState = { + ...oldProviderState, + account, + }; + return { + ...state, + providerState: newProviderState, + }; +}; + const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => { const selectedAssetIfExists = state.selectedAsset; const selectedAssetAmountIfExists = state.selectedAssetAmount; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index d65f70008..20ad2ed95 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -120,3 +120,8 @@ export interface AccountNotReady { export type Account = AccountReady | AccountNotReady; export type OrderSource = string | SignedOrder[]; + +export interface AddressAndEthBalanceInWei { + address: string; + ethBalanceInWei: BigNumber; +} diff --git a/packages/instant/src/util/balance.ts b/packages/instant/src/util/balance.ts deleted file mode 100644 index f2271495b..000000000 --- a/packages/instant/src/util/balance.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { BuyQuote } from '@0x/asset-buyer'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; - -export const balanceUtil = { - hasSufficientEth: async (takerAddress: string | undefined, buyQuote: BuyQuote, web3Wrapper: Web3Wrapper) => { - if (_.isUndefined(takerAddress)) { - return false; - } - const balanceWei = await web3Wrapper.getBalanceInWeiAsync(takerAddress); - return balanceWei.gte(buyQuote.worstCaseQuoteInfo.totalEthAmount); - }, -}; diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts index 18b188d89..3281f6bfb 100644 --- a/packages/instant/src/util/provider_state_factory.ts +++ b/packages/instant/src/util/provider_state_factory.ts @@ -2,18 +2,12 @@ import { Web3Wrapper } from '@0x/web3-wrapper'; import { Provider } from 'ethereum-types'; import * as _ from 'lodash'; -import { AccountNotReady, AccountState, Maybe, Network, OrderSource, ProviderState } from '../types'; +import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants'; +import { Maybe, Network, OrderSource, ProviderState } from '../types'; import { assetBuyerFactory } from './asset_buyer_factory'; import { providerFactory } from './provider_factory'; -const LOADING_ACCOUNT: AccountNotReady = { - state: AccountState.Loading, -}; -const NO_ACCOUNT: AccountNotReady = { - state: AccountState.None, -}; - export const providerStateFactory = { getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => { if (!_.isUndefined(provider)) { |