Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/different-install-wallet-copy-for-mobile

This commit is contained in:
fragosti
2018-11-13 17:31:54 -08:00
30 changed files with 364 additions and 150 deletions

View File

@@ -1,4 +1,13 @@
[ [
{
"version": "3.0.0",
"changes": [
{
"note": "update `getBuyQuoteAsync` to return eth spent on assets instead of per unit amount",
"pr": 1252
}
]
},
{ {
"timestamp": 1542134075, "timestamp": 1542134075,
"version": "2.2.2", "version": "2.2.2",

View File

@@ -54,12 +54,12 @@ export interface BuyQuote {
} }
/** /**
* ethPerAssetPrice: The price of one unit of the desired asset in ETH * assetEthAmount: The amount of eth required to pay for the requested asset.
* feeEthAmount: The amount of eth required to pay the affiliate fee. * feeEthAmount: The amount of eth required to pay the affiliate fee.
* totalEthAmount: the total amount of eth required to complete the buy. (Filling orders, feeOrders, and paying affiliate fee) * totalEthAmount: The total amount of eth required to complete the buy (filling orders, feeOrders, and paying affiliate fee).
*/ */
export interface BuyQuoteInfo { export interface BuyQuoteInfo {
ethPerAssetPrice: BigNumber; assetEthAmount: BigNumber;
feeEthAmount: BigNumber; feeEthAmount: BigNumber;
totalEthAmount: BigNumber; totalEthAmount: BigNumber;
} }

View File

@@ -18,7 +18,7 @@ export const assert = {
} }
}, },
isValidBuyQuoteInfo(variableName: string, buyQuoteInfo: BuyQuoteInfo): void { isValidBuyQuoteInfo(variableName: string, buyQuoteInfo: BuyQuoteInfo): void {
sharedAssert.isBigNumber(`${variableName}.ethPerAssetPrice`, buyQuoteInfo.ethPerAssetPrice); sharedAssert.isBigNumber(`${variableName}.assetEthAmount`, buyQuoteInfo.assetEthAmount);
sharedAssert.isBigNumber(`${variableName}.feeEthAmount`, buyQuoteInfo.feeEthAmount); sharedAssert.isBigNumber(`${variableName}.feeEthAmount`, buyQuoteInfo.feeEthAmount);
sharedAssert.isBigNumber(`${variableName}.totalEthAmount`, buyQuoteInfo.totalEthAmount); sharedAssert.isBigNumber(`${variableName}.totalEthAmount`, buyQuoteInfo.totalEthAmount);
}, },

View File

@@ -106,28 +106,28 @@ function calculateQuoteInfo(
isMakerAssetZrxToken: boolean, isMakerAssetZrxToken: boolean,
): BuyQuoteInfo { ): BuyQuoteInfo {
// find the total eth and zrx needed to buy assetAmount from the resultOrders from left to right // find the total eth and zrx needed to buy assetAmount from the resultOrders from left to right
let ethAmountToBuyAsset = constants.ZERO_AMOUNT; let assetEthAmount = constants.ZERO_AMOUNT;
let ethAmountToBuyZrx = constants.ZERO_AMOUNT; let zrxEthAmount = constants.ZERO_AMOUNT;
if (isMakerAssetZrxToken) { if (isMakerAssetZrxToken) {
ethAmountToBuyAsset = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount); assetEthAmount = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount);
} else { } else {
// find eth and zrx amounts needed to buy // find eth and zrx amounts needed to buy
const ethAndZrxAmountToBuyAsset = findEthAndZrxAmountNeededToBuyAsset(ordersAndFillableAmounts, assetBuyAmount); const ethAndZrxAmountToBuyAsset = findEthAndZrxAmountNeededToBuyAsset(ordersAndFillableAmounts, assetBuyAmount);
ethAmountToBuyAsset = ethAndZrxAmountToBuyAsset[0]; assetEthAmount = ethAndZrxAmountToBuyAsset[0];
const zrxAmountToBuyAsset = ethAndZrxAmountToBuyAsset[1]; const zrxAmountToBuyAsset = ethAndZrxAmountToBuyAsset[1];
// find eth amount needed to buy zrx // find eth amount needed to buy zrx
ethAmountToBuyZrx = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset); zrxEthAmount = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
} }
/// find the eth amount needed to buy the affiliate fee // eth amount needed to buy the affiliate fee
const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage).ceil(); const affiliateFeeEthAmount = assetEthAmount.mul(feePercentage).ceil();
const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyZrx); // eth amount needed for fees is the sum of affiliate fee and zrx fee
const ethAmountTotal = totalEthAmountWithoutAffiliateFee.plus(ethAmountToBuyAffiliateFee); const feeEthAmount = affiliateFeeEthAmount.plus(zrxEthAmount);
// divide into the assetBuyAmount in order to find rate of makerAsset / WETH // eth amount needed in total is the sum of the amount needed for the asset and the amount needed for fees
const ethPerAssetPrice = totalEthAmountWithoutAffiliateFee.div(assetBuyAmount); const totalEthAmount = assetEthAmount.plus(feeEthAmount);
return { return {
totalEthAmount: ethAmountTotal, assetEthAmount,
feeEthAmount: ethAmountToBuyAffiliateFee, feeEthAmount,
ethPerAssetPrice, totalEthAmount,
}; };
} }

View File

