From 02a975dde45ba879627975ac836956b679a1a0ac Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 13:17:16 -0700 Subject: feat: add augur provided order --- packages/instant/public/index.html | 33 ++++++++++------------ .../selected_erc20_asset_amount_input.ts | 1 + .../instant/src/data/asset_data_network_mapping.ts | 4 +++ packages/instant/src/data/asset_meta_data_map.ts | 6 ++++ 4 files changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 9f1dfdb64..68d6c69c4 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -35,24 +35,21 @@ DECIMAL_PLACES: 78, }); const providedOrder = { - senderAddress: '0x0000000000000000000000000000000000000000', - makerAddress: '0x14e2f1f157e7dd4057d02817436d628a37120fd1', - takerAddress: '0x0000000000000000000000000000000000000000', - makerFee: new BigNumber('0'), - takerFee: new BigNumber('0'), - makerAssetAmount: new BigNumber('100000000000000000000'), - takerAssetAmount: new BigNumber('10000000000000000'), - makerAssetData: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa', - takerAssetData: '0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c', - expirationTimeSeconds: new BigNumber('1591858800'), - feeRecipientAddress: '0x0000000000000000000000000000000000000000', - salt: new BigNumber( - '54983920541892966634674340965984367456810207583416050222519063020710969340046', - ), - signature: - '0x1b949656218421c845995457303569a656764afa2b979d41dcefff0009d57ce15001490268bc7caa4269894fd83b741465fc5a7a53eda6ece17eb91fb32655d83703', - exchangeAddress: '0x35dd2932454449b14cee11a94d3674a936d5d7b2', - }; + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("400000000000000000000"), + "takerAssetAmount": new BigNumber("40000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("1543046400"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), + "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + } const queryParams = new Uri(window.location.search); const renderOptionsDefaults = { liquiditySource: 'https://api.radarrelay.com/0x/v2/', diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index 4767b15d4..ad3aa9582 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -78,6 +78,7 @@ const updateBuyQuoteAsync = async ( try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); } catch (error) { + console.log(error); dispatch(actions.setQuoteRequestStateFailure()); let errorMessage; if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts index e8ccbf011..28a04eb8a 100644 --- a/packages/instant/src/data/asset_data_network_mapping.ts +++ b/packages/instant/src/data/asset_data_network_mapping.ts @@ -12,4 +12,8 @@ export const assetDataNetworkMapping: AssetDataByNetwork[] = [ [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498', [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa', }, + { + [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c', + [Network.Mainnet]: '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6', + }, ]; diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts index 3a820a0c4..4e6e15d38 100644 --- a/packages/instant/src/data/asset_meta_data_map.ts +++ b/packages/instant/src/data/asset_meta_data_map.ts @@ -11,4 +11,10 @@ export const assetMetaDataMap: ObjectMap = { primaryColor: 'rgb(54, 50, 60)', symbol: 'zrx', }, + '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': { + assetProxyId: AssetProxyId.ERC20, + decimals: 18, + primaryColor: '#512D80', + symbol: 'rep', + }, }; -- cgit From 25ca3d4c29ad98b75e256424246a38a72e5a26da Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 29 Oct 2018 12:51:38 -0700 Subject: feat(instant): add default gasPrice of 6 gwei to transactions --- packages/instant/src/components/buy_button.tsx | 5 +++-- packages/instant/src/constants.ts | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 129aedaf3..e65e62e47 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; -import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; +import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; import { ColorOption } from '../style/theme'; import { ZeroExInstantError } from '../types'; import { getBestAddress } from '../util/address'; @@ -57,7 +57,8 @@ export class BuyButton extends React.Component { let txHash: string | undefined; try { - txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { takerAddress }); + const gasPrice = DEFAULT_GAS_PRICE; + txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { gasPrice, takerAddress }); } catch (e) { if (e instanceof Error) { if (e.message === AssetBuyerError.SignatureRequestDenied) { diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index e4281d54a..47cb2eaeb 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -3,3 +3,5 @@ export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; +export const GWEI_IN_WEI = new BigNumber(1000000000); +export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6); -- cgit From ac72df41883af261b8661cb5f52c01567a6aad62 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:30:25 -0700 Subject: chore: remove console log --- packages/instant/src/containers/selected_erc20_asset_amount_input.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts index ad3aa9582..4767b15d4 100644 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts @@ -78,7 +78,6 @@ const updateBuyQuoteAsync = async ( try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue); } catch (error) { - console.log(error); dispatch(actions.setQuoteRequestStateFailure()); let errorMessage; if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { -- cgit From 10e6c3cd906c6625ed0c9ae98d20ef9f32676cbe Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:48:45 -0700 Subject: feat: remove isValidProvided orders validation --- packages/asset-buyer/src/asset_buyer.ts | 1 - packages/asset-buyer/src/utils/assert.ts | 15 --------- packages/instant/public/index.html | 52 +++++++++++++++++++++----------- 3 files changed, 35 insertions(+), 33 deletions(-) diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts index 34e2d9639..ed52f2d9d 100644 --- a/packages/asset-buyer/src/asset_buyer.ts +++ b/packages/asset-buyer/src/asset_buyer.ts @@ -56,7 +56,6 @@ export class AssetBuyer { ): AssetBuyer { assert.isWeb3Provider('provider', provider); assert.doesConformToSchema('orders', orders, schemas.signedOrdersSchema); - assert.areValidProvidedOrders('orders', orders); assert.assert(orders.length !== 0, `Expected orders to contain at least one order`); const orderProvider = new BasicOrderProvider(orders); const assetBuyer = new AssetBuyer(provider, orderProvider, options); diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts index e8cb7f763..7e4eb7175 100644 --- a/packages/asset-buyer/src/utils/assert.ts +++ b/packages/asset-buyer/src/utils/assert.ts @@ -31,21 +31,6 @@ export const assert = { sharedAssert.isHexString(`${variableName}.takerAssetData`, orderFetcherRequest.takerAssetData); sharedAssert.isNumber(`${variableName}.networkId`, orderFetcherRequest.networkId); }, - areValidProvidedOrders(variableName: string, orders: SignedOrder[]): void { - if (orders.length === 0) { - return; - } - const makerAssetData = orders[0].makerAssetData; - const takerAssetData = orders[0].takerAssetData; - const filteredOrders = _.filter( - orders, - order => order.makerAssetData === makerAssetData && order.takerAssetData === takerAssetData, - ); - sharedAssert.assert( - orders.length === filteredOrders.length, - `Expected all orders in ${variableName} to have the same makerAssetData and takerAssetData.`, - ); - }, isValidPercentage(variableName: string, percentage: number): void { assert.isNumber(variableName, percentage); assert.assert( diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 68d6c69c4..dc172e6e4 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -34,22 +34,40 @@ EXPONENTIAL_AT: 1000, DECIMAL_PLACES: 78, }); - const providedOrder = { - "senderAddress": "0x0000000000000000000000000000000000000000", - "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", - "takerAddress": "0x0000000000000000000000000000000000000000", - "makerFee": new BigNumber("0"), - "takerFee": new BigNumber("0"), - "makerAssetAmount": new BigNumber("400000000000000000000"), - "takerAssetAmount": new BigNumber("40000000000000000000"), - "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", - "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", - "expirationTimeSeconds": new BigNumber("1543046400"), - "feeRecipientAddress": "0x0000000000000000000000000000000000000000", - "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), - "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", - "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" - } + const providedOrders = [ + { + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("400000000000000000000"), + "takerAssetAmount": new BigNumber("40000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("1543046400"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("47929252863126413473766089649682650973189811771354566206928245255479607883031"), + "signature": "0x1c0bf8ba709ceb5b32e6b0b5a8bb7f07e9d19aba88d8530715f8a298d12188e3862fcc0a30ddfad4062b30459f2859323c064052f12cc687466c457934b9419a1b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + }, + { + "senderAddress": "0x0000000000000000000000000000000000000000", + "makerAddress": "0x34a745008a643eebc58920eaa29fb1165b4a288e", + "takerAddress": "0x0000000000000000000000000000000000000000", + "makerFee": new BigNumber("0"), + "takerFee": new BigNumber("0"), + "makerAssetAmount": new BigNumber("300000000000000000000"), + "takerAssetAmount": new BigNumber("31000000000000000000"), + "makerAssetData": "0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa", + "takerAssetData": "0xf47261b0000000000000000000000000d0a1e359811322d97991e03f863a0c30c2cf029c", + "expirationTimeSeconds": new BigNumber("2524636800"), + "feeRecipientAddress": "0x0000000000000000000000000000000000000000", + "salt": new BigNumber("64592004666704945574675477805199411288137454783320798602050822322450089238268"), + "signature": "0x1c13cacddca8d7d8248e91f412377e68f8f1f9891a59a6c1b2eea9f7b33558c30c4fb86a448e08ab7def40a28fb3a3062dcb33bb3c45302447fce5c4288b7c7f5b03", + "exchangeAddress": "0x35dd2932454449b14cee11a94d3674a936d5d7b2" + } + ]; const queryParams = new Uri(window.location.search); const renderOptionsDefaults = { liquiditySource: 'https://api.radarrelay.com/0x/v2/', @@ -57,7 +75,7 @@ } const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource'); const renderOptionsOverrides = { - liquiditySource: liquiditySourceOverride === 'provided' ? [providedOrder] : liquiditySourceOverride, + liquiditySource: liquiditySourceOverride === 'provided' ? providedOrders : liquiditySourceOverride, assetData: queryParams.getQueryParamValue('assetData'), networkId: +queryParams.getQueryParamValue('networkId') || undefined, defaultAssetBuyAmount: +queryParams.getQueryParamValue('defaultAssetBuyAmount') || undefined, -- cgit From 17f024056a56ae1b67a3a674f24460172ae84d27 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 29 Oct 2018 15:50:54 -0700 Subject: chore: add changelog --- packages/asset-buyer/CHANGELOG.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json index 5d6604ea9..ce4effa7e 100644 --- a/packages/asset-buyer/CHANGELOG.json +++ b/packages/asset-buyer/CHANGELOG.json @@ -5,6 +5,10 @@ { "note": "`getAssetBuyerForProvidedOrders` factory function now takes 3 args instead of 4", "pr": 1187 + }, + { + "note": "No longer require that provided orders all have the same maker and taker asset data", + "pr": 1197 } ] }, -- cgit From a918e7099dbd4351150d5d6852cbd57d1b1b3875 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 24 Oct 2018 11:42:31 -0700 Subject: fix(website): prepare website for breaking MetaMask change for eip 1102 --- packages/website/ts/blockchain.ts | 127 ++++++++++++++++++++------------------ packages/website/ts/types.ts | 8 --- 2 files changed, 66 insertions(+), 69 deletions(-) diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 62e16dd1d..b43c41739 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -20,7 +20,7 @@ import { Web3ProviderEngine, } from '@0x/subproviders'; import { SignedOrder, Token as ZeroExToken } from '@0x/types'; -import { BigNumber, intervalUtils, logUtils, promisify } from '@0x/utils'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; @@ -38,9 +38,9 @@ import { BlockchainErrs, ContractInstance, Fill, + InjectedProvider, InjectedProviderObservable, InjectedProviderUpdate, - InjectedWeb3, Providers, ProviderType, Side, @@ -83,6 +83,7 @@ export class Blockchain { private _ledgerSubprovider: LedgerSubprovider; private _defaultGasPrice: BigNumber; private _watchGasPriceIntervalId: NodeJS.Timer; + private _injectedProviderIfExists?: InjectedProvider; private static _getNameGivenProvider(provider: Provider): string { const providerType = utils.getProviderType(provider); const providerNameIfExists = providerToName[providerType]; @@ -91,48 +92,12 @@ export class Blockchain { } return providerNameIfExists; } - private static _getInjectedWeb3(): InjectedWeb3 { - const injectedWeb3IfExists = (window as any).web3; - // Our core assumptions about the injected web3 object is that it has the following - // properties and methods. - if ( - _.isUndefined(injectedWeb3IfExists) || - _.isUndefined(injectedWeb3IfExists.version) || - _.isUndefined(injectedWeb3IfExists.version.getNetwork) || - _.isUndefined(injectedWeb3IfExists.currentProvider) - ) { - return undefined; - } - return injectedWeb3IfExists; - } - private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise { - // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in - // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot - // retrieve it from within the web3Wrapper constructor. This is and should remain the only - // call to a web3 instance outside of web3Wrapper in the entire dapp. - // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing - // Ethereum node, this call will throw. We need to handle this case gracefully - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - let networkIdIfExists: number; - if (!_.isUndefined(injectedWeb3IfExists)) { - try { - networkIdIfExists = _.parseInt( - await promisify( - injectedWeb3IfExists.version.getNetwork.bind(injectedWeb3IfExists.version), - )(), - ); - } catch (err) { - // Ignore error and proceed with networkId undefined - } - } - return networkIdIfExists; - } private static async _getProviderAsync( - injectedWeb3: InjectedWeb3, - networkIdIfExists: number, + injectedProviderIfExists?: InjectedProvider, + networkIdIfExists?: number, shouldUserLedgerProvider: boolean = false, ): Promise<[Provider, LedgerSubprovider | undefined]> { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); const isNetworkIdAvailable = !_.isUndefined(networkIdIfExists); const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists]; const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId); @@ -156,16 +121,16 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, ledgerSubprovider]; - } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { + } else if (doesInjectedProviderExist && isPublicNodeAvailableForNetworkId) { // We catch all requests involving a users account and send it to the injectedWeb3 // instance. All other requests go to the public hosted node. const provider = new Web3ProviderEngine(); - const providerName = this._getNameGivenProvider(injectedWeb3.currentProvider); + const providerName = this._getNameGivenProvider(injectedProviderIfExists); // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies) const signerSubprovider = providerName === constants.PROVIDER_NAME_METAMASK - ? new MetamaskSubprovider(injectedWeb3.currentProvider) - : new SignerSubprovider(injectedWeb3.currentProvider); + ? new MetamaskSubprovider(injectedProviderIfExists) + : new SignerSubprovider(injectedProviderIfExists); provider.addProvider(signerSubprovider); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { @@ -174,9 +139,9 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; - } else if (doesInjectedWeb3Exist) { + } else if (doesInjectedProviderExist) { // Since no public node for this network, all requests go to injectedWeb3 instance - return [injectedWeb3.currentProvider, undefined]; + return [injectedProviderIfExists, undefined]; } else { // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node // We do this so that users can still browse the 0x Portal DApp even if they do not have web3 @@ -261,7 +226,7 @@ export class Blockchain { const shouldUserLedgerProvider = false; this._dispatcher.updateBlockchainIsLoaded(false); // We don't want to be out of sync with the network the injected provider declares. - const networkId = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkId = await this._getInjectedProviderNetworkIdIfExistsAsync(); await this._resetOrInitializeAsync(networkId, shouldPollUserAddress, shouldUserLedgerProvider); } public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise { @@ -611,6 +576,45 @@ export class Blockchain { this._dispatcher.updateBlockchainIsLoaded(true); } + private async _getInjectedProviderIfExistsAsync(): Promise { + if (!_.isUndefined(this._injectedProviderIfExists)) { + return this._injectedProviderIfExists; + } + let injectedProviderIfExists = (window as any).ethereum; + if (!_.isUndefined(injectedProviderIfExists)) { + if (!_.isUndefined(injectedProviderIfExists.enable)) { + try { + await injectedProviderIfExists.enable(); + } catch (err) { + errorReporter.report(err); + } + } + } else { + const injectedWeb3IfExists = (window as any).web3; + if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + injectedProviderIfExists = injectedWeb3IfExists.currentProvider; + } else { + return undefined; + } + } + this._injectedProviderIfExists = injectedProviderIfExists; + return injectedProviderIfExists; + } + private async _getInjectedProviderNetworkIdIfExistsAsync(): Promise { + // If the user has an injectedWeb3 instance that is disconnected from a backing + // Ethereum node, this call will throw. We need to handle this case gracefully + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + let networkIdIfExists: number; + if (!_.isUndefined(injectedProviderIfExists)) { + try { + const injectedWeb3Wrapper = new Web3Wrapper(injectedProviderIfExists); + networkIdIfExists = await injectedWeb3Wrapper.getNetworkIdAsync(); + } catch (err) { + // Ignore error and proceed with networkId undefined + } + } + return networkIdIfExists; + } private async _showEtherScanLinkAndAwaitTransactionMinedAsync( txHash: string, ): Promise { @@ -804,17 +808,17 @@ export class Blockchain { } private async _onPageLoadInitFireAndForgetAsync(): Promise { await utils.onPageLoadPromise; // wait for page to load - const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkIdIfExists = await this._getInjectedProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { - const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + if (!_.isUndefined(injectedProviderIfExists)) { + const injectedProviderObservable = injectedProviderIfExists.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { this._injectedProviderObservable = injectedProviderObservable; this._injectedProviderObservable.subscribe(this._injectedProviderUpdateHandler); } } - this._updateProviderName(injectedWeb3IfExists); + this._updateProviderName(injectedProviderIfExists); const shouldPollUserAddress = true; const shouldUseLedgerProvider = false; this._startWatchingGasPrice(); @@ -851,12 +855,14 @@ export class Blockchain { } this._dispatcher.updateUserWeiBalance(undefined); this.networkId = networkId; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); const [provider, ledgerSubproviderIfExists] = await Blockchain._getProviderAsync( - injectedWeb3IfExists, + injectedProviderIfExists, networkId, shouldUserLedgerProvider, ); + this._web3Wrapper = new Web3Wrapper(provider); + this.networkId = await this._web3Wrapper.getNetworkIdAsync(); if (!_.isUndefined(this._contractWrappers)) { this._contractWrappers.unsubscribeAll(); } @@ -867,7 +873,6 @@ export class Blockchain { if (!_.isUndefined(this._blockchainWatcher)) { this._blockchainWatcher.destroy(); } - this._web3Wrapper = new Web3Wrapper(provider); this._blockchainWatcher = new BlockchainWatcher(this._dispatcher, this._web3Wrapper, shouldPollUserAddress); if (shouldUserLedgerProvider && !_.isUndefined(ledgerSubproviderIfExists)) { delete this._userAddressIfExists; @@ -879,7 +884,7 @@ export class Blockchain { const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync(); this._userAddressIfExists = userAddresses[0]; this._dispatcher.updateUserAddress(this._userAddressIfExists); - if (!_.isUndefined(injectedWeb3IfExists)) { + if (!_.isUndefined(injectedProviderIfExists)) { this._dispatcher.updateProviderType(ProviderType.Injected); } await this.fetchTokenInformationAsync(); @@ -888,10 +893,10 @@ export class Blockchain { this._dispatcher.updateNetworkId(networkId); await this._rehydrateStoreWithContractEventsAsync(); } - private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists); - const providerName = doesInjectedWeb3Exist - ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider) + private _updateProviderName(injectedProviderIfExists?: InjectedProvider): void { + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); + const providerName = doesInjectedProviderExist + ? Blockchain._getNameGivenProvider(injectedProviderIfExists) : constants.PROVIDER_NAME_PUBLIC; this._dispatcher.updateInjectedProviderName(providerName); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 22bfd2cb4..ce4b50a58 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -616,14 +616,6 @@ export interface InjectedProvider extends Provider { publicConfigStore?: InjectedProviderObservable; } -// Minimal expected interface for an injected web3 object -export interface InjectedWeb3 { - currentProvider: InjectedProvider; - version: { - getNetwork(cd: (err: Error, networkId: string) => void): void; - }; -} - export interface TutorialInfo { iconUrl: string; description: string; -- cgit From 59ad2b75c107071d9543f70ffd60fe651134c742 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 13:29:20 -0700 Subject: chore: remove unused import --- packages/asset-buyer/src/utils/assert.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts index 7e4eb7175..0f39fb4a5 100644 --- a/packages/asset-buyer/src/utils/assert.ts +++ b/packages/asset-buyer/src/utils/assert.ts @@ -1,6 +1,5 @@ import { assert as sharedAssert } from '@0x/assert'; import { schemas } from '@0x/json-schemas'; -import { SignedOrder } from '@0x/types'; import * as _ from 'lodash'; import { BuyQuote, BuyQuoteInfo, OrderProvider, OrderProviderRequest } from '../types'; -- cgit From c1ad1d203dcb9041e15bfb4f0d5fa9ab60ed9486 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 14:15:03 -0700 Subject: chore: remove unused import --- packages/instant/src/components/buy_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 58575b1b3..93bd8e635 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -2,7 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; -import { DEFAULT_GAS_PRICE, WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; +import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; import { ColorOption } from '../style/theme'; import { ZeroExInstantError } from '../types'; import { getBestAddress } from '../util/address'; -- cgit From c2645b26b457c66b3adcb98a5c089eba3e72f458 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 31 Oct 2018 15:09:12 -0700 Subject: feat(instant): add interactive overlay presentation to umd bundle --- packages/instant/public/index.html | 1 + packages/instant/src/components/ui/button.tsx | 20 +++- packages/instant/src/components/ui/icon.tsx | 8 ++ packages/instant/src/components/ui/index.ts | 5 +- packages/instant/src/components/ui/overlay.tsx | 49 +++++++++ .../instant/src/components/zero_ex_instant.tsx | 115 ++------------------- .../src/components/zero_ex_instant_overlay.tsx | 21 ++++ .../src/components/zero_ex_instant_provider.tsx | 108 +++++++++++++++++++ packages/instant/src/constants.ts | 1 + packages/instant/src/index.ts | 1 + packages/instant/src/index.umd.ts | 39 +++++-- packages/instant/src/style/theme.ts | 3 + 12 files changed, 251 insertions(+), 120 deletions(-) create mode 100644 packages/instant/src/components/ui/overlay.tsx create mode 100644 packages/instant/src/components/zero_ex_instant_overlay.tsx create mode 100644 packages/instant/src/components/zero_ex_instant_provider.tsx diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 62532dad9..7580ab132 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -74,6 +74,7 @@ const renderOptionsDefaults = { liquiditySource: 'https://api.radarrelay.com/0x/v2/', assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498', + onClose: () => { console.log('0x Instant Closed') } } const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource'); const renderOptionsOverrides = { diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 5274d835b..0051482e7 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -3,6 +3,11 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; +export enum ButtonHoverStyle { + Darken = 0, + Opacity, +} + export interface ButtonProps { backgroundColor?: ColorOption; borderColor?: ColorOption; @@ -12,6 +17,7 @@ export interface ButtonProps { isDisabled?: boolean; onClick?: (event: React.MouseEvent) => void; className?: string; + hoverStyle?: ButtonHoverStyle; } const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( @@ -32,30 +38,38 @@ export const Button = styled(PlainButton)` width: ${props => props.width}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)}; &:hover { background-color: ${props => - !props.isDisabled + shouldDarken(props) ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) : ''} !important; + opacity: 1; } &:active { background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; + opacity: 1; } &:disabled { - opacity: 0.5; + opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)}; } &:focus { background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; } `; +const shouldDarken = (props: ButtonProps) => { + return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken; +}; + Button.defaultProps = { backgroundColor: ColorOption.primaryColor, borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '1em 2.2em', + hoverStyle: ButtonHoverStyle.Darken, }; Button.displayName = 'Button'; diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index 61b382760..a05017ba1 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -13,11 +13,19 @@ interface IconInfo { strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit'; } interface IconInfoMapping { + closeX: IconInfo; failed: IconInfo; success: IconInfo; chevron: IconInfo; } const ICONS: IconInfoMapping = { + closeX: { + viewBox: '0 0 11 11', + fillRule: 'evenodd', + clipRule: 'evenodd', + path: + 'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z', + }, failed: { viewBox: '0 0 34 34', fillRule: 'evenodd', diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index 28f76c262..c60b9640e 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -1,7 +1,8 @@ -export { Text, Title } from './text'; -export { Button, ButtonProps } from './button'; +export { Text, TextProps, Title } from './text'; +export { Button, ButtonProps, ButtonHoverStyle } from './button'; export { Flex, FlexProps } from './flex'; export { Container, ContainerProps } from './container'; export { Input, InputProps } from './input'; export { Icon, IconProps } from './icon'; export { Spinner, SpinnerProps } from './spinner'; +export { Overlay, OverlayProps } from './overlay'; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx new file mode 100644 index 000000000..94fa10fc5 --- /dev/null +++ b/packages/instant/src/components/ui/overlay.tsx @@ -0,0 +1,49 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption, overlayBlack, styled } from '../../style/theme'; +import { util } from '../../util/util'; + +import { Button, ButtonHoverStyle } from './button'; +import { Container } from './container'; +import { Flex } from './flex'; +import { Icon } from './icon'; + +export interface OverlayProps { + className?: string; + onClose?: () => void; + zIndex?: number; +} + +const PlainOverlay: React.StatelessComponent = ({ children, className, onClose }) => ( + + + + +
{children}
+ +); +export const Overlay = styled(PlainOverlay)` + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: ${props => props.zIndex} + background-color: ${overlayBlack}; +`; + +Overlay.defaultProps = { + onClose: util.boundNoop, + zIndex: 100, +}; + +Overlay.displayName = 'Overlay'; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index d54dfc153..907c42e7a 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -1,111 +1,14 @@ -import { AssetBuyer } from '@0x/asset-buyer'; -import { ObjectMap, SignedOrder } from '@0x/types'; -import * as _ from 'lodash'; import * as React from 'react'; -import { Provider } from 'react-redux'; - -import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; -import { asyncData } from '../redux/async_data'; -import { INITIAL_STATE, State } from '../redux/reducer'; -import { store, Store } from '../redux/store'; -import { fonts } from '../style/fonts'; -import { AssetMetaData, Network } from '../types'; -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 { ZeroExInstantContainer } from './zero_ex_instant_container'; +import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; -fonts.include(); - -export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial; - -export interface ZeroExInstantRequiredProps { - // TODO: Change API when we allow the selection of different assetDatas - assetData: string; - liquiditySource: string | SignedOrder[]; -} - -export interface ZeroExInstantOptionalProps { - defaultAssetBuyAmount?: number; - additionalAssetMetaDataMap: ObjectMap; - networkId: Network; -} - -export class ZeroExInstant extends React.Component { - private readonly _store: Store; - private static _mergeInitialStateWithProps(props: ZeroExInstantProps, 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(); - const assetBuyerOptions = { - networkId, - }; - let assetBuyer; - if (_.isString(props.liquiditySource)) { - assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl( - provider, - props.liquiditySource, - assetBuyerOptions, - ); - } else { - assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions); - } - const completeAssetMetaDataMap = { - ...props.additionalAssetMetaDataMap, - ...state.assetMetaDataMap, - }; - const storeStateFromProps: State = { - ...state, - assetBuyer, - network: networkId, - selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId), - selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount) - ? state.selectedAssetAmount - : new BigNumberInput(props.defaultAssetBuyAmount), - assetMetaDataMap: completeAssetMetaDataMap, - }; - return storeStateFromProps; - } - constructor(props: ZeroExInstantProps) { - super(props); - const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE); - this._store = store.create(initialAppState); - } - - public componentDidMount(): void { - // tslint:disable-next-line:no-floating-promises - asyncData.fetchAndDispatchToStore(this._store); - - // 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 - gasPriceEstimator.getFastAmountInWeiAsync(); - - // tslint:disable-next-line:no-floating-promises - this._flashErrorIfWrongNetwork(); - } - - public render(): React.ReactNode { - return ( - - - - - - ); - } +export type ZeroExInstantProps = ZeroExInstantProviderProps; - private readonly _flashErrorIfWrongNetwork = async (): Promise => { - 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); - } - }; -} +export const ZeroExInstant: React.StatelessComponent = props => { + return ( + + + + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx new file mode 100644 index 000000000..8f872f896 --- /dev/null +++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; + +import { Overlay } from './ui'; +import { ZeroExInstantContainer } from './zero_ex_instant_container'; +import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; + +export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps { + onClose?: () => void; + zIndex?: number; +} + +export const ZeroExInstantOverlay: React.StatelessComponent = props => { + const { onClose, zIndex, ...rest } = props; + return ( + + + + + + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx new file mode 100644 index 000000000..8c1025723 --- /dev/null +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -0,0 +1,108 @@ +import { AssetBuyer } from '@0x/asset-buyer'; +import { ObjectMap, SignedOrder } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Provider } from 'react-redux'; + +import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; +import { asyncData } from '../redux/async_data'; +import { INITIAL_STATE, State } from '../redux/reducer'; +import { store, Store } from '../redux/store'; +import { fonts } from '../style/fonts'; +import { AssetMetaData, Network } from '../types'; +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'; + +fonts.include(); + +export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps & + Partial; + +export interface ZeroExInstantProviderRequiredProps { + // TODO: Change API when we allow the selection of different assetDatas + assetData: string; + liquiditySource: string | SignedOrder[]; +} + +export interface ZeroExInstantProviderOptionalProps { + defaultAssetBuyAmount?: number; + additionalAssetMetaDataMap: ObjectMap; + networkId: Network; +} + +export class ZeroExInstantProvider extends React.Component { + 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(); + const assetBuyerOptions = { + networkId, + }; + let assetBuyer; + if (_.isString(props.liquiditySource)) { + assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl( + provider, + props.liquiditySource, + assetBuyerOptions, + ); + } else { + assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions); + } + const completeAssetMetaDataMap = { + ...props.additionalAssetMetaDataMap, + ...state.assetMetaDataMap, + }; + const storeStateFromProps: State = { + ...state, + assetBuyer, + network: networkId, + selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId), + selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount) + ? state.selectedAssetAmount + : new BigNumberInput(props.defaultAssetBuyAmount), + assetMetaDataMap: completeAssetMetaDataMap, + }; + return storeStateFromProps; + } + constructor(props: ZeroExInstantProviderProps) { + super(props); + const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE); + this._store = store.create(initialAppState); + } + + public componentDidMount(): void { + // tslint:disable-next-line:no-floating-promises + asyncData.fetchAndDispatchToStore(this._store); + + // 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 + gasPriceEstimator.getFastAmountInWeiAsync(); + + // tslint:disable-next-line:no-floating-promises + this._flashErrorIfWrongNetwork(); + } + + public render(): React.ReactNode { + return ( + + {this.props.children} + + ); + } + + private readonly _flashErrorIfWrongNetwork = async (): Promise => { + 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); + } + }; +} diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 424f35ecb..3e830ba00 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; +export const INJECTED_DIV_ID = 'zeroExInstant'; export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; export const GWEI_IN_WEI = new BigNumber(1000000000); export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6); diff --git a/packages/instant/src/index.ts b/packages/instant/src/index.ts index 54059cdad..6e611dae8 100644 --- a/packages/instant/src/index.ts +++ b/packages/instant/src/index.ts @@ -1 +1,2 @@ export { ZeroExInstant, ZeroExInstantProps } from './components/zero_ex_instant'; +export { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './components/zero_ex_instant_overlay'; diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts index dabd45cae..b12e65485 100644 --- a/packages/instant/src/index.umd.ts +++ b/packages/instant/src/index.umd.ts @@ -2,21 +2,42 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants'; -import { ZeroExInstant, ZeroExInstantProps } from './index'; +import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants'; +import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index'; import { assert } from './util/assert'; -export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => { - assert.isHexString('assetData', props.assetData); - assert.isValidLiquiditySource('liquiditySource', props.liquiditySource); +export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => { + assert.isHexString('props.assetData', props.assetData); + assert.isValidLiquiditySource('props.liquiditySource', props.liquiditySource); if (!_.isUndefined(props.additionalAssetMetaDataMap)) { - assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap); + assert.isValidAssetMetaDataMap('props.additionalAssetMetaDataMap', props.additionalAssetMetaDataMap); } if (!_.isUndefined(props.defaultAssetBuyAmount)) { - assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount); + assert.isNumber('props.defaultAssetBuyAmount', props.defaultAssetBuyAmount); } if (!_.isUndefined(props.networkId)) { - assert.isNumber('networkId', props.networkId); + assert.isNumber('props.networkId', props.networkId); } - ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector)); + if (!_.isUndefined(props.onClose)) { + assert.isFunction('props.onClose', props.onClose); + } + if (!_.isUndefined(props.zIndex)) { + assert.isNumber('props.zIndex', props.zIndex); + } + const appendToIfExists = document.querySelector(selector); + assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`); + const appendTo = appendToIfExists as Element; + const injectedDiv = document.createElement('div'); + injectedDiv.setAttribute('id', INJECTED_DIV_ID); + appendTo.appendChild(injectedDiv); + const instantOverlayProps = { + ...props, + onClose: () => { + appendTo.removeChild(injectedDiv); + if (!_.isUndefined(props.onClose)) { + props.onClose(); + } + }, + }; + ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv); }; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 6575ff9f4..c7cb0bebe 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -14,6 +14,7 @@ export enum ColorOption { white = 'white', lightOrange = 'lightOrange', darkOrange = 'darkOrange', + clear = 'clear', } export const theme: Theme = { @@ -26,8 +27,10 @@ export const theme: Theme = { white: 'white', lightOrange: '#F9F2ED', darkOrange: '#F2994C', + clear: 'rgba(0, 0, 0, 0.0)', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; +export const overlayBlack = 'rgba(0, 0, 0, 0.6)'; export { styled, css, keyframes, ThemeProvider }; -- cgit From c50c4a4669d881000bb74de9a33684319ff740b9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 1 Nov 2018 15:11:03 -0700 Subject: fix: make maxPerPage for the SRA getAvailableMakerAssetDatasAsync call a local var --- packages/asset-buyer/src/constants.ts | 1 - .../src/order_providers/standard_relayer_api_order_provider.ts | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts index b2f025bdb..cc415102c 100644 --- a/packages/asset-buyer/src/constants.ts +++ b/packages/asset-buyer/src/constants.ts @@ -36,6 +36,5 @@ export const constants = { DEFAULT_ASSET_BUYER_OPTS, DEFAULT_BUY_QUOTE_EXECUTION_OPTS, DEFAULT_BUY_QUOTE_REQUEST_OPTS, - MAX_PER_PAGE: 1000, EMPTY_ORDERS_AND_FILLABLE_AMOUNTS, }; diff --git a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts index c6adcfc4a..be1fc55d6 100644 --- a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts +++ b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts @@ -2,7 +2,6 @@ import { HttpClient } from '@0x/connect'; import { APIOrder, AssetPairsResponse, OrderbookResponse } from '@0x/types'; import * as _ from 'lodash'; -import { constants } from '../constants'; import { AssetBuyerError, OrderProvider, @@ -87,7 +86,9 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider { * @return An array of asset data strings that can be purchased using takerAssetData. */ public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise { - const requestOpts = { networkId: this.networkId, perPage: constants.MAX_PER_PAGE }; + // Return a maximum of 1000 asset datas + const maxPerPage = 1000; + const requestOpts = { networkId: this.networkId, perPage: maxPerPage }; const assetPairsRequest = { assetDataA: takerAssetData }; const fullRequest = { ...requestOpts, -- cgit From d16499da4e0611438df7bfe226bce940beca6918 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 1 Nov 2018 15:23:42 -0700 Subject: Remove alternate hover styling from button and move into icon component --- packages/instant/src/components/ui/button.tsx | 20 ++------ packages/instant/src/components/ui/icon.tsx | 69 ++++++++++++++++++-------- packages/instant/src/components/ui/index.ts | 2 +- packages/instant/src/components/ui/overlay.tsx | 15 +----- packages/instant/src/style/theme.ts | 2 - 5 files changed, 54 insertions(+), 54 deletions(-) diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 0051482e7..5274d835b 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -3,11 +3,6 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; -export enum ButtonHoverStyle { - Darken = 0, - Opacity, -} - export interface ButtonProps { backgroundColor?: ColorOption; borderColor?: ColorOption; @@ -17,7 +12,6 @@ export interface ButtonProps { isDisabled?: boolean; onClick?: (event: React.MouseEvent) => void; className?: string; - hoverStyle?: ButtonHoverStyle; } const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( @@ -38,38 +32,30 @@ export const Button = styled(PlainButton)` width: ${props => props.width}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; - opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)}; &:hover { background-color: ${props => - shouldDarken(props) + !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) : ''} !important; - opacity: 1; } &:active { background-color: ${props => - shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; - opacity: 1; + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; } &:disabled { - opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)}; + opacity: 0.5; } &:focus { background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; } `; -const shouldDarken = (props: ButtonProps) => { - return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken; -}; - Button.defaultProps = { backgroundColor: ColorOption.primaryColor, borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '1em 2.2em', - hoverStyle: ButtonHoverStyle.Darken, }; Button.displayName = 'Button'; diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index a05017ba1..f12059cff 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -1,5 +1,8 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import { styled } from '../../style/theme'; + type svgRule = 'evenodd' | 'nonzero' | 'inherit'; interface IconInfo { viewBox: string; @@ -52,33 +55,57 @@ const ICONS: IconInfoMapping = { }; export interface IconProps { + className?: string; width: number; height?: number; color?: string; icon: keyof IconInfoMapping; + onClick?: (event: React.MouseEvent) => void; + padding?: string; } -export const Icon: React.SFC = props => { +const PlainIcon: React.SFC = props => { const iconInfo = ICONS[props.icon]; - return ( - - - +
+ + + +
); }; + +export const Icon = styled(PlainIcon)` + cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')}; + transition: opacity 0.5s ease; + padding: ${props => props.padding}; + opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)}; + &:hover { + opacity: 1; + } + &:active { + opacity: 1; + } +`; + +Icon.defaultProps = { + color: 'white', + padding: '0em 0em', +}; + +Icon.displayName = 'Icon'; diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index c60b9640e..0efabdb85 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -1,5 +1,5 @@ export { Text, TextProps, Title } from './text'; -export { Button, ButtonProps, ButtonHoverStyle } from './button'; +export { Button, ButtonProps } from './button'; export { Flex, FlexProps } from './flex'; export { Container, ContainerProps } from './container'; export { Input, InputProps } from './input'; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx index 94fa10fc5..c5258b031 100644 --- a/packages/instant/src/components/ui/overlay.tsx +++ b/packages/instant/src/components/ui/overlay.tsx @@ -1,10 +1,8 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { ColorOption, overlayBlack, styled } from '../../style/theme'; -import { util } from '../../util/util'; +import { overlayBlack, styled } from '../../style/theme'; -import { Button, ButtonHoverStyle } from './button'; import { Container } from './container'; import { Flex } from './flex'; import { Icon } from './icon'; @@ -18,15 +16,7 @@ export interface OverlayProps { const PlainOverlay: React.StatelessComponent = ({ children, className, onClose }) => ( - +
{children}
 @@ -42,7 +32,6 @@ export const Overlay = styled(PlainOverlay)` `; Overlay.defaultProps = { - onClose: util.boundNoop, zIndex: 100, }; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index c7cb0bebe..e81694620 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -14,7 +14,6 @@ export enum ColorOption { white = 'white', lightOrange = 'lightOrange', darkOrange = 'darkOrange', - clear = 'clear', } export const theme: Theme = { @@ -27,7 +26,6 @@ export const theme: Theme = { white: 'white', lightOrange: '#F9F2ED', darkOrange: '#F2994C', - clear: 'rgba(0, 0, 0, 0.0)', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; -- cgit