crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(instant): fetch balance at startup

Browse Source
This commit is contained in:
Brandon Millman 2018-11-07 23:36:00 -08:00
parent d0c009adff
commit cde192df0d
7 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/instant/src/components/buy_button.tsx
View File

@ -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,8 +8,6 @@ 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';
@ -17,8 +16,10 @@ import { Text } from './ui/text';
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;
@ -47,14 +48,14 @@ 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, accountAddress } = this.props;
const { buyQuote, assetBuyer, affiliateInfo, accountAddress, accountEthBalanceInWei, web3Wrapper } = this.props;
if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) {
return;
}
this.props.onValidationPending(buyQuote);
// TODO(bmillman): move balance fetching to the async state and get rid of web3 wrapper here
const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
const hasSufficientEth = await balanceUtil.hasSufficientEth(accountAddress, 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;

6
packages/instant/src/components/buy_order_state_buttons.tsx
View File

@ -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';
@ -14,9 +16,11 @@ import { Text } from './ui/text';
export interface BuyOrderStateButtonProps {
accountAddress?: string;
accountEthBalanceInWei?: BigNumber;
buyQuote?: BuyQuote;
buyOrderProcessingState: OrderProcessState;
assetBuyer: AssetBuyer;
web3Wrapper: Web3Wrapper;
affiliateInfo?: AffiliateInfo;
onViewTransaction: () => void;
onValidationPending: (buyQuote: BuyQuote) => void;
@ -54,8 +58,10 @@ 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}

8
packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts
View File

@ -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';
@ -13,9 +15,11 @@ import { etherscanUtil } from '../util/etherscan';
interface ConnectedState {
accountAddress?: string;
accountEthBalanceInWei?: BigNumber;
buyQuote?: BuyQuote;
buyOrderProcessingState: OrderProcessState;
assetBuyer: AssetBuyer;
web3Wrapper: Web3Wrapper;
affiliateInfo?: AffiliateInfo;
onViewTransaction: () => void;
}
@ -32,12 +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: () => {

2
packages/instant/src/redux/actions.ts
View File

@ -25,6 +25,7 @@ export enum ActionTypes {
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',
@ -48,6 +49,7 @@ export const actions = {
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: (balance: BigNumber) => createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, balance),
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),

16
packages/instant/src/redux/async_data.ts
View File

@ -50,8 +50,24 @@ export const asyncData = {
if (!_.isEmpty(availableAddresses)) {
const activeAddress = availableAddresses[0];
store.dispatch(actions.setAccountStateReady(activeAddress));
await 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 ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(account.address);
store.dispatch(actions.updateAccountEthBalance(ethBalanceInWei));
} catch (e) {
// leave balance as is
return;
}
},
};

15
packages/instant/src/redux/reducer.ts
View File

@ -67,12 +67,25 @@ export const createReducer = (initialState: State) => {
return reduceStateWithAccount(state, LOCKED_ACCOUNT);
case ActionTypes.SET_ACCOUNT_STATE_ERROR:
return reduceStateWithAccount(state, ERROR_ACCOUNT);
case ActionTypes.SET_ACCOUNT_STATE_READY:
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 account = state.providerState.account;
if (account.state !== AccountState.Ready) {
return state;
} else {
const newAccount: AccountReady = {
...account,
ethBalanceInWei: action.data,
};
return reduceStateWithAccount(state, newAccount);
}
}
case ActionTypes.UPDATE_ETH_USD_PRICE:
return {
...state,

13
packages/instant/src/util/balance.ts
View File

@ -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);
},
};