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

feat: integrate wallet flow with heartbeat and other branches

Browse Source
This commit is contained in:
fragosti 2018-11-12 13:30:47 -08:00
parent a8a1ea92a6
commit 79f0324abc
6 changed files with 82 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/instant/src/components/buy_order_progress.tsx
View File

@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import { ProgressBar, TimedProgressBar } from '../components/timed_progress_bar';
import { TimedProgressBar } from '../components/timed_progress_bar';
import { TimeCounter } from '../components/time_counter';
import { Container } from '../components/ui/container';

12
packages/instant/src/components/payment_method.tsx
View File

@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
import { Account, AccountState, Network, StandardSlidingPanelContent } from '../types';
import { Account, AccountState, Network } from '../types';
import { MetaMaskLogo } from './meta_mask_logo';
import { PaymentMethodDropdown } from './payment_method_dropdown';
@ -15,7 +15,8 @@ import { Text } from './ui/text';
export interface PaymentMethodProps {
account: Account;
network: Network;
openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void;
onInstallWalletClick: () => void;
onUnlockWalletClick: () => void;
}
export class PaymentMethod extends React.Component<PaymentMethodProps> {
@ -80,7 +81,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
case AccountState.Locked:
return (
<WalletPrompt
onClick={this._openInstallWalletPanel}
onClick={this.props.onUnlockWalletClick}
image={<Icon width={13} icon="lock" color={ColorOption.black} />}
>
Please Unlock MetaMask
@ -89,7 +90,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
case AccountState.None:
return (
<WalletPrompt
onClick={this._openInstallWalletPanel}
onClick={this.props.onInstallWalletClick}
image={<MetaMaskLogo width={19} height={18} />}
>
Install MetaMask
@ -107,9 +108,6 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
return null;
}
};
private readonly _openInstallWalletPanel = () => {
this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet);
};
}
interface WalletPromptProps {

7
packages/instant/src/components/zero_ex_instant_provider.tsx
View File

@ -91,12 +91,13 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
}
public componentDidMount(): void {
const state = this._store.getState();
const dispatch = this._store.dispatch;
// tslint:disable-next-line:no-floating-promises
asyncData.fetchEthPriceAndDispatchToStore(this._store);
asyncData.fetchEthPriceAndDispatchToStore(dispatch);
// fetch available assets if none are specified
if (_.isUndefined(state.availableAssets)) {
// tslint:disable-next-line:no-floating-promises
asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
asyncData.fetchAvailableAssetDatasAndDispatchToStore(state, dispatch);
}
if (state.providerState.account.state !== AccountState.None) {
this._accountUpdateHeartbeat = generateAccountHeartbeater({
@ -112,7 +113,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
});
this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
// tslint:disable-next-line:no-floating-promises
asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, true);
// warm up the gas price estimator cache just in case we can't
// grab the gas price estimate when submitting the transaction
// tslint:disable-next-line:no-floating-promises

41
packages/instant/src/containers/connected_account_payment_method.ts
View File

@ -4,34 +4,61 @@ import { Dispatch } from 'redux';
import { PaymentMethod } from '../components/payment_method';
import { Action, actions } from '../redux/actions';
import { asyncData } from '../redux/async_data';
import { State } from '../redux/reducer';
import { Account, Network, StandardSlidingPanelContent } from '../types';
import { Account, Network, ProviderState, StandardSlidingPanelContent } from '../types';
export interface ConnectedAccountPaymentMethodProps {}
interface ConnectedState {
network: Network;
providerState: ProviderState;
}
interface ConnectedDispatch {
onInstallWalletClick: () => void;
unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
}
interface ConnectedProps {
onInstallWalletClick: () => void;
onUnlockWalletClick: () => void;
account: Account;
network: Network;
}
interface ConnectedDispatch {
openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void;
}
type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
account: state.providerState.account,
network: state.network,
providerState: state.providerState,
});
const mapDispatchToProps = (
dispatch: Dispatch<Action>,
ownProps: ConnectedAccountPaymentMethodProps,
): ConnectedDispatch => ({
openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
dispatch(actions.openStandardSlidingPanel(content)),
onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
});
const mergeProps = (
connectedState: ConnectedState,
connectedDispatch: ConnectedDispatch,
ownProps: ConnectedAccountPaymentMethodProps,
): FinalProps => ({
...ownProps,
network: connectedState.network,
account: connectedState.providerState.account,
onInstallWalletClick: connectedDispatch.onInstallWalletClick,
onUnlockWalletClick: () => {
connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
},
});
export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(
mapStateToProps,
mapDispatchToProps,
mergeProps,
)(PaymentMethod);

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

