diff options
28 files changed, 619 insertions, 110 deletions
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 ff40ba2ea..35cc39d27 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", diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx index 38810063d..5b81a3d68 100644 --- a/packages/instant/src/components/amount_input.tsx +++ b/packages/instant/src/components/amount_input.tsx @@ -10,10 +10,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: _.noop.bind(_), + }; public render(): React.ReactNode { const { fontColor, fontSize, value } = this.props; return ( @@ -24,7 +27,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 +43,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..915c66e1e --- /dev/null +++ b/packages/instant/src/components/asset_amount_input.tsx @@ -0,0 +1,51 @@ +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 { 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: _.noop.bind(_), + }; + 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._getLabel()} + </Text> + </Container> + </Container> + ); + } + private readonly _getLabel = (): 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..097b8e547 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -1,19 +1,56 @@ +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 { 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) => void; + onBuyFailure: (buyQuote: BuyQuote) => 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> -); +const boundNoop = _.noop.bind(_); -BuyButton.displayName = 'BuyButton'; +export class BuyButton extends React.Component<BuyButtonProps> { + public static defaultProps = { + onClick: boundNoop, + onBuySuccess: boundNoop, + onBuyFailure: 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); + try { + const txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote, { + // HACK: There is a calculation issue in asset-buyer. ETH is refunded anyway so just over-estimate. + ethAmount: this.props.buyQuote.worstCaseQuoteInfo.totalEthAmount.mul(2), + }); + await web3Wrapper.awaitTransactionSuccessAsync(txnHash); + } catch { + this.props.onBuyFailure(this.props.buyQuote); + } + this.props.onBuySuccess(this.props.buyQuote); + }; +} 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..66e7e2406 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -1,53 +1,85 @@ +import { BuyQuoteInfo } from '@0xproject/asset-buyer'; +import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; import * as React from 'react'; 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> -); +export interface OrderDetailsProps { + buyQuoteInfo?: BuyQuoteInfo; + ethUsdPrice?: BigNumber; +} -OrderDetails.displayName = 'OrderDetails'; +export class OrderDetails extends React.Component<OrderDetailsProps> { + public render(): React.ReactNode { + const { buyQuoteInfo, ethUsdPrice } = this.props; + const ethAssetPrice = _.get(buyQuoteInfo, 'ethPerAssetPrice'); + const ethTokenFee = _.get(buyQuoteInfo, 'feeEthAmount'); + const totalEthAmount = _.get(buyQuoteInfo, '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> + <OrderDetailsRow + name="Token Price" + ethAmount={ethAssetPrice} + ethUsdPrice={ethUsdPrice} + shouldConvertEthToUnitAmount={false} + /> + <OrderDetailsRow name="Fee" ethAmount={ethTokenFee} ethUsdPrice={ethUsdPrice} /> + <OrderDetailsRow + name="Total Cost" + ethAmount={totalEthAmount} + ethUsdPrice={ethUsdPrice} + shouldEmphasize={true} + /> + </Container> + ); + } +} export interface OrderDetailsRowProps { name: string; - primaryValue: string; - secondaryValue: string; + ethAmount?: BigNumber; + shouldConvertEthToUnitAmount?: boolean; + ethUsdPrice?: BigNumber; shouldEmphasize?: boolean; } -export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => { - const fontWeight = props.shouldEmphasize ? 700 : 400; +export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = ({ + name, + ethAmount, + shouldConvertEthToUnitAmount, + ethUsdPrice, + shouldEmphasize, +}) => { + const fontWeight = shouldEmphasize ? 700 : 400; + const usdFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; + const ethFormatter = shouldConvertEthToUnitAmount ? format.ethBaseAmount : format.ethUnitAmount; return ( <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> <Flex justify="space-between"> <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.name} + {name} </Text> <Container> <Container marginRight="3px" display="inline-block"> - <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text> + <Text fontColor={ColorOption.lightGrey}>({usdFormatter(ethAmount, ethUsdPrice)})</Text> </Container> <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> - {props.primaryValue} + {ethFormatter(ethAmount)} </Text> </Container> </Flex> @@ -57,6 +89,7 @@ export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = p OrderDetailsRow.defaultProps = { shouldEmphasize: false, + shouldConvertEthToUnitAmount: true, }; OrderDetailsRow.displayName = 'OrderDetailsRow'; 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 716227b51..b624d712f 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 {} @@ -12,9 +13,9 @@ export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => ( <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px"> <Flex direction="column" justify="flex-start"> - <InstantHeading /> - <OrderDetails /> - <BuyButton /> + <SelectedAssetInstantHeading /> + <LatestBuyQuoteOrderDetails /> + <SelectedAssetBuyButton /> </Flex> </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..77d84289b --- /dev/null +++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts @@ -0,0 +1,26 @@ +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 { 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: _.get(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..a9e853fe1 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -0,0 +1,26 @@ +import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +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: _.get(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..b030501c4 --- /dev/null +++ b/packages/instant/src/util/asset_buyer.ts @@ -0,0 +1,11 @@ +import { AssetBuyer } from '@0xproject/asset-buyer'; + +import { sraApiUrl } from '../constants'; + +import { getProvider } from './provider'; + +const provider = getProvider(); + +export const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, sraApiUrl, { + expiryBufferSeconds: 300, +}); 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/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/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/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', @@ -5594,6 +5594,21 @@ ethers@3.0.22: uuid "2.0.1" xmlhttprequest "1.8.0" +ethers@4.0.0-beta.14: + version "4.0.0-beta.14" + resolved "https://registry.npmjs.org/ethers/-/ethers-4.0.0-beta.14.tgz#76aa9257b9c93a7604ff4dc11f2a445d07f6459d" + dependencies: + "@types/node" "^10.3.2" + aes-js "3.0.0" + bn.js "^4.4.0" + elliptic "6.3.3" + hash.js "1.1.3" + js-sha3 "0.5.7" + scrypt-js "2.0.3" + setimmediate "1.0.4" + uuid "2.0.1" + xmlhttprequest "1.8.0" + ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" |