@@ -108,17 +108,17 @@ describe('buyQuoteCalculator', () => {
// 50 eth to fill the first order + 100 eth for fees // 50 eth to fill the first order + 100 eth for fees
const expectedEthAmountForAsset = new BigNumber(50); const expectedEthAmountForAsset = new BigNumber(50);
const expectedEthAmountForZrxFees = new BigNumber(100); const expectedEthAmountForZrxFees = new BigNumber(100);
const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees); const expectedFillEthAmount = expectedEthAmountForAsset;
const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage); const expectedAffiliateFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
const expectedFeeEthAmount = expectedAffiliateFeeEthAmount.plus(expectedEthAmountForZrxFees);
const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount); const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount); expect(buyQuote.bestCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount); expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount); expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
// because we have no slippage protection, minRate is equal to maxRate // because we have no slippage protection, minRate is equal to maxRate
expect(buyQuote.worstCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount); expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount); expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
expect(buyQuote.worstCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
// test if feePercentage gets passed through // test if feePercentage gets passed through
expect(buyQuote.feePercentage).to.equal(feePercentage); expect(buyQuote.feePercentage).to.equal(feePercentage);
}); });
@@ -146,23 +146,23 @@ describe('buyQuoteCalculator', () => {
// 50 eth to fill the first order + 100 eth for fees // 50 eth to fill the first order + 100 eth for fees
const expectedEthAmountForAsset = new BigNumber(50); const expectedEthAmountForAsset = new BigNumber(50);
const expectedEthAmountForZrxFees = new BigNumber(100); const expectedEthAmountForZrxFees = new BigNumber(100);
const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees); const expectedFillEthAmount = expectedEthAmountForAsset;
const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage); const expectedAffiliateFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
const expectedFeeEthAmount = expectedAffiliateFeeEthAmount.plus(expectedEthAmountForZrxFees);
const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount); const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount); expect(buyQuote.bestCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount); expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount); expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
// 100 eth to fill the first order + 208 eth for fees // 100 eth to fill the first order + 208 eth for fees
const expectedWorstEthAmountForAsset = new BigNumber(100); const expectedWorstEthAmountForAsset = new BigNumber(100);
const expectedWorstEthAmountForZrxFees = new BigNumber(208); const expectedWorstEthAmountForZrxFees = new BigNumber(208);
const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset.plus(expectedWorstEthAmountForZrxFees); const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset;
const expectedWorstFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage); const expectedWorstAffiliateFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage);
const expectedWorstFeeEthAmount = expectedWorstAffiliateFeeEthAmount.plus(expectedWorstEthAmountForZrxFees);
const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount); const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount);
const expectedWorstEthPerAssetPrice = expectedWorstFillEthAmount.div(assetBuyAmount); expect(buyQuote.worstCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedWorstFillEthAmount);
expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedWorstFeeEthAmount); expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedWorstFeeEthAmount);
expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedWorstTotalEthAmount); expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedWorstTotalEthAmount);
expect(buyQuote.worstCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedWorstEthPerAssetPrice);
// test if feePercentage gets passed through // test if feePercentage gets passed through
expect(buyQuote.feePercentage).to.equal(feePercentage); expect(buyQuote.feePercentage).to.equal(feePercentage);
}); });

View File

