From 18c9907d6f168577c9d5f60117901268a25f6af9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 12 Oct 2018 15:35:20 -0700 Subject: feat(instant): add sliding error --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 1 - packages/instant/src/components/ui/text.tsx | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index 9c18e0933..5fa0b0eda 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -19,7 +19,6 @@ export interface SlideAnimationProps { animationType: string; animationDirection?: string; } - export const SlideAnimation = styled.div < SlideAnimationProps > diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 9fb8ea26f..af8e4d933 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -21,6 +21,8 @@ export interface TextProps { hoverColor?: string; noWrap?: boolean; display?: string; + marginRight?: string; + marginLeft?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( @@ -47,6 +49,8 @@ export const Text = styled(PlainText)` ${props => (props.display ? `display: ${props.display}` : '')}; ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; + ${props => (props.marginRight ? `margin-right: ${props.marginRight}` : '')}; + ${props => (props.marginLeft ? `margin-right: ${props.marginLeft}` : '')}; &:hover { ${props => props.onClick -- cgit v1.2.3 From f36352be47a3caf92e16e3965c86b593bfc46fea Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 14:04:53 -0700 Subject: move z-index setting to zero instant container, and add ability for zindex to be set on container --- packages/instant/src/components/zero_ex_instant_container.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 51f9dc63e..0c37e41db 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -6,6 +6,10 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan import { ColorOption } from '../style/theme'; +import { BuyButton } from './buy_button'; +import { InstantHeading } from './instant_heading'; +import { OrderDetails } from './order_details'; +import { SlidingError } from './sliding_error'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} -- cgit v1.2.3 From db77cd10c550803c4f3fac585adc0a7f6ffa8999 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 16 Oct 2018 11:25:52 -0700 Subject: feat(instant): Handle AssetBuyer errors --- .../src/components/animations/slide_animations.tsx | 54 ++++++++++++ .../animations/slide_up_and_down_animation.tsx | 95 ---------------------- .../instant/src/components/asset_amount_input.tsx | 19 +---- packages/instant/src/components/sliding_error.tsx | 20 +++-- .../src/components/zero_ex_instant_container.tsx | 4 + packages/instant/src/containers/latest_error.tsx | 36 ++++++++ .../src/containers/selected_asset_amount_input.ts | 13 ++- packages/instant/src/redux/actions.ts | 6 ++ packages/instant/src/redux/reducer.ts | 30 ++++++- packages/instant/src/redux/store.ts | 3 +- packages/instant/src/util/asset_data.ts | 18 ++++ packages/instant/src/util/error_description.ts | 23 ++++++ packages/instant/src/util/error_flasher.ts | 27 ++++++ 13 files changed, 228 insertions(+), 120 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_animations.tsx delete mode 100644 packages/instant/src/components/animations/slide_up_and_down_animation.tsx create mode 100644 packages/instant/src/containers/latest_error.tsx create mode 100644 packages/instant/src/util/asset_data.ts create mode 100644 packages/instant/src/util/error_description.ts create mode 100644 packages/instant/src/util/error_flasher.ts (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx new file mode 100644 index 000000000..1f10a2ed6 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; + +import { keyframes, styled } from '../../style/theme'; + +const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` + from { + position: relative; + top: ${fromY}; + } + + to { + position: relative; + top: ${toY}; + } +`; + +export interface SlideAnimationProps { + keyframes: string; + animationType: string; + animationDirection?: string; +} + +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` + animation-name: ${props => props.keyframes}; + animation-duration: 0.3s; + animation-timing-function: ${props => props.animationType}; + animation-delay: 0s; + animation-iteration-count: 1; + animation-fill-mode: ${props => props.animationDirection || 'none'}; + position: relative; +`; + +export interface SlideAnimationComponentProps { + downY: string; +} + +export const SlideUpAnimation: React.StatelessComponent = props => ( + + {props.children} + +); + +export const SlideDownAnimation: React.StatelessComponent = props => ( + + {props.children} + +); diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx deleted file mode 100644 index 5fa0b0eda..000000000 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; - -import { keyframes, styled } from '../../style/theme'; - -const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` - from { - position: relative; - top: ${fromY}; - } - - to { - position: relative; - top: ${toY}; - } -`; - -export interface SlideAnimationProps { - keyframes: string; - animationType: string; - animationDirection?: string; -} -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - animation-name: ${props => props.keyframes}; - animation-duration: 0.3s; - animation-timing-function: ${props => props.animationType}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: ${props => props.animationDirection || 'none'}; - position: relative; -`; - -export interface SlideAnimationComponentProps { - downY: string; -} - -export const SlideUpAnimationComponent: React.StatelessComponent = props => ( - - {props.children} - -); - -export const SlideDownAnimationComponent: React.StatelessComponent = props => ( - - {props.children} - -); - -export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { - delayMs: number; -} - -enum SlideState { - Up = 'up', - Down = 'down', -} -interface SlideUpAndDownState { - slideState: SlideState; -} - -export class SlideUpAndDownAnimation extends React.Component { - public state = { - slideState: SlideState.Up, - }; - - private _timeoutId?: number; - public render(): React.ReactNode { - return this._renderSlide(); - } - public componentDidMount(): void { - this._timeoutId = window.setTimeout(() => { - this.setState({ - slideState: SlideState.Down, - }); - }, this.props.delayMs); - - return; - } - public componentWillUnmount(): void { - if (this._timeoutId) { - window.clearTimeout(this._timeoutId); - } - } - private _renderSlide(): React.ReactNode { - const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; - - return {this.props.children}; - } -} diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx index 7c6b03ee9..a7df2da4d 100644 --- a/packages/instant/src/components/asset_amount_input.tsx +++ b/packages/instant/src/components/asset_amount_input.tsx @@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { assetMetaData } from '../data/asset_meta_data'; +import { bestNameForAsset } from '../util/asset_data'; + import { ColorOption } from '../style/theme'; import { util } from '../util/util'; @@ -26,26 +27,12 @@ export class AssetAmountInput extends React.Component { - {this._getAssetSymbolLabel()} + {bestNameForAsset(this.props.assetData, '???')} ); } - private readonly _getAssetSymbolLabel = (): string => { - const unknownLabel = '???'; - if (_.isUndefined(this.props.assetData)) { - return unknownLabel; - } - const metaData = assetMetaData[this.props.assetData]; - if (_.isUndefined(metaData)) { - return unknownLabel; - } - if (metaData.assetProxyId === AssetProxyId.ERC20) { - return metaData.symbol; - } - return unknownLabel; - }; private readonly _handleChange = (value?: BigNumber): void => { this.props.onChange(value, this.props.assetData); }; diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index 0237fb7e9..ad87481c4 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation'; +import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations'; import { Container, Text } from './ui'; @@ -29,8 +29,16 @@ export const Error: React.StatelessComponent = props => ( ); -export const SlidingError: React.StatelessComponent = props => ( - - - -); +export type SlidingDirection = 'up' | 'down'; +export interface SlidingErrorProps extends ErrorProps { + direction: SlidingDirection; +} +export const SlidingError: React.StatelessComponent = props => { + const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation; + + return ( + + + + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 0c37e41db..cc718d200 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; +import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; @@ -16,6 +17,9 @@ export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( + + + = props => { + if (!props.latestError) { + return
; + } + const slidingDirection = props.latestErrorDismissed ? 'down' : 'up'; + const { icon, message } = errorDescription(props.latestError, props.assetData); + return ; +}; + +interface ConnectedState { + assetData?: string; + latestError?: any; + latestErrorDismissed?: boolean; +} +export interface LatestErrorProps {} +const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ + assetData: state.selectedAssetData, + latestError: state.latestError, + latestErrorDismissed: state.latestErrorDismissed, +}); + +export const LatestError = connect(mapStateToProps)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index f2ca96ae4..00c0a1114 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -1,3 +1,4 @@ +import { BuyQuote } from '@0xproject/asset-buyer'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -11,6 +12,7 @@ import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { assetBuyer } from '../util/asset_buyer'; +import { errorFlasher } from '../util/error_flasher'; import { AssetAmountInput } from '../components/asset_amount_input'; @@ -43,7 +45,16 @@ const updateBuyQuoteAsync = async ( } // get a new buy quote. const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); - const newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); + + let newBuyQuote: BuyQuote | undefined; + try { + newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); + errorFlasher.clearError(dispatch); + } catch (error) { + errorFlasher.flashNewError(dispatch, error); + return; + } + // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(newBuyQuote)); }; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index 7d07b4950..cf5b39790 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -25,6 +25,9 @@ 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', + SET_ERROR = 'SET_ERROR', + HIDE_ERROR = 'HIDE_ERROR', + CLEAR_ERROR = 'CLEAR_ERROR', } export const actions = { @@ -33,4 +36,7 @@ export const actions = { updateSelectedAssetBuyState: (buyState: AsyncProcessState) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE, buyState), updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UPDATE_LATEST_BUY_QUOTE, buyQuote), + 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 adecf2ab7..4ff49c225 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -7,13 +7,22 @@ import { AsyncProcessState } from '../types'; import { Action, ActionTypes } from './actions'; -export interface State { +interface BaseState { selectedAssetData?: string; selectedAssetAmount?: BigNumber; selectedAssetBuyState: AsyncProcessState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; } +interface StateWithError extends BaseState { + latestError: any; + latestErrorDismissed: boolean; +} +interface StateWithoutError extends BaseState { + latestError: undefined; + latestErrorDismissed: undefined; +} +export type State = StateWithError | StateWithoutError; export const INITIAL_STATE: State = { // TODO: Remove hardcoded zrxAssetData @@ -22,6 +31,8 @@ export const INITIAL_STATE: State = { selectedAssetBuyState: AsyncProcessState.NONE, ethUsdPrice: undefined, latestBuyQuote: undefined, + latestError: undefined, + latestErrorDismissed: undefined, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -46,6 +57,23 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, selectedAssetBuyState: action.data, }; + case ActionTypes.SET_ERROR: + return { + ...state, + latestError: action.data, + latestErrorDismissed: false, + }; + case ActionTypes.HIDE_ERROR: + return { + ...state, + latestErrorDismissed: true, + }; + case ActionTypes.CLEAR_ERROR: + return { + ...state, + latestError: undefined, + latestErrorDismissed: undefined, + }; default: return state; } diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index fcd19f9a8..8d9fe34cb 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -3,4 +3,5 @@ import { createStore, Store as ReduxStore } from 'redux'; import { reducer, State } from './reducer'; -export const store: ReduxStore = createStore(reducer); +const reduxDevTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__; +export const store: ReduxStore = createStore(reducer, reduxDevTools && reduxDevTools()); diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts new file mode 100644 index 000000000..958f500bb --- /dev/null +++ b/packages/instant/src/util/asset_data.ts @@ -0,0 +1,18 @@ +import { AssetProxyId } from '@0xproject/types'; + +import { assetMetaData } from '../data/asset_meta_data'; + +// TODO: tests for this +export const bestNameForAsset = (assetData: string | undefined, defaultString: string) => { + if (assetData === undefined) { + return defaultString; + } + const metaData = assetMetaData[assetData]; + if (metaData === undefined) { + return defaultString; + } + if (metaData.assetProxyId === AssetProxyId.ERC20) { + return metaData.symbol.toUpperCase(); + } + return defaultString; +}; diff --git a/packages/instant/src/util/error_description.ts b/packages/instant/src/util/error_description.ts new file mode 100644 index 000000000..78af9e9ff --- /dev/null +++ b/packages/instant/src/util/error_description.ts @@ -0,0 +1,23 @@ +import { AssetBuyerError } from '@0xproject/asset-buyer'; + +import { bestNameForAsset } from '../util/asset_data'; + +const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => { + if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { + const assetName = bestNameForAsset(assetData, 'of this asset'); + return `Not enough ${assetName} available`; + } + + return undefined; +}; + +export const errorDescription = (error?: any, assetData?: string): { icon: string; message: string } => { + let bestMessage: string | undefined; + if (error instanceof Error) { + bestMessage = humanReadableMessageForError(error, assetData); + } + return { + icon: '😢', + message: bestMessage || 'Something went wrong...', + }; +}; diff --git a/packages/instant/src/util/error_flasher.ts b/packages/instant/src/util/error_flasher.ts new file mode 100644 index 000000000..f43c4211b --- /dev/null +++ b/packages/instant/src/util/error_flasher.ts @@ -0,0 +1,27 @@ +import { Dispatch } from 'redux'; + +import { Action, actions } from '../redux/actions'; + +class ErrorFlasher { + private _timeoutId?: number; + public flashNewError(dispatch: Dispatch, error: any, delayMs: number = 7000): void { + this._clearTimeout(); + + // dispatch new message + dispatch(actions.setError(error)); + + this._timeoutId = window.setTimeout(() => { + dispatch(actions.hideError()); + }, delayMs); + } + public clearError(dispatch: Dispatch): void { + this._clearTimeout(); + dispatch(actions.hideError()); + } + private _clearTimeout(): void { + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); + } + } +} +export const errorFlasher = new ErrorFlasher(); -- cgit v1.2.3 From 1d079490871ebb0d63bf182a75695303a3a9f1f2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 16 Oct 2018 17:30:32 -0700 Subject: linting, removing unused imports --- packages/instant/src/components/asset_amount_input.tsx | 1 - packages/instant/src/components/zero_ex_instant_container.tsx | 4 ---- 2 files changed, 5 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx index a7df2da4d..c9d9c52b3 100644 --- a/packages/instant/src/components/asset_amount_input.tsx +++ b/packages/instant/src/components/asset_amount_input.tsx @@ -1,4 +1,3 @@ -import { AssetProxyId } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index cc718d200..cf918d890 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -7,10 +7,6 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan import { ColorOption } from '../style/theme'; -import { BuyButton } from './buy_button'; -import { InstantHeading } from './instant_heading'; -import { OrderDetails } from './order_details'; -import { SlidingError } from './sliding_error'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} -- cgit v1.2.3 From dfc5d7d860c2edb93fe45653f755fe8ff530bf1d Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:41:36 -0700 Subject: get rid of unused marginLeft and marginRight props --- packages/instant/src/components/ui/text.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index af8e4d933..9fb8ea26f 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -21,8 +21,6 @@ export interface TextProps { hoverColor?: string; noWrap?: boolean; display?: string; - marginRight?: string; - marginLeft?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( @@ -49,8 +47,6 @@ export const Text = styled(PlainText)` ${props => (props.display ? `display: ${props.display}` : '')}; ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; - ${props => (props.marginRight ? `margin-right: ${props.marginRight}` : '')}; - ${props => (props.marginLeft ? `margin-right: ${props.marginLeft}` : '')}; &:hover { ${props => props.onClick -- cgit v1.2.3 From d46b28873385a8d6521d36f2a529451e1f725b26 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 11:08:56 -0700 Subject: use redux dev tools from package --- packages/instant/src/redux/store.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts index 8d9fe34cb..b9ce9c0c1 100644 --- a/packages/instant/src/redux/store.ts +++ b/packages/instant/src/redux/store.ts @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import { createStore, Store as ReduxStore } from 'redux'; +import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'; import { reducer, State } from './reducer'; -const reduxDevTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__; -export const store: ReduxStore = createStore(reducer, reduxDevTools && reduxDevTools()); +export const store: ReduxStore = createStore(reducer, devToolsEnhancer({})); -- cgit v1.2.3 From 187bbc7fc14ccc0385981a38602334de65e2506c Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:26:18 -0700 Subject: latestErrorDismissed -> latestErrorDisplay enum --- packages/instant/src/containers/latest_error.tsx | 11 +++++------ packages/instant/src/redux/reducer.ts | 25 +++++++++++------------- 2 files changed, 16 insertions(+), 20 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 5272d9610..7f36d3bf8 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -3,34 +3,33 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; -import { State } from '../redux/reducer'; +import { LatestErrorDisplay, State } from '../redux/reducer'; import { errorDescription } from '../util/error_description'; export interface LatestErrorComponentProps { assetData?: string; latestError?: any; - latestErrorDismissed?: boolean; + slidingDirection: 'down' | 'up'; } export const LatestErrorComponent: React.StatelessComponent = props => { if (!props.latestError) { return
; } - const slidingDirection = props.latestErrorDismissed ? 'down' : 'up'; const { icon, message } = errorDescription(props.latestError, props.assetData); - return ; + return ; }; interface ConnectedState { assetData?: string; latestError?: any; - latestErrorDismissed?: boolean; + slidingDirection: 'down' | 'up'; } export interface LatestErrorProps {} const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ assetData: state.selectedAssetData, latestError: state.latestError, - latestErrorDismissed: state.latestErrorDismissed, + slidingDirection: state.latestErrorDisplay === LatestErrorDisplay.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 4ff49c225..d23064db7 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -7,22 +7,19 @@ import { AsyncProcessState } from '../types'; import { Action, ActionTypes } from './actions'; -interface BaseState { +export enum LatestErrorDisplay { + Present, + Hidden, +} +export interface State { selectedAssetData?: string; selectedAssetAmount?: BigNumber; selectedAssetBuyState: AsyncProcessState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; + latestError?: any; + latestErrorDisplay: LatestErrorDisplay; } -interface StateWithError extends BaseState { - latestError: any; - latestErrorDismissed: boolean; -} -interface StateWithoutError extends BaseState { - latestError: undefined; - latestErrorDismissed: undefined; -} -export type State = StateWithError | StateWithoutError; export const INITIAL_STATE: State = { // TODO: Remove hardcoded zrxAssetData @@ -32,7 +29,7 @@ export const INITIAL_STATE: State = { ethUsdPrice: undefined, latestBuyQuote: undefined, latestError: undefined, - latestErrorDismissed: undefined, + latestErrorDisplay: LatestErrorDisplay.Hidden, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -61,18 +58,18 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestError: action.data, - latestErrorDismissed: false, + latestErrorDisplay: LatestErrorDisplay.Present, }; case ActionTypes.HIDE_ERROR: return { ...state, - latestErrorDismissed: true, + latestErrorDisplay: LatestErrorDisplay.Hidden, }; case ActionTypes.CLEAR_ERROR: return { ...state, latestError: undefined, - latestErrorDismissed: undefined, + latestErrorDisplay: LatestErrorDisplay.Hidden, }; default: return state; -- cgit v1.2.3 From 32fa1bcc387e2eecae53db4b082e93f6fb09ae10 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:31:28 -0700 Subject: export assetDataUtil big obj --- .../instant/src/components/asset_amount_input.tsx | 4 ++-- packages/instant/src/util/asset_data.ts | 25 +++++++++++----------- packages/instant/src/util/error_description.ts | 4 ++-- 3 files changed, 17 insertions(+), 16 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx index c9d9c52b3..db3dbe7f3 100644 --- a/packages/instant/src/components/asset_amount_input.tsx +++ b/packages/instant/src/components/asset_amount_input.tsx @@ -2,7 +2,7 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; -import { bestNameForAsset } from '../util/asset_data'; +import { assetDataUtil } from '../util/asset_data'; import { ColorOption } from '../style/theme'; import { util } from '../util/util'; @@ -26,7 +26,7 @@ export class AssetAmountInput extends React.Component { - {bestNameForAsset(this.props.assetData, '???')} + {assetDataUtil.bestNameForAsset(this.props.assetData, '???')} diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts index 958f500bb..4f3db8447 100644 --- a/packages/instant/src/util/asset_data.ts +++ b/packages/instant/src/util/asset_data.ts @@ -2,17 +2,18 @@ import { AssetProxyId } from '@0xproject/types'; import { assetMetaData } from '../data/asset_meta_data'; -// TODO: tests for this -export const bestNameForAsset = (assetData: string | undefined, defaultString: string) => { - if (assetData === undefined) { +export const assetDataUtil = { + bestNameForAsset: (assetData: string | undefined, defaultString: string) => { + if (assetData === undefined) { + return defaultString; + } + const metaData = assetMetaData[assetData]; + if (metaData === undefined) { + return defaultString; + } + if (metaData.assetProxyId === AssetProxyId.ERC20) { + return metaData.symbol.toUpperCase(); + } return defaultString; - } - const metaData = assetMetaData[assetData]; - if (metaData === undefined) { - return defaultString; - } - if (metaData.assetProxyId === AssetProxyId.ERC20) { - return metaData.symbol.toUpperCase(); - } - return defaultString; + }, }; diff --git a/packages/instant/src/util/error_description.ts b/packages/instant/src/util/error_description.ts index 78af9e9ff..9419a1e16 100644 --- a/packages/instant/src/util/error_description.ts +++ b/packages/instant/src/util/error_description.ts @@ -1,10 +1,10 @@ import { AssetBuyerError } from '@0xproject/asset-buyer'; -import { bestNameForAsset } from '../util/asset_data'; +import { assetDataUtil } from '../util/asset_data'; const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => { if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { - const assetName = bestNameForAsset(assetData, 'of this asset'); + const assetName = assetDataUtil.bestNameForAsset(assetData, 'of this asset'); return `Not enough ${assetName} available`; } -- cgit v1.2.3 From d052342df7247f1efc830797a8f69245db247166 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:32:54 -0700 Subject: use lodash isUndefined per PR comment --- packages/instant/src/util/asset_data.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts index 4f3db8447..f7c5b78cd 100644 --- a/packages/instant/src/util/asset_data.ts +++ b/packages/instant/src/util/asset_data.ts @@ -1,14 +1,16 @@ +import * as _ from 'lodash'; + import { AssetProxyId } from '@0xproject/types'; import { assetMetaData } from '../data/asset_meta_data'; export const assetDataUtil = { bestNameForAsset: (assetData: string | undefined, defaultString: string) => { - if (assetData === undefined) { + if (_.isUndefined(assetData)) { return defaultString; } const metaData = assetMetaData[assetData]; - if (metaData === undefined) { + if (_.isUndefined(metaData)) { return defaultString; } if (metaData.assetProxyId === AssetProxyId.ERC20) { -- cgit v1.2.3 From 155858de6e79d488293473e34868e20d2c39ef37 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:42:28 -0700 Subject: creating big error util file per francescos comment in PR --- packages/instant/src/containers/latest_error.tsx | 4 +- .../src/containers/selected_asset_amount_input.ts | 6 +-- packages/instant/src/util/error.ts | 51 ++++++++++++++++++++++ packages/instant/src/util/error_description.ts | 23 ---------- packages/instant/src/util/error_flasher.ts | 27 ------------ 5 files changed, 56 insertions(+), 55 deletions(-) create mode 100644 packages/instant/src/util/error.ts delete mode 100644 packages/instant/src/util/error_description.ts delete mode 100644 packages/instant/src/util/error_flasher.ts (limited to 'packages/instant/src') diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 7f36d3bf8..08ea418e7 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -4,7 +4,7 @@ import { connect } from 'react-redux'; import { SlidingError } from '../components/sliding_error'; import { LatestErrorDisplay, State } from '../redux/reducer'; -import { errorDescription } from '../util/error_description'; +import { errorUtil } from '../util/error'; export interface LatestErrorComponentProps { assetData?: string; @@ -16,7 +16,7 @@ export const LatestErrorComponent: React.StatelessComponent; } - const { icon, message } = errorDescription(props.latestError, props.assetData); + const { icon, message } = errorUtil.errorDescription(props.latestError, props.assetData); return ; }; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 00c0a1114..0d2c6dd7b 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -12,7 +12,7 @@ import { State } from '../redux/reducer'; import { ColorOption } from '../style/theme'; import { AsyncProcessState } from '../types'; import { assetBuyer } from '../util/asset_buyer'; -import { errorFlasher } from '../util/error_flasher'; +import { errorUtil } from '../util/error'; import { AssetAmountInput } from '../components/asset_amount_input'; @@ -49,9 +49,9 @@ const updateBuyQuoteAsync = async ( let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); - errorFlasher.clearError(dispatch); + errorUtil.errorFlasher.clearError(dispatch); } catch (error) { - errorFlasher.flashNewError(dispatch, error); + errorUtil.errorFlasher.flashNewError(dispatch, error); return; } diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts new file mode 100644 index 000000000..78d056e11 --- /dev/null +++ b/packages/instant/src/util/error.ts @@ -0,0 +1,51 @@ +import { AssetBuyerError } from '@0xproject/asset-buyer'; +import { Dispatch } from 'redux'; + +import { Action, actions } from '../redux/actions'; +import { assetDataUtil } from '../util/asset_data'; + +class ErrorFlasher { + private _timeoutId?: number; + public flashNewError(dispatch: Dispatch, error: any, delayMs: number = 7000): void { + this._clearTimeout(); + + // dispatch new message + dispatch(actions.setError(error)); + + this._timeoutId = window.setTimeout(() => { + dispatch(actions.hideError()); + }, delayMs); + } + public clearError(dispatch: Dispatch): void { + this._clearTimeout(); + dispatch(actions.hideError()); + } + private _clearTimeout(): void { + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); + } + } +} + +const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => { + if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { + const assetName = assetDataUtil.bestNameForAsset(assetData, 'of this asset'); + return `Not enough ${assetName} available`; + } + + return undefined; +}; + +export const errorUtil = { + errorFlasher: new ErrorFlasher(), + errorDescription: (error?: any, assetData?: string): { icon: string; message: string } => { + let bestMessage: string | undefined; + if (error instanceof Error) { + bestMessage = humanReadableMessageForError(error, assetData); + } + return { + icon: '😢', + message: bestMessage || 'Something went wrong...', + }; + }, +}; diff --git a/packages/instant/src/util/error_description.ts b/packages/instant/src/util/error_description.ts deleted file mode 100644 index 9419a1e16..000000000 --- a/packages/instant/src/util/error_description.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AssetBuyerError } from '@0xproject/asset-buyer'; - -import { assetDataUtil } from '../util/asset_data'; - -const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => { - if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { - const assetName = assetDataUtil.bestNameForAsset(assetData, 'of this asset'); - return `Not enough ${assetName} available`; - } - - return undefined; -}; - -export const errorDescription = (error?: any, assetData?: string): { icon: string; message: string } => { - let bestMessage: string | undefined; - if (error instanceof Error) { - bestMessage = humanReadableMessageForError(error, assetData); - } - return { - icon: '😢', - message: bestMessage || 'Something went wrong...', - }; -}; diff --git a/packages/instant/src/util/error_flasher.ts b/packages/instant/src/util/error_flasher.ts deleted file mode 100644 index f43c4211b..000000000 --- a/packages/instant/src/util/error_flasher.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Dispatch } from 'redux'; - -import { Action, actions } from '../redux/actions'; - -class ErrorFlasher { - private _timeoutId?: number; - public flashNewError(dispatch: Dispatch, error: any, delayMs: number = 7000): void { - this._clearTimeout(); - - // dispatch new message - dispatch(actions.setError(error)); - - this._timeoutId = window.setTimeout(() => { - dispatch(actions.hideError()); - }, delayMs); - } - public clearError(dispatch: Dispatch): void { - this._clearTimeout(); - dispatch(actions.hideError()); - } - private _clearTimeout(): void { - if (this._timeoutId) { - window.clearTimeout(this._timeoutId); - } - } -} -export const errorFlasher = new ErrorFlasher(); -- cgit v1.2.3 From 2b495a793521397ed4e81764aa87c3a51fef0a72 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 13:54:19 -0700 Subject: bigger emoji --- packages/instant/src/components/sliding_error.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index ad87481c4..3865a8797 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -20,8 +20,8 @@ export const Error: React.StatelessComponent = props => ( borderRadius="6px" marginBottom="10px" > - - {props.icon} + + {props.icon} {props.message} -- cgit v1.2.3 From ae4f1a093a3d02f13e56716dca2383a42b6422ba Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 14:02:39 -0700 Subject: handle other errors --- packages/instant/src/util/error.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts index 78d056e11..48cb131a9 100644 --- a/packages/instant/src/util/error.ts +++ b/packages/instant/src/util/error.ts @@ -28,11 +28,22 @@ class ErrorFlasher { } const humanReadableMessageForError = (error: Error, assetData?: string): string | undefined => { - if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { + const hasInsufficientLiquidity = + error.message === AssetBuyerError.InsufficientAssetLiquidity || + error.message === AssetBuyerError.InsufficientZrxLiquidity; + if (hasInsufficientLiquidity) { const assetName = assetDataUtil.bestNameForAsset(assetData, 'of this asset'); return `Not enough ${assetName} available`; } + if ( + error.message === AssetBuyerError.StandardRelayerApiError || + error.message.startsWith(AssetBuyerError.AssetUnavailable) + ) { + const assetName = assetDataUtil.bestNameForAsset(assetData, 'This asset'); + return `${assetName} is currently unavailable`; + } + return undefined; }; -- cgit v1.2.3 From 6cf8d57aee3ed332bd1109f8f39792894147d2dd Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:41:35 -0700 Subject: add concept of quoteState --- .../instant/src/components/instant_heading.tsx | 22 ++++++++++++++++---- .../src/containers/selected_asset_amount_input.ts | 24 ++++++++++++++-------- .../containers/selected_asset_instant_heading.ts | 3 +++ packages/instant/src/redux/actions.ts | 4 ++++ packages/instant/src/redux/reducer.ts | 17 ++++++++++++++- packages/instant/src/types.ts | 8 ++++---- 6 files changed, 60 insertions(+), 18 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 492c1b2c0..848056800 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; +import { AsyncProcessState } from '../types'; import { format } from '../util/format'; import { Container, Flex, Text } from './ui'; @@ -12,20 +13,33 @@ export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; + quoteState: AsyncProcessState; } const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => { if (_.isUndefined(selectedAssetAmount)) { return '0 ETH'; } - return format.ethBaseAmount(totalEthBaseAmount, 4, '...loading'); + return format.ethBaseAmount(totalEthBaseAmount, 4, '-'); }; const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => { if (_.isUndefined(selectedAssetAmount)) { return '$0.00'; } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '...loading'); + return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '-'); +}; + +const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => { + if (quoteState === AsyncProcessState.PENDING) { + return ( + + …loading + + ); + } else { + return amount; + } }; export const InstantHeading: React.StatelessComponent = props => ( @@ -47,11 +61,11 @@ export const InstantHeading: React.StatelessComponent = pro - {displaytotalEthBaseAmount(props)} + {loadingOrAmount(props.quoteState, displaytotalEthBaseAmount(props))} - {displayUsdAmount(props)} + {loadingOrAmount(props.quoteState, 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 0d2c6dd7b..87bb0e335 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -37,24 +37,25 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps) const updateBuyQuoteAsync = async ( dispatch: Dispatch, - assetData?: string, - assetAmount?: BigNumber, + assetData: string, + assetAmount: BigNumber, ): Promise => { - if (_.isUndefined(assetAmount) || _.isUndefined(assetData)) { - return; - } // get a new buy quote. const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, zrxDecimals); + // mark quote as pending + dispatch(actions.updateBuyQuoteStatePending()); + let newBuyQuote: BuyQuote | undefined; try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(assetData, baseUnitValue); - errorUtil.errorFlasher.clearError(dispatch); } catch (error) { + dispatch(actions.updateBuyQuoteStateFailure()); errorUtil.errorFlasher.flashNewError(dispatch, error); return; } - + // We have a successful new buy quote + errorUtil.errorFlasher.clearError(dispatch); // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(newBuyQuote)); }; @@ -72,8 +73,13 @@ const mapDispatchToProps = ( dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.NONE)); - // tslint:disable-next-line:no-floating-promises - debouncedUpdateBuyQuoteAsync(dispatch, assetData, value); + + if (!_.isUndefined(value) && !_.isUndefined(assetData)) { + // even if it's debounced, give them the illusion it's loading + dispatch(actions.updateBuyQuoteStatePending()); + // 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 c97cfe11a..be31527f1 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,6 +5,7 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; +import { AsyncProcessState } from '../types'; import { InstantHeading } from '../components/instant_heading'; @@ -14,12 +15,14 @@ interface ConnectedState { selectedAssetAmount?: BigNumber; totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; + quoteState: AsyncProcessState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ selectedAssetAmount: state.selectedAssetAmount, totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), ethUsdPrice: state.ethUsdPrice, + quoteState: state.quoteState, }); export const SelectedAssetInstantHeading: React.ComponentClass = connect(mapStateToProps)( diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index cf5b39790..e12c728bb 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -25,6 +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_ERROR = 'SET_ERROR', HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', @@ -36,6 +38,8 @@ export const actions = { updateSelectedAssetBuyState: (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), 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 d23064db7..ed8d0f6cf 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -14,9 +14,10 @@ export enum LatestErrorDisplay { export interface State { selectedAssetData?: string; selectedAssetAmount?: BigNumber; - selectedAssetBuyState: AsyncProcessState; + selectedAssetBuyState: AsyncProcessState; // TODO: rename buyOrderState ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; + quoteState: AsyncProcessState; latestError?: any; latestErrorDisplay: LatestErrorDisplay; } @@ -30,6 +31,7 @@ export const INITIAL_STATE: State = { latestBuyQuote: undefined, latestError: undefined, latestErrorDisplay: LatestErrorDisplay.Hidden, + quoteState: AsyncProcessState.NONE, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -48,6 +50,19 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => return { ...state, latestBuyQuote: action.data, + quoteState: AsyncProcessState.SUCCESS, + }; + case ActionTypes.UPDATE_BUY_QUOTE_STATE_PENDING: + return { + ...state, + latestBuyQuote: undefined, + quoteState: AsyncProcessState.PENDING, + }; + case ActionTypes.UPDATE_BUY_QUOTE_STATE_FAILURE: + return { + ...state, + latestBuyQuote: undefined, + quoteState: AsyncProcessState.FAILURE, }; case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE: return { diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index bf3ee392f..f0ffb893b 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -2,10 +2,10 @@ import { AssetProxyId, ObjectMap } from '@0xproject/types'; // Reusable export enum AsyncProcessState { - NONE, - PENDING, - SUCCESS, - FAILURE, + NONE = 'None', + PENDING = 'Pending', + SUCCESS = 'Success', + FAILURE = 'Failure', } export type FunctionType = (...args: any[]) => any; -- cgit v1.2.3 From 01b98c3ed09429dac92a46446bb73c8596116d18 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:46:01 -0700 Subject: ReactNode as default for formatters, and show bold dash --- packages/instant/src/components/instant_heading.tsx | 20 ++++++++++++++++---- packages/instant/src/util/format.ts | 20 ++++++++++++++------ 2 files changed, 30 insertions(+), 10 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 848056800..73a419019 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -16,18 +16,30 @@ export interface InstantHeadingProps { quoteState: AsyncProcessState; } -const displaytotalEthBaseAmount = ({ selectedAssetAmount, totalEthBaseAmount }: InstantHeadingProps): string => { +const Placeholder = () => ( + + — + +); +const displaytotalEthBaseAmount = ({ + selectedAssetAmount, + totalEthBaseAmount, +}: InstantHeadingProps): React.ReactNode => { if (_.isUndefined(selectedAssetAmount)) { return '0 ETH'; } - return format.ethBaseAmount(totalEthBaseAmount, 4, '-'); + return format.ethBaseAmount(totalEthBaseAmount, 4, ); }; -const displayUsdAmount = ({ totalEthBaseAmount, selectedAssetAmount, ethUsdPrice }: InstantHeadingProps): string => { +const displayUsdAmount = ({ + totalEthBaseAmount, + selectedAssetAmount, + ethUsdPrice, +}: InstantHeadingProps): React.ReactNode => { if (_.isUndefined(selectedAssetAmount)) { return '$0.00'; } - return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, '-'); + return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); }; const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => { diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts index b62c968fb..09eb880b2 100644 --- a/packages/instant/src/util/format.ts +++ b/packages/instant/src/util/format.ts @@ -5,14 +5,22 @@ import * as _ from 'lodash'; import { ethDecimals } from '../constants'; export const format = { - ethBaseAmount: (ethBaseAmount?: BigNumber, decimalPlaces: number = 4, defaultText: string = '0 ETH'): string => { + ethBaseAmount: ( + ethBaseAmount?: BigNumber, + decimalPlaces: number = 4, + defaultText: React.ReactNode = '0 ETH', + ): React.ReactNode => { 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 => { + ethUnitAmount: ( + ethUnitAmount?: BigNumber, + decimalPlaces: number = 4, + defaultText: React.ReactNode = '0 ETH', + ): React.ReactNode => { if (_.isUndefined(ethUnitAmount)) { return defaultText; } @@ -23,8 +31,8 @@ export const format = { ethBaseAmount?: BigNumber, ethUsdPrice?: BigNumber, decimalPlaces: number = 2, - defaultText: string = '$0.00', - ): string => { + defaultText: React.ReactNode = '$0.00', + ): React.ReactNode => { if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) { return defaultText; } @@ -35,8 +43,8 @@ export const format = { ethUnitAmount?: BigNumber, ethUsdPrice?: BigNumber, decimalPlaces: number = 2, - defaultText: string = '$0.00', - ): string => { + defaultText: React.ReactNode = '$0.00', + ): React.ReactNode => { if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) { return defaultText; } -- cgit v1.2.3 From 1d38b75d6f599b37c14bf06bf95811e4f6bafb54 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:49:57 -0700 Subject: fix type --- packages/instant/src/components/instant_heading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 73a419019..f57b59b73 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -42,7 +42,7 @@ const displayUsdAmount = ({ return format.ethBaseAmountInUsd(totalEthBaseAmount, ethUsdPrice, 2, ); }; -const loadingOrAmount = (quoteState: AsyncProcessState, amount: string): React.ReactNode => { +const loadingOrAmount = (quoteState: AsyncProcessState, amount: React.ReactNode): React.ReactNode => { if (quoteState === AsyncProcessState.PENDING) { return ( -- cgit v1.2.3 From 6ea386a7af89c1b8a4df94b656ae1772c29c1401 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 17 Oct 2018 16:50:21 -0700 Subject: selectedAssetBuyState -> buyOrderState --- packages/instant/src/containers/selected_asset_amount_input.ts | 2 +- packages/instant/src/containers/selected_asset_buy_button.ts | 8 ++++---- packages/instant/src/redux/actions.ts | 2 +- packages/instant/src/redux/reducer.ts | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 87bb0e335..0873f1ab6 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.updateSelectedAssetBuyState(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 4cbaf5537..7d3919468 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -39,14 +39,14 @@ const textForState = (state: AsyncProcessState): string => { }; const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ - text: textForState(state.selectedAssetBuyState), + text: textForState(state.buyOrderState), buyQuote: state.latestBuyQuote, }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updateSelectedAssetBuyState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updateSelectedAssetBuyState(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 e12c728bb..bec847742 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), - updateSelectedAssetBuyState: (buyState: AsyncProcessState) => + 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), diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index ed8d0f6cf..54290483b 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -14,7 +14,7 @@ export enum LatestErrorDisplay { export interface State { selectedAssetData?: string; selectedAssetAmount?: BigNumber; - selectedAssetBuyState: AsyncProcessState; // TODO: rename buyOrderState + buyOrderState: AsyncProcessState; ethUsdPrice?: BigNumber; latestBuyQuote?: BuyQuote; quoteState: AsyncProcessState; @@ -26,7 +26,7 @@ export const INITIAL_STATE: State = { // TODO: Remove hardcoded zrxAssetData selectedAssetData: zrxAssetData, selectedAssetAmount: undefined, - selectedAssetBuyState: AsyncProcessState.NONE, + buyOrderState: AsyncProcessState.NONE, ethUsdPrice: undefined, latestBuyQuote: undefined, latestError: undefined, @@ -67,7 +67,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => case ActionTypes.UPDATE_SELECTED_ASSET_BUY_STATE: return { ...state, - selectedAssetBuyState: action.data, + buyOrderState: action.data, }; case ActionTypes.SET_ERROR: return { -- cgit v1.2.3 From 9f924e459c43c023e35ab7222cd9824cc0e67411 Mon Sep 17 00:00:00 2001 From: Jacob Evans Date: Thu, 18 Oct 2018 21:51:56 +1100 Subject: chore: change package org from 0xproject to 0x --- packages/instant/src/constants.ts | 2 +- packages/instant/src/containers/latest_buy_quote_order_details.ts | 4 ++-- packages/instant/src/containers/selected_asset_amount_input.ts | 6 +++--- packages/instant/src/containers/selected_asset_buy_button.ts | 2 +- packages/instant/src/containers/selected_asset_instant_heading.ts | 2 +- packages/instant/src/data/asset_meta_data.ts | 2 +- packages/instant/src/redux/actions.ts | 4 ++-- packages/instant/src/redux/reducer.ts | 4 ++-- packages/instant/src/style/util.ts | 2 +- packages/instant/src/types.ts | 2 +- packages/instant/src/util/asset_buyer.ts | 2 +- packages/instant/src/util/asset_data.ts | 2 +- packages/instant/src/util/coinbase_api.ts | 2 +- packages/instant/src/util/error.ts | 2 +- packages/instant/src/util/format.ts | 4 ++-- packages/instant/src/util/web3_wrapper.ts | 2 +- 16 files changed, 22 insertions(+), 22 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 1fd321c5a..5d5341f9c 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const sraApiUrl = 'https://api.radarrelay.com/0x/v2/'; export const zrxAssetData = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498'; 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 b354c78fa..597bf3088 100644 --- a/packages/instant/src/containers/latest_buy_quote_order_details.ts +++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts @@ -1,5 +1,5 @@ -import { BuyQuoteInfo } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; +import { BuyQuoteInfo } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0873f1ab6..0810b093a 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -1,6 +1,6 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BuyQuote } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 7d3919468..4a8e31525 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -1,4 +1,4 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; +import { BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index be31527f1..0509db5da 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/instant/src/data/asset_meta_data.ts b/packages/instant/src/data/asset_meta_data.ts index e4d3e8f73..ae0d32e4b 100644 --- a/packages/instant/src/data/asset_meta_data.ts +++ b/packages/instant/src/data/asset_meta_data.ts @@ -1,4 +1,4 @@ -import { AssetProxyId, ObjectMap } from '@0xproject/types'; +import { AssetProxyId, ObjectMap } from '@0x/types'; import { zrxAssetData } from '../constants'; import { AssetMetaData } from '../types'; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index bec847742..9c154c66f 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -1,5 +1,5 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; +import { BuyQuote } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { ActionsUnion, AsyncProcessState } from '../types'; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 54290483b..05aa37420 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -1,5 +1,5 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; +import { BuyQuote } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import { zrxAssetData } from '../constants'; diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts index c9df0f834..3e38c4a7d 100644 --- a/packages/instant/src/style/util.ts +++ b/packages/instant/src/style/util.ts @@ -1,4 +1,4 @@ -import { ObjectMap } from '@0xproject/types'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; export const cssRuleIfExists = (props: ObjectMap, rule: string): string => { diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index f0ffb893b..8e3bb9b37 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -1,4 +1,4 @@ -import { AssetProxyId, ObjectMap } from '@0xproject/types'; +import { AssetProxyId, ObjectMap } from '@0x/types'; // Reusable export enum AsyncProcessState { diff --git a/packages/instant/src/util/asset_buyer.ts b/packages/instant/src/util/asset_buyer.ts index 27d66d600..6855fbcab 100644 --- a/packages/instant/src/util/asset_buyer.ts +++ b/packages/instant/src/util/asset_buyer.ts @@ -1,4 +1,4 @@ -import { AssetBuyer } from '@0xproject/asset-buyer'; +import { AssetBuyer } from '@0x/asset-buyer'; import { sraApiUrl } from '../constants'; diff --git a/packages/instant/src/util/asset_data.ts b/packages/instant/src/util/asset_data.ts index f7c5b78cd..fea2e2b19 100644 --- a/packages/instant/src/util/asset_data.ts +++ b/packages/instant/src/util/asset_data.ts @@ -1,6 +1,6 @@ import * as _ from 'lodash'; -import { AssetProxyId } from '@0xproject/types'; +import { AssetProxyId } from '@0x/types'; import { assetMetaData } from '../data/asset_meta_data'; diff --git a/packages/instant/src/util/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts index 94a5d3c80..080421f98 100644 --- a/packages/instant/src/util/coinbase_api.ts +++ b/packages/instant/src/util/coinbase_api.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; const baseEndpoint = 'https://api.coinbase.com/v2'; export const coinbaseApi = { diff --git a/packages/instant/src/util/error.ts b/packages/instant/src/util/error.ts index 48cb131a9..c9b13ef83 100644 --- a/packages/instant/src/util/error.ts +++ b/packages/instant/src/util/error.ts @@ -1,4 +1,4 @@ -import { AssetBuyerError } from '@0xproject/asset-buyer'; +import { AssetBuyerError } from '@0x/asset-buyer'; import { Dispatch } from 'redux'; import { Action, actions } from '../redux/actions'; diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts index 09eb880b2..8482b1526 100644 --- a/packages/instant/src/util/format.ts +++ b/packages/instant/src/util/format.ts @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import { ethDecimals } from '../constants'; diff --git a/packages/instant/src/util/web3_wrapper.ts b/packages/instant/src/util/web3_wrapper.ts index d7e43521f..24dcd9076 100644 --- a/packages/instant/src/util/web3_wrapper.ts +++ b/packages/instant/src/util/web3_wrapper.ts @@ -1,4 +1,4 @@ -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import { getProvider } from './provider'; -- cgit v1.2.3 From 8c6de7f69dc1d2bc543456782c5e70e105026301 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 13:59:40 +0100 Subject: chore: replace @0xproject with @0x in .tsx files --- packages/instant/src/components/amount_input.tsx | 2 +- packages/instant/src/components/asset_amount_input.tsx | 2 +- packages/instant/src/components/buy_button.tsx | 2 +- packages/instant/src/components/order_details.tsx | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx index 7644f5f67..c89fb05ad 100644 --- a/packages/instant/src/components/amount_input.tsx +++ b/packages/instant/src/components/amount_input.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx index db3dbe7f3..730e6396f 100644 --- a/packages/instant/src/components/asset_amount_input.tsx +++ b/packages/instant/src/components/asset_amount_input.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 0706817c9..d2a8bd07a 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -1,4 +1,4 @@ -import { BuyQuote } from '@0xproject/asset-buyer'; +import { BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index a15ff411b..ad4a87714 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -1,5 +1,5 @@ -import { BuyQuoteInfo } from '@0xproject/asset-buyer'; -import { BigNumber } from '@0xproject/utils'; +import { BuyQuoteInfo } from '@0x/asset-buyer'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { oc } from 'ts-optchain'; -- cgit v1.2.3 From 0affc7682fa1a7484bb77cc460e9b9d10553980f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 14:06:12 +0100 Subject: chore: fix imports --- packages/instant/src/components/instant_heading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index f57b59b73..a36d35a93 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; -- cgit v1.2.3