aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/asset-buyer/CHANGELOG.json4
-rw-r--r--packages/asset-buyer/src/index.ts1
-rw-r--r--packages/instant/package.json4
-rw-r--r--packages/instant/src/components/amount_input.tsx12
-rw-r--r--packages/instant/src/components/asset_amount_input.tsx52
-rw-r--r--packages/instant/src/components/buy_button.tsx58
-rw-r--r--packages/instant/src/components/instant_heading.tsx36
-rw-r--r--packages/instant/src/components/order_details.tsx110
-rw-r--r--packages/instant/src/components/zero_ex_instant.tsx3
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx13
-rw-r--r--packages/instant/src/constants.ts6
-rw-r--r--packages/instant/src/containers/latest_buy_quote_order_details.ts27
-rw-r--r--packages/instant/src/containers/selected_asset_amount_input.ts72
-rw-r--r--packages/instant/src/containers/selected_asset_amount_input.tsx36
-rw-r--r--packages/instant/src/containers/selected_asset_buy_button.ts55
-rw-r--r--packages/instant/src/containers/selected_asset_instant_heading.ts27
-rw-r--r--packages/instant/src/data/asset_meta_data.ts15
-rw-r--r--packages/instant/src/redux/actions.ts36
-rw-r--r--packages/instant/src/redux/async_data.ts22
-rw-r--r--packages/instant/src/redux/reducer.ts27
-rw-r--r--packages/instant/src/types.ts36
-rw-r--r--packages/instant/src/util/asset_buyer.ts9
-rw-r--r--packages/instant/src/util/coinbase_api.ts10
-rw-r--r--packages/instant/src/util/format.ts45
-rw-r--r--packages/instant/src/util/provider.ts12
-rw-r--r--packages/instant/src/util/util.ts5
-rw-r--r--packages/instant/src/util/web3_wrapper.ts5
-rw-r--r--packages/order-utils/CHANGELOG.json4
-rw-r--r--packages/order-utils/src/asset_data_utils.ts4
-rw-r--r--packages/types/CHANGELOG.json4
-rw-r--r--packages/types/src/index.ts6
31 files changed, 636 insertions, 120 deletions
diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index b50fe2c63..ad9257276 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -6,6 +6,10 @@
"note": "Add `gasLimit` and `gasPrice` as optional properties on `BuyQuoteExecutionOpts`"
},
{
+ "note": "Export `BuyQuoteInfo` type",
+ "pr": 1131
+ },
+ {
"note":
"Updated to use new modularized artifacts and the latest version of @0xproject/contract-wrappers",
"pr": 1105
diff --git a/packages/asset-buyer/src/index.ts b/packages/asset-buyer/src/index.ts
index 2da2724d7..e856843f0 100644
--- a/packages/asset-buyer/src/index.ts
+++ b/packages/asset-buyer/src/index.ts
@@ -9,6 +9,7 @@ export {
AssetBuyerError,
AssetBuyerOpts,
BuyQuote,
+ BuyQuoteInfo,
BuyQuoteExecutionOpts,
BuyQuoteRequestOpts,
OrderProvider,
diff --git a/packages/instant/package.json b/packages/instant/package.json
index d15f1ad38..befedfc17 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -44,6 +44,7 @@
"homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
"dependencies": {
"@0xproject/asset-buyer": "^2.0.0",
+ "@0xproject/order-utils": "^1.0.7",
"@0xproject/types": "^1.1.4",
"@0xproject/typescript-typings": "^2.0.2",
"@0xproject/utils": "^2.0.2",
@@ -55,7 +56,8 @@
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
- "styled-components": "^3.4.9"
+ "styled-components": "^3.4.9",
+ "ts-optchain": "^0.1.1"
},
"devDependencies": {
"@0xproject/tslint-config": "^1.0.8",
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index 38810063d..7644f5f67 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
import { Container, Input } from './ui';
@@ -10,10 +11,13 @@ export interface AmountInputProps {
fontColor?: ColorOption;
fontSize?: string;
value?: BigNumber;
- onChange?: (value?: BigNumber) => void;
+ onChange: (value?: BigNumber) => void;
}
export class AmountInput extends React.Component<AmountInputProps> {
+ public static defaultProps = {
+ onChange: util.boundNoop,
+ };
public render(): React.ReactNode {
const { fontColor, fontSize, value } = this.props;
return (
@@ -24,7 +28,7 @@ export class AmountInput extends React.Component<AmountInputProps> {
onChange={this._handleChange}
value={!_.isUndefined(value) ? value.toString() : ''}
placeholder="0.00"
- width="2em"
+ width="2.2em"
/>
</Container>
);
@@ -40,8 +44,6 @@ export class AmountInput extends React.Component<AmountInputProps> {
return;
}
}
- if (!_.isUndefined(this.props.onChange)) {
- this.props.onChange(bigNumberValue);
- }
+ this.props.onChange(bigNumberValue);
};
}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
new file mode 100644
index 000000000..7c6b03ee9
--- /dev/null
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -0,0 +1,52 @@
+import { AssetProxyId } from '@0xproject/types';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { assetMetaData } from '../data/asset_meta_data';
+import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
+
+import { AmountInput, AmountInputProps } from './amount_input';
+import { Container, Text } from './ui';
+
+export interface AssetAmountInputProps extends AmountInputProps {
+ assetData?: string;
+ onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+ public static defaultProps = {
+ onChange: util.boundNoop,
+ };
+ public render(): React.ReactNode {
+ const { assetData, onChange, ...rest } = this.props;
+ return (
+ <Container>
+ <AmountInput {...rest} onChange={this._handleChange} />
+ <Container display="inline-block" marginLeft="10px">
+ <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+ {this._getAssetSymbolLabel()}
+ </Text>
+ </Container>
+ </Container>
+ );
+ }
+ private readonly _getAssetSymbolLabel = (): string => {
+ const unknownLabel = '???';
+ if (_.isUndefined(this.props.assetData)) {
+ return unknownLabel;
+ }
+ const metaData = assetMetaData[this.props.assetData];
+ if (_.isUndefined(metaData)) {
+ return unknownLabel;
+ }
+ if (metaData.assetProxyId === AssetProxyId.ERC20) {
+ return metaData.symbol;
+ }
+ return unknownLabel;
+ };
+ private readonly _handleChange = (value?: BigNumber): void => {
+ this.props.onChange(value, this.props.assetData);
+ };
+}
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 5a32b9575..0706817c9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,19 +1,53 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { assetBuyer } from '../util/asset_buyer';
+import { util } from '../util/util';
+import { web3Wrapper } from '../util/web3_wrapper';
import { Button, Container, Text } from './ui';
-export interface BuyButtonProps {}
+export interface BuyButtonProps {
+ buyQuote?: BuyQuote;
+ onClick: (buyQuote: BuyQuote) => void;
+ onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
+ onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
+ text: string;
+}
-export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
- <Container padding="20px" width="100%">
- <Button width="100%">
- <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
- Buy
- </Text>
- </Button>
- </Container>
-);
-
-BuyButton.displayName = 'BuyButton';
+export class BuyButton extends React.Component<BuyButtonProps> {
+ public static defaultProps = {
+ onClick: util.boundNoop,
+ onBuySuccess: util.boundNoop,
+ onBuyFailure: util.boundNoop,
+ };
+ public render(): React.ReactNode {
+ const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+ return (
+ <Container padding="20px" width="100%">
+ <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
+ <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
+ {this.props.text}
+ </Text>
+ </Button>
+ </Container>
+ );
+ }
+ private readonly _handleClick = async () => {
+ // The button is disabled when there is no buy quote anyway.
+ if (_.isUndefined(this.props.buyQuote)) {
+ return;
+ }
+ this.props.onClick(this.props.buyQuote);
+ let txnHash;
+ try {
+ txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+ await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+ this.props.onBuySuccess(this.props.buyQuote, txnHash);
+ } catch {
+ this.props.onBuyFailure(this.props.buyQuote, txnHash);
+ }
+ };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index be0414b8d..492c1b2c0 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,11 +1,32 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
import * as React from 'react';
import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input';
import { ColorOption } from '../style/theme';
+import { format } from '../util/format';
import { Container, Flex, Text } from './ui';
-export interface InstantHeadingProps {}
+export interface InstantHeadingProps {
+ selectedAssetAmount?: BigNumber;
+ totalEthBaseAmount?: BigNumber;
+ ethUsdPrice?: BigNumber;
+}
+
+const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => {
+ if (_.isUndefined(selectedAssetAmount)) {
+ return '0 ETH';
+ }
+ return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading');
+};
+
+const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => {
+ if (_.isUndefined(selectedAssetAmount)) {
+ return '$0.00';
+ }
+ return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading');
+};
export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => (
<Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%" borderRadius="3px 3px 0px 0px">
@@ -22,22 +43,15 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
</Text>
</Container>
<Flex direction="row" justify="space-between">
- <Container>
- <SelectedAssetAmountInput fontSize="45px" />
- <Container display="inline-block" marginLeft="10px">
- <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
- rep
- </Text>
- </Container>
- </Container>
+ <SelectedAssetAmountInput fontSize="45px" />
<Flex direction="column" justify="space-between">
<Container marginBottom="5px">
<Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
- 0 ETH
+ {displaytotalEthBaseAmount(props)}
</Text>
</Container>
<Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
- $0.00
+ {displayUsdAmount(props)}
</Text>
</Flex>
</Flex>
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index dbf2c1f0b..a15ff411b 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -1,53 +1,90 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
import * as React from 'react';
+import { oc } from 'ts-optchain';
import { ColorOption } from '../style/theme';
+import { format } from '../util/format';
import { Container, Flex, Text } from './ui';
-export interface OrderDetailsProps {}
-
-export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
- <Container padding="20px" width="100%">
- <Container marginBottom="10px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.primaryColor}
- fontWeight={600}
- textTransform="uppercase"
- fontSize="14px"
- >
- Order Details
- </Text>
- </Container>
- <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" />
- <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" />
- <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} />
- </Container>
-);
-
-OrderDetails.displayName = 'OrderDetails';
-
-export interface OrderDetailsRowProps {
- name: string;
- primaryValue: string;
- secondaryValue: string;
+export interface OrderDetailsProps {
+ buyQuoteInfo?: BuyQuoteInfo;
+ ethUsdPrice?: BigNumber;
+}
+
+export class OrderDetails extends React.Component<OrderDetailsProps> {
+ public render(): React.ReactNode {
+ const { buyQuoteInfo, ethUsdPrice } = this.props;
+ const buyQuoteAccessor = oc(buyQuoteInfo);
+ const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice();
+ const ethTokenFee = buyQuoteAccessor.feeEthAmount();
+ const totalEthAmount = buyQuoteAccessor.totalEthAmount();
+ return (
+ <Container padding="20px" width="100%">
+ <Container marginBottom="10px">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="14px"
+ >
+ Order Details
+ </Text>
+ </Container>
+ <EthAmountRow
+ rowLabel="Token Price"
+ ethAmount={ethAssetPrice}
+ ethUsdPrice={ethUsdPrice}
+ isEthAmountInBaseUnits={false}
+ />
+ <EthAmountRow rowLabel="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} />
+ <EthAmountRow
+ rowLabel="Total Cost"
+ ethAmount={totalEthAmount}
+ ethUsdPrice={ethUsdPrice}
+ shouldEmphasize={true}
+ />
+ </Container>
+ );
+ }
+}
+
+export interface EthAmountRowProps {
+ rowLabel: string;
+ ethAmount?: BigNumber;
+ isEthAmountInBaseUnits?: boolean;
+ ethUsdPrice?: BigNumber;
shouldEmphasize?: boolean;
}
-export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => {
- const fontWeight = props.shouldEmphasize ? 700 : 400;
+export const EthAmountRow: React.StatelessComponent<EthAmountRowProps> = ({
+ rowLabel,
+ ethAmount,
+ isEthAmountInBaseUnits,
+ ethUsdPrice,
+ shouldEmphasize,
+}) => {
+ const fontWeight = shouldEmphasize ? 700 : 400;
+ const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+ const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+ const usdPriceSection = _.isUndefined(ethUsdPrice) ? null : (
+ <Container marginRight="3px" display="inline-block">
+ <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text>
+ </Container>
+ );
return (
<Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
<Flex justify="space-between">
<Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {props.name}
+ {rowLabel}
</Text>
<Container>
- <Container marginRight="3px" display="inline-block">
- <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text>
- </Container>
+ {usdPriceSection}
<Text fontWeight={fontWeight} fontColor={ColorOption.grey}>
- {props.primaryValue}
+ {ethFormatter(ethAmount)}
</Text>
</Container>
</Flex>
@@ -55,8 +92,9 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p
);
};
-OrderDetailsRow.defaultProps = {
+EthAmountRow.defaultProps = {
shouldEmphasize: false,
+ isEthAmountInBaseUnits: true,
};
-OrderDetailsRow.displayName = 'OrderDetailsRow';
+EthAmountRow.displayName = 'EthAmountRow';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 0e6230d1b..f6472e811 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { Provider } from 'react-redux';
+import { asyncData } from '../redux/async_data';
import { store } from '../redux/store';
import { fonts } from '../style/fonts';
import { theme, ThemeProvider } from '../style/theme';
@@ -8,6 +9,8 @@ import { theme, ThemeProvider } from '../style/theme';
import { ZeroExInstantContainer } from './zero_ex_instant_container';
fonts.include();
+// tslint:disable-next-line:no-floating-promises
+asyncData.fetchAndDispatchToStore();
export interface ZeroExInstantProps {}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index a384c5f1b..51f9dc63e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,10 +1,11 @@
import * as React from 'react';
+import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
+import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
+import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
+
import { ColorOption } from '../style/theme';
-import { BuyButton } from './buy_button';
-import { InstantHeading } from './instant_heading';
-import { OrderDetails } from './order_details';
import { Container, Flex } from './ui';
export interface ZeroExInstantContainerProps {}
@@ -19,9 +20,9 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta
hasBoxShadow={true}
>
<Flex direction="column" justify="flex-start">
- <InstantHeading />
- <OrderDetails />
- <BuyButton />
+ <SelectedAssetInstantHeading />
+ <LatestBuyQuoteOrderDetails />
+ <SelectedAssetBuyButton />
</Flex>
</Container>
</Container>
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
new file mode 100644
index 000000000..1fd321c5a
--- /dev/null
+++ b/packages/instant/src/constants.ts
@@ -0,0 +1,6 @@
+import { BigNumber } from '@0xproject/utils';
+export const BIG_NUMBER_ZERO = new BigNumber(0);
+export const sraApiUrl = 'https://api.radarrelay.com/0x/v2/';
+export const zrxAssetData = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498';
+export const zrxDecimals = 18;
+export const ethDecimals = 18;
diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
new file mode 100644
index 000000000..b354c78fa
--- /dev/null
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -0,0 +1,27 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { oc } from 'ts-optchain';
+
+import { State } from '../redux/reducer';
+
+import { OrderDetails } from '../components/order_details';
+
+export interface LatestBuyQuoteOrderDetailsProps {}
+
+interface ConnectedState {
+ buyQuoteInfo?: BuyQuoteInfo;
+ ethUsdPrice?: BigNumber;
+}
+
+const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
+ // use the worst case quote info
+ buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
+ ethUsdPrice: state.ethUsdPrice,
+});
+
+export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
+ mapStateToProps,
+)(OrderDetails);
diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts
new file mode 100644
index 000000000..f2ca96ae4
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_amount_input.ts
@@ -0,0 +1,72 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { zrxDecimals } from '../constants';
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { ColorOption } from '../style/theme';
+import { AsyncProcessState } from '../types';
+import { assetBuyer } from '../util/asset_buyer';
+
+import { AssetAmountInput } from '../components/asset_amount_input';
+
+export interface SelectedAssetAmountInputProps {
+ fontColor?: ColorOption;
+ fontSize?: string;
+}
+
+interface ConnectedState {
+ value?: BigNumber;
+ assetData?: string;
+}
+
+interface ConnectedDispatch {
+ onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
+ value: state.selectedAssetAmount,
+ assetData: state.selectedAssetData,
+});
+
+const updateBuyQuoteAsync = async (
+ dispatch: Dispatch<Action>,
+ assetData?: string,
+ assetAmount?: BigNumber,
+): Promise<void> => {
+ if (_.isUndefined(assetAmount) || _.isUndefined(assetData)) {
+ return;
+ }
+ // get a new buy quote.
+ const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals);
+ const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue);
+ // invalidate the last buy quote.
+ dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+};
+
+const debouncedUpdateBuyQuoteAsync = _.debounce(updateBuyQuoteAsync, 200, { trailing: true });
+
+const mapDispatchToProps = (
+ dispatch: Dispatch<Action>,
+ _ownProps: SelectedAssetAmountInputProps,
+): ConnectedDispatch => ({
+ onChange: (value, assetData) => {
+ // Update the input
+ dispatch(actions.updateSelectedAssetAmount(value));
+ // invalidate the last buy quote.
+ dispatch(actions.updateLatestBuyQuote(undefined));
+ // reset our buy state
+ dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE));
+ // tslint:disable-next-line:no-floating-promises
+ debouncedUpdateBuyQuoteAsync(dispatch, assetData, value);
+ },
+});
+
+export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(AssetAmountInput);
diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx
deleted file mode 100644
index 800a4c568..000000000
--- a/packages/instant/src/containers/selected_asset_amount_input.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { BigNumber } from '@0xproject/utils';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { State } from '../redux/reducer';
-import { ColorOption } from '../style/theme';
-import { Action, ActionTypes } from '../types';
-
-import { AmountInput } from '../components/amount_input';
-
-export interface SelectedAssetAmountInputProps {
- fontColor?: ColorOption;
- fontSize?: string;
-}
-
-interface ConnectedState {
- value?: BigNumber;
-}
-
-interface ConnectedDispatch {
- onChange?: (value?: BigNumber) => void;
-}
-
-const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({
- value: state.selectedAssetAmount,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({
- onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }),
-});
-
-export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(
- mapStateToProps,
- mapDispatchToProps,
-)(AmountInput);
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
new file mode 100644
index 000000000..4cbaf5537
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -0,0 +1,55 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { AsyncProcessState } from '../types';
+
+import { BuyButton } from '../components/buy_button';
+
+export interface SelectedAssetBuyButtonProps {}
+
+interface ConnectedState {
+ text: string;
+ buyQuote?: BuyQuote;
+}
+
+interface ConnectedDispatch {
+ onClick: (buyQuote: BuyQuote) => void;
+ onBuySuccess: (buyQuote: BuyQuote) => void;
+ onBuyFailure: (buyQuote: BuyQuote) => void;
+}
+
+const textForState = (state: AsyncProcessState): string => {
+ switch (state) {
+ case AsyncProcessState.NONE:
+ return 'Buy';
+ case AsyncProcessState.PENDING:
+ return '...Loading';
+ case AsyncProcessState.SUCCESS:
+ return 'Success!';
+ case AsyncProcessState.FAILURE:
+ return 'Failed';
+ default:
+ return 'Buy';
+ }
+};
+
+const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
+ text: textForState(state.selectedAssetBuyState),
+ buyQuote: state.latestBuyQuote,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
+ onClick: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.PENDING)),
+ onBuySuccess: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.SUCCESS)),
+ onBuyFailure: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.FAILURE)),
+});
+
+export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(BuyButton);
diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts
new file mode 100644
index 000000000..c97cfe11a
--- /dev/null
+++ b/packages/instant/src/containers/selected_asset_instant_heading.ts
@@ -0,0 +1,27 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { oc } from 'ts-optchain';
+
+import { State } from '../redux/reducer';
+
+import { InstantHeading } from '../components/instant_heading';
+
+export interface InstantHeadingProps {}
+
+interface ConnectedState {
+ selectedAssetAmount?: BigNumber;
+ totalEthBaseAmount?: BigNumber;
+ ethUsdPrice?: BigNumber;
+}
+
+const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
+ selectedAssetAmount: state.selectedAssetAmount,
+ totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
+ ethUsdPrice: state.ethUsdPrice,
+});
+
+export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)(
+ InstantHeading,
+);
diff --git a/packages/instant/src/data/asset_meta_data.ts b/packages/instant/src/data/asset_meta_data.ts
new file mode 100644
index 000000000..e4d3e8f73
--- /dev/null
+++ b/packages/instant/src/data/asset_meta_data.ts
@@ -0,0 +1,15 @@
+import { AssetProxyId, ObjectMap } from '@0xproject/types';
+
+import { zrxAssetData } from '../constants';
+import { AssetMetaData } from '../types';
+
+// Map from assetData string to AssetMetaData object
+// TODO: import this from somewhere else.
+export const assetMetaData: ObjectMap<AssetMetaData> = {
+ [zrxAssetData]: {
+ assetProxyId: AssetProxyId.ERC20,
+ decimals: 18,
+ primaryColor: 'rgb(54, 50, 60)',
+ symbol: 'zrx',
+ },
+};
diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
new file mode 100644
index 000000000..7d07b4950
--- /dev/null
+++ b/packages/instant/src/redux/actions.ts
@@ -0,0 +1,36 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+
+import { ActionsUnion, AsyncProcessState } from '../types';
+
+export interface PlainAction<T extends string> {
+ type: T;
+}
+
+export interface ActionWithPayload<T extends string, P> extends PlainAction<T> {
+ data: P;
+}
+
+export type Action = ActionsUnion<typeof actions>;
+
+function createAction<T extends string>(type: T): PlainAction<T>;
+function createAction<T extends string, P>(type: T, data: P): ActionWithPayload<T, P>;
+function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> | ActionWithPayload<T, P> {
+ return _.isUndefined(data) ? { type } : { type, data };
+}
+
+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_LATEST_BUY_QUOTE = 'UPDATE_LATEST_BUY_QUOTE',
+}
+
+export const actions = {
+ updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
+ updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+ updateSelectedAssetBuyState: (buyState: AsyncProcessState) =>
+ createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState),
+ updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote),
+};
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
new file mode 100644
index 000000000..348838307
--- /dev/null
+++ b/packages/instant/src/redux/async_data.ts
@@ -0,0 +1,22 @@
+import { BIG_NUMBER_ZERO } from '../constants';
+import { coinbaseApi } from '../util/coinbase_api';
+
+import { ActionTypes } from './actions';
+
+import { store } from './store';
+
+export const asyncData = {
+ fetchAndDispatchToStore: async () => {
+ let ethUsdPrice = BIG_NUMBER_ZERO;
+ try {
+ ethUsdPrice = await coinbaseApi.getEthUsdPrice();
+ } catch (e) {
+ // ignore
+ } finally {
+ store.dispatch({
+ type: ActionTypes.UPDATE_ETH_USD_PRICE,
+ data: ethUsdPrice,
+ });
+ }
+ },
+};
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 5026895ae..adecf2ab7 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -1,16 +1,27 @@
+import { BuyQuote } from '@0xproject/asset-buyer';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
-import { Action, ActionTypes } from '../types';
+import { zrxAssetData } from '../constants';
+import { AsyncProcessState } from '../types';
+
+import { Action, ActionTypes } from './actions';
export interface State {
- ethUsdPrice?: string;
+ selectedAssetData?: string;
selectedAssetAmount?: BigNumber;
+ selectedAssetBuyState: AsyncProcessState;
+ ethUsdPrice?: BigNumber;
+ latestBuyQuote?: BuyQuote;
}
export const INITIAL_STATE: State = {
- ethUsdPrice: undefined,
+ // TODO: Remove hardcoded zrxAssetData
+ selectedAssetData: zrxAssetData,
selectedAssetAmount: undefined,
+ selectedAssetBuyState: AsyncProcessState.NONE,
+ ethUsdPrice: undefined,
+ latestBuyQuote: undefined,
};
export const reducer = (state: State = INITIAL_STATE, action: Action): State => {
@@ -25,6 +36,16 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
...state,
selectedAssetAmount: action.data,
};
+ case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
+ return {
+ ...state,
+ latestBuyQuote: action.data,
+ };
+ case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE:
+ return {
+ ...state,
+ selectedAssetBuyState: action.data,
+ };
default:
return state;
}
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index d150bd8ab..bf3ee392f 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -1,9 +1,33 @@
-export enum ActionTypes {
- UPDATE_ETH_USD_PRICE,
- UPDATE_SELECTED_ASSET_AMOUNT,
+import { AssetProxyId, ObjectMap } from '@0xproject/types';
+
+// Reusable
+export enum AsyncProcessState {
+ NONE,
+ PENDING,
+ SUCCESS,
+ FAILURE,
+}
+
+export type FunctionType = (...args: any[]) => any;
+export type ActionCreatorsMapObject = ObjectMap<FunctionType>;
+export type ActionsUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>;
+
+export interface ERC20AssetMetaData {
+ assetProxyId: AssetProxyId.ERC20;
+ decimals: number;
+ primaryColor?: string;
+ symbol: string;
}
-export interface Action {
- type: ActionTypes;
- data?: any;
+export interface ERC721AssetMetaData {
+ assetProxyId: AssetProxyId.ERC721;
+ name: string;
+ primaryColor?: string;
+}
+
+export type AssetMetaData = ERC20AssetMetaData | ERC721AssetMetaData;
+
+export enum Network {
+ Kovan = 42,
+ Mainnet = 1,
}
diff --git a/packages/instant/src/util/asset_buyer.ts b/packages/instant/src/util/asset_buyer.ts
new file mode 100644
index 000000000..27d66d600
--- /dev/null
+++ b/packages/instant/src/util/asset_buyer.ts
@@ -0,0 +1,9 @@
+import { AssetBuyer } from '@0xproject/asset-buyer';
+
+import { sraApiUrl } from '../constants';
+
+import { getProvider } from './provider';
+
+const provider = getProvider();
+
+export const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, sraApiUrl);
diff --git a/packages/instant/src/util/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts
new file mode 100644
index 000000000..94a5d3c80
--- /dev/null
+++ b/packages/instant/src/util/coinbase_api.ts
@@ -0,0 +1,10 @@
+import { BigNumber } from '@0xproject/utils';
+
+const baseEndpoint = 'https://api.coinbase.com/v2';
+export const coinbaseApi = {
+ getEthUsdPrice: async (): Promise<BigNumber> => {
+ const res = await fetch(`${baseEndpoint}/prices/ETH-USD/buy`);
+ const resJson = await res.json();
+ return new BigNumber(resJson.data.amount);
+ },
+};
diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
new file mode 100644
index 000000000..de7eb62e6
--- /dev/null
+++ b/packages/instant/src/util/format.ts
@@ -0,0 +1,45 @@
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as _ from 'lodash';
+
+import { ethDecimals } from '../constants';
+
+export const format = {
+ ethBaseAmount: (ethBaseAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
+ if (_.isUndefined(ethBaseAmount)) {
+ return defaultText;
+ }
+ const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+ return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
+ },
+ ethUnitAmount: (ethUnitAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => {
+ if (_.isUndefined(ethUnitAmount)) {
+ return defaultText;
+ }
+ const roundedAmount = ethUnitAmount.round(decimalPlaces);
+ return `${roundedAmount} ETH`;
+ },
+ ethBaseAmountInUsd: (
+ ethBaseAmount?: BigNumber,
+ ethUsdPrice?: BigNumber,
+ decimalPlaces: number = 2,
+ defaultText: string = '$0.00',
+ ): string => {
+ if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
+ return defaultText;
+ }
+ const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ethDecimals);
+ return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
+ },
+ ethUnitAmountInUsd: (
+ ethUnitAmount?: BigNumber,
+ ethUsdPrice?: BigNumber,
+ decimalPlaces: number = 2,
+ defaultText: string = '$0.00',
+ ): string => {
+ if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
+ return defaultText;
+ }
+ return `$${ethUnitAmount.mul(ethUsdPrice).round(decimalPlaces)}`;
+ },
+};
diff --git a/packages/instant/src/util/provider.ts b/packages/instant/src/util/provider.ts
new file mode 100644
index 000000000..49705fd11
--- /dev/null
+++ b/packages/instant/src/util/provider.ts
@@ -0,0 +1,12 @@
+import { Provider } from 'ethereum-types';
+
+export const getProvider = (): Provider => {
+ const injectedWeb3 = (window as any).web3 || undefined;
+ try {
+ // Use MetaMask/Mist provider
+ return injectedWeb3.currentProvider;
+ } catch (err) {
+ // Throws when user doesn't have MetaMask/Mist running
+ throw new Error(`No injected web3 found: ${err}`);
+ }
+};
diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts
new file mode 100644
index 000000000..232a86850
--- /dev/null
+++ b/packages/instant/src/util/util.ts
@@ -0,0 +1,5 @@
+import * as _ from 'lodash';
+
+export const util = {
+ boundNoop: _.noop.bind(_),
+};
diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts
new file mode 100644
index 000000000..d7e43521f
--- /dev/null
+++ b/packages/instant/src/util/web3_wrapper.ts
@@ -0,0 +1,5 @@
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+
+import { getProvider } from './provider';
+
+export const web3Wrapper = new Web3Wrapper(getProvider());
diff --git a/packages/order-utils/CHANGELOG.json b/packages/order-utils/CHANGELOG.json
index 5a0c0db47..9bf16ef2a 100644
--- a/packages/order-utils/CHANGELOG.json
+++ b/packages/order-utils/CHANGELOG.json
@@ -14,6 +14,10 @@
{
"note": "Rename `ecSignOrderHashAsync` to `ecSignHashAsync` removing `SignerType` parameter.",
"pr": 1102
+ },
+ {
+ "note": "Use `AssetData` union type for function return values.",
+ "pr": 1131
}
]
},
diff --git a/packages/order-utils/src/asset_data_utils.ts b/packages/order-utils/src/asset_data_utils.ts
index 0c0b59548..12c11bce9 100644
--- a/packages/order-utils/src/asset_data_utils.ts
+++ b/packages/order-utils/src/asset_data_utils.ts
@@ -1,4 +1,4 @@
-import { AssetProxyId, ERC20AssetData, ERC721AssetData } from '@0xproject/types';
+import { AssetData, AssetProxyId, ERC20AssetData, ERC721AssetData } from '@0xproject/types';
import { BigNumber } from '@0xproject/utils';
import ethAbi = require('ethereumjs-abi');
import ethUtil = require('ethereumjs-util');
@@ -112,7 +112,7 @@ export const assetDataUtils = {
* @param assetData Hex encoded assetData string to decode
* @return Either a ERC20 or ERC721 assetData object
*/
- decodeAssetDataOrThrow(assetData: string): ERC20AssetData | ERC721AssetData {
+ decodeAssetDataOrThrow(assetData: string): AssetData {
const assetProxyId = assetDataUtils.decodeAssetProxyId(assetData);
switch (assetProxyId) {
case AssetProxyId.ERC20:
diff --git a/packages/types/CHANGELOG.json b/packages/types/CHANGELOG.json
index 53e1f3716..106dc3281 100644
--- a/packages/types/CHANGELOG.json
+++ b/packages/types/CHANGELOG.json
@@ -9,6 +9,10 @@
{
"note": "Added `ZeroExTransaction` type for Exchange executeTransaction",
"pr": 1102
+ },
+ {
+ "note": "Add `AssetData` union type (`type AssetData = ERC20AssetData | ERC721AssetData`)",
+ "pr": 1131
}
]
},
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index d33048b61..c038df50c 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -158,16 +158,18 @@ export enum AssetProxyId {
}
export interface ERC20AssetData {
- assetProxyId: string;
+ assetProxyId: AssetProxyId.ERC20;
tokenAddress: string;
}
export interface ERC721AssetData {
- assetProxyId: string;
+ assetProxyId: AssetProxyId.ERC721;
tokenAddress: string;
tokenId: BigNumber;
}
+export type AssetData = ERC20AssetData | ERC721AssetData;
+
// TODO: DRY. These should be extracted from contract code.
export enum RevertReason {
OrderUnfillable = 'ORDER_UNFILLABLE',