@@ -15,8 +15,8 @@ import { Spinner } from './ui/spinner';
import { Text } from './ui/text'; import { Text } from './ui/text';
export interface InstantHeadingProps { export interface InstantHeadingProps {
selectedAssetAmount?: BigNumber; selectedAssetUnitAmount?: BigNumber;
totalEthBaseAmount?: BigNumber; totalEthBaseUnitAmount?: BigNumber;
ethUsdPrice?: BigNumber; ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState; quoteRequestState: AsyncProcessState;
buyOrderState: OrderState; buyOrderState: OrderState;
@@ -104,7 +104,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
if (this.props.quoteRequestState === AsyncProcessState.Pending) { if (this.props.quoteRequestState === AsyncProcessState.Pending) {
return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
} }
if (_.isUndefined(this.props.selectedAssetAmount)) { if (_.isUndefined(this.props.selectedAssetUnitAmount)) {
return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />; return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
} }
return amountFunction(); return amountFunction();
@@ -113,8 +113,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderEthAmount = (): React.ReactNode => { private readonly _renderEthAmount = (): React.ReactNode => {
return ( return (
<Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
{format.ethBaseAmount( {format.ethBaseUnitAmount(
this.props.totalEthBaseAmount, this.props.totalEthBaseUnitAmount,
4, 4,
<AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />, <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
)} )}
@@ -125,8 +125,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderDollarAmount = (): React.ReactNode => { private readonly _renderDollarAmount = (): React.ReactNode => {
return ( return (
<Text fontSize="16px" fontColor={ColorOption.white}> <Text fontSize="16px" fontColor={ColorOption.white}>
{format.ethBaseAmountInUsd( {format.ethBaseUnitAmountInUsd(
this.props.totalEthBaseAmount, this.props.totalEthBaseUnitAmount,
this.props.ethUsdPrice, this.props.ethUsdPrice,
2, 2,
<AmountPlaceholder isPulsating={false} color={ColorOption.white} />, <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,

View File

@@ -4,6 +4,7 @@ import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import { oc } from 'ts-optchain'; import { oc } from 'ts-optchain';
import { BIG_NUMBER_ZERO } from '../constants';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { format } from '../util/format'; import { format } from '../util/format';
@@ -15,16 +16,23 @@ import { Text } from './ui/text';
export interface OrderDetailsProps { export interface OrderDetailsProps {
buyQuoteInfo?: BuyQuoteInfo; buyQuoteInfo?: BuyQuoteInfo;
selectedAssetUnitAmount?: BigNumber;
ethUsdPrice?: BigNumber; ethUsdPrice?: BigNumber;
isLoading: boolean; isLoading: boolean;
} }
export class OrderDetails extends React.Component<OrderDetailsProps> { export class OrderDetails extends React.Component<OrderDetailsProps> {
public render(): React.ReactNode { public render(): React.ReactNode {
const { buyQuoteInfo, ethUsdPrice } = this.props; const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
const buyQuoteAccessor = oc(buyQuoteInfo); const buyQuoteAccessor = oc(buyQuoteInfo);
const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice(); const assetEthBaseUnitAmount = buyQuoteAccessor.assetEthAmount();
const ethTokenFee = buyQuoteAccessor.feeEthAmount(); const feeEthBaseUnitAmount = buyQuoteAccessor.feeEthAmount();
const totalEthAmount = buyQuoteAccessor.totalEthAmount(); const totalEthBaseUnitAmount = buyQuoteAccessor.totalEthAmount();
const pricePerTokenEth =
!_.isUndefined(assetEthBaseUnitAmount) &&
!_.isUndefined(selectedAssetUnitAmount) &&
!selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO)
? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
: undefined;
return ( return (
<Container padding="20px" width="100%" flexGrow={1}> <Container padding="20px" width="100%" flexGrow={1}>
<Container marginBottom="10px"> <Container marginBottom="10px">
@@ -40,20 +48,19 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
</Container> </Container>
<EthAmountRow <EthAmountRow
rowLabel="Token Price" rowLabel="Token Price"
ethAmount={ethAssetPrice} ethAmount={pricePerTokenEth}
ethUsdPrice={ethUsdPrice} ethUsdPrice={ethUsdPrice}
isEthAmountInBaseUnits={false}
isLoading={this.props.isLoading} isLoading={this.props.isLoading}
/> />
<EthAmountRow <EthAmountRow
rowLabel="Fee" rowLabel="Fee"
ethAmount={ethTokenFee} ethAmount={feeEthBaseUnitAmount}
ethUsdPrice={ethUsdPrice} ethUsdPrice={ethUsdPrice}
isLoading={this.props.isLoading} isLoading={this.props.isLoading}
/> />
<EthAmountRow <EthAmountRow
rowLabel="Total Cost" rowLabel="Total Cost"
ethAmount={totalEthAmount} ethAmount={totalEthBaseUnitAmount}
ethUsdPrice={ethUsdPrice} ethUsdPrice={ethUsdPrice}
shouldEmphasize={true} shouldEmphasize={true}
isLoading={this.props.isLoading} isLoading={this.props.isLoading}
@@ -81,7 +88,7 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props; const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
const fontWeight = shouldEmphasize ? 700 : 400; const fontWeight = shouldEmphasize ? 700 : 400;
const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : format.ethUnitAmount;
return ( return (
<Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
<Flex justify="space-between"> <Flex justify="space-between">
@@ -105,7 +112,9 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
); );
} }
private _renderUsdSection(): React.ReactNode { private _renderUsdSection(): React.ReactNode {
const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; const usdFormatter = this.props.isEthAmountInBaseUnits
? format.ethBaseUnitAmountInUsd
: format.ethUnitAmountInUsd;
const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount); const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
return shouldHideUsdPriceSection ? null : ( return shouldHideUsdPriceSection ? null : (
<Container marginRight="3px" display="inline-block"> <Container marginRight="3px" display="inline-block">

View File

@@ -18,7 +18,7 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
public render(): React.ReactNode { public render(): React.ReactNode {
const { accountAddress, accountEthBalanceInWei } = this.props; const { accountAddress, accountEthBalanceInWei } = this.props;
const value = format.ethAddress(accountAddress); const value = format.ethAddress(accountAddress);
const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string; const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />; return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
} }
private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {

View File

@@ -1,7 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
import { INJECTED_DIV_CLASS } from '../constants'; import { INJECTED_DIV_CLASS } from '../constants';
import { ConnectedZeroExInstantContainer } from '../containers/connected_zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
@@ -11,7 +12,7 @@ export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props
return ( return (
<div className={INJECTED_DIV_CLASS}> <div className={INJECTED_DIV_CLASS}>
<ZeroExInstantProvider {...props}> <ZeroExInstantProvider {...props}>
<ConnectedZeroExInstantContainer /> <ZeroExInstantContainer />
</ZeroExInstantProvider> </ZeroExInstantProvider>
</div> </div>
); );

View File

@@ -1,11 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector'; import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
import { ConnectedAccountPaymentMethod } from '../containers/connected_account_payment_method'; import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_payment_method';
import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel'; import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
import { LatestError } from '../containers/latest_error'; import { LatestError } from '../containers/latest_error';
import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
@@ -24,7 +23,7 @@ export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState; tokenSelectionPanelAnimationState: SlideAnimationState;
} }
export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> { export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantContainerState> {
public state = { public state = {
tokenSelectionPanelAnimationState: 'none' as SlideAnimationState, tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
}; };
@@ -51,7 +50,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
> >
<Flex direction="column" justify="flex-start" height="100%"> <Flex direction="column" justify="flex-start" height="100%">
<SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
{this._renderPaymentMethodOrBuyOrderProgress()} <ConnectedBuyOrderProgressOrPaymentMethod />
<LatestBuyQuoteOrderDetails /> <LatestBuyQuoteOrderDetails />
<Container padding="20px" width="100%"> <Container padding="20px" width="100%">
<SelectedAssetBuyOrderStateButtons /> <SelectedAssetBuyOrderStateButtons />
@@ -79,16 +78,4 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
tokenSelectionPanelAnimationState: 'slidOut', tokenSelectionPanelAnimationState: 'slidOut',
}); });
}; };
private readonly _renderPaymentMethodOrBuyOrderProgress = (): React.ReactNode => {
const { orderProcessState } = this.props;
if (
orderProcessState === OrderProcessState.Processing ||
orderProcessState === OrderProcessState.Success ||
orderProcessState === OrderProcessState.Failure
) {
return <SelectedAssetBuyOrderProgress />;
} else {
return <ConnectedAccountPaymentMethod />;
}
};
} }

View File

@@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { ConnectedZeroExInstantContainer } from '../containers/connected_zero_ex_instant_container'; import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
import { ColorOption } from '../style/theme'; import { ColorOption } from '../style/theme';
import { Container } from './ui/container'; import { Container } from './ui/container';
@@ -31,7 +31,7 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
/> />
</Container> </Container>
<Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
<ConnectedZeroExInstantContainer /> <ZeroExInstantContainer />
</Container> </Container>
</Flex> </Flex>
</Overlay> </Overlay>

View File

@@ -73,7 +73,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
completeAssetMetaDataMap, completeAssetMetaDataMap,
networkId, networkId,
), ),
selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount) selectedAssetUnitAmount: _.isUndefined(props.defaultAssetBuyAmount)
? undefined ? undefined
: new BigNumber(props.defaultAssetBuyAmount), : new BigNumber(props.defaultAssetBuyAmount),
availableAssets: _.isUndefined(props.availableAssetDatas) availableAssets: _.isUndefined(props.availableAssetDatas)

View File

@@ -0,0 +1,36 @@
import * as React from 'react';
import { connect } from 'react-redux';
import { State } from '../redux/reducer';
import { OrderProcessState } from '../types';
import { ConnectedAccountPaymentMethod } from './connected_account_payment_method';
import { SelectedAssetBuyOrderProgress } from './selected_asset_buy_order_progress';
interface BuyOrderProgressOrPaymentMethodProps {
orderProcessState: OrderProcessState;
}
export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPaymentMethodProps) => {
const { orderProcessState } = props;
if (
orderProcessState === OrderProcessState.Processing ||
orderProcessState === OrderProcessState.Success ||
orderProcessState === OrderProcessState.Failure
) {
return <SelectedAssetBuyOrderProgress />;
}
if (orderProcessState === OrderProcessState.None) {
return <ConnectedAccountPaymentMethod />;
}
return null;
};
interface ConnectedState extends BuyOrderProgressOrPaymentMethodProps {}
export interface ConnectedBuyOrderProgressOrPaymentMethodProps {}
const mapStateToProps = (state: State, _ownProps: ConnectedBuyOrderProgressOrPaymentMethodProps): ConnectedState => ({
orderProcessState: state.buyOrderState.processState,
});
export const ConnectedBuyOrderProgressOrPaymentMethod: React.ComponentClass<
ConnectedBuyOrderProgressOrPaymentMethodProps
> = connect(mapStateToProps)(BuyOrderProgressOrPaymentMethod);

View File

@@ -1,21 +0,0 @@
import * as React from 'react';
import { connect } from 'react-redux';
import { State } from '../redux/reducer';
import { OrderProcessState } from '../types';
import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
export interface ConnectedZeroExInstantContainerProps {}
interface ConnectedState {
orderProcessState: OrderProcessState;
}
const mapStateToProps = (state: State, _ownProps: ConnectedZeroExInstantContainerProps): ConnectedState => ({
orderProcessState: state.buyOrderState.processState,
});
export const ConnectedZeroExInstantContainer: React.ComponentClass<ConnectedZeroExInstantContainerProps> = connect(
mapStateToProps,
)(ZeroExInstantContainer);

View File

@@ -14,6 +14,7 @@ export interface LatestBuyQuoteOrderDetailsProps {}
interface ConnectedState { interface ConnectedState {
buyQuoteInfo?: BuyQuoteInfo; buyQuoteInfo?: BuyQuoteInfo;
selectedAssetUnitAmount?: BigNumber;
ethUsdPrice?: BigNumber; ethUsdPrice?: BigNumber;
isLoading: boolean; isLoading: boolean;
} }
@@ -21,6 +22,7 @@ interface ConnectedState {
const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({ const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
// use the worst case quote info // use the worst case quote info
buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(), buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
selectedAssetUnitAmount: state.selectedAssetUnitAmount,
ethUsdPrice: state.ethUsdPrice, ethUsdPrice: state.ethUsdPrice,
isLoading: state.quoteRequestState === AsyncProcessState.Pending, isLoading: state.quoteRequestState === AsyncProcessState.Pending,
}); });

View File

@@ -14,16 +14,16 @@ export interface InstantHeadingProps {
} }
interface ConnectedState { interface ConnectedState {
selectedAssetAmount?: BigNumber; selectedAssetUnitAmount?: BigNumber;
totalEthBaseAmount?: BigNumber; totalEthBaseUnitAmount?: BigNumber;
ethUsdPrice?: BigNumber; ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState; quoteRequestState: AsyncProcessState;
buyOrderState: OrderState; buyOrderState: OrderState;
} }
const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
selectedAssetAmount: state.selectedAssetAmount, selectedAssetUnitAmount: state.selectedAssetUnitAmount,
totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), totalEthBaseUnitAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
ethUsdPrice: state.ethUsdPrice, ethUsdPrice: state.ethUsdPrice,
quoteRequestState: state.quoteRequestState, quoteRequestState: state.quoteRequestState,
buyOrderState: state.buyOrderState, buyOrderState: state.buyOrderState,

View File

@@ -53,7 +53,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
const assetBuyer = state.providerState.assetBuyer; const assetBuyer = state.providerState.assetBuyer;
return { return {
assetBuyer, assetBuyer,
value: state.selectedAssetAmount, value: state.selectedAssetUnitAmount,
asset: selectedAsset, asset: selectedAsset,
isDisabled, isDisabled,
numberOfAssetsAvailable, numberOfAssetsAvailable,

View File

@@ -26,7 +26,7 @@ export enum ActionTypes {
SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY', SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE', UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE', UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT', UPDATE_SELECTED_ASSET_UNIT_AMOUNT = 'UPDATE_SELECTED_ASSET_UNIT_AMOUNT',
SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE', SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING', SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING',
SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING', SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING',
@@ -52,7 +52,8 @@ export const actions = {
updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) => updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance), createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), updateSelectedAssetAmount: (amount?: BigNumber) =>
createAction(ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT, amount),
setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE), setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING), setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>

View File

@@ -84,10 +84,10 @@ export const asyncData = {
dispatch: Dispatch, dispatch: Dispatch,
shouldSetPending: boolean = false, shouldSetPending: boolean = false,
) => { ) => {
const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = state; const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state;
const assetBuyer = providerState.assetBuyer; const assetBuyer = providerState.assetBuyer;
if ( if (
!_.isUndefined(selectedAssetAmount) && !_.isUndefined(selectedAssetUnitAmount) &&
!_.isUndefined(selectedAsset) && !_.isUndefined(selectedAsset) &&
buyOrderState.processState === OrderProcessState.None && buyOrderState.processState === OrderProcessState.None &&
selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20 selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
@@ -96,7 +96,7 @@ export const asyncData = {
assetBuyer, assetBuyer,
dispatch, dispatch,
selectedAsset as ERC20Asset, selectedAsset as ERC20Asset,
selectedAssetAmount, selectedAssetUnitAmount,
shouldSetPending, shouldSetPending,
affiliateInfo, affiliateInfo,
); );

View File

@@ -44,7 +44,7 @@ interface PropsDerivedState {
interface OptionalState { interface OptionalState {
selectedAsset: Asset; selectedAsset: Asset;
availableAssets: Asset[]; availableAssets: Asset[];
selectedAssetAmount: BigNumber; selectedAssetUnitAmount: BigNumber;
ethUsdPrice: BigNumber; ethUsdPrice: BigNumber;
latestBuyQuote: BuyQuote; latestBuyQuote: BuyQuote;
latestErrorMessage: string; latestErrorMessage: string;
@@ -105,10 +105,10 @@ export const createReducer = (initialState: State) => {
...state, ...state,
ethUsdPrice: action.data, ethUsdPrice: action.data,
}; };
case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT: case ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT:
return { return {
...state, ...state,
selectedAssetAmount: action.data, selectedAssetUnitAmount: action.data,
}; };
case ActionTypes.UPDATE_LATEST_BUY_QUOTE: case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
const newBuyQuoteIfExists = action.data; const newBuyQuoteIfExists = action.data;
@@ -219,7 +219,7 @@ export const createReducer = (initialState: State) => {
latestBuyQuote: undefined, latestBuyQuote: undefined,
quoteRequestState: AsyncProcessState.None, quoteRequestState: AsyncProcessState.None,
buyOrderState: { processState: OrderProcessState.None }, buyOrderState: { processState: OrderProcessState.None },
selectedAssetAmount: undefined, selectedAssetUnitAmount: undefined,
}; };
case ActionTypes.SET_AVAILABLE_ASSETS: case ActionTypes.SET_AVAILABLE_ASSETS:
return { return {
@@ -263,9 +263,9 @@ const reduceStateWithAccount = (state: State, account: Account) => {
const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => { const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
const selectedAssetIfExists = state.selectedAsset; const selectedAssetIfExists = state.selectedAsset;
const selectedAssetAmountIfExists = state.selectedAssetAmount; const selectedAssetUnitAmountIfExists = state.selectedAssetUnitAmount;
// if no selectedAsset or selectedAssetAmount exists on the current state, return false // if no selectedAsset or selectedAssetAmount exists on the current state, return false
if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetAmountIfExists)) { if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetUnitAmountIfExists)) {
return false; return false;
} }
// if buyQuote's assetData does not match that of the current selected asset, return false // if buyQuote's assetData does not match that of the current selected asset, return false
@@ -277,7 +277,7 @@ const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
const selectedAssetMetaData = selectedAssetIfExists.metaData; const selectedAssetMetaData = selectedAssetIfExists.metaData;
if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) { if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) {
const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount( const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount(
selectedAssetAmountIfExists, selectedAssetUnitAmountIfExists,
selectedAssetMetaData.decimals, selectedAssetMetaData.decimals,
); );
const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount); const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);

View File

@@ -15,12 +15,12 @@ export const buyQuoteUpdater = {
assetBuyer: AssetBuyer, assetBuyer: AssetBuyer,
dispatch: Dispatch<Action>, dispatch: Dispatch<Action>,
asset: ERC20Asset, asset: ERC20Asset,
assetAmount: BigNumber, assetUnitAmount: BigNumber,
setPending = true, setPending = true,
affiliateInfo?: AffiliateInfo, affiliateInfo?: AffiliateInfo,
): Promise<void> => { ): Promise<void> => {
// get a new buy quote. // get a new buy quote.
const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals); const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals);
if (setPending) { if (setPending) {
// mark quote as pending // mark quote as pending
dispatch(actions.setQuoteRequestStatePending()); dispatch(actions.setQuoteRequestStatePending());

View File

@@ -5,15 +5,15 @@ import * as _ from 'lodash';
import { ETH_DECIMALS } from '../constants'; import { ETH_DECIMALS } from '../constants';
export const format = { export const format = {
ethBaseAmount: ( ethBaseUnitAmount: (
ethBaseAmount?: BigNumber, ethBaseUnitAmount?: BigNumber,
decimalPlaces: number = 4, decimalPlaces: number = 4,
defaultText: React.ReactNode = '0 ETH', defaultText: React.ReactNode = '0 ETH',
): React.ReactNode => { ): React.ReactNode => {
if (_.isUndefined(ethBaseAmount)) { if (_.isUndefined(ethBaseUnitAmount)) {
return defaultText; return defaultText;
} }
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS); const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
return format.ethUnitAmount(ethUnitAmount, decimalPlaces); return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
}, },
ethUnitAmount: ( ethUnitAmount: (
@@ -27,16 +27,16 @@ export const format = {
const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces); const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
return `${roundedAmount} ETH`; return `${roundedAmount} ETH`;
}, },
ethBaseAmountInUsd: ( ethBaseUnitAmountInUsd: (
ethBaseAmount?: BigNumber, ethBaseUnitAmount?: BigNumber,
ethUsdPrice?: BigNumber, ethUsdPrice?: BigNumber,
decimalPlaces: number = 2, decimalPlaces: number = 2,
defaultText: React.ReactNode = '$0.00', defaultText: React.ReactNode = '$0.00',
): React.ReactNode => { ): React.ReactNode => {
if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) { if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) {
return defaultText; return defaultText;
} }
const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS); const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces); return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
}, },
ethUnitAmountInUsd: ( ethUnitAmountInUsd: (

View File

@@ -15,20 +15,20 @@ const BIG_NUMBER_FAKE_ETH_USD_PRICE = new BigNumber(2.534);
describe('format', () => { describe('format', () => {
describe('ethBaseAmount', () => { describe('ethBaseAmount', () => {
it('converts 1 ETH in base units to the string `1 ETH`', () => { it('converts 1 ETH in base units to the string `1 ETH`', () => {
expect(format.ethBaseAmount(ONE_ETH_IN_BASE_UNITS)).toBe('1 ETH'); expect(format.ethBaseUnitAmount(ONE_ETH_IN_BASE_UNITS)).toBe('1 ETH');
}); });
it('converts .432414 ETH in base units to the string `.4324 ETH`', () => { it('converts .432414 ETH in base units to the string `.4324 ETH`', () => {
expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH'); expect(format.ethBaseUnitAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH');
}); });
it('converts 5.3014059295032 ETH in base units to the string `5.301 ETH`', () => { it('converts 5.3014059295032 ETH in base units to the string `5.301 ETH`', () => {
expect(format.ethBaseAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.301 ETH'); expect(format.ethBaseUnitAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.301 ETH');
}); });
it('returns defaultText param when ethBaseAmount is not defined', () => { it('returns defaultText param when ethBaseAmount is not defined', () => {
const defaultText = 'defaultText'; const defaultText = 'defaultText';
expect(format.ethBaseAmount(undefined, 4, defaultText)).toBe(defaultText); expect(format.ethBaseUnitAmount(undefined, 4, defaultText)).toBe(defaultText);
}); });
it('it allows for configurable decimal places', () => { it('it allows for configurable decimal places', () => {
expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS, 2)).toBe('0.43 ETH'); expect(format.ethBaseUnitAmount(DECIMAL_ETH_IN_BASE_UNITS, 2)).toBe('0.43 ETH');
}); });
}); });
describe('ethUnitAmount', () => { describe('ethUnitAmount', () => {
@@ -52,24 +52,26 @@ describe('format', () => {
}); });
describe('ethBaseAmountInUsd', () => { describe('ethBaseAmountInUsd', () => {
it('correctly formats 1 ETH to usd according to some price', () => { it('correctly formats 1 ETH to usd according to some price', () => {
expect(format.ethBaseAmountInUsd(ONE_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53'); expect(format.ethBaseUnitAmountInUsd(ONE_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53');
}); });
it('correctly formats .432414 ETH to usd according to some price', () => { it('correctly formats .432414 ETH to usd according to some price', () => {
expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$1.10'); expect(format.ethBaseUnitAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
'$1.10',
);
}); });
it('correctly formats 5.3014059295032 ETH to usd according to some price', () => { it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
expect(format.ethBaseAmountInUsd(IRRATIONAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe( expect(format.ethBaseUnitAmountInUsd(IRRATIONAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
'$13.43', '$13.43',
); );
}); });
it('returns defaultText param when ethBaseAmountInUsd or ethUsdPrice is not defined', () => { it('returns defaultText param when ethBaseAmountInUsd or ethUsdPrice is not defined', () => {
const defaultText = 'defaultText'; const defaultText = 'defaultText';
expect(format.ethBaseAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText); expect(format.ethBaseUnitAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);
expect(format.ethBaseAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText); expect(format.ethBaseUnitAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText);
expect(format.ethBaseAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText); expect(format.ethBaseUnitAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText);
}); });
it('it allows for configurable decimal places', () => { it('it allows for configurable decimal places', () => {
expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe( expect(format.ethBaseUnitAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe(
'$1.0957', '$1.0957',
); );
}); });

View File

@@ -136,5 +136,28 @@ describe('signTypedDataUtils', () => {
const hashHex = `0x${hash}`; const hashHex = `0x${hash}`;
expect(hashHex).to.be.eq(orderSignTypedDataHashHex); expect(hashHex).to.be.eq(orderSignTypedDataHashHex);
}); });
it('creates a hash of an uninitialized order', () => {
const uninitializedOrder = {
...orderSignTypedData,
message: {
makerAddress: '0x0000000000000000000000000000000000000000',
takerAddress: '0x0000000000000000000000000000000000000000',
makerAssetAmount: 0,
takerAssetAmount: 0,
expirationTimeSeconds: 0,
makerFee: 0,
takerFee: 0,
feeRecipientAddress: '0x0000000000000000000000000000000000000000',
senderAddress: '0x0000000000000000000000000000000000000000',
salt: 0,
makerAssetData: '0x0000000000000000000000000000000000000000',
takerAssetData: '0x0000000000000000000000000000000000000000',
exchangeAddress: '0x0000000000000000000000000000000000000000',
},
};
const hash = signTypedDataUtils.generateTypedDataHash(uninitializedOrder).toString('hex');
const hashHex = `0x${hash}`;
expect(hashHex).to.be.eq('0xfaa49b35faeb9197e9c3ba7a52075e6dad19739549f153b77dfcf59408a4b422');
});
}); });
}); });

View File

@@ -160,7 +160,13 @@ setup(
"publish": PublishCommand, "publish": PublishCommand,
"ganache": GanacheCommand, "ganache": GanacheCommand,
}, },
install_requires=["eth-abi", "eth_utils", "mypy_extensions", "web3"], install_requires=[
"eth-abi",
"eth_utils",
"ethereum",
"mypy_extensions",
"web3",
],
extras_require={ extras_require={
"dev": [ "dev": [
"bandit", "bandit",

View File

@@ -10,8 +10,8 @@ from typing import Any, List
from mypy_extensions import TypedDict from mypy_extensions import TypedDict
from eth_abi import encode_abi
from web3 import Web3 from web3 import Web3
from eth_abi import encode_abi
from .type_assertions import assert_is_string, assert_is_list from .type_assertions import assert_is_string, assert_is_list

View File

@@ -9,3 +9,157 @@ just this purpose. To start it: ``docker run -d -p 8545:8545 0xorg/ganache-cli
--networkId 50 -m "concert load couple harbor equip island argue ramp clarify --networkId 50 -m "concert load couple harbor equip island argue ramp clarify
fence smart topic"``. fence smart topic"``.
""" """
import json
from typing import Dict
from pkg_resources import resource_string
from mypy_extensions import TypedDict
from eth_utils import is_address, keccak, to_checksum_address, to_bytes
from web3 import Web3
from web3.utils import datatypes
import web3.exceptions
class Constants: # pylint: disable=too-few-public-methods
"""Static data used by order utilities."""
contract_name_to_abi = {
"Exchange": json.loads(
resource_string(
"zero_ex.contract_artifacts", "artifacts/Exchange.json"
)
)["compilerOutput"]["abi"]
}
network_to_exchange_addr: Dict[str, str] = {
"1": "0x4f833a24e1f95d70f028921e27040ca56e09ab0b",
"3": "0x4530c0483a1633c7a1c97d2c53721caff2caaaaf",
"42": "0x35dd2932454449b14cee11a94d3674a936d5d7b2",
"50": "0x48bacb9266a570d521063ef5dd96e61686dbe788",
}
null_address = "0x0000000000000000000000000000000000000000"
eip191_header = b"\x19\x01"
eip712_domain_separator_schema_hash = keccak(
b"EIP712Domain(string name,string version,address verifyingContract)"
)
eip712_domain_struct_header = (
eip712_domain_separator_schema_hash
+ keccak(b"0x Protocol")
+ keccak(b"2")
)
eip712_order_schema_hash = keccak(
b"Order("
+ b"address makerAddress,"
+ b"address takerAddress,"
+ b"address feeRecipientAddress,"
+ b"address senderAddress,"
+ b"uint256 makerAssetAmount,"
+ b"uint256 takerAssetAmount,"
+ b"uint256 makerFee,"
+ b"uint256 takerFee,"
+ b"uint256 expirationTimeSeconds,"
+ b"uint256 salt,"
+ b"bytes makerAssetData,"
+ b"bytes takerAssetData"
+ b")"
)
class Order(TypedDict): # pylint: disable=too-many-instance-attributes
"""Object representation of a 0x order."""
maker_address: str
taker_address: str
fee_recipient_address: str
sender_address: str
maker_asset_amount: int
taker_asset_amount: int
maker_fee: int
taker_fee: int
expiration_time_seconds: int
salt: int
maker_asset_data: str
taker_asset_data: str
def make_empty_order() -> Order:
"""Construct an empty order."""
return {
"maker_address": Constants.null_address,
"taker_address": Constants.null_address,
"sender_address": Constants.null_address,
"fee_recipient_address": Constants.null_address,
"maker_asset_data": Constants.null_address,
"taker_asset_data": Constants.null_address,
"salt": 0,
"maker_fee": 0,
"taker_fee": 0,
"maker_asset_amount": 0,
"taker_asset_amount": 0,
"expiration_time_seconds": 0,
}
def generate_order_hash_hex(order: Order, exchange_address: str) -> str:
# docstring considered all one line by pylint: disable=line-too-long
"""Calculate the hash of the given order as a hexadecimal string.
>>> generate_order_hash_hex(
... {
... 'maker_address': "0x0000000000000000000000000000000000000000",
... 'taker_address': "0x0000000000000000000000000000000000000000",
... 'fee_recipient_address': "0x0000000000000000000000000000000000000000",
... 'sender_address': "0x0000000000000000000000000000000000000000",
... 'maker_asset_amount': 1000000000000000000,
... 'taker_asset_amount': 1000000000000000000,
... 'maker_fee': 0,
... 'taker_fee': 0,
... 'expiration_time_seconds': 12345,
... 'salt': 12345,
... 'maker_asset_data': "0000000000000000000000000000000000000000",
... 'taker_asset_data': "0000000000000000000000000000000000000000",
... },
... exchange_address="0x0000000000000000000000000000000000000000",
... )
'55eaa6ec02f3224d30873577e9ddd069a288c16d6fb407210eecbc501fa76692'
""" # noqa: E501 (line too long)
# TODO: use JSON schema validation to validate order. pylint: disable=fixme
def pad_20_bytes_to_32(twenty_bytes: bytes):
return bytes(12) + twenty_bytes
def int_to_32_big_endian_bytes(i: int):
return i.to_bytes(32, byteorder="big")
eip712_domain_struct_hash = keccak(
Constants.eip712_domain_struct_header
+ pad_20_bytes_to_32(to_bytes(hexstr=exchange_address))
)
eip712_order_struct_hash = keccak(
Constants.eip712_order_schema_hash
+ pad_20_bytes_to_32(to_bytes(hexstr=order["maker_address"]))
+ pad_20_bytes_to_32(to_bytes(hexstr=order["taker_address"]))
+ pad_20_bytes_to_32(to_bytes(hexstr=order["fee_recipient_address"]))
+ pad_20_bytes_to_32(to_bytes(hexstr=order["sender_address"]))
+ int_to_32_big_endian_bytes(order["maker_asset_amount"])
+ int_to_32_big_endian_bytes(order["taker_asset_amount"])
+ int_to_32_big_endian_bytes(order["maker_fee"])
+ int_to_32_big_endian_bytes(order["taker_fee"])
+ int_to_32_big_endian_bytes(order["expiration_time_seconds"])
+ int_to_32_big_endian_bytes(order["salt"])
+ keccak(to_bytes(hexstr=order["maker_asset_data"]))
+ keccak(to_bytes(hexstr=order["taker_asset_data"]))
)
return keccak(
Constants.eip191_header
+ eip712_domain_struct_hash
+ eip712_order_struct_hash
).hex()

View File

@@ -1,30 +1,16 @@
"""Signature utilities.""" """Signature utilities."""
from typing import Dict, Tuple from typing import Tuple
import json
from pkg_resources import resource_string
from eth_utils import is_address, to_checksum_address from eth_utils import is_address, to_checksum_address
from web3 import Web3 from web3 import Web3
import web3.exceptions import web3.exceptions
from web3.utils import datatypes from web3.utils import datatypes
from zero_ex.order_utils import Constants
from zero_ex.dev_utils.type_assertions import assert_is_hex_string from zero_ex.dev_utils.type_assertions import assert_is_hex_string
# prefer `black` formatting. pylint: disable=C0330
EXCHANGE_ABI = json.loads(
resource_string("zero_ex.contract_artifacts", "artifacts/Exchange.json")
)["compilerOutput"]["abi"]
network_to_exchange_addr: Dict[str, str] = {
"1": "0x4f833a24e1f95d70f028921e27040ca56e09ab0b",
"3": "0x4530c0483a1633c7a1c97d2c53721caff2caaaaf",
"42": "0x35dd2932454449b14cee11a94d3674a936d5d7b2",
"50": "0x48bacb9266a570d521063ef5dd96e61686dbe788",
}
# prefer `black` formatting. pylint: disable=C0330 # prefer `black` formatting. pylint: disable=C0330
def is_valid_signature( def is_valid_signature(
provider: Web3.HTTPProvider, data: str, signature: str, signer_address: str provider: Web3.HTTPProvider, data: str, signature: str, signer_address: str
@@ -63,10 +49,11 @@ def is_valid_signature(
web3_instance = Web3(provider) web3_instance = Web3(provider)
# false positive from pylint: disable=no-member # false positive from pylint: disable=no-member
network_id = web3_instance.net.version network_id = web3_instance.net.version
contract_address = network_to_exchange_addr[network_id] contract_address = Constants.network_to_exchange_addr[network_id]
# false positive from pylint: disable=no-member # false positive from pylint: disable=no-member
contract: datatypes.Contract = web3_instance.eth.contract( contract: datatypes.Contract = web3_instance.eth.contract(
address=to_checksum_address(contract_address), abi=EXCHANGE_ABI address=to_checksum_address(contract_address),
abi=Constants.contract_name_to_abi["Exchange"],
) )
try: try:
return ( return (

View File

@@ -0,0 +1,18 @@
"""Test zero_ex.order_utils.get_order_hash_hex()."""
from zero_ex.order_utils import (
generate_order_hash_hex,
make_empty_order,
Constants,
)
def test_get_order_hash_hex__empty_order():
"""Test the hashing of an uninitialized order."""
expected_hash_hex = (
"faa49b35faeb9197e9c3ba7a52075e6dad19739549f153b77dfcf59408a4b422"
)
actual_hash_hex = generate_order_hash_hex(
make_empty_order(), Constants.null_address
)
assert actual_hash_hex == expected_hash_hex