From 59743d32daeb4679bb213a153815851a9ea6c115 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 17 Oct 2018 13:44:13 -0700 Subject: feat: create dogfood url and deployment workflow --- packages/instant/.discharge.json | 13 +++++++++++++ packages/instant/README.md | 12 ++++++++++++ packages/instant/package.json | 2 ++ 3 files changed, 27 insertions(+) create mode 100644 packages/instant/.discharge.json (limited to 'packages/instant') diff --git a/packages/instant/.discharge.json b/packages/instant/.discharge.json new file mode 100644 index 000000000..3de085cf9 --- /dev/null +++ b/packages/instant/.discharge.json @@ -0,0 +1,13 @@ +{ + "domain": "0x-instant-dogfood", + "build_command": "yarn build:umd:prod", + "upload_directory": "public", + "index_key": "index.html", + "error_key": "index.html", + "trailing_slashes": true, + "cache": 3600, + "aws_profile": "default", + "aws_region": "us-east-1", + "cdn": false, + "dns_configured": true +} diff --git a/packages/instant/README.md b/packages/instant/README.md index 25aca9d3b..2437835c8 100644 --- a/packages/instant/README.md +++ b/packages/instant/README.md @@ -46,6 +46,18 @@ The package is also available as a UMD module named `zeroExInstant`. ``` +## Deploying + +You can deploy a work-in-progress version of 0x Instant at http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com for easy sharing. + +To build and deploy the site run + +``` +yarn deploy +``` + +**NOTE: On deploying the site, it will say the site is available at a non-existent URL. Please ignore and use the (now updated) URL above.** + ## Contributing We welcome improvements and fixes from the wider community! To report bugs within this package, please create an issue in this repository. diff --git a/packages/instant/package.json b/packages/instant/package.json index 0c4b470fa..f7892e614 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -22,6 +22,7 @@ "rebuild_and_test": "run-s clean build test", "test:circleci": "yarn test:coverage", "clean": "shx rm -rf lib coverage scripts", + "deploy": "discharge deploy", "manual:postpublish": "yarn build; node ./scripts/postpublish.js" }, "config": { @@ -60,6 +61,7 @@ }, "devDependencies": { "@0xproject/tslint-config": "^1.0.8", + "@static/discharge": "^1.2.2", "@types/enzyme": "^3.1.14", "@types/enzyme-adapter-react-16": "^1.0.3", "@types/jest": "^23.3.5", -- cgit From 91ca80b248ac75b0d8258dd4dfc7a6e0c36c572b Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 17 Oct 2018 14:01:32 -0700 Subject: prettify discharge file --- packages/instant/.discharge.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/.discharge.json b/packages/instant/.discharge.json index 3de085cf9..9ade97d01 100644 --- a/packages/instant/.discharge.json +++ b/packages/instant/.discharge.json @@ -1,13 +1,13 @@ { - "domain": "0x-instant-dogfood", - "build_command": "yarn build:umd:prod", - "upload_directory": "public", - "index_key": "index.html", - "error_key": "index.html", - "trailing_slashes": true, - "cache": 3600, - "aws_profile": "default", - "aws_region": "us-east-1", - "cdn": false, - "dns_configured": true + "domain": "0x-instant-dogfood", + "build_command": "yarn build:umd:prod", + "upload_directory": "public", + "index_key": "index.html", + "error_key": "index.html", + "trailing_slashes": true, + "cache": 3600, + "aws_profile": "default", + "aws_region": "us-east-1", + "cdn": false, + "dns_configured": true } -- cgit From 4b348e1e603ec45e1e4bf39533b4b204423cafa0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 11:09:23 -0700 Subject: quoteState -> quoteRequestState --- packages/instant/src/components/instant_heading.tsx | 10 +++++----- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- .../instant/src/containers/selected_asset_instant_heading.ts | 4 ++-- packages/instant/src/redux/actions.ts | 4 ++-- packages/instant/src/redux/reducer.ts | 10 +++++----- 5 files changed, 17 insertions(+), 17 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index a36d35a93..9dd13299c 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -13,7 +13,7 @@ export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; } const Placeholder = () => ( @@ -42,8 +42,8 @@ const displayUsdAmount = ({ return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); }; -const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteState === AsyncProcessState.PENDING) { +const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { + if (quoteRequestState === AsyncProcessState.PENDING) { return ( …loading @@ -73,11 +73,11 @@ export const InstantHeading: React.StatelessComponent = pro - {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} + {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))} - {loadingOrAmount(props.quoteState, displayUsdAmount(props))} + {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))} diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0810b093a..aca6a09d4 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -44,13 +44,13 @@ const updateBuyQuoteAsync = async ( const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); // mark quote as pending - dispatch(actions.updateBuyQuoteStatePending()); + dispatch(actions.updateBuyquoteRequestStatePending()); let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); } catch (error) { - dispatch(actions.updateBuyQuoteStateFailure()); + dispatch(actions.updateBuyquoteRequestStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } @@ -76,7 +76,7 @@ const mapDispatchToProps = ( if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading - dispatch(actions.updateBuyQuoteStatePending()); + dispatch(actions.updateBuyquoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); } diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 0509db5da..43127582c 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -15,14 +15,14 @@ interface ConnectedState { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ selectedAssetAmount: state.selectedAssetAmount, totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), ethUsdPrice: state.ethUsdPrice, - quoteState: state.quoteState, + quoteRequestState: state.quoteRequestState, }); export const SelectedAssetInstantHeading: React.ComponentClass = connect(mapStateToProps)( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 9c154c66f..b4aa4f4cb 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -38,8 +38,8 @@ export const actions = { updatebuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), - updateBuyQuoteStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), - updateBuyQuoteStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), + updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), + updateBuyquoteRequestStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 05aa37420..d2256ef54 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -17,7 +17,7 @@ export interface State { buyOrderState: AsyncProcessState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; - quoteState: AsyncProcessState; + quoteRequestState: AsyncProcessState; latestError?: any; latestErrorDisplay: LatestErrorDisplay; } @@ -31,7 +31,7 @@ export const INITIAL_STATE: State = { latestBuyQuote: undefined, latestError: undefined, latestErrorDisplay: LatestErrorDisplay.Hidden, - quoteState: AsyncProcessState.NONE, + quoteRequestState: AsyncProcessState.NONE, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -50,19 +50,19 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestBuyQuote: action.data, - quoteState: AsyncProcessState.SUCCESS, + quoteRequestState: AsyncProcessState.SUCCESS, }; case ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING: return { ...state, latestBuyQuote: undefined, - quoteState: AsyncProcessState.PENDING, + quoteRequestState: AsyncProcessState.PENDING, }; case ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE: return { ...state, latestBuyQuote: undefined, - quoteState: AsyncProcessState.FAILURE, + quoteRequestState: AsyncProcessState.FAILURE, }; case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE: return { -- cgit From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:31:11 -0700 Subject: Pulsating holder element showing, even if amount is empty --- .../instant/src/components/amount_placeholder.tsx | 29 ++++++ .../instant/src/components/animations/pulse.tsx | 15 +++ .../instant/src/components/instant_heading.tsx | 112 ++++++++++----------- packages/instant/src/components/ui/container.tsx | 2 + 4 files changed, 101 insertions(+), 57 deletions(-) create mode 100644 packages/instant/src/components/amount_placeholder.tsx create mode 100644 packages/instant/src/components/animations/pulse.tsx (limited to 'packages/instant') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx new file mode 100644 index 000000000..54639effb --- /dev/null +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Pulse } from './animations/pulse'; + +import { Text } from './ui'; + +export interface AmountPlaceholderProps { + pulsating: boolean; +} + +const PlainPlaceholder = () => ( + + — + +); + +export const AmountPlaceholder: React.StatelessComponent = props => { + if (props.pulsating) { + return ( + + + + ); + } else { + return ; + } +}; diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx new file mode 100644 index 000000000..01d6ea070 --- /dev/null +++ b/packages/instant/src/components/animations/pulse.tsx @@ -0,0 +1,15 @@ +import { keyframes, styled } from '../../style/theme'; + +const pulsingKeyframes = keyframes` + 0%, 100% { + opacity: 0.2; + } + 50% { + opacity: 100; + } +`; +export const Pulse = styled.div` + animation-name: ${pulsingKeyframes} + animation-duration: 2s; + animation-iteration-count: infinite; +`; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 9dd13299c..9ca4ce598 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -7,6 +7,7 @@ import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { format } from '../util/format'; +import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; export interface InstantHeadingProps { @@ -16,70 +17,67 @@ export interface InstantHeadingProps { quoteRequestState: AsyncProcessState; } -const Placeholder = () => ( - - — - -); -const displaytotalEthBaseAmount = ({ - selectedAssetAmount, - totalEthBaseAmount, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '0 ETH'; +export class InstantHeading extends React.Component { + public render(): React.ReactNode { + const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); + return ( + + + + I want to buy + + + + + + {placeholderAmountToAlwaysShow || this._ethAmount()} + {placeholderAmountToAlwaysShow || this._dollarAmount()} + + + + ); } - return format.ethBaseAmount(totalEthBaseAmount, 4, ); -}; -const displayUsdAmount = ({ - totalEthBaseAmount, - selectedAssetAmount, - ethUsdPrice, -}: InstantHeadingProps): React.ReactNode => { - if (_.isUndefined(selectedAssetAmount)) { - return '$0.00'; + private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { + if (this.props.quoteRequestState === AsyncProcessState.PENDING) { + return ; + } + if (_.isUndefined(this.props.selectedAssetAmount)) { + return ; + } + return undefined; } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); -}; -const loadingOrAmount = (quoteRequestState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { - if (quoteRequestState === AsyncProcessState.PENDING) { + private _ethAmount(): React.ReactNode { return ( - - …loading + + {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, )} ); - } else { - return amount; } -}; -export const InstantHeading: React.StatelessComponent = props => ( - - - - I want to buy + private _dollarAmount(): React.ReactNode { + return ( + + {format.ethBaseAmountInUsd( + this.props.totalEthBaseAmount, + this.props.ethUsdPrice, + 2, + , + )} - - - - - - - {loadingOrAmount(props.quoteRequestState, displaytotalEthBaseAmount(props))} - - - - {loadingOrAmount(props.quoteRequestState, displayUsdAmount(props))} - - - - -); + ); + } +} diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 02b16e39f..5e2218c68 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -27,6 +27,7 @@ export interface ContainerProps { backgroundColor?: ColorOption; hasBoxShadow?: boolean; zIndex?: number; + opacity?: number; } const PlainContainer: React.StatelessComponent = ({ children, className }) => ( @@ -54,6 +55,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'border-top')} ${props => cssRuleIfExists(props, 'border-bottom')} ${props => cssRuleIfExists(props, 'z-index')} + ${props => cssRuleIfExists(props, 'opacity')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; -- cgit From 94ace00e0cfd550bccf33f85441ce1dad33f1348 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:38:04 -0700 Subject: fix camel casing of updateBuyOrderState --- packages/instant/src/containers/selected_asset_amount_input.ts | 2 +- packages/instant/src/containers/selected_asset_buy_button.ts | 6 +++--- packages/instant/src/redux/actions.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index aca6a09d4..2a1e5e457 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -72,7 +72,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updatebuyOrderState(AsyncProcessState.NONE)); + dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE)); if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 4a8e31525..4d3315b1a 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -44,9 +44,9 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updatebuyOrderState(AsyncProcessState.FAILURE)), + onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)), + onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)), + onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index b4aa4f4cb..016dc29dc 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -35,7 +35,7 @@ export enum ActionTypes { export const actions = { updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price), updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount), - updatebuyOrderState: (buyState: AsyncProcessState) => + updateBuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), -- cgit From 9aa67538231cc4ff71fd0f8ebe4dc66b1bcc4937 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:42:59 -0700 Subject: Rename update function to set function since it doesnt take a parameter --- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- packages/instant/src/redux/actions.ts | 8 ++++---- packages/instant/src/redux/reducer.ts | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 2a1e5e457..e55c8b991 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -44,13 +44,13 @@ const updateBuyQuoteAsync = async ( const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); // mark quote as pending - dispatch(actions.updateBuyquoteRequestStatePending()); + dispatch(actions.setQuoteRequestStatePending()); let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); } catch (error) { - dispatch(actions.updateBuyquoteRequestStateFailure()); + dispatch(actions.setQuoteRequestStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } @@ -76,7 +76,7 @@ const mapDispatchToProps = ( if (!_.isUndefined(value) && !_.isUndefined(assetData)) { // even if it's debounced, give them the illusion it's loading - dispatch(actions.updateBuyquoteRequestStatePending()); + dispatch(actions.setQuoteRequestStatePending()); // tslint:disable-next-line:no-floating-promises debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); } diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 016dc29dc..e52a79e76 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -25,8 +25,8 @@ export enum ActionTypes { 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', - UPDATE_BUY_QUOTE_STATE_PENDING = 'UPDATE_BUY_QUOTE_STATE_PENDING', - UPDATE_BUY_QUOTE_STATE_FAILURE = 'UPDATE_BUY_QUOTE_STATE_FAILURE', + SET_QUOTE_REQUEST_STATE_PENDING = 'SET_QUOTE_REQUEST_STATE_PENDING', + SET_QUOTE_REQUEST_STATE_FAILURE = 'SET_QUOTE_REQUEST_STATE_FAILURE', SET_ERROR = 'SET_ERROR', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', @@ -38,8 +38,8 @@ export const actions = { updateBuyOrderState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), - updateBuyquoteRequestStatePending: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING), - updateBuyquoteRequestStateFailure: () => createAction(ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE), + setQuoteRequestStatePending: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING), + setQuoteRequestStateFailure: () => createAction(ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE), setError: (error?: any) => createAction(ActionTypes.SET_ERROR, error), hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index d2256ef54..6c278099f 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -52,13 +52,13 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => latestBuyQuote: action.data, quoteRequestState: AsyncProcessState.SUCCESS, }; - case ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING: + case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING: return { ...state, latestBuyQuote: undefined, quoteRequestState: AsyncProcessState.PENDING, }; - case ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE: + case ActionTypes.SET_QUOTE_REQUEST_STATE_FAILURE: return { ...state, latestBuyQuote: undefined, -- cgit From b4af27dd4462a001904ac6d69e43aac9fd7bb69a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:48:28 -0700 Subject: Moved LatestErrorDisplay to types file and gave generic name --- packages/instant/src/containers/latest_error.tsx | 5 +++-- packages/instant/src/redux/reducer.ts | 16 ++++++---------- packages/instant/src/types.ts | 4 ++++ 3 files changed, 13 insertions(+), 12 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 08ea418e7..413cf16ad 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -3,7 +3,8 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; -import { LatestErrorDisplay, State } from '../redux/reducer'; +import { State } from '../redux/reducer'; +import { DisplayStatus } from '../types'; import { errorUtil } from '../util/error'; export interface LatestErrorComponentProps { @@ -29,7 +30,7 @@ export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ assetData: state.selectedAssetData, latestError: state.latestError, - slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.Present ? 'up' : 'down', + slidingDirection: state.latestErrorDisplay === DisplayStatus.Present ? 'up' : 'down', }); export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 6c278099f..2d50dd4b9 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -3,14 +3,10 @@ import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { zrxAssetData } from '../constants'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, DisplayStatus } from '../types'; import { Action, ActionTypes } from './actions'; -export enum LatestErrorDisplay { - Present, - Hidden, -} export interface State { selectedAssetData?: string; selectedAssetAmount?: BigNumber; @@ -19,7 +15,7 @@ export interface State { latestBuyQuote?: BuyQuote; quoteRequestState: AsyncProcessState; latestError?: any; - latestErrorDisplay: LatestErrorDisplay; + latestErrorDisplay: DisplayStatus; } export const INITIAL_STATE: State = { @@ -30,7 +26,7 @@ export const INITIAL_STATE: State = { ethUsdPrice: undefined, latestBuyQuote: undefined, latestError: undefined, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, quoteRequestState: AsyncProcessState.NONE, }; @@ -73,18 +69,18 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestError: action.data, - latestErrorDisplay: LatestErrorDisplay.Present, + latestErrorDisplay: DisplayStatus.Present, }; case ActionTypes.HIDE_ERROR: return { ...state, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, }; case ActionTypes.CLEAR_ERROR: return { ...state, latestError: undefined, - latestErrorDisplay: LatestErrorDisplay.Hidden, + latestErrorDisplay: DisplayStatus.Hidden, }; default: return state; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 8e3bb9b37..013ada27b 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -7,6 +7,10 @@ export enum AsyncProcessState { SUCCESS = 'Success', FAILURE = 'Failure', } +export enum DisplayStatus { + Present, + Hidden, +} export type FunctionType = (...args: any[]) => any; export type ActionCreatorsMapObject = ObjectMap; -- cgit From 8a6e0776640a7bec7eab1f91b3b611dc4cadd2f7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 14:51:45 -0700 Subject: feat(instant): Indicate that order details section is loading by having pulsing placeholder --- .../instant/src/components/amount_placeholder.tsx | 17 +++++++----- .../instant/src/components/instant_heading.tsx | 13 +++++++--- packages/instant/src/components/order_details.tsx | 30 ++++++++++++++++++---- .../containers/latest_buy_quote_order_details.ts | 3 +++ 4 files changed, 47 insertions(+), 16 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 54639effb..23a00895a 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,24 +6,27 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface AmountPlaceholderProps { - pulsating: boolean; +export interface PlainPlaceholder { + color: ColorOption; } - -const PlainPlaceholder = () => ( - +export const PlainPlaceholder: React.StatelessComponent = props => ( + — ); +export interface AmountPlaceholderProps { + color: ColorOption; + pulsating: boolean; +} export const AmountPlaceholder: React.StatelessComponent = props => { if (props.pulsating) { return ( - + ); } else { - return ; + return ; } }; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 9ca4ce598..6a4c850f2 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -17,6 +17,7 @@ export interface InstantHeadingProps { quoteRequestState: AsyncProcessState; } +const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component { public render(): React.ReactNode { const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); @@ -52,10 +53,10 @@ export class InstantHeading extends React.Component { private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return ; + return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return ; + return ; } return undefined; } @@ -63,7 +64,11 @@ export class InstantHeading extends React.Component { private _ethAmount(): React.ReactNode { return ( - {format.ethBaseAmount(this.props.totalEthBaseAmount, 4, )} + {format.ethBaseAmount( + this.props.totalEthBaseAmount, + 4, + , + )} ); } @@ -75,7 +80,7 @@ export class InstantHeading extends React.Component { this.props.totalEthBaseAmount, this.props.ethUsdPrice, 2, - , + , )} ); diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index ad4a87714..f48f27edb 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -7,11 +7,13 @@ import { oc } from 'ts-optchain'; import { ColorOption } from '../style/theme'; import { format } from '../util/format'; +import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; export interface OrderDetailsProps { buyQuoteInfo?: BuyQuoteInfo; ethUsdPrice?: BigNumber; + isLoading: boolean; } export class OrderDetails extends React.Component { @@ -39,13 +41,20 @@ export class OrderDetails extends React.Component { ethAmount={ethAssetPrice} ethUsdPrice={ethUsdPrice} isEthAmountInBaseUnits={false} + isLoading={this.props.isLoading} + /> + - ); @@ -58,6 +67,7 @@ export interface EthAmountRowProps { isEthAmountInBaseUnits?: boolean; ethUsdPrice?: BigNumber; shouldEmphasize?: boolean; + isLoading: boolean; } export const EthAmountRow: React.StatelessComponent = ({ @@ -66,15 +76,19 @@ export const EthAmountRow: React.StatelessComponent = ({ isEthAmountInBaseUnits, ethUsdPrice, shouldEmphasize, + isLoading, }) => { - const fontWeight = shouldEmphasize ? 700 : 400; + // TODO: put in private function const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; - const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; - const usdPriceSection = _.isUndefined(ethUsdPrice) ? null : ( + const shouldHideUsdPriceSection = _.isUndefined(ethUsdPrice) || _.isUndefined(ethAmount); + const usdPriceSection = shouldHideUsdPriceSection ? null : ( ({usdFormatter(ethAmount, ethUsdPrice)}) ); + + const fontWeight = shouldEmphasize ? 700 : 400; + const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; return ( @@ -84,7 +98,13 @@ export const EthAmountRow: React.StatelessComponent = ({ {usdPriceSection} - {ethFormatter(ethAmount)} + {ethFormatter( + ethAmount, + 4, + + + , + )} diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts index 597bf3088..092aaaf20 100644 --- a/packages/instant/src/containers/latest_buy_quote_order_details.ts +++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts @@ -8,18 +8,21 @@ import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; import { OrderDetails } from '../components/order_details'; +import { AsyncProcessState } from '../types'; export interface LatestBuyQuoteOrderDetailsProps {} interface ConnectedState { buyQuoteInfo?: BuyQuoteInfo; ethUsdPrice?: BigNumber; + isLoading: boolean; } const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({ // use the worst case quote info buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(), ethUsdPrice: state.ethUsdPrice, + isLoading: state.quoteRequestState === AsyncProcessState.PENDING, }); export const LatestBuyQuoteOrderDetails: React.ComponentClass = connect( -- cgit From 8ff5e1926993979229783cfb03d38aabd6f2f3d3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:27:34 -0700 Subject: Move USD section into helper function --- packages/instant/src/components/order_details.tsx | 88 +++++++++++------------ 1 file changed, 42 insertions(+), 46 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index f48f27edb..9a0dbc47a 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -15,7 +15,6 @@ export interface OrderDetailsProps { ethUsdPrice?: BigNumber; isLoading: boolean; } - export class OrderDetails extends React.Component { public render(): React.ReactNode { const { buyQuoteInfo, ethUsdPrice } = this.props; @@ -70,51 +69,48 @@ export interface EthAmountRowProps { isLoading: boolean; } -export const EthAmountRow: React.StatelessComponent = ({ - rowLabel, - ethAmount, - isEthAmountInBaseUnits, - ethUsdPrice, - shouldEmphasize, - isLoading, -}) => { - // TODO: put in private function - const usdFormatter = isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; - const shouldHideUsdPriceSection = _.isUndefined(ethUsdPrice) || _.isUndefined(ethAmount); - const usdPriceSection = shouldHideUsdPriceSection ? null : ( - - ({usdFormatter(ethAmount, ethUsdPrice)}) - - ); +export class EthAmountRow extends React.Component { + public static defaultProps = { + shouldEmphasize: false, + isEthAmountInBaseUnits: true, + }; + public static displayName = 'EthAmountRow'; + public render(): React.ReactNode { + const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props; - const fontWeight = shouldEmphasize ? 700 : 400; - const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; - return ( - - - - {rowLabel} - - - {usdPriceSection} + const fontWeight = shouldEmphasize ? 700 : 400; + const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount; + return ( + + - {ethFormatter( - ethAmount, - 4, - - - , - )} + {rowLabel} - - - - ); -}; - -EthAmountRow.defaultProps = { - shouldEmphasize: false, - isEthAmountInBaseUnits: true, -}; - -EthAmountRow.displayName = 'EthAmountRow'; + + {this._usdSection()} + + {ethFormatter( + ethAmount, + 4, + + + , + )} + + + + + ); + } + private _usdSection(): React.ReactNode { + const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; + const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount); + return shouldHideUsdPriceSection ? null : ( + + + ({usdFormatter(this.props.ethAmount, this.props.ethUsdPrice)}) + + + ); + } +} -- cgit From a42347a776e2fa14fa898a354190f8b75bbe2fb2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:28:24 -0700 Subject: Allow more than 1 class per file Felt silly that refactoring a component defined as a function to a class with a helper function caused a tslint violation --- packages/instant/tslint.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/instant') diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json index abe874a6d..08b76be97 100644 --- a/packages/instant/tslint.json +++ b/packages/instant/tslint.json @@ -2,6 +2,7 @@ "extends": ["@0x/tslint-config"], "rules": { "custom-no-magic-numbers": false, - "semicolon": [true, "always", "ignore-bound-class-methods"] + "semicolon": [true, "always", "ignore-bound-class-methods"], + "max-classes-per-file": false } } -- cgit From aa0e07b0581a645c3d2ea035d3acf28a74de0384 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:30:14 -0700 Subject: pulsating -> isPulsating --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- packages/instant/src/components/instant_heading.tsx | 8 ++++---- packages/instant/src/components/order_details.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index 23a00895a..e27d0ba81 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -17,10 +17,10 @@ export const PlainPlaceholder: React.StatelessComponent = prop export interface AmountPlaceholderProps { color: ColorOption; - pulsating: boolean; + isPulsating: boolean; } export const AmountPlaceholder: React.StatelessComponent = props => { - if (props.pulsating) { + if (props.isPulsating) { return ( diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 6a4c850f2..e2ef2d668 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -53,10 +53,10 @@ export class InstantHeading extends React.Component { private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return ; + return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return ; + return ; } return undefined; } @@ -67,7 +67,7 @@ export class InstantHeading extends React.Component { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - , + , )} ); @@ -80,7 +80,7 @@ export class InstantHeading extends React.Component { this.props.totalEthBaseAmount, this.props.ethUsdPrice, 2, - , + , )} ); diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index 9a0dbc47a..a7971e1fd 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -93,7 +93,7 @@ export class EthAmountRow extends React.Component { ethAmount, 4, - + , )} -- cgit From ff1f0a967802529e5ee50a7ff52d67bae1252b51 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 15:31:18 -0700 Subject: undefined -> null to follow convention --- packages/instant/src/components/instant_heading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index e2ef2d668..48cda7f88 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -51,14 +51,14 @@ export class InstantHeading extends React.Component { ); } - private _placeholderAmountToAlwaysShow(): React.ReactNode | undefined { + private _placeholderAmountToAlwaysShow(): React.ReactNode | null { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { return ; } - return undefined; + return null; } private _ethAmount(): React.ReactNode { -- cgit From ad6dc8e891059f00f2ddda1884bbc78c1e47ea24 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 16:04:30 -0700 Subject: fix: refactor ZeroExInstant state creation logic and fix bug --- packages/instant/src/components/zero_ex_instant.tsx | 9 ++++++--- packages/instant/src/redux/reducer.ts | 1 - packages/instant/src/redux/store.ts | 3 +-- 3 files changed, 7 insertions(+), 6 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 5b75a7556..a67c0f412 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -29,8 +29,7 @@ export class ZeroExInstant extends React.Component { additionalAssetMetaDataMap: {}, }; public store: Store; - constructor(props: ZeroExInstantProps) { - super(props); + private static _createPartialStoreStateFromProps(props: ZeroExInstantProps): Partial { // TODO: Provider needs to not be hard-coded to injected web3. const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.sraApiUrl); const completeAssetMetaDataMap = { @@ -42,7 +41,11 @@ export class ZeroExInstant extends React.Component { selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap), assetMetaDataMap: completeAssetMetaDataMap, }; - this.store = store.create(storeStateFromProps); + return storeStateFromProps; + } + constructor(props: ZeroExInstantProps) { + super(props); + this.store = store.create(ZeroExInstant._createPartialStoreStateFromProps(this.props)); // tslint:disable-next-line:no-floating-promises asyncData.fetchAndDispatchToStore(this.store); } diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 657bd0e40..83422be45 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -36,7 +36,6 @@ export const INITIAL_STATE: State = { quoteState: AsyncProcessState.NONE, }; -// TODO: Figure out why there is an INITIAL_STATE key in the store... export const reducer = (state: State = INITIAL_STATE, action: Action): State => { switch (action.type) { case ActionTypes.UPDATE_ETH_USD_PRICE: diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index 505234299..88d964bbc 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -9,10 +9,9 @@ export type Store = ReduxStore; export const store = { create: (withState: Partial): Store => { const allInitialState = { - INITIAL_STATE, + ...INITIAL_STATE, ...withState, }; return createStore(reducer, allInitialState, devToolsEnhancer({})); }, }; - -- cgit From 7a8adf9db5a83c3f44d6fe9e84e00ff1ec1e88e0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 16:35:59 -0700 Subject: feat: use color from metaData instead of default primaryColor --- .../instant/src/components/zero_ex_instant.tsx | 6 ++-- .../containers/selected_asset_theme_provider.ts | 32 ++++++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_theme_provider.ts (limited to 'packages/instant') diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index a67c0f412..c59c838a2 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -3,12 +3,12 @@ import { ObjectMap } from '@0x/types'; import * as React from 'react'; import { Provider } from 'react-redux'; +import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { asyncData } from '../redux/async_data'; import { State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; -import { theme, ThemeProvider } from '../style/theme'; import { AssetMetaData } from '../types'; import { assetUtils } from '../util/asset'; import { getProvider } from '../util/provider'; @@ -53,9 +53,9 @@ export class ZeroExInstant extends React.Component { public render(): React.ReactNode { return ( - + - + ); } diff --git a/packages/instant/src/containers/selected_asset_theme_provider.ts b/packages/instant/src/containers/selected_asset_theme_provider.ts new file mode 100644 index 000000000..6e6b83d73 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_theme_provider.ts @@ -0,0 +1,32 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; +import { Theme, theme as defaultTheme, ThemeProvider } from '../style/theme'; +import { Asset } from '../types'; + +export interface SelectedAssetThemeProviderProps {} + +interface ConnectedState { + theme: Theme; +} + +const getTheme = (asset?: Asset): Theme => { + if (!_.isUndefined(asset) && !_.isUndefined(asset.metaData.primaryColor)) { + return { + ...defaultTheme, + primaryColor: asset.metaData.primaryColor, + }; + } + return defaultTheme; +}; + +const mapStateToProps = (state: State, _ownProps: SelectedAssetThemeProviderProps): ConnectedState => { + const theme = getTheme(state.selectedAsset); + return { theme }; +}; + +export const SelectedAssetThemeProvider: React.ComponentClass = connect( + mapStateToProps, +)(ThemeProvider); -- cgit From 7bc2df56023641c27de62bc7e9a8953767cbc076 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 17:42:32 -0700 Subject: feat: add network to state and use it where relevant --- packages/instant/public/index.html | 2 +- .../instant/src/components/zero_ex_instant.tsx | 41 ++++++++++++++-------- packages/instant/src/redux/reducer.ts | 13 +++++-- packages/instant/src/redux/store.ts | 10 ++---- packages/instant/src/util/asset.ts | 14 ++++---- 5 files changed, 48 insertions(+), 32 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html index 1f6a0a9e9..14555fc64 100644 --- a/packages/instant/public/index.html +++ b/packages/instant/public/index.html @@ -25,7 +25,7 @@
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index c59c838a2..142e74dae 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -4,12 +4,11 @@ import * as React from 'react'; import { Provider } from 'react-redux'; import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; -import { assetMetaDataMap } from '../data/asset_meta_data_map'; import { asyncData } from '../redux/async_data'; -import { State } from '../redux/reducer'; +import { INITIAL_STATE, State } from '../redux/reducer'; import { store, Store } from '../redux/store'; import { fonts } from '../style/fonts'; -import { AssetMetaData } from '../types'; +import { AssetMetaData, Network } from '../types'; import { assetUtils } from '../util/asset'; import { getProvider } from '../util/provider'; @@ -17,35 +16,49 @@ import { ZeroExInstantContainer } from './zero_ex_instant_container'; fonts.include(); -export interface ZeroExInstantProps { +export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial; + +export interface ZeroExInstantRequiredProps { // TODO: Change API when we allow the selection of different assetDatas assetData: string; - sraApiUrl: string; + // TODO: Allow for a function that returns orders + liquiditySource: string; +} + +export interface ZeroExInstantOptionalProps { additionalAssetMetaDataMap: ObjectMap; + network: Network; } export class ZeroExInstant extends React.Component { - public static defaultProps = { - additionalAssetMetaDataMap: {}, - }; public store: Store; - private static _createPartialStoreStateFromProps(props: ZeroExInstantProps): Partial { + private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State { + // Create merged object such that properties in props override default settings + const optionalPropsWithDefaults: ZeroExInstantOptionalProps = { + additionalAssetMetaDataMap: props.additionalAssetMetaDataMap || {}, + network: props.network || state.network, + }; + const { network } = optionalPropsWithDefaults; // TODO: Provider needs to not be hard-coded to injected web3. - const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.sraApiUrl); + const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.liquiditySource, { + networkId: network, + }); const completeAssetMetaDataMap = { ...props.additionalAssetMetaDataMap, - ...assetMetaDataMap, + ...state.assetMetaDataMap, }; - const storeStateFromProps: Partial = { + const storeStateFromProps: State = { + ...state, assetBuyer, - selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap), + network, + selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network), assetMetaDataMap: completeAssetMetaDataMap, }; return storeStateFromProps; } constructor(props: ZeroExInstantProps) { super(props); - this.store = store.create(ZeroExInstant._createPartialStoreStateFromProps(this.props)); + this.store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE)); // tslint:disable-next-line:no-floating-promises asyncData.fetchAndDispatchToStore(this.store); } diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 83422be45..e9e0a85e0 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -3,7 +3,8 @@ import { ObjectMap } from '@0x/types'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; -import { Asset, AssetMetaData, AsyncProcessState } from '../types'; +import { assetMetaDataMap } from '../data/asset_meta_data_map'; +import { Asset, AssetMetaData, AsyncProcessState, Network } from '../types'; import { assetUtils } from '../util/asset'; import { Action, ActionTypes } from './actions'; @@ -13,6 +14,7 @@ export enum LatestErrorDisplay { Hidden, } export interface State { + network: Network; assetBuyer?: AssetBuyer; assetMetaDataMap: ObjectMap; selectedAsset?: Asset; @@ -26,8 +28,9 @@ export interface State { } export const INITIAL_STATE: State = { + network: Network.Mainnet, selectedAssetAmount: undefined, - assetMetaDataMap: {}, + assetMetaDataMap, buyOrderState: AsyncProcessState.NONE, ethUsdPrice: undefined, latestBuyQuote: undefined, @@ -92,7 +95,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => const newSelectedAssetData = action.data; let newSelectedAsset: Asset | undefined; if (!_.isUndefined(newSelectedAssetData)) { - newSelectedAsset = assetUtils.createAssetFromAssetData(newSelectedAssetData, state.assetMetaDataMap); + newSelectedAsset = assetUtils.createAssetFromAssetData( + newSelectedAssetData, + state.assetMetaDataMap, + state.network, + ); } return { ...state, diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index 88d964bbc..01deb8690 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -2,16 +2,12 @@ import * as _ from 'lodash'; import { createStore, Store as ReduxStore } from 'redux'; import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; -import { INITIAL_STATE, reducer, State } from './reducer'; +import { reducer, State } from './reducer'; export type Store = ReduxStore; export const store = { - create: (withState: Partial): Store => { - const allInitialState = { - ...INITIAL_STATE, - ...withState, - }; - return createStore(reducer, allInitialState, devToolsEnhancer({})); + create: (state: State): Store => { + return createStore(reducer, state, devToolsEnhancer({})); }, }; diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index a105a7c2b..d50efb5d1 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -6,17 +6,17 @@ import { assetDataNetworkMapping } from '../data/asset_data_network_mapping'; import { Asset, AssetMetaData, Network, ZeroExInstantError } from '../types'; export const assetUtils = { - createAssetFromAssetData: (assetData: string, assetMetaDataMap: ObjectMap): Asset => { + createAssetFromAssetData: ( + assetData: string, + assetMetaDataMap: ObjectMap, + network: Network, + ): Asset => { return { assetData, - metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap), + metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network), }; }, - getMetaDataOrThrow: ( - assetData: string, - metaDataMap: ObjectMap, - network: Network = Network.Mainnet, - ): AssetMetaData => { + getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap, network: Network): AssetMetaData => { let mainnetAssetData: string | undefined = assetData; if (network !== Network.Mainnet) { mainnetAssetData = assetUtils.getAssociatedAssetDataIfExists(assetData, network); -- cgit From f3a6800306a6fd40f19d15318b9fdac4dcdf76c8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 18 Oct 2018 18:08:49 -0700 Subject: fix: dont force NFTs to uppercase their name --- packages/instant/src/util/asset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant') diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index d50efb5d1..698107538 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -39,7 +39,7 @@ export const assetUtils = { case AssetProxyId.ERC20: return metaData.symbol.toUpperCase(); case AssetProxyId.ERC721: - return metaData.name.toUpperCase(); + return metaData.name; default: return defaultName; } -- cgit From 48f1e6057c878a948d21ed7d2214c7792c648f75 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 19 Oct 2018 09:23:58 -0700 Subject: chore: run linter --- packages/instant/src/util/asset.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant') diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index 698107538..4e3b2b946 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -1,4 +1,3 @@ -import { assetDataUtils } from '@0x/order-utils'; import { AssetProxyId, ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -- cgit From 66465816ca049118d58ca34bada241fd146f2656 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:19:48 -0700 Subject: Getting rid of displayName, and rename usdSection -> _renderUsdSection --- packages/instant/src/components/order_details.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index a7971e1fd..704009d89 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -74,7 +74,6 @@ export class EthAmountRow extends React.Component { shouldEmphasize: false, isEthAmountInBaseUnits: true, }; - public static displayName = 'EthAmountRow'; public render(): React.ReactNode { const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props; @@ -87,7 +86,7 @@ export class EthAmountRow extends React.Component { {rowLabel} - {this._usdSection()} + {this._renderUsdSection()} {ethFormatter( ethAmount, @@ -102,7 +101,7 @@ export class EthAmountRow extends React.Component { ); } - private _usdSection(): React.ReactNode { + private _renderUsdSection(): React.ReactNode { const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd; const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount); return shouldHideUsdPriceSection ? null : ( -- cgit From 2f4e498a099ebbd8078139f90a054941e427de15 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:32:37 -0700 Subject: Refactor to make placeholder logic more straightforward --- packages/instant/src/components/instant_heading.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 48cda7f88..265c3e0a5 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -20,7 +20,6 @@ export interface InstantHeadingProps { const placeholderColor = ColorOption.white; export class InstantHeading extends React.Component { public render(): React.ReactNode { - const placeholderAmountToAlwaysShow = this._placeholderAmountToAlwaysShow(); return ( { - {placeholderAmountToAlwaysShow || this._ethAmount()} - {placeholderAmountToAlwaysShow || this._dollarAmount()} + + {this._placeholderOrAmount(this._ethAmount.bind(this))} + + {this._placeholderOrAmount(this._dollarAmount.bind(this))} ); } - private _placeholderAmountToAlwaysShow(): React.ReactNode | null { + private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { return ; } if (_.isUndefined(this.props.selectedAssetAmount)) { return ; } - return null; + return amountFunction(); } private _ethAmount(): React.ReactNode { -- cgit From 6588cf919ef70f54754b1428df51e967b817788a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 10:34:44 -0700 Subject: dont export PlainPlaceholder --- packages/instant/src/components/amount_placeholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx index e27d0ba81..6ef8f0ac3 100644 --- a/packages/instant/src/components/amount_placeholder.tsx +++ b/packages/instant/src/components/amount_placeholder.tsx @@ -6,10 +6,10 @@ import { Pulse } from './animations/pulse'; import { Text } from './ui'; -export interface PlainPlaceholder { +interface PlainPlaceholder { color: ColorOption; } -export const PlainPlaceholder: React.StatelessComponent = props => ( +const PlainPlaceholder: React.StatelessComponent = props => ( — -- cgit From 6f80c7e6d94124d16685853b0928f725a262e09e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 12:05:57 -0700 Subject: arrow function syntax so no need to bind --- packages/instant/src/components/instant_heading.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 265c3e0a5..625961b84 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -42,10 +42,8 @@ export class InstantHeading extends React.Component { - - {this._placeholderOrAmount(this._ethAmount.bind(this))} - - {this._placeholderOrAmount(this._dollarAmount.bind(this))} + {this._placeholderOrAmount(this._ethAmount)} + {this._placeholderOrAmount(this._dollarAmount)} @@ -62,7 +60,7 @@ export class InstantHeading extends React.Component { return amountFunction(); } - private _ethAmount(): React.ReactNode { + private _ethAmount = (): React.ReactNode => { return ( {format.ethBaseAmount( @@ -72,9 +70,9 @@ export class InstantHeading extends React.Component { )} ); - } + }; - private _dollarAmount(): React.ReactNode { + private _dollarAmount = (): React.ReactNode => { return ( {format.ethBaseAmountInUsd( @@ -85,5 +83,5 @@ export class InstantHeading extends React.Component { )} ); - } + }; } -- cgit From c070142dc02e97a3512cf8db189f5fffc9eb469a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 19 Oct 2018 12:08:33 -0700 Subject: linting --- packages/instant/src/components/instant_heading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 625961b84..63d2138a5 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -60,7 +60,7 @@ export class InstantHeading extends React.Component { return amountFunction(); } - private _ethAmount = (): React.ReactNode => { + private readonly _ethAmount = (): React.ReactNode => { return ( {format.ethBaseAmount( @@ -72,7 +72,7 @@ export class InstantHeading extends React.Component { ); }; - private _dollarAmount = (): React.ReactNode => { + private readonly _dollarAmount = (): React.ReactNode => { return ( {format.ethBaseAmountInUsd( -- cgit