diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-11-03 04:48:31 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-11-03 05:39:12 +0800 |
commit | 5fc2483be776cab90e7ff868b27536a85d6764c9 (patch) | |
tree | 1dedb81a97b4c57c763d4f56cb4952d5df4b586f | |
parent | ec83a1d9e735573fe51df7a5854424c0ad4101fb (diff) | |
download | dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar.gz dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar.bz2 dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar.lz dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar.xz dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.tar.zst dexon-0x-contracts-5fc2483be776cab90e7ff868b27536a85d6764c9.zip |
feat(instant): pass in provider through props, fallback to injected provider
-rw-r--r-- | packages/instant/src/components/buy_button.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_provider.tsx | 30 | ||||
-rw-r--r-- | packages/instant/src/index.umd.ts | 6 | ||||
-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/injected_provider.ts | 16 | ||||
-rw-r--r-- | packages/instant/src/util/provider.ts | 12 | ||||
-rw-r--r-- | packages/instant/src/util/web3_wrapper.ts | 5 |
8 files changed, 46 insertions, 34 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/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index fce03a280..4bc840862 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -1,8 +1,11 @@ import { AssetBuyer } from '@0x/asset-buyer'; import { ObjectMap, SignedOrder } from '@0x/types'; +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'; @@ -14,8 +17,7 @@ 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(); @@ -29,6 +31,7 @@ export interface ZeroExInstantProviderRequiredProps { } export interface ZeroExInstantProviderOptionalProps { + provider: Provider; defaultAssetBuyAmount: number; additionalAssetMetaDataMap: ObjectMap<AssetMetaData>; networkId: Network; @@ -39,8 +42,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider private readonly _store: Store; 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, }; @@ -92,19 +95,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/index.umd.ts b/packages/instant/src/index.umd.ts index 806187a16..b269ad741 100644 --- a/packages/instant/src/index.umd.ts +++ b/packages/instant/src/index.umd.ts @@ -25,8 +25,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/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 20f8ddaee..99e177993 100644 --- a/packages/instant/src/util/assert.ts +++ b/packages/instant/src/util/assert.ts @@ -41,7 +41,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/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/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()); |