@ -1,71 +1,75 @@
import { AssetProxyId } from '@0x/types';
import * as _ from 'lodash';
import { Dispatch } from 'redux';
import { BIG_NUMBER_ZERO } from '../constants';
import { AccountState, ERC20Asset, OrderProcessState } from '../types';
import { AccountState, ERC20Asset, OrderProcessState, ProviderState } from '../types';
import { assetUtils } from '../util/asset';
import { buyQuoteUpdater } from '../util/buy_quote_updater';
import { coinbaseApi } from '../util/coinbase_api';
import { errorFlasher } from '../util/error_flasher';
import { actions } from './actions';
import { Store } from './store';
import { State } from './reducer';
export const asyncData = {
fetchEthPriceAndDispatchToStore: async (store: Store) => {
fetchEthPriceAndDispatchToStore: async (dispatch: Dispatch) => {
try {
const ethUsdPrice = await coinbaseApi.getEthUsdPrice();
store.dispatch(actions.updateEthUsdPrice(ethUsdPrice));
dispatch(actions.updateEthUsdPrice(ethUsdPrice));
} catch (e) {
const errorMessage = 'Error fetching ETH/USD price';
errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
store.dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
}
},
fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
const { providerState, assetMetaDataMap, network } = store.getState();
fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => {
const { providerState, assetMetaDataMap, network } = state;
const assetBuyer = providerState.assetBuyer;
try {
const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
store.dispatch(actions.setAvailableAssets(assets));
dispatch(actions.setAvailableAssets(assets));
} catch (e) {
const errorMessage = 'Could not find any assets';
errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
// On error, just specify that none are available
store.dispatch(actions.setAvailableAssets([]));
dispatch(actions.setAvailableAssets([]));
}
},
fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => {
const { store, shouldSetToLoading } = options;
const { providerState } = store.getState();
fetchAccountInfoAndDispatchToStore: async (
providerState: ProviderState,
dispatch: Dispatch,
shouldAttemptUnlock: boolean = false,
shouldSetToLoading: boolean = false,
) => {
const web3Wrapper = providerState.web3Wrapper;
const provider = providerState.provider;
if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
store.dispatch(actions.setAccountStateLoading());
dispatch(actions.setAccountStateLoading());
}
let availableAddresses: string[];
try {
// TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here
const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable);
availableAddresses = isPrivacyModeEnabled
availableAddresses =
isPrivacyModeEnabled && shouldAttemptUnlock
? await (provider as any).enable()
: await web3Wrapper.getAvailableAddressesAsync();
} catch (e) {
store.dispatch(actions.setAccountStateLocked());
dispatch(actions.setAccountStateLocked());
return;
}
if (!_.isEmpty(availableAddresses)) {
const activeAddress = availableAddresses[0];
store.dispatch(actions.setAccountStateReady(activeAddress));
dispatch(actions.setAccountStateReady(activeAddress));
// tslint:disable-next-line:no-floating-promises
asyncData.fetchAccountBalanceAndDispatchToStore(store);
asyncData.fetchAccountBalanceAndDispatchToStore(providerState, dispatch);
} else {
store.dispatch(actions.setAccountStateLocked());
dispatch(actions.setAccountStateLocked());
}
},
fetchAccountBalanceAndDispatchToStore: async (store: Store) => {
const { providerState } = store.getState();
fetchAccountBalanceAndDispatchToStore: async (providerState: ProviderState, dispatch: Dispatch) => {
const web3Wrapper = providerState.web3Wrapper;
const account = providerState.account;
if (account.state !== AccountState.Ready) {
@ -74,15 +78,18 @@ export const asyncData = {
try {
const address = account.address;
const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
} catch (e) {
// leave balance as is
return;
}
},
fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => {
const { store, shouldSetPending } = options;
const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
fetchCurrentBuyQuoteAndDispatchToStore: async (
state: State,
dispatch: Dispatch,
shouldSetPending: boolean = false,
) => {
const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = state;
const assetBuyer = providerState.assetBuyer;
if (
!_.isUndefined(selectedAssetAmount) &&
@ -92,7 +99,7 @@ export const asyncData = {
) {
await buyQuoteUpdater.updateBuyQuoteAsync(
assetBuyer,
store.dispatch,
dispatch,
selectedAsset as ERC20Asset,
selectedAssetAmount,
shouldSetPending,

4
packages/instant/src/util/heartbeater_factory.ts
View File

@ -10,13 +10,13 @@ export interface HeartbeatFactoryOptions {
export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
const { store, shouldPerformImmediatelyOnStart } = options;
return new Heartbeater(async () => {
await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false });
await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false);
}, shouldPerformImmediatelyOnStart);
};
export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
const { store, shouldPerformImmediatelyOnStart } = options;
return new Heartbeater(async () => {
await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false });
await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, false);
}, shouldPerformImmediatelyOnStart);
};