diff options
29 files changed, 391 insertions, 116 deletions
@@ -94,6 +94,10 @@ We strongly recommend that the community help us make improvements and determine Make sure you are using Yarn v1.9.4. To install using brew: +```bash +brew install yarn@1.9.4 +``` + Then install dependencies ```bash diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts index 2f9a3108e..74f3cb471 100644 --- a/packages/asset-buyer/src/asset_buyer.ts +++ b/packages/asset-buyer/src/asset_buyer.ts @@ -135,9 +135,14 @@ export class AssetBuyer { assert.isBoolean('shouldForceOrderRefresh', shouldForceOrderRefresh); assert.isNumber('slippagePercentage', slippagePercentage); const zrxTokenAssetData = this._getZrxTokenAssetDataOrThrow(); + const isMakerAssetZrxToken = assetData === zrxTokenAssetData; + // get the relevant orders for the makerAsset and fees + // if the requested assetData is ZRX, don't get the fee info const [ordersAndFillableAmounts, feeOrdersAndFillableAmounts] = await Promise.all([ this._getOrdersAndFillableAmountsAsync(assetData, shouldForceOrderRefresh), - this._getOrdersAndFillableAmountsAsync(zrxTokenAssetData, shouldForceOrderRefresh), + isMakerAssetZrxToken + ? Promise.resolve(constants.EMPTY_ORDERS_AND_FILLABLE_AMOUNTS) + : this._getOrdersAndFillableAmountsAsync(zrxTokenAssetData, shouldForceOrderRefresh), shouldForceOrderRefresh, ]); if (ordersAndFillableAmounts.orders.length === 0) { @@ -149,6 +154,7 @@ export class AssetBuyer { assetBuyAmount, feePercentage, slippagePercentage, + isMakerAssetZrxToken, ); return buyQuote; } diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts index 55effdb23..c912253bd 100644 --- a/packages/asset-buyer/src/constants.ts +++ b/packages/asset-buyer/src/constants.ts @@ -1,6 +1,7 @@ +import { SignedOrder } from '@0x/types'; import { BigNumber } from '@0x/utils'; -import { AssetBuyerOpts, BuyQuoteExecutionOpts, BuyQuoteRequestOpts } from './types'; +import { AssetBuyerOpts, BuyQuoteExecutionOpts, BuyQuoteRequestOpts, OrdersAndFillableAmounts } from './types'; const NULL_ADDRESS = '0x0000000000000000000000000000000000000000'; const MAINNET_NETWORK_ID = 1; @@ -22,6 +23,11 @@ const DEFAULT_BUY_QUOTE_EXECUTION_OPTS: BuyQuoteExecutionOpts = { feeRecipient: NULL_ADDRESS, }; +const EMPTY_ORDERS_AND_FILLABLE_AMOUNTS: OrdersAndFillableAmounts = { + orders: [] as SignedOrder[], + remainingFillableMakerAssetAmounts: [] as BigNumber[], +}; + export const constants = { ZERO_AMOUNT: new BigNumber(0), NULL_ADDRESS, @@ -31,4 +37,5 @@ export const constants = { DEFAULT_BUY_QUOTE_EXECUTION_OPTS, DEFAULT_BUY_QUOTE_REQUEST_OPTS, MAX_PER_PAGE: 10000, + 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 91682b089..41fd1fb30 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 @@ -30,7 +30,7 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider { 'remainingTakerAssetAmount', order.takerAssetAmount, ); - const remainingFillableMakerAssetAmount = orderUtils.calculateRemainingMakerAssetAmount( + const remainingFillableMakerAssetAmount = orderUtils.getRemainingMakerAmount( order, remainingFillableTakerAssetAmount, ); diff --git a/packages/asset-buyer/src/utils/buy_quote_calculator.ts b/packages/asset-buyer/src/utils/buy_quote_calculator.ts index b0cb4a547..f94ab3fa4 100644 --- a/packages/asset-buyer/src/utils/buy_quote_calculator.ts +++ b/packages/asset-buyer/src/utils/buy_quote_calculator.ts @@ -1,10 +1,12 @@ -import { marketUtils, rateUtils } from '@0x/order-utils'; +import { marketUtils, SignedOrder } from '@0x/order-utils'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { constants } from '../constants'; import { AssetBuyerError, BuyQuote, BuyQuoteInfo, OrdersAndFillableAmounts } from '../types'; +import { orderUtils } from './order_utils'; + // Calculates a buy quote for orders that have WETH as the takerAsset export const buyQuoteCalculator = { calculate( @@ -13,6 +15,7 @@ export const buyQuoteCalculator = { assetBuyAmount: BigNumber, feePercentage: number, slippagePercentage: number, + isMakerAssetZrxToken: boolean, ): BuyQuote { const orders = ordersAndFillableAmounts.orders; const remainingFillableMakerAssetAmounts = ordersAndFillableAmounts.remainingFillableMakerAssetAmounts; @@ -32,22 +35,31 @@ export const buyQuoteCalculator = { if (remainingFillAmount.gt(constants.ZERO_AMOUNT)) { throw new Error(AssetBuyerError.InsufficientAssetLiquidity); } + // if we are not buying ZRX: // given the orders calculated above, find the fee-orders that cover the desired assetBuyAmount (with slippage) // TODO(bmillman): optimization // update this logic to find the minimum amount of feeOrders to cover the worst case as opposed to // finding order that cover all fees, this will help with estimating ETH and minimizing gas usage - const { - resultFeeOrders, - remainingFeeAmount, - feeOrdersRemainingFillableMakerAssetAmounts, - } = marketUtils.findFeeOrdersThatCoverFeesForTargetOrders(resultOrders, feeOrders, { - remainingFillableMakerAssetAmounts: ordersRemainingFillableMakerAssetAmounts, - remainingFillableFeeAmounts, - }); - // if we do not have enough feeOrders to cover the fees, throw - if (remainingFeeAmount.gt(constants.ZERO_AMOUNT)) { - throw new Error(AssetBuyerError.InsufficientZrxLiquidity); + let resultFeeOrders = [] as SignedOrder[]; + let feeOrdersRemainingFillableMakerAssetAmounts = [] as BigNumber[]; + if (!isMakerAssetZrxToken) { + const feeOrdersAndRemainingFeeAmount = marketUtils.findFeeOrdersThatCoverFeesForTargetOrders( + resultOrders, + feeOrders, + { + remainingFillableMakerAssetAmounts: ordersRemainingFillableMakerAssetAmounts, + remainingFillableFeeAmounts, + }, + ); + // if we do not have enough feeOrders to cover the fees, throw + if (feeOrdersAndRemainingFeeAmount.remainingFeeAmount.gt(constants.ZERO_AMOUNT)) { + throw new Error(AssetBuyerError.InsufficientZrxLiquidity); + } + resultFeeOrders = feeOrdersAndRemainingFeeAmount.resultFeeOrders; + feeOrdersRemainingFillableMakerAssetAmounts = + feeOrdersAndRemainingFeeAmount.feeOrdersRemainingFillableMakerAssetAmounts; } + // assetData information for the result const assetData = orders[0].makerAssetData; // compile the resulting trimmed set of orders for makerAsset and feeOrders that are needed for assetBuyAmount @@ -64,6 +76,7 @@ export const buyQuoteCalculator = { trimmedFeeOrdersAndFillableAmounts, assetBuyAmount, feePercentage, + isMakerAssetZrxToken, ); // in order to calculate the maxRate, reverse the ordersAndFillableAmounts such that they are sorted from worst rate to best rate const worstCaseQuoteInfo = calculateQuoteInfo( @@ -71,6 +84,7 @@ export const buyQuoteCalculator = { reverseOrdersAndFillableAmounts(trimmedFeeOrdersAndFillableAmounts), assetBuyAmount, feePercentage, + isMakerAssetZrxToken, ); return { assetData, @@ -89,22 +103,30 @@ function calculateQuoteInfo( feeOrdersAndFillableAmounts: OrdersAndFillableAmounts, assetBuyAmount: BigNumber, feePercentage: number, + isMakerAssetZrxToken: boolean, ): BuyQuoteInfo { // find the total eth and zrx needed to buy assetAmount from the resultOrders from left to right - const [ethAmountToBuyAsset, zrxAmountToBuyAsset] = findEthAndZrxAmountNeededToBuyAsset( - ordersAndFillableAmounts, - assetBuyAmount, - ); - // find the total eth needed to buy fees - const ethAmountToBuyFees = findEthAmountNeededToBuyFees(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset); - const affiliateFeeEthAmount = ethAmountToBuyAsset.mul(feePercentage); - const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyFees); - const totalEthAmount = totalEthAmountWithoutAffiliateFee.plus(affiliateFeeEthAmount); + let ethAmountToBuyAsset = constants.ZERO_AMOUNT; + let ethAmountToBuyZrx = constants.ZERO_AMOUNT; + if (isMakerAssetZrxToken) { + ethAmountToBuyAsset = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount); + } else { + // find eth and zrx amounts needed to buy + const ethAndZrxAmountToBuyAsset = findEthAndZrxAmountNeededToBuyAsset(ordersAndFillableAmounts, assetBuyAmount); + ethAmountToBuyAsset = ethAndZrxAmountToBuyAsset[0]; + const zrxAmountToBuyAsset = ethAndZrxAmountToBuyAsset[1]; + // find eth amount needed to buy zrx + ethAmountToBuyZrx = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset); + } + /// find the eth amount needed to buy the affiliate fee + const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage); + const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyZrx); + const ethAmountTotal = totalEthAmountWithoutAffiliateFee.plus(ethAmountToBuyAffiliateFee); // divide into the assetBuyAmount in order to find rate of makerAsset / WETH const ethPerAssetPrice = totalEthAmountWithoutAffiliateFee.div(assetBuyAmount); return { - totalEthAmount, - feeEthAmount: affiliateFeeEthAmount, + totalEthAmount: ethAmountTotal, + feeEthAmount: ethAmountToBuyAffiliateFee, ethPerAssetPrice, }; } @@ -119,29 +141,38 @@ function reverseOrdersAndFillableAmounts(ordersAndFillableAmounts: OrdersAndFill }; } -function findEthAmountNeededToBuyFees( +function findEthAmountNeededToBuyZrx( feeOrdersAndFillableAmounts: OrdersAndFillableAmounts, - feeAmount: BigNumber, + zrxBuyAmount: BigNumber, ): BigNumber { const { orders, remainingFillableMakerAssetAmounts } = feeOrdersAndFillableAmounts; const result = _.reduce( orders, (acc, order, index) => { + const { totalEthAmount, remainingZrxBuyAmount } = acc; const remainingFillableMakerAssetAmount = remainingFillableMakerAssetAmounts[index]; - const amountToFill = BigNumber.min(acc.remainingFeeAmount, remainingFillableMakerAssetAmount); - const feeAdjustedRate = rateUtils.getFeeAdjustedRateOfFeeOrder(order); - const ethAmountForThisOrder = feeAdjustedRate.mul(amountToFill); + const makerFillAmount = BigNumber.min(remainingZrxBuyAmount, remainingFillableMakerAssetAmount); + const [takerFillAmount, adjustedMakerFillAmount] = orderUtils.getTakerFillAmountForFeeOrder( + order, + makerFillAmount, + ); + const extraFeeAmount = remainingFillableMakerAssetAmount.greaterThanOrEqualTo(adjustedMakerFillAmount) + ? constants.ZERO_AMOUNT + : adjustedMakerFillAmount.sub(makerFillAmount); return { - ethAmount: acc.ethAmount.plus(ethAmountForThisOrder), - remainingFeeAmount: BigNumber.max(constants.ZERO_AMOUNT, acc.remainingFeeAmount.minus(amountToFill)), + totalEthAmount: totalEthAmount.plus(takerFillAmount), + remainingZrxBuyAmount: BigNumber.max( + constants.ZERO_AMOUNT, + remainingZrxBuyAmount.minus(makerFillAmount).plus(extraFeeAmount), + ), }; }, { - ethAmount: constants.ZERO_AMOUNT, - remainingFeeAmount: feeAmount, + totalEthAmount: constants.ZERO_AMOUNT, + remainingZrxBuyAmount: zrxBuyAmount, }, ); - return result.ethAmount; + return result.totalEthAmount; } function findEthAndZrxAmountNeededToBuyAsset( @@ -152,28 +183,25 @@ function findEthAndZrxAmountNeededToBuyAsset( const result = _.reduce( orders, (acc, order, index) => { + const { totalEthAmount, totalZrxAmount, remainingAssetBuyAmount } = acc; const remainingFillableMakerAssetAmount = remainingFillableMakerAssetAmounts[index]; - const amountToFill = BigNumber.min(acc.remainingAssetBuyAmount, remainingFillableMakerAssetAmount); - // find the amount of eth required to fill amountToFill (amountToFill / makerAssetAmount) * takerAssetAmount - const ethAmountForThisOrder = amountToFill - .mul(order.takerAssetAmount) - .dividedToIntegerBy(order.makerAssetAmount); - // find the amount of zrx required to fill fees for amountToFill (amountToFill / makerAssetAmount) * takerFee - const zrxAmountForThisOrder = amountToFill.mul(order.takerFee).dividedToIntegerBy(order.makerAssetAmount); + const makerFillAmount = BigNumber.min(acc.remainingAssetBuyAmount, remainingFillableMakerAssetAmount); + const takerFillAmount = orderUtils.getTakerFillAmount(order, makerFillAmount); + const takerFeeAmount = orderUtils.getTakerFeeAmount(order, takerFillAmount); return { - ethAmount: acc.ethAmount.plus(ethAmountForThisOrder), - zrxAmount: acc.zrxAmount.plus(zrxAmountForThisOrder), + totalEthAmount: totalEthAmount.plus(takerFillAmount), + totalZrxAmount: totalZrxAmount.plus(takerFeeAmount), remainingAssetBuyAmount: BigNumber.max( constants.ZERO_AMOUNT, - acc.remainingAssetBuyAmount.minus(amountToFill), + remainingAssetBuyAmount.minus(makerFillAmount), ), }; }, { - ethAmount: constants.ZERO_AMOUNT, - zrxAmount: constants.ZERO_AMOUNT, + totalEthAmount: constants.ZERO_AMOUNT, + totalZrxAmount: constants.ZERO_AMOUNT, remainingAssetBuyAmount: assetBuyAmount, }, ); - return [result.ethAmount, result.zrxAmount]; + return [result.totalEthAmount, result.totalZrxAmount]; } diff --git a/packages/asset-buyer/src/utils/order_provider_response_processor.ts b/packages/asset-buyer/src/utils/order_provider_response_processor.ts index 81464d945..28f684f3c 100644 --- a/packages/asset-buyer/src/utils/order_provider_response_processor.ts +++ b/packages/asset-buyer/src/utils/order_provider_response_processor.ts @@ -110,10 +110,7 @@ function getValidOrdersWithRemainingFillableMakerAssetAmountsFromOnChain( traderInfo.makerZrxBalance, ]); const remainingTakerAssetAmount = order.takerAssetAmount.minus(orderInfo.orderTakerAssetFilledAmount); - const remainingMakerAssetAmount = orderUtils.calculateRemainingMakerAssetAmount( - order, - remainingTakerAssetAmount, - ); + const remainingMakerAssetAmount = orderUtils.getRemainingMakerAmount(order, remainingTakerAssetAmount); const remainingFillableCalculator = new RemainingFillableCalculator( order.makerFee, order.makerAssetAmount, diff --git a/packages/asset-buyer/src/utils/order_utils.ts b/packages/asset-buyer/src/utils/order_utils.ts index ff47eb7c5..1cc2cf95f 100644 --- a/packages/asset-buyer/src/utils/order_utils.ts +++ b/packages/asset-buyer/src/utils/order_utils.ts @@ -12,19 +12,63 @@ export const orderUtils = { const currentUnixTimestampSec = new BigNumber(Date.now() / millisecondsInSecond).round(); return order.expirationTimeSeconds.lessThan(currentUnixTimestampSec.plus(secondsFromNow)); }, - calculateRemainingMakerAssetAmount(order: SignedOrder, remainingTakerAssetAmount: BigNumber): BigNumber { - if (remainingTakerAssetAmount.eq(0)) { - return constants.ZERO_AMOUNT; - } - return remainingTakerAssetAmount.times(order.makerAssetAmount).dividedToIntegerBy(order.takerAssetAmount); - }, - calculateRemainingTakerAssetAmount(order: SignedOrder, remainingMakerAssetAmount: BigNumber): BigNumber { - if (remainingMakerAssetAmount.eq(0)) { - return constants.ZERO_AMOUNT; - } - return remainingMakerAssetAmount.times(order.takerAssetAmount).dividedToIntegerBy(order.makerAssetAmount); - }, isOpenOrder(order: SignedOrder): boolean { return order.takerAddress === constants.NULL_ADDRESS; }, + // given a remaining amount of takerAsset, calculate how much makerAsset is available + getRemainingMakerAmount(order: SignedOrder, remainingTakerAmount: BigNumber): BigNumber { + const remainingMakerAmount = remainingTakerAmount + .times(order.makerAssetAmount) + .div(order.takerAssetAmount) + .floor(); + return remainingMakerAmount; + }, + // given a desired amount of makerAsset, calculate how much takerAsset is required to fill that amount + getTakerFillAmount(order: SignedOrder, makerFillAmount: BigNumber): BigNumber { + // Round up because exchange rate favors Maker + const takerFillAmount = makerFillAmount + .mul(order.takerAssetAmount) + .div(order.makerAssetAmount) + .ceil(); + return takerFillAmount; + }, + // given a desired amount of takerAsset to fill, calculate how much fee is required by the taker to fill that amount + getTakerFeeAmount(order: SignedOrder, takerFillAmount: BigNumber): BigNumber { + // Round down because Taker fee rate favors Taker + const takerFeeAmount = takerFillAmount + .mul(order.takerFee) + .div(order.takerAssetAmount) + .floor(); + return takerFeeAmount; + }, + // given a desired amount of takerAsset to fill, calculate how much makerAsset will be filled + getMakerFillAmount(order: SignedOrder, takerFillAmount: BigNumber): BigNumber { + // Round down because exchange rate favors Maker + const makerFillAmount = takerFillAmount + .mul(order.makerAssetAmount) + .div(order.takerAssetAmount) + .floor(); + return makerFillAmount; + }, + // given a desired amount of makerAsset, calculate how much fee is required by the maker to fill that amount + getMakerFeeAmount(order: SignedOrder, makerFillAmount: BigNumber): BigNumber { + // Round down because Maker fee rate favors Maker + const makerFeeAmount = makerFillAmount + .mul(order.makerFee) + .div(order.makerAssetAmount) + .floor(); + return makerFeeAmount; + }, + // given a desired amount of ZRX from a fee order, calculate how much takerAsset is required to fill that amount + // also calculate how much ZRX needs to be bought in order fill the desired amount + takerFee + getTakerFillAmountForFeeOrder(order: SignedOrder, makerFillAmount: BigNumber): [BigNumber, BigNumber] { + // For each unit of TakerAsset we buy (MakerAsset - TakerFee) + const adjustedTakerFillAmount = makerFillAmount + .mul(order.takerAssetAmount) + .div(order.makerAssetAmount.sub(order.takerFee)) + .ceil(); + // The amount that we buy will be greater than makerFillAmount, since we buy some amount for fees. + const adjustedMakerFillAmount = orderUtils.getMakerFillAmount(order, adjustedTakerFillAmount); + return [adjustedTakerFillAmount, adjustedMakerFillAmount]; + }, }; diff --git a/packages/asset-buyer/test/buy_quote_calculator_test.ts b/packages/asset-buyer/test/buy_quote_calculator_test.ts index 0f516a0f7..0ea371982 100644 --- a/packages/asset-buyer/test/buy_quote_calculator_test.ts +++ b/packages/asset-buyer/test/buy_quote_calculator_test.ts @@ -49,9 +49,9 @@ describe('buyQuoteCalculator', () => { remainingFillableMakerAssetAmounts: [smallFeeOrder.makerAssetAmount], }; const largeFeeOrder = orderFactory.createSignedOrderFromPartial({ - makerAssetAmount: new BigNumber(110), + makerAssetAmount: new BigNumber(113), takerAssetAmount: new BigNumber(200), - takerFee: new BigNumber(10), + takerFee: new BigNumber(11), }); allFeeOrdersAndFillableAmounts = { orders: [smallFeeOrder, largeFeeOrder], @@ -70,6 +70,7 @@ describe('buyQuoteCalculator', () => { new BigNumber(500), 0, 0, + false, ), ).to.throw(AssetBuyerError.InsufficientAssetLiquidity); }); @@ -82,6 +83,7 @@ describe('buyQuoteCalculator', () => { new BigNumber(300), 0, 0, + false, ), ).to.throw(AssetBuyerError.InsufficientZrxLiquidity); }); @@ -97,6 +99,7 @@ describe('buyQuoteCalculator', () => { assetBuyAmount, feePercentage, slippagePercentage, + false, ); // test if orders are correct expect(buyQuote.orders).to.deep.equal([ordersAndFillableAmounts.orders[0]]); @@ -134,6 +137,7 @@ describe('buyQuoteCalculator', () => { assetBuyAmount, feePercentage, slippagePercentage, + false, ); // test if orders are correct expect(buyQuote.orders).to.deep.equal(ordersAndFillableAmounts.orders); @@ -149,9 +153,9 @@ describe('buyQuoteCalculator', () => { expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount); expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount); expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice); - // 100 eth to fill the first order + 200 eth for fees + // 100 eth to fill the first order + 208 eth for fees const expectedWorstEthAmountForAsset = new BigNumber(100); - const expectedWorstEthAmountForZrxFees = new BigNumber(200); + const expectedWorstEthAmountForZrxFees = new BigNumber(208); const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset.plus(expectedWorstEthAmountForZrxFees); const expectedWorstFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage); const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount); diff --git a/packages/instant/package.json b/packages/instant/package.json index 1a6e9d2e9..421802530 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -62,8 +62,8 @@ "ts-optchain": "^0.1.1" }, "devDependencies": { - "@static/discharge": "^1.2.2", "@0x/tslint-config": "^1.0.9", + "@static/discharge": "^1.2.2", "@types/enzyme": "^3.1.14", "@types/enzyme-adapter-react-16": "^1.0.3", "@types/jest": "^23.3.5", diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx new file mode 100644 index 000000000..9adb565f9 --- /dev/null +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -0,0 +1,24 @@ +import { keyframes, styled } from '../../style/theme'; + +interface FullRotationProps { + height: string; + width: string; +} +const rotatingKeyframes = keyframes` +from { + transform: rotate(0deg); +} + +to { + transform: rotate(360deg); +} +`; + +export const FullRotation = + styled.div < + FullRotationProps > + ` + animation: ${rotatingKeyframes} 2s linear infinite; + height: ${props => props.height}; + width: ${props => props.width}; +`; diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index f999d59a8..0d35d36ca 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -1,4 +1,4 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; @@ -14,6 +14,7 @@ export interface BuyButtonProps { onClick: (buyQuote: BuyQuote) => void; onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void; + onBuyPrevented: (buyQuote: BuyQuote, preventedError: Error) => void; } export class BuyButton extends React.Component<BuyButtonProps> { @@ -41,9 +42,13 @@ export class BuyButton extends React.Component<BuyButtonProps> { let txnHash; try { txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote); - await web3Wrapper.awaitTransactionSuccessAsync(txnHash); - this.props.onBuySuccess(this.props.buyQuote, txnHash); - } catch { + const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash); + } catch (e) { + if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) { + this.props.onBuyPrevented(this.props.buyQuote, e); + return; + } this.props.onBuyFailure(this.props.buyQuote, txnHash); } }; diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index e7641e7e7..5bc965c7d 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -1,23 +1,22 @@ import * as React from 'react'; +import { PlacingOrderButton } from '../components/placing_order_button'; import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button'; - +import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button'; import { AsyncProcessState } from '../types'; -import { SecondaryButton } from './secondary_button'; - export interface BuyOrderStateButtonProps { - buyOrderState: AsyncProcessState; + buyOrderProcessingState: AsyncProcessState; } export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => { - if (props.buyOrderState === AsyncProcessState.FAILURE) { + if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) { return <SelectedAssetRetryButton />; - } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { - return <SecondaryButton text="Success" isDisabled={true} />; - } else if (props.buyOrderState === AsyncProcessState.PENDING) { - return <SecondaryButton text="Processing" isDisabled={true} />; + } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) { + return <SelectedAssetViewTransactionButton />; + } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) { + return <PlacingOrderButton />; } return <SelectedAssetBuyButton />; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 856e4d43e..ed753a3bd 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; @@ -16,10 +16,14 @@ export interface InstantHeadingProps { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } -const placeholderColor = ColorOption.white; +const PLACEHOLDER_COLOR = ColorOption.white; +const ICON_WIDTH = 34; +const ICON_HEIGHT = 34; +const ICON_COLOR = ColorOption.white; + export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); @@ -62,15 +66,22 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { } private _renderIcon(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { - return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />; + const processState = this.props.buyOrderState.processState; + + if (processState === AsyncProcessState.FAILURE) { + return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === AsyncProcessState.SUCCESS) { + return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } return undefined; } private _renderTopText(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + const processState = this.props.buyOrderState.processState; + if (processState === AsyncProcessState.FAILURE) { return 'Order failed'; + } else if (processState === AsyncProcessState.SUCCESS) { + return 'Tokens received!'; } return 'I want to buy'; @@ -78,10 +89,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return <AmountPlaceholder isPulsating={true} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return <AmountPlaceholder isPulsating={false} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />; } return amountFunction(); } @@ -92,7 +103,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - <AmountPlaceholder isPulsating={false} color={placeholderColor} />, + <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />, )} </Text> ); diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx new file mode 100644 index 000000000..4232e6c22 --- /dev/null +++ b/packages/instant/src/components/placing_order_button.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Button } from './ui/button'; +import { Container } from './ui/container'; +import { Spinner } from './ui/spinner'; +import { Text } from './ui/text'; + +export const PlacingOrderButton: React.StatelessComponent<{}> = props => ( + <Button isDisabled={true} width="100%"> + <Container display="inline-block" position="relative" top="3px" marginRight="8px"> + <Spinner widthPx={20} heightPx={20} /> + </Container> + <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px"> + Placing Order… + </Text> + </Button> +); diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx index 28547ce54..0d6188e6a 100644 --- a/packages/instant/src/components/retry_button.tsx +++ b/packages/instant/src/components/retry_button.tsx @@ -7,5 +7,5 @@ export interface RetryButtonProps { } export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return <SecondaryButton text="Try Again" onClick={props.onClick} />; + return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>; }; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index e073f6061..3c139a233 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -6,9 +6,7 @@ import { ColorOption } from '../style/theme'; import { Button, ButtonProps } from './ui/button'; import { Text } from './ui/text'; -export interface SecondaryButtonProps extends ButtonProps { - text: string; -} +export interface SecondaryButtonProps extends ButtonProps {} export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => { const buttonProps = _.omit(props, 'text'); @@ -21,7 +19,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p {...buttonProps} > <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px"> - {props.text} + {props.children} </Text> </Button> ); diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx new file mode 100644 index 000000000..28ebc2598 --- /dev/null +++ b/packages/instant/src/components/ui/spinner.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { FullRotation } from '../animations/full_rotation'; + +export interface SpinnerProps { + widthPx: number; + heightPx: number; +} +export const Spinner: React.StatelessComponent<SpinnerProps> = props => { + return ( + <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}> + <svg + width={props.widthPx} + height={props.heightPx} + viewBox="0 0 34 34" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <circle cx="17" cy="17" r="15" stroke="white" strokeOpacity="0.2" strokeWidth="4" /> + <path + d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2" + stroke="white" + strokeWidth="4" + strokeLinecap="round" + strokeLinejoin="round" + /> + </svg> + </FullRotation> + ); +}; diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx new file mode 100644 index 000000000..7aa44e657 --- /dev/null +++ b/packages/instant/src/components/view_transaction_button.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +import { SecondaryButton } from './secondary_button'; + +export interface ViewTransactionButtonProps { + onClick: () => void; +} + +export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => { + return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>; +}; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0d847cf02..f23b2010e 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -90,7 +90,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE)); + dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE })); if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { // even if it's debounced, give them the illusion it's loading diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 208bb2582..428939e79 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -19,8 +19,9 @@ interface ConnectedState { interface ConnectedDispatch { onClick: (buyQuote: BuyQuote) => void; - onBuySuccess: (buyQuote: BuyQuote) => void; + onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote) => void; + onBuyPrevented: (buyQuote: BuyQuote, error: Error) => void; } const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ @@ -29,9 +30,14 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): }); const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)), + onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })), + onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => + dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })), + onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })), + onBuyPrevented: (buyQuote, error) => { + dispatch(actions.resetAmount()); + dispatch(actions.setError(error)); + }, }); export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect( diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx index 3b7fc0054..f3efbb5d2 100644 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx +++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx @@ -8,11 +8,11 @@ import { AsyncProcessState } from '../types'; import { BuyOrderStateButton } from '../components/buy_order_state_button'; interface ConnectedState { - buyOrderState: AsyncProcessState; + buyOrderProcessingState: AsyncProcessState; } export interface SelectedAssetButtonProps {} const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ - buyOrderState: state.buyOrderState, + buyOrderProcessingState: state.buyOrderState.processState, }); export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect( diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 24efed32e..6b2a29b07 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { InstantHeading } from '../components/instant_heading'; @@ -16,7 +16,7 @@ interface ConnectedState { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx new file mode 100644 index 000000000..6f42b9f85 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -0,0 +1,34 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; + +import { ViewTransactionButton } from '../components/view_transaction_button'; +import { AsyncProcessState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; + +export interface SelectedAssetViewTransactionButtonProps {} + +interface ConnectedState { + onClick: () => void; +} + +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + onClick: () => { + if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) { + const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( + state.buyOrderState.txnHash, + state.assetBuyer.networkId, + ); + if (etherscanUrl) { + window.open(etherscanUrl, '_blank'); + return; + } + } + }, +}); + +export const SelectedAssetViewTransactionButton: React.ComponentClass< + SelectedAssetViewTransactionButtonProps +> = connect(mapStateToProps)(ViewTransactionButton); diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index f5946d707..5a4099f15 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, AsyncProcessState } from '../types'; +import { ActionsUnion, OrderState } from '../types'; export interface PlainAction<T extends string> { type: T; @@ -23,7 +23,7 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> | export enum ActionTypes { UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE', UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT', - UPDATE_SELECTED_ASSET_BUY_STATE = 'UPDATE_SELECTED_ASSET_BUY_STATE', + UPDATE_BUY_ORDER_STATE = 'UPDATE_BUY_ORDER_STATE', UPDATE_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE', UPDATE_SELECTED_ASSET = 'UPDATE_SELECTED_ASSET', SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING', @@ -37,8 +37,7 @@ export enum ActionTypes { export const actions = { updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), - updateBuyOrderState: (buyState: AsyncProcessState) => - createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), + updateBuyOrderState: (orderState: OrderState) => createAction(ActionTypes.UPDATE_BUY_ORDER_STATE, orderState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), updateSelectedAsset: (assetData?: string) => createAction(ActionTypes.UPDATE_SELECTED_ASSET, assetData), setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index ddcb144b1..c6a05ac52 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -4,7 +4,7 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { assetMetaDataMap } from '../data/asset_meta_data_map'; -import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network } from '../types'; +import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types'; import { assetUtils } from '../util/asset'; import { Action, ActionTypes } from './actions'; @@ -15,7 +15,7 @@ export interface State { assetMetaDataMap: ObjectMap<AssetMetaData>; selectedAsset?: Asset; selectedAssetAmount?: BigNumber; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; quoteRequestState: AsyncProcessState; @@ -27,7 +27,7 @@ export const INITIAL_STATE: State = { network: Network.Mainnet, selectedAssetAmount: undefined, assetMetaDataMap, - buyOrderState: AsyncProcessState.NONE, + buyOrderState: { processState: AsyncProcessState.NONE }, ethUsdPrice: undefined, latestBuyQuote: undefined, latestError: undefined, @@ -65,7 +65,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => latestBuyQuote: undefined, quoteRequestState: AsyncProcessState.FAILURE, }; - case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE: + case ActionTypes.UPDATE_BUY_ORDER_STATE: return { ...state, buyOrderState: action.data, @@ -106,7 +106,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, latestBuyQuote: undefined, quoteRequestState: AsyncProcessState.NONE, - buyOrderState: AsyncProcessState.NONE, + buyOrderState: { processState: AsyncProcessState.NONE }, selectedAssetAmount: undefined, }; default: diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index c340623ad..c5521c63c 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -7,6 +7,20 @@ export enum AsyncProcessState { SUCCESS = 'Success', FAILURE = 'Failure', } + +interface RegularOrderState { + processState: AsyncProcessState.NONE | AsyncProcessState.PENDING; +} +interface SuccessfulOrderState { + processState: AsyncProcessState.SUCCESS; + txnHash: string; +} +interface FailureOrderState { + processState: AsyncProcessState.FAILURE; + txnHash?: string; +} +export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState; + export enum DisplayStatus { Present, Hidden, diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts index 40fd24c7e..64c1f4885 100644 --- a/packages/instant/src/util/error.ts +++ b/packages/instant/src/util/error.ts @@ -46,6 +46,10 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und return `${assetName} is currently unavailable`; } + if (error.message === AssetBuyerError.SignatureRequestDenied) { + return 'You denied this transaction'; + } + return undefined; }; diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts new file mode 100644 index 000000000..ffb08a382 --- /dev/null +++ b/packages/instant/src/util/etherscan.ts @@ -0,0 +1,24 @@ +import * as _ from 'lodash'; + +import { Network } from '../types'; + +const etherscanPrefix = (networkId: number): string | undefined => { + switch (networkId) { + case Network.Kovan: + return 'kovan.'; + case Network.Mainnet: + return ''; + default: + return undefined; + } +}; + +export const etherscanUtil = { + getEtherScanTxnAddressIfExists: (txnHash: string, networkId: number) => { + const prefix = etherscanPrefix(networkId); + if (_.isUndefined(prefix)) { + return; + } + return `https://${prefix}etherscan.io/tx/${txnHash}`; + }, +}; @@ -6730,7 +6730,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep: ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-util "^5.2.0" ethereumjs-vm "2.3.5" - ethereumjs-wallet "~0.6.0" + ethereumjs-wallet "0.6.0" fake-merkle-patricia-tree "~1.0.1" heap "~0.2.6" js-scrypt "^0.2.0" @@ -12533,6 +12533,13 @@ react-scroll@0xproject/react-scroll#pr-330-and-replace-state: lodash.throttle "^4.1.1" prop-types "^15.5.8" +react-scroll@0xproject/react-scroll#similar-to-pr-330-but-with-replace-state: + version "1.7.10" + resolved "https://codeload.github.com/0xproject/react-scroll/tar.gz/0f625b270d7e966313cac8b811c0ae807b37e170" + dependencies: + lodash.throttle "^4.1.1" + prop-types "^15.5.8" + react-side-effect@^1.0.2, react-side-effect@^1.1.0: version "1.1.5" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" |