From 990d510d05dc3698a457f0c850042b436018fdaf Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 8 Nov 2018 16:39:40 -0800 Subject: feat: add lock icon --- packages/instant/src/components/ui/icon.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index a88fa87dd..811142b5b 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -20,6 +20,7 @@ interface IconInfoMapping { success: IconInfo; chevron: IconInfo; search: IconInfo; + lock: IconInfo; } const ICONS: IconInfoMapping = { closeX: { @@ -58,6 +59,11 @@ const ICONS: IconInfoMapping = { path: 'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z', }, + lock: { + viewBox: '0 0 13 16', + path: + 'M6.47619 0C3.79509 0 1.60489 2.21216 1.60489 4.92014V6.33135C0.717479 6.33135 0 7.05602 0 7.95232V14.379C0 15.2753 0.717479 16 1.60489 16H11.3475C12.2349 16 12.9524 15.2753 12.9524 14.379V7.95232C12.9524 7.05602 12.2349 6.33135 11.3475 6.33135V4.92014C11.3475 2.21216 9.1573 0 6.47619 0ZM9.6482 6.33135H3.30418V4.92014C3.30418 3.16567 4.72026 1.71633 6.47619 1.71633C8.23213 1.71633 9.6482 3.16567 9.6482 4.92014V6.33135Z', + }, }; export interface IconProps { -- cgit v1.2.3 From fc138cd73d6eebc6a6250ede1ec7a465d4d40685 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 8 Nov 2018 16:39:51 -0800 Subject: feat: add metamask logo --- packages/instant/src/components/meta_mask_logo.tsx | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 packages/instant/src/components/meta_mask_logo.tsx diff --git a/packages/instant/src/components/meta_mask_logo.tsx b/packages/instant/src/components/meta_mask_logo.tsx new file mode 100644 index 000000000..d1ad10c23 --- /dev/null +++ b/packages/instant/src/components/meta_mask_logo.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; + +export interface MetaMaskLogoProps { + width?: number; + height?: number; +} + +export const MetaMaskLogo: React.StatelessComponent = ({ width, height }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +MetaMaskLogo.defaultProps = { + width: 85, + height: 80, +}; -- cgit v1.2.3 From 39ae21d6939b43fbae0669219801b2bab140da9c Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 8 Nov 2018 16:58:44 -0800 Subject: feat: allow panel children to fill entire content / remove title from panel component --- .../instant/src/components/erc20_token_selector.tsx | 7 ++++++- packages/instant/src/components/sliding_panel.tsx | 18 ++++-------------- .../src/components/zero_ex_instant_container.tsx | 1 - 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index 3503ff31a..d4a77c278 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -29,13 +29,18 @@ export class ERC20TokenSelector extends React.Component const { tokens, onTokenSelect } = this.props; return ( + + + Select Token + + - + {_.map(tokens, token => { if (!this._isTokenQueryMatch(token)) { return null; diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx index 9d16f9560..bb1049a31 100644 --- a/packages/instant/src/components/sliding_panel.tsx +++ b/packages/instant/src/components/sliding_panel.tsx @@ -12,25 +12,15 @@ import { Icon } from './ui/icon'; import { Text } from './ui/text'; export interface PanelProps { - title?: string; onClose?: () => void; } -export const Panel: React.StatelessComponent = ({ title, children, onClose }) => ( +export const Panel: React.StatelessComponent = ({ children, onClose }) => ( - - {title && ( - - - {title} - - - )} - - - + + - + {children} diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 5748e064e..47fd75d25 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -54,7 +54,6 @@ export class ZeroExInstantContainer extends React.Component -- cgit v1.2.3 From daa011f7cbbc6719d99eef251d07f552e23c21fb Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 11:15:32 -0800 Subject: feat: implement CurrentStandardSlidingPanel and put it in the main container --- .../src/components/animations/slide_animation.tsx | 2 +- packages/instant/src/components/sliding_error.tsx | 3 ++- packages/instant/src/components/sliding_panel.tsx | 4 +-- .../src/components/standard_sliding_panel.tsx | 28 +++++++++++++++++++ .../src/components/zero_ex_instant_container.tsx | 4 ++- .../containers/current_standard_sliding_panel.ts | 31 ++++++++++++++++++++++ packages/instant/src/containers/latest_error.tsx | 3 +-- packages/instant/src/redux/actions.ts | 7 ++++- packages/instant/src/redux/reducer.ts | 23 ++++++++++++++++ packages/instant/src/types.ts | 12 +++++++++ 10 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 packages/instant/src/components/standard_sliding_panel.tsx create mode 100644 packages/instant/src/containers/current_standard_sliding_panel.ts diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx index 9adb1c674..5992bcba7 100644 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { OptionallyScreenSpecific } from '../../style/media'; +import { SlideAnimationState } from '../../types'; import { PositionAnimation, PositionAnimationSettings } from './position_animation'; -export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export interface SlideAnimationProps { animationState: SlideAnimationState; slideInSettings: OptionallyScreenSpecific; diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index a8d4e391c..b59e2a905 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -3,9 +3,10 @@ import * as React from 'react'; import { ScreenSpecification } from '../style/media'; import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; +import { SlideAnimationState } from '../types'; import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; +import { SlideAnimation } from './animations/slide_animation'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx index bb1049a31..44bc8edb3 100644 --- a/packages/instant/src/components/sliding_panel.tsx +++ b/packages/instant/src/components/sliding_panel.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; +import { SlideAnimationState } from '../types'; import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; +import { SlideAnimation } from './animations/slide_animation'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; -import { Text } from './ui/text'; export interface PanelProps { onClose?: () => void; diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx new file mode 100644 index 000000000..6d31f3e3a --- /dev/null +++ b/packages/instant/src/components/standard_sliding_panel.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types'; + +import { SlidingPanel } from './sliding_panel'; + +export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings { + onClose: () => void; +} + +export class StandardSlidingPanel extends React.Component { + public render(): React.ReactNode { + const { animationState, content, onClose } = this.props; + return ( + + {this._getNodeForContent(content)} + + ); + } + private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => { + switch (content) { + case StandardSlidingPanelContent.InstallMetaMask: + return 'Install MetaMask'; + default: + return null; + } + }; +} diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 47fd75d25..b5f974cbe 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 { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector'; +import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress'; @@ -8,8 +9,8 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; +import { SlideAnimationState } from '../types'; -import { SlideAnimationState } from './animations/slide_animation'; import { CSSReset } from './css_reset'; import { SlidingPanel } from './sliding_panel'; import { Container } from './ui/container'; @@ -59,6 +60,7 @@ export class ZeroExInstantContainer extends React.Component + diff --git a/packages/instant/src/containers/current_standard_sliding_panel.ts b/packages/instant/src/containers/current_standard_sliding_panel.ts new file mode 100644 index 000000000..82ac7fa1b --- /dev/null +++ b/packages/instant/src/containers/current_standard_sliding_panel.ts @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { StandardSlidingPanel } from '../components/standard_sliding_panel'; +import { Action, actions } from '../redux/actions'; +import { State } from '../redux/reducer'; +import { StandardSlidingPanelSettings } from '../types'; + +export interface CurrentStandardSlidingPanelProps {} + +interface ConnectedState extends StandardSlidingPanelSettings {} + +interface ConnectedDispatch { + onClose: () => void; +} + +const mapStateToProps = (state: State, _ownProps: CurrentStandardSlidingPanelProps): ConnectedState => + state.standardSlidingPanelSettings; + +const mapDispatchToProps = ( + dispatch: Dispatch, + ownProps: CurrentStandardSlidingPanelProps, +): ConnectedDispatch => ({ + onClose: () => dispatch(actions.closeStandardSlidingPanel()), +}); + +export const CurrentStandardSlidingPanel: React.ComponentClass = connect( + mapStateToProps, + mapDispatchToProps, +)(StandardSlidingPanel); diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx index 99e55a6c4..347705697 100644 --- a/packages/instant/src/containers/latest_error.tsx +++ b/packages/instant/src/containers/latest_error.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import { SlideAnimationState } from '../components/animations/slide_animation'; import { SlidingError } from '../components/sliding_error'; import { State } from '../redux/reducer'; -import { Asset, DisplayStatus } from '../types'; +import { Asset, DisplayStatus, SlideAnimationState } from '../types'; export interface LatestErrorComponentProps { asset?: Asset; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts index fc89e3d0e..a899da23c 100644 --- a/packages/instant/src/redux/actions.ts +++ b/packages/instant/src/redux/actions.ts @@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer'; import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; -import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types'; +import { ActionsUnion, AddressAndEthBalanceInWei, Asset, StandardSlidingPanelContent } from '../types'; export interface PlainAction { type: T; @@ -42,6 +42,8 @@ export enum ActionTypes { HIDE_ERROR = 'HIDE_ERROR', CLEAR_ERROR = 'CLEAR_ERROR', RESET_AMOUNT = 'RESET_AMOUNT', + OPEN_STANDARD_SLIDING_PANEL = 'OPEN_STANDARD_SLIDING_PANEL', + CLOSE_STANDARD_SLIDING_PANEL = 'CLOSE_STANDARD_SLIDING_PANEL', } export const actions = { @@ -68,4 +70,7 @@ export const actions = { hideError: () => createAction(ActionTypes.HIDE_ERROR), clearError: () => createAction(ActionTypes.CLEAR_ERROR), resetAmount: () => createAction(ActionTypes.RESET_AMOUNT), + openStandardSlidingPanel: (content: StandardSlidingPanelContent) => + createAction(ActionTypes.OPEN_STANDARD_SLIDING_PANEL, content), + closeStandardSlidingPanel: () => createAction(ActionTypes.CLOSE_STANDARD_SLIDING_PANEL), }; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index a5a1b6f7d..a542979cb 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -19,6 +19,8 @@ import { OrderProcessState, OrderState, ProviderState, + StandardSlidingPanelContent, + StandardSlidingPanelSettings, } from '../types'; import { Action, ActionTypes } from './actions'; @@ -30,6 +32,7 @@ export interface DefaultState { buyOrderState: OrderState; latestErrorDisplayStatus: DisplayStatus; quoteRequestState: AsyncProcessState; + standardSlidingPanelSettings: StandardSlidingPanelSettings; } // State that is required but needs to be derived from the props @@ -56,6 +59,10 @@ export const DEFAULT_STATE: DefaultState = { buyOrderState: { processState: OrderProcessState.None }, latestErrorDisplayStatus: DisplayStatus.Hidden, quoteRequestState: AsyncProcessState.None, + standardSlidingPanelSettings: { + animationState: 'none', + content: StandardSlidingPanelContent.None, + }, }; export const createReducer = (initialState: State) => { @@ -213,6 +220,22 @@ export const createReducer = (initialState: State) => { ...state, availableAssets: action.data, }; + case ActionTypes.OPEN_STANDARD_SLIDING_PANEL: + return { + ...state, + standardSlidingPanelSettings: { + content: action.data, + animationState: 'slidIn', + }, + }; + case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL: + return { + ...state, + standardSlidingPanelSettings: { + content: state.standardSlidingPanelSettings.content, + animationState: 'slidOut', + }, + }; default: return state; } diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 20ad2ed95..6438aba01 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -125,3 +125,15 @@ export interface AddressAndEthBalanceInWei { address: string; ethBalanceInWei: BigNumber; } + +export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; + +export enum StandardSlidingPanelContent { + None = 'NONE', + InstallMetaMask = 'INSTALL_META_MASK', +} + +export interface StandardSlidingPanelSettings { + animationState: SlideAnimationState; + content: StandardSlidingPanelContent; +} -- cgit v1.2.3 From fa7bd072d064d1c79c8e84bc42463491ebbad33f Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:19:59 -0800 Subject: feat: refactor progress bar code to expose static progress bar --- .../instant/src/components/buy_order_progress.tsx | 23 ++++++++--- .../instant/src/components/timed_progress_bar.tsx | 46 ++++++++++++++++------ .../instant/src/components/zero_ex_instant.tsx | 4 +- .../src/components/zero_ex_instant_container.tsx | 22 +++++++++-- .../src/components/zero_ex_instant_overlay.tsx | 4 +- 5 files changed, 73 insertions(+), 26 deletions(-) diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx index bc7319423..9c73d58af 100644 --- a/packages/instant/src/components/buy_order_progress.tsx +++ b/packages/instant/src/components/buy_order_progress.tsx @@ -1,6 +1,7 @@ +import * as _ from 'lodash'; import * as React from 'react'; -import { TimedProgressBar } from '../components/timed_progress_bar'; +import { ProgressBar, TimedProgressBar } from '../components/timed_progress_bar'; import { TimeCounter } from '../components/time_counter'; import { Container } from '../components/ui/container'; @@ -12,7 +13,7 @@ export interface BuyOrderProgressProps { export const BuyOrderProgress: React.StatelessComponent = props => { const { buyOrderState } = props; - + let content: React.ReactNode = null; if ( buyOrderState.processState === OrderProcessState.Processing || buyOrderState.processState === OrderProcessState.Success || @@ -21,15 +22,25 @@ export const BuyOrderProgress: React.StatelessComponent = const progress = buyOrderState.progress; const hasEnded = buyOrderState.processState !== OrderProcessState.Processing; const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; - return ( - + content = ( + + + ); + } else { + // Just show a static progress bar if we aren't processing or in an end state + content = ( + + ); } - - return null; + return ( + + {content} + + ); }; diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx index 59aaa33a1..8465b9cd0 100644 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ b/packages/instant/src/components/timed_progress_bar.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants'; -import { ColorOption, keyframes, styled } from '../style/theme'; +import { ColorOption, css, keyframes, styled } from '../style/theme'; import { Container } from './ui/container'; @@ -20,15 +20,11 @@ export class TimedProgressBar extends React.Component private readonly _barRef = React.createRef(); public render(): React.ReactNode { - const timedProgressProps = this._calculateTimedProgressProps(); - return ( - - - - ); + const widthAnimationSettings = this._calculateWidthAnimationSettings(); + return ; } - private _calculateTimedProgressProps(): TimedProgressProps { + private _calculateWidthAnimationSettings(): WidthAnimationSettings { if (this.props.hasEnded) { if (!this._barRef.current) { throw new Error('ended but no reference'); @@ -60,21 +56,45 @@ const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => { `; }; -interface TimedProgressProps { +export interface WidthAnimationSettings { timeMs: number; fromWidth: string; toWidth: string; } -export const TimedProgress = +interface ProgressProps { + width?: string; + animationSettings?: WidthAnimationSettings; +} + +export const Progress = styled.div < - TimedProgressProps > + ProgressProps > ` && { background-color: ${props => props.theme[ColorOption.primaryColor]}; border-radius: 6px; height: 6px; - animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)} - ${props => props.timeMs}ms linear 1 forwards; + ${props => (props.width ? `width: ${props.width};` : '')} + ${props => + props.animationSettings + ? css` + animation: ${expandingWidthKeyframes( + props.animationSettings.fromWidth, + props.animationSettings.toWidth, + )} + ${props.animationSettings.timeMs}ms linear 1 forwards; + ` + : ''} } `; + +export interface ProgressBarProps extends ProgressProps {} + +export const ProgressBar: React.ComponentType> = React.forwardRef( + (props, ref) => ( + + + + ), +); diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index b945f9908..f6ee28dba 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { INJECTED_DIV_CLASS } from '../constants'; +import { ConnectedZeroExInstantContainer } from '../containers/connected_zero_ex_instant_container'; -import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; export type ZeroExInstantProps = ZeroExInstantProviderProps; @@ -11,7 +11,7 @@ export const ZeroExInstant: React.StatelessComponent = props return (
- +
); diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index b5f974cbe..f96174b63 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -9,14 +9,16 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; -import { SlideAnimationState } from '../types'; +import { OrderProcessState, SlideAnimationState } from '../types'; import { CSSReset } from './css_reset'; import { SlidingPanel } from './sliding_panel'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; -export interface ZeroExInstantContainerProps {} +export interface ZeroExInstantContainerProps { + orderProcessState: OrderProcessState; +} export interface ZeroExInstantContainerState { tokenSelectionPanelAnimationState: SlideAnimationState; } @@ -48,7 +50,7 @@ export class ZeroExInstantContainer extends React.Component - + {this._renderPaymentMethodOrBuyOrderProgress()} @@ -76,4 +78,18 @@ export class ZeroExInstantContainer extends React.Component { + const { orderProcessState } = this.props; + if ( + orderProcessState === OrderProcessState.Processing || + orderProcessState === OrderProcessState.Success || + orderProcessState === OrderProcessState.Failure + ) { + return ; + } + if (orderProcessState === OrderProcessState.None) { + return ; + } + return null; + }; } diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx index 10438ab7a..a7e1bd65a 100644 --- a/packages/instant/src/components/zero_ex_instant_overlay.tsx +++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; +import { ConnectedZeroExInstantContainer } from '../containers/connected_zero_ex_instant_container'; import { ColorOption } from '../style/theme'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Overlay } from './ui/overlay'; -import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps { @@ -31,7 +31,7 @@ export const ZeroExInstantOverlay: React.StatelessComponent - + -- cgit v1.2.3 From 3fd667b3bee4652ec8a1a362790ceaf3fe8cf7d9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:23:01 -0800 Subject: feat: make zero ex instant container switch between progress and payment --- .../connected_zero_ex_instant_container.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/instant/src/containers/connected_zero_ex_instant_container.ts diff --git a/packages/instant/src/containers/connected_zero_ex_instant_container.ts b/packages/instant/src/containers/connected_zero_ex_instant_container.ts new file mode 100644 index 000000000..9606d18c2 --- /dev/null +++ b/packages/instant/src/containers/connected_zero_ex_instant_container.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; +import { OrderProcessState } from '../types'; + +import { ZeroExInstantContainer } from '../components/zero_ex_instant_container'; + +export interface ConnectedZeroExInstantContainerProps {} + +interface ConnectedState { + orderProcessState: OrderProcessState; +} + +const mapStateToProps = (state: State, _ownProps: ConnectedZeroExInstantContainerProps): ConnectedState => ({ + orderProcessState: state.buyOrderState.processState, +}); + +export const ConnectedZeroExInstantContainer: React.ComponentClass = connect( + mapStateToProps, +)(ZeroExInstantContainer); -- cgit v1.2.3 From 3aa831ad7752cf24ae67b1a96a6e839cc40ec820 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:29:28 -0800 Subject: feat: add account payment method container --- packages/instant/src/components/payment_method.tsx | 64 ++++++++++++---------- .../src/components/zero_ex_instant_container.tsx | 3 +- .../containers/connected_account_payment_method.ts | 21 +++++++ 3 files changed, 57 insertions(+), 31 deletions(-) create mode 100644 packages/instant/src/containers/connected_account_payment_method.ts diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 8c0b47d72..a9bbef518 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { Network } from '../types'; +import { Account, Network } from '../types'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -11,35 +11,39 @@ import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Text } from './ui/text'; -export interface PaymentMethodProps {} +export interface PaymentMethodProps { + account: Account; +} -export const PaymentMethod: React.StatelessComponent = () => ( - - - - - Payment Method - - - - - - MetaMask - - +export const PaymentMethod: React.StatelessComponent = ({ account }) => { + return ( + + + + + Payment Method + + + + + + MetaMask + + + - + + - - -); + ); +}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index f96174b63..6412c9c66 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 { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector'; +import { ConnectedAccountPaymentMethod } from '../containers/connected_account_payment_method'; import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; @@ -88,7 +89,7 @@ export class ZeroExInstantContainer extends React.Component; } if (orderProcessState === OrderProcessState.None) { - return ; + return ; } return null; }; diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts new file mode 100644 index 000000000..ea9531a3e --- /dev/null +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; +import { Account } from '../types'; + +import { PaymentMethod } from '../components/payment_method'; + +export interface ConnectedAccountPaymentMethodProps {} + +interface ConnectedState { + account: Account; +} + +const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ + account: state.providerState.account, +}); + +export const ConnectedAccountPaymentMethod: React.ComponentClass = connect( + mapStateToProps, +)(PaymentMethod); -- cgit v1.2.3 From 3f1f19e344c1f79accf38572dd0f7c29308954e7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:41:32 -0800 Subject: feat: connect payment method to state and display different content based on account state --- packages/instant/src/components/payment_method.tsx | 106 +++++++++++++++------ .../containers/connected_account_payment_method.ts | 4 +- 2 files changed, 78 insertions(+), 32 deletions(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index a9bbef518..f50c9bf3c 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { Account, Network } from '../types'; +import { Account, AccountState, Network } from '../types'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -13,37 +13,81 @@ import { Text } from './ui/text'; export interface PaymentMethodProps { account: Account; + network: Network; } -export const PaymentMethod: React.StatelessComponent = ({ account }) => { - return ( - - - - - Payment Method - - - - - - MetaMask - - +export class PaymentMethod extends React.Component { + public render(): React.ReactNode { + return ( + + + + + {this._renderTitleText()} + + {this._renderTitleLabel()} - + + {this._renderMainContent()} - - - ); -}; + ); + } + private readonly _renderTitleText = (): string => { + const { account } = this.props; + switch (account.state) { + case AccountState.Loading: + return 'loading...'; + case AccountState.Error: + case AccountState.Locked: + case AccountState.None: + return 'connect your wallet'; + case AccountState.Ready: + return 'payment method'; + default: + return 'payment method'; + } + }; + private readonly _renderTitleLabel = (): React.ReactNode => { + const { account } = this.props; + if (account.state === AccountState.Ready) { + return ( + + + + + MetaMask + + + + ); + } + return null; + }; + private readonly _renderMainContent = (): React.ReactNode => { + const { account, network } = this.props; + switch (account.state) { + case AccountState.Loading: + return 'loading...'; + case AccountState.Error: + case AccountState.Locked: + case AccountState.None: + return 'connect your wallet'; + case AccountState.Ready: + return ( + + ); + default: + return 'payment method'; + } + }; +} diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts index ea9531a3e..a1ebe7125 100644 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { State } from '../redux/reducer'; -import { Account } from '../types'; +import { Account, Network } from '../types'; import { PaymentMethod } from '../components/payment_method'; @@ -10,10 +10,12 @@ export interface ConnectedAccountPaymentMethodProps {} interface ConnectedState { account: Account; + network: Network; } const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ account: state.providerState.account, + network: state.network, }); export const ConnectedAccountPaymentMethod: React.ComponentClass = connect( -- cgit v1.2.3 From 3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:56:04 -0800 Subject: feat: create connect metamask --- packages/instant/src/components/payment_method.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index f50c9bf3c..dcf68da53 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; +import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; import { Container } from './ui/container'; @@ -20,7 +21,7 @@ export class PaymentMethod extends React.Component { public render(): React.ReactNode { return ( - + { case AccountState.Error: case AccountState.Locked: case AccountState.None: - return 'connect your wallet'; + return ( + + + + + + + Connect MetaMask + + + + ); case AccountState.Ready: return ( Date: Fri, 9 Nov 2018 14:20:14 -0800 Subject: feat: open metamask sliding panel if locked on click --- packages/instant/src/components/payment_method.tsx | 53 ++++++++++++++-------- .../containers/connected_account_payment_method.ts | 20 ++++++-- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index dcf68da53..1d8661921 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { Account, AccountState, Network } from '../types'; +import { Account, AccountState, Network, StandardSlidingPanelContent } from '../types'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; @@ -15,6 +15,7 @@ import { Text } from './ui/text'; export interface PaymentMethodProps { account: Account; network: Network; + openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void; } export class PaymentMethod extends React.Component { @@ -75,27 +76,10 @@ export class PaymentMethod extends React.Component { switch (account.state) { case AccountState.Loading: return 'loading...'; - case AccountState.Error: case AccountState.Locked: + return Unlock MetaMask; case AccountState.None: - return ( - - - - - - - Connect MetaMask - - - - ); + return Install MetaMask; case AccountState.Ready: return ( { return 'payment method'; } }; + private readonly _openInstallWalletPanel = () => { + this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallMetaMask); + }; } + +interface WalletPromptProps { + onClick?: () => void; +} + +const WalletPrompt: React.StatelessComponent = ({ onClick, children }) => ( + + + + + + + {children} + + + +); diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts index a1ebe7125..ee57d1829 100644 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -1,10 +1,11 @@ import * as React from 'react'; import { connect } from 'react-redux'; - -import { State } from '../redux/reducer'; -import { Account, Network } from '../types'; +import { Dispatch } from 'redux'; import { PaymentMethod } from '../components/payment_method'; +import { Action, actions } from '../redux/actions'; +import { State } from '../redux/reducer'; +import { Account, Network, StandardSlidingPanelContent } from '../types'; export interface ConnectedAccountPaymentMethodProps {} @@ -13,11 +14,24 @@ interface ConnectedState { network: Network; } +interface ConnectedDispatch { + openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void; +} + const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ account: state.providerState.account, network: state.network, }); +const mapDispatchToProps = ( + dispatch: Dispatch, + ownProps: ConnectedAccountPaymentMethodProps, +): ConnectedDispatch => ({ + openStandardSlidingPanel: (content: StandardSlidingPanelContent) => + dispatch(actions.openStandardSlidingPanel(content)), +}); + export const ConnectedAccountPaymentMethod: React.ComponentClass = connect( mapStateToProps, + mapDispatchToProps, )(PaymentMethod); -- cgit v1.2.3 From 128abb39dd635599841643ca65bfc286aabaa063 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 14:21:41 -0800 Subject: feat: add padding to close icon to increase tap area --- packages/instant/src/components/sliding_panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx index 44bc8edb3..7f9037049 100644 --- a/packages/instant/src/components/sliding_panel.tsx +++ b/packages/instant/src/components/sliding_panel.tsx @@ -18,7 +18,7 @@ export interface PanelProps { export const Panel: React.StatelessComponent = ({ children, onClose }) => ( - + {children} -- cgit v1.2.3 From b5988277087f0ee39109972d73ca94368d6dd4b9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 14:57:29 -0800 Subject: feat: implement basic StandardModalContent with accompanying InstallWalletPanelContent --- .../components/install_wallet_panel_content.tsx | 22 ++++++++ packages/instant/src/components/payment_method.tsx | 2 +- .../src/components/standard_panel_content.tsx | 61 ++++++++++++++++++++++ .../src/components/standard_sliding_panel.tsx | 5 +- packages/instant/src/components/ui/button.tsx | 1 - packages/instant/src/types.ts | 2 +- 6 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 packages/instant/src/components/install_wallet_panel_content.tsx create mode 100644 packages/instant/src/components/standard_panel_content.tsx diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx new file mode 100644 index 000000000..41b8ec74b --- /dev/null +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { MetaMaskLogo } from './meta_mask_logo'; +import { StandardPanelContent } from './standard_panel_content'; +import { Button } from './ui/button'; + +export interface InstallWalletPanelContentProps {} + +export const InstallWalletPanelContent: React.StatelessComponent = () => ( + } + title="Install MetaMask" + description="Please install the MetaMask wallet extension from the Chrome Store." + action={ + + } + /> +); diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 1d8661921..9bd1f8104 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -93,7 +93,7 @@ export class PaymentMethod extends React.Component { } }; private readonly _openInstallWalletPanel = () => { - this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallMetaMask); + this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet); }; } diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx new file mode 100644 index 000000000..da851b232 --- /dev/null +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Text } from './ui/text'; + +export interface MoreInfoSettings { + text: string; + href: string; +} + +export interface StandardPanelContentProps { + image: React.ReactNode; + title: string; + description: string; + moreInfoSettings?: MoreInfoSettings; + action: React.ReactNode; +} + +const spacingBetweenPx = '20px'; + +export const StandardPanelContent: React.StatelessComponent = ({ + image, + title, + description, + moreInfoSettings, + action, +}) => ( + + + {image} + + + {title} + + + + + {description} + + + + {moreInfoSettings && ( + + + {moreInfoSettings.text}> + + + )} + + + {action} + +); diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx index 6d31f3e3a..9409d9664 100644 --- a/packages/instant/src/components/standard_sliding_panel.tsx +++ b/packages/instant/src/components/standard_sliding_panel.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types'; +import { InstallWalletPanelContent } from './install_wallet_panel_content'; import { SlidingPanel } from './sliding_panel'; export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings { @@ -19,8 +20,8 @@ export class StandardSlidingPanel extends React.Component { switch (content) { - case StandardSlidingPanelContent.InstallMetaMask: - return 'Install MetaMask'; + case StandardSlidingPanelContent.InstallWallet: + return ; default: return null; } diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index b90221bf4..d0b1bb508 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -64,7 +64,6 @@ export const Button = styled(PlainButton)` Button.defaultProps = { backgroundColor: ColorOption.primaryColor, - borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '.6em 1.2em', diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 6438aba01..c45286640 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -130,7 +130,7 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export enum StandardSlidingPanelContent { None = 'NONE', - InstallMetaMask = 'INSTALL_META_MASK', + InstallWallet = 'INSTALL_WALLET', } export interface StandardSlidingPanelSettings { -- cgit v1.2.3 From 7249cc7b495f370f7ec5672ca36456dd4b6779de Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 15:08:01 -0800 Subject: feat: allow href prop on button --- .../components/install_wallet_panel_content.tsx | 9 ++++++- packages/instant/src/components/payment_method.tsx | 1 - packages/instant/src/components/ui/button.tsx | 29 +++++++++++++++++----- packages/instant/src/constants.ts | 2 ++ 4 files changed, 33 insertions(+), 8 deletions(-) diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 41b8ec74b..07e56ed70 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +import { METAMASK_CHROME_STORE_URL } from '../constants'; import { ColorOption } from '../style/theme'; import { MetaMaskLogo } from './meta_mask_logo'; @@ -14,7 +15,13 @@ export const InstallWalletPanelContent: React.StatelessComponent + } diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 9bd1f8104..ca646880d 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -1,4 +1,3 @@ -import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index d0b1bb508..479ef6c77 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -3,6 +3,8 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; +export type ButtonOnClickHandler = (event: React.MouseEvent) => void; + export interface ButtonProps { backgroundColor?: ColorOption; borderColor?: ColorOption; @@ -12,15 +14,30 @@ export interface ButtonProps { padding?: string; type?: string; isDisabled?: boolean; - onClick?: (event: React.MouseEvent) => void; + href?: string; + onClick?: ButtonOnClickHandler; className?: string; } -const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( - -); +const createHrefOnClick = (href: string) => () => { + window.open(href, '_blank'); +}; + +const PlainButton: React.StatelessComponent = ({ + children, + isDisabled, + onClick, + href, + type, + className, +}) => { + const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick; + return ( + + ); +}; const darkenOnHoverAmount = 0.1; const darkenOnActiveAmount = 0.2; diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index b5c4f96e4..7888e0ccb 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -17,6 +17,8 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info'; export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2'; export const PROGRESS_STALL_AT_WIDTH = '95%'; export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200; +export const METAMASK_CHROME_STORE_URL = + 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en'; export const ETHEREUM_NODE_URL_BY_NETWORK = { [Network.Mainnet]: 'https://mainnet.infura.io/', [Network.Kovan]: 'https://kovan.infura.io/', -- cgit v1.2.3 From 7460f2796a2a549eaed15051009e35229fb1280f Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 15:11:47 -0800 Subject: feat: add more info section to the metamask panel --- packages/instant/src/components/install_wallet_panel_content.tsx | 8 ++++++-- packages/instant/src/components/standard_panel_content.tsx | 4 ++-- packages/instant/src/constants.ts | 3 ++- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 07e56ed70..7000e27f6 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { METAMASK_CHROME_STORE_URL } from '../constants'; +import { META_MASK_CHROME_STORE_URL, META_MASK_SITE_URL } from '../constants'; import { ColorOption } from '../style/theme'; import { MetaMaskLogo } from './meta_mask_logo'; @@ -14,9 +14,13 @@ export const InstallWalletPanelContent: React.StatelessComponent} title="Install MetaMask" description="Please install the MetaMask wallet extension from the Chrome Store." + moreInfoSettings={{ + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }} action={ diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx index fca5383ea..95a79bd55 100644 --- a/packages/instant/src/components/standard_panel_content.tsx +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -29,7 +29,7 @@ export const StandardPanelContent: React.StatelessComponent ( - + {image} @@ -43,16 +43,15 @@ export const StandardPanelContent: React.StatelessComponent {moreInfoSettings && ( - - - {moreInfoSettings.text} - - + + {moreInfoSettings.text} + )} diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 479ef6c77..fbc5bcad4 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -2,6 +2,7 @@ import { darken, saturate } from 'polished'; import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; +import { util } from '../../util/util'; export type ButtonOnClickHandler = (event: React.MouseEvent) => void; @@ -19,10 +20,6 @@ export interface ButtonProps { className?: string; } -const createHrefOnClick = (href: string) => () => { - window.open(href, '_blank'); -}; - const PlainButton: React.StatelessComponent = ({ children, isDisabled, @@ -31,7 +28,7 @@ const PlainButton: React.StatelessComponent = ({ type, className, }) => { - const computedOnClick = isDisabled ? undefined : href ? createHrefOnClick(href) : onClick; + const computedOnClick = isDisabled ? undefined : href ? util.createHrefOnClick(href) : onClick; return ( -- cgit v1.2.3 From a8a1ea92a614181ebdf6c738139723f0d5c6da69 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 16:30:38 -0800 Subject: fix: no longer refer to error account state --- packages/instant/src/components/payment_method.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 27f6383a4..f596c5ad6 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -45,7 +45,6 @@ export class PaymentMethod extends React.Component { switch (account.state) { case AccountState.Loading: return 'loading...'; - case AccountState.Error: case AccountState.Locked: case AccountState.None: return 'connect your wallet'; -- cgit v1.2.3 From 79f0324abc6e59d5595770e44d620e6d0cccd6bc Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 12 Nov 2018 13:30:47 -0800 Subject: feat: integrate wallet flow with heartbeat and other branches --- .../instant/src/components/buy_order_progress.tsx | 2 +- packages/instant/src/components/payment_method.tsx | 12 ++-- .../src/components/zero_ex_instant_provider.tsx | 7 ++- .../containers/connected_account_payment_method.ts | 39 +++++++++++-- packages/instant/src/redux/async_data.ts | 65 ++++++++++++---------- packages/instant/src/util/heartbeater_factory.ts | 4 +- 6 files changed, 81 insertions(+), 48 deletions(-) diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx index cb02c8d8c..d93e74c9f 100644 --- a/packages/instant/src/components/buy_order_progress.tsx +++ b/packages/instant/src/components/buy_order_progress.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { ProgressBar, TimedProgressBar } from '../components/timed_progress_bar'; +import { TimedProgressBar } from '../components/timed_progress_bar'; import { TimeCounter } from '../components/time_counter'; import { Container } from '../components/ui/container'; diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index f596c5ad6..25c879519 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { Account, AccountState, Network, StandardSlidingPanelContent } from '../types'; +import { Account, AccountState, Network } from '../types'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; @@ -15,7 +15,8 @@ import { Text } from './ui/text'; export interface PaymentMethodProps { account: Account; network: Network; - openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void; + onInstallWalletClick: () => void; + onUnlockWalletClick: () => void; } export class PaymentMethod extends React.Component { @@ -80,7 +81,7 @@ export class PaymentMethod extends React.Component { case AccountState.Locked: return ( } > Please Unlock MetaMask @@ -89,7 +90,7 @@ export class PaymentMethod extends React.Component { case AccountState.None: return ( } > Install MetaMask @@ -107,9 +108,6 @@ export class PaymentMethod extends React.Component { return null; } }; - private readonly _openInstallWalletPanel = () => { - this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet); - }; } interface WalletPromptProps { diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 411f118cc..863bc99b7 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -91,12 +91,13 @@ export class ZeroExInstantProvider extends React.Component void; + onInstallWalletClick: () => void; + unlockWalletAndDispatchToStore: (providerState: ProviderState) => void; +} + +interface ConnectedProps { + onInstallWalletClick: () => void; + onUnlockWalletClick: () => void; + account: Account; + network: Network; } +type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps; + const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ - account: state.providerState.account, network: state.network, + providerState: state.providerState, }); const mapDispatchToProps = ( dispatch: Dispatch, ownProps: ConnectedAccountPaymentMethodProps, ): ConnectedDispatch => ({ - openStandardSlidingPanel: (content: StandardSlidingPanelContent) => - dispatch(actions.openStandardSlidingPanel(content)), + onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)), + unlockWalletAndDispatchToStore: async (providerState: ProviderState) => + asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true), +}); + +const mergeProps = ( + connectedState: ConnectedState, + connectedDispatch: ConnectedDispatch, + ownProps: ConnectedAccountPaymentMethodProps, +): FinalProps => ({ + ...ownProps, + network: connectedState.network, + account: connectedState.providerState.account, + onInstallWalletClick: connectedDispatch.onInstallWalletClick, + onUnlockWalletClick: () => { + connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState); + }, }); export const ConnectedAccountPaymentMethod: React.ComponentClass = connect( mapStateToProps, mapDispatchToProps, + mergeProps, )(PaymentMethod); diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index b920ac914..8999ef097 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -1,71 +1,75 @@ import { AssetProxyId } from '@0x/types'; import * as _ from 'lodash'; +import { Dispatch } from 'redux'; import { BIG_NUMBER_ZERO } from '../constants'; -import { AccountState, ERC20Asset, OrderProcessState } from '../types'; +import { AccountState, ERC20Asset, OrderProcessState, ProviderState } from '../types'; import { assetUtils } from '../util/asset'; import { buyQuoteUpdater } from '../util/buy_quote_updater'; import { coinbaseApi } from '../util/coinbase_api'; import { errorFlasher } from '../util/error_flasher'; import { actions } from './actions'; -import { Store } from './store'; +import { State } from './reducer'; export const asyncData = { - fetchEthPriceAndDispatchToStore: async (store: Store) => { + fetchEthPriceAndDispatchToStore: async (dispatch: Dispatch) => { try { const ethUsdPrice = await coinbaseApi.getEthUsdPrice(); - store.dispatch(actions.updateEthUsdPrice(ethUsdPrice)); + dispatch(actions.updateEthUsdPrice(ethUsdPrice)); } catch (e) { const errorMessage = 'Error fetching ETH/USD price'; - errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage); - store.dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO)); + errorFlasher.flashNewErrorMessage(dispatch, errorMessage); + dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO)); } }, - fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => { - const { providerState, assetMetaDataMap, network } = store.getState(); + fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => { + const { providerState, assetMetaDataMap, network } = state; const assetBuyer = providerState.assetBuyer; try { const assetDatas = await assetBuyer.getAvailableAssetDatasAsync(); const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network); - store.dispatch(actions.setAvailableAssets(assets)); + dispatch(actions.setAvailableAssets(assets)); } catch (e) { const errorMessage = 'Could not find any assets'; - errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage); + errorFlasher.flashNewErrorMessage(dispatch, errorMessage); // On error, just specify that none are available - store.dispatch(actions.setAvailableAssets([])); + dispatch(actions.setAvailableAssets([])); } }, - fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => { - const { store, shouldSetToLoading } = options; - const { providerState } = store.getState(); + fetchAccountInfoAndDispatchToStore: async ( + providerState: ProviderState, + dispatch: Dispatch, + shouldAttemptUnlock: boolean = false, + shouldSetToLoading: boolean = false, + ) => { const web3Wrapper = providerState.web3Wrapper; const provider = providerState.provider; if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) { - store.dispatch(actions.setAccountStateLoading()); + dispatch(actions.setAccountStateLoading()); } let availableAddresses: string[]; try { // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable); - availableAddresses = isPrivacyModeEnabled - ? await (provider as any).enable() - : await web3Wrapper.getAvailableAddressesAsync(); + availableAddresses = + isPrivacyModeEnabled && shouldAttemptUnlock + ? await (provider as any).enable() + : await web3Wrapper.getAvailableAddressesAsync(); } catch (e) { - store.dispatch(actions.setAccountStateLocked()); + dispatch(actions.setAccountStateLocked()); return; } if (!_.isEmpty(availableAddresses)) { const activeAddress = availableAddresses[0]; - store.dispatch(actions.setAccountStateReady(activeAddress)); + dispatch(actions.setAccountStateReady(activeAddress)); // tslint:disable-next-line:no-floating-promises - asyncData.fetchAccountBalanceAndDispatchToStore(store); + asyncData.fetchAccountBalanceAndDispatchToStore(providerState, dispatch); } else { - store.dispatch(actions.setAccountStateLocked()); + dispatch(actions.setAccountStateLocked()); } }, - fetchAccountBalanceAndDispatchToStore: async (store: Store) => { - const { providerState } = store.getState(); + fetchAccountBalanceAndDispatchToStore: async (providerState: ProviderState, dispatch: Dispatch) => { const web3Wrapper = providerState.web3Wrapper; const account = providerState.account; if (account.state !== AccountState.Ready) { @@ -74,15 +78,18 @@ export const asyncData = { try { const address = account.address; const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); - store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); + dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); } catch (e) { // leave balance as is return; } }, - fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => { - const { store, shouldSetPending } = options; - const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState(); + fetchCurrentBuyQuoteAndDispatchToStore: async ( + state: State, + dispatch: Dispatch, + shouldSetPending: boolean = false, + ) => { + const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = state; const assetBuyer = providerState.assetBuyer; if ( !_.isUndefined(selectedAssetAmount) && @@ -92,7 +99,7 @@ export const asyncData = { ) { await buyQuoteUpdater.updateBuyQuoteAsync( assetBuyer, - store.dispatch, + dispatch, selectedAsset as ERC20Asset, selectedAssetAmount, shouldSetPending, diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts index 96a8ac4e6..06fcdb8bb 100644 --- a/packages/instant/src/util/heartbeater_factory.ts +++ b/packages/instant/src/util/heartbeater_factory.ts @@ -10,13 +10,13 @@ export interface HeartbeatFactoryOptions { export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => { const { store, shouldPerformImmediatelyOnStart } = options; return new Heartbeater(async () => { - await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false }); + await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false); }, shouldPerformImmediatelyOnStart); }; export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => { const { store, shouldPerformImmediatelyOnStart } = options; return new Heartbeater(async () => { - await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false }); + await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, false); }, shouldPerformImmediatelyOnStart); }; -- cgit v1.2.3 From 711b307e6c56457647a98c6d76725aa90ac0d53e Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 12 Nov 2018 15:28:54 -0800 Subject: feat: prevent eth balance blink --- packages/instant/src/redux/async_data.ts | 6 ++--- packages/instant/src/redux/reducer.ts | 11 ++++++--- yarn.lock | 39 +++++++++++++++++++++++++++++++- 3 files changed, 49 insertions(+), 7 deletions(-) diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index 8999ef097..2682677b9 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -72,9 +72,9 @@ export const asyncData = { fetchAccountBalanceAndDispatchToStore: async (providerState: ProviderState, dispatch: Dispatch) => { const web3Wrapper = providerState.web3Wrapper; const account = providerState.account; - if (account.state !== AccountState.Ready) { - return; - } + // if (account.state !== AccountState.Ready) { + // return; + // } try { const address = account.address; const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 4688250bc..28f094184 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -73,11 +73,16 @@ export const createReducer = (initialState: State) => { case ActionTypes.SET_ACCOUNT_STATE_LOCKED: return reduceStateWithAccount(state, LOCKED_ACCOUNT); case ActionTypes.SET_ACCOUNT_STATE_READY: { - const account: AccountReady = { + const address = action.data; + const newAccount: AccountReady = { state: AccountState.Ready, - address: action.data, + address, }; - return reduceStateWithAccount(state, account); + const currentAccount = state.providerState.account; + if (currentAccount.state === AccountState.Ready && currentAccount.address === address) { + newAccount.ethBalanceInWei = currentAccount.ethBalanceInWei; + } + return reduceStateWithAccount(state, newAccount); } case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: { const { address, ethBalanceInWei } = action.data; diff --git a/yarn.lock b/yarn.lock index 648db1b0f..fed5a7edf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1906,6 +1906,10 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" +aes-js@^3.1.1: + version "3.1.2" + resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" + agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" @@ -3343,7 +3347,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1: +bs58@=4.0.1, bs58@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3366,6 +3370,14 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" +bs58check@^2.1.2: + version "2.1.2" + resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" + dependencies: + bs58 "^4.0.0" + create-hash "^1.1.0" + safe-buffer "^5.1.2" + bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -5953,6 +5965,19 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" +ethereumjs-wallet@~0.6.0: + version "0.6.2" + resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" + dependencies: + aes-js "^3.1.1" + bs58check "^2.1.2" + ethereumjs-util "^5.2.0" + hdkey "^1.0.0" + safe-buffer "^5.1.2" + scrypt.js "^0.2.0" + utf8 "^3.0.0" + uuid "^3.3.2" + ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" @@ -7486,6 +7511,14 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" +hdkey@^1.0.0: + version "1.1.0" + resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" + dependencies: + coinstring "^2.0.0" + safe-buffer "^5.1.1" + secp256k1 "^3.0.1" + he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -15572,6 +15605,10 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" +utf8@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" + util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit v1.2.3 From 01b36b494996c641a3cb5bd3fd894624a8dad210 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 12 Nov 2018 17:30:28 -0800 Subject: fix: remove requirement of default case in all switch statements --- packages/instant/src/components/payment_method.tsx | 4 ---- packages/instant/src/components/scaling_input.tsx | 2 -- packages/instant/src/components/standard_sliding_panel.tsx | 2 +- packages/instant/src/redux/async_data.ts | 11 +++-------- packages/instant/src/redux/reducer.ts | 7 +++++-- packages/instant/src/util/asset.ts | 2 -- packages/instant/src/util/etherscan.ts | 3 +-- packages/instant/tslint.json | 3 ++- 8 files changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 25c879519..49ec22164 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -51,8 +51,6 @@ export class PaymentMethod extends React.Component { return 'connect your wallet'; case AccountState.Ready: return 'payment method'; - default: - return 'payment method'; } }; private readonly _renderTitleLabel = (): React.ReactNode => { @@ -104,8 +102,6 @@ export class PaymentMethod extends React.Component { network={network} /> ); - default: - return null; } }; } diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index 1abadb78b..e1599a316 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -156,8 +156,6 @@ export class ScalingInput extends React.Component { diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx index 9409d9664..f587ff79a 100644 --- a/packages/instant/src/components/standard_sliding_panel.tsx +++ b/packages/instant/src/components/standard_sliding_panel.tsx @@ -22,7 +22,7 @@ export class StandardSlidingPanel extends React.Component; - default: + case StandardSlidingPanelContent.None: return null; } }; diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index 2682677b9..15ac31a5a 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -1,4 +1,5 @@ import { AssetProxyId } from '@0x/types'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import { Dispatch } from 'redux'; @@ -64,19 +65,13 @@ export const asyncData = { const activeAddress = availableAddresses[0]; dispatch(actions.setAccountStateReady(activeAddress)); // tslint:disable-next-line:no-floating-promises - asyncData.fetchAccountBalanceAndDispatchToStore(providerState, dispatch); + asyncData.fetchAccountBalanceAndDispatchToStore(activeAddress, providerState.web3Wrapper, dispatch); } else { dispatch(actions.setAccountStateLocked()); } }, - fetchAccountBalanceAndDispatchToStore: async (providerState: ProviderState, dispatch: Dispatch) => { - const web3Wrapper = providerState.web3Wrapper; - const account = providerState.account; - // if (account.state !== AccountState.Ready) { - // return; - // } + fetchAccountBalanceAndDispatchToStore: async (address: string, web3Wrapper: Web3Wrapper, dispatch: Dispatch) => { try { - const address = account.address; const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); } catch (e) { diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index 28f094184..3d7c3f483 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -74,13 +74,16 @@ export const createReducer = (initialState: State) => { return reduceStateWithAccount(state, LOCKED_ACCOUNT); case ActionTypes.SET_ACCOUNT_STATE_READY: { const address = action.data; - const newAccount: AccountReady = { + let newAccount: AccountReady = { state: AccountState.Ready, address, }; const currentAccount = state.providerState.account; if (currentAccount.state === AccountState.Ready && currentAccount.address === address) { - newAccount.ethBalanceInWei = currentAccount.ethBalanceInWei; + newAccount = { + ...newAccount, + ethBalanceInWei: currentAccount.ethBalanceInWei, + }; } return reduceStateWithAccount(state, newAccount); } diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index fbfbb19f3..40560d3eb 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -80,8 +80,6 @@ export const assetUtils = { return metaData.symbol.toUpperCase(); case AssetProxyId.ERC721: return metaData.name; - default: - return defaultName; } }, formattedSymbolForAsset: (asset?: ERC20Asset, defaultName: string = '???'): string => { diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts index 4d62c4d9f..f9bf82827 100644 --- a/packages/instant/src/util/etherscan.ts +++ b/packages/instant/src/util/etherscan.ts @@ -8,9 +8,8 @@ const etherscanPrefix = (networkId: number): string | undefined => { return 'kovan.'; case Network.Mainnet: return ''; - default: - return undefined; } + return ''; }; export const etherscanUtil = { diff --git a/packages/instant/tslint.json b/packages/instant/tslint.json index 08b76be97..d43ee8da7 100644 --- a/packages/instant/tslint.json +++ b/packages/instant/tslint.json @@ -3,6 +3,7 @@ "rules": { "custom-no-magic-numbers": false, "semicolon": [true, "always", "ignore-bound-class-methods"], - "max-classes-per-file": false + "max-classes-per-file": false, + "switch-default": false } } -- cgit v1.2.3 From c67632dff5d6f16f303c12f1595af1b813d1402c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 12 Nov 2018 17:42:56 -0800 Subject: feat: make all button fontsizes 16px by default --- packages/instant/src/components/buy_button.tsx | 1 - packages/instant/src/components/buy_order_state_buttons.tsx | 2 +- packages/instant/src/components/install_wallet_panel_content.tsx | 1 - packages/instant/src/components/placing_order_button.tsx | 2 +- packages/instant/src/components/secondary_button.tsx | 2 -- packages/instant/src/components/ui/button.tsx | 2 +- 6 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index c10e07b83..8b6121e43 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -43,7 +43,6 @@ export class BuyButton extends React.Component { onClick={this._handleClick} isDisabled={shouldDisableButton} fontColor={ColorOption.white} - fontSize="16px" > Buy diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx index 6041bf4f5..e563bec73 100644 --- a/packages/instant/src/components/buy_order_state_buttons.tsx +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -35,7 +35,7 @@ export const BuyOrderStateButtons: React.StatelessComponent - diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 7000e27f6..546874212 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -22,7 +22,6 @@ export const InstallWalletPanelContent: React.StatelessComponent diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx index 74d6b9fc4..2516b90b1 100644 --- a/packages/instant/src/components/placing_order_button.tsx +++ b/packages/instant/src/components/placing_order_button.tsx @@ -7,7 +7,7 @@ import { Container } from './ui/container'; import { Spinner } from './ui/spinner'; export const PlacingOrderButton: React.StatelessComponent<{}> = props => ( -