From d0a3779091661cfa099ec84f12e5d944287d1e3f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 14 Jun 2018 18:19:07 -0700 Subject: Add Pointer component --- .../components/onboarding/onboarding_tooltip.tsx | 35 ++++++----- packages/website/ts/components/ui/pointer.tsx | 68 ++++++++++++++++++++++ 2 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 packages/website/ts/components/ui/pointer.tsx (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 155c70c5f..9e0744dcb 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; +import { Pointer } from 'ts/components/ui/pointer'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; @@ -34,22 +35,24 @@ export const ContinueButton: React.StatelessComponent = (pr }; export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - - -
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - - Continue - - )} - {!props.hideBackButton && } - {!props.hideNextButton && } - -
- - + + + +
+ {props.title} + {props.content} + {props.continueButtonDisplay && ( + + Continue + + )} + {!props.hideBackButton && } + {!props.hideNextButton && } + +
+ + + ); OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx new file mode 100644 index 000000000..dcd1b8e54 --- /dev/null +++ b/packages/website/ts/components/ui/pointer.tsx @@ -0,0 +1,68 @@ +import { colors } from '@0xproject/react-shared'; +import { Island } from 'ts/components/ui/island'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; + +export interface PointerProps { + className?: string; + color?: string; + size?: number; + direction: PointerDirection; +} + +const PlainPointer: React.StatelessComponent = props =>
; + +const positionToCss = (props: PointerProps) => { + const position = { + top: `bottom: 100%; left: 50%;`, + right: `left: 100%; top: 50%;`, + bottom: `top: 100%; left: 50%;`, + left: `right: 100%; top: 50%;`, + }[props.direction]; + + const borderColorSide = { + top: 'border-bottom-color', + right: 'border-left-color', + bottom: 'border-top-color', + left: 'border-right-color', + }[props.direction]; + const border = `${borderColorSide}: ${props.color};`; + const marginSide = { + top: 'margin-left', + right: 'margin-top', + bottom: 'margin-left', + left: 'margin-top', + }[props.direction]; + const margin = `${marginSide}: -${props.size}px`; + return { + position, + border, + margin, + }; +}; + +export const Pointer = styled(PlainPointer)` + position: relative; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: ${props => `${props.size}px`}; + ${props => positionToCss(props).position} + ${props => positionToCss(props).border} + ${props => positionToCss(props).margin} + } +`; + +Pointer.defaultProps = { + color: colors.white, + size: 16, +}; + +Pointer.displayName = 'Pointer'; -- cgit v1.2.3 From 54f79c2798c095344b003139144b77fc1024d8c3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 13:17:02 -0700 Subject: Improve styles of onboarding tooltip --- .../ts/components/onboarding/onboarding_flow.tsx | 10 +-- .../components/onboarding/onboarding_tooltip.tsx | 87 ++++++++++++++-------- .../onboarding/portal_onboarding_flow.tsx | 20 +++-- packages/website/ts/components/ui/button.tsx | 17 +++-- packages/website/ts/components/ui/container.tsx | 5 ++ packages/website/ts/components/ui/pointer.tsx | 3 +- packages/website/ts/components/ui/text.tsx | 28 ++++++- 7 files changed, 117 insertions(+), 53 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9879cd387..7a5a6e40f 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -10,8 +10,8 @@ export interface Step { title?: string; content: React.ReactNode; placement?: Placement; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; } @@ -54,13 +54,13 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + void; onClickBack: () => void; continueButtonDisplay?: ContinueButtonDisplay; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + pointerDirection?: PointerDirection; + className?: string; } -// TODO: Make this more general button. -export interface ContinueButtonProps { - display: ContinueButtonDisplay; - children?: string; - onClick: () => void; -} - -export const ContinueButton: React.StatelessComponent = (props: ContinueButtonProps) => { - const isDisabled = props.display === 'disabled'; - return ( - - ); -}; - -export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - +export const OnboardingTooltip: React.StatelessComponent = ({ + title, + content, + continueButtonDisplay, + onClickNext, + onClickBack, + onClose, + shouldHideBackButton, + shouldHideNextButton, + pointerDirection, + className, +}) => ( +
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - +
+ {title} + + + Close + + +
+ + {content} + + {continueButtonDisplay && ( + )} - {!props.hideBackButton && } - {!props.hideNextButton && } - + + {!shouldHideBackButton && ( + + Back + + )} + {!shouldHideNextButton && ( + + Skip + + )} +
); +OnboardingTooltip.defaultProps = { + pointerDirection: 'left', +}; + OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index efb844cb5..3deefec3c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,41 +47,47 @@ export class PortalOnboardingFlow extends React.Component Unlock your tokens for trading. You only need to do this once for each token. @@ -94,9 +100,11 @@ export class PortalOnboardingFlow extends React.Component) => void; } -const PlainButton: React.StatelessComponent = ({ children, onClick, type, className }) => ( - ); export const Button = styled(PlainButton)` - cursor: pointer; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; + transition: background-color 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => props.backgroundColor}; + background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => darken(0.1, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; } &:active { - background-color: ${props => darken(0.2, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } `; @@ -46,6 +48,7 @@ Button.defaultProps = { backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', + isDisabled: false, }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c6a78e181..3b55a18ce 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -16,6 +16,11 @@ export interface ContainerProps { maxWidth?: StringOrNum; isHidden?: boolean; className?: string; + position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + top?: string; + left?: string; + right?: string; + bottom?: string; } export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index dcd1b8e54..448786bb4 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,5 +1,4 @@ import { colors } from '@0xproject/react-shared'; -import { Island } from 'ts/components/ui/island'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,7 +11,7 @@ export interface PointerProps { direction: PointerDirection; } -const PlainPointer: React.StatelessComponent = props =>
; +const PlainPointer: React.StatelessComponent = props =>
; const positionToCss = (props: PointerProps) => { const position = { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 7e47f1d09..073bfc2d2 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,8 +1,9 @@ import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label'; +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4'; export interface TextProps { className?: string; @@ -14,10 +15,13 @@ export interface TextProps { minHeight?: string; center?: boolean; fontWeight?: number | string; + onClick?: () => void; } -const PlainText: React.StatelessComponent = ({ children, className, Tag }) => ( - {children} +const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( + + {children} + ); export const Text = styled(PlainText)` @@ -28,14 +32,30 @@ export const Text = styled(PlainText)` ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; + ${props => (props.onClick ? 'cursor: pointer' : '')}; + transition: color 0.5s ease; + &:hover { + ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')}; + } `; Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, - fontColor: colors.white, + fontColor: colors.black, fontSize: '14px', Tag: 'div', }; Text.displayName = 'Text'; + +export const Title: React.StatelessComponent = props => ; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; -- cgit v1.2.3 From 3d6ce0fb7618ff7531f234929ead39fafecb1d11 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 13:55:37 -0700 Subject: Make start onboarding button pretty --- packages/website/ts/components/portal/portal.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 48486939b..aca04969d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -22,6 +23,7 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; import { Wallet } from 'ts/components/wallet/wallet'; @@ -353,8 +355,21 @@ export class Portal extends React.Component { /> - {/** TODO: Implement real styles. */} -

Start onboarding flow.

+ + + + Learn how to set up your account + +
-- cgit v1.2.3 From 0c3430913332c9f082c4278d8d999dd749d13513 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 14:49:01 -0700 Subject: Make metamask part of the fow pretty --- .../onboarding/portal_onboarding_flow.tsx | 29 +++++++++++++++++++--- packages/website/ts/components/portal/portal.tsx | 11 +++++--- packages/website/ts/components/ui/text.tsx | 2 +- 3 files changed, 35 insertions(+), 7 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3deefec3c..7e6ce6d02 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,9 +1,13 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -48,8 +52,20 @@ export class PortalOnboardingFlow extends React.Component + + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers + and dApps. + +
+ ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -57,7 +73,14 @@ export class PortalOnboardingFlow extends React.Component + + + + Unlock your metamask extension to begin. +
+ ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index aca04969d..d1d499314 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,10 @@ import { colors, Styles } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -23,9 +23,9 @@ import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; +import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow'; @@ -366,7 +366,12 @@ export class Portal extends React.Component { style={{ width: '30px', height: '30px' }} color={colors.orange} /> - + Learn how to set up your account diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 073bfc2d2..2bc4a1974 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -43,7 +43,7 @@ Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, fontColor: colors.black, - fontSize: '14px', + fontSize: '15px', Tag: 'div', }; -- cgit v1.2.3 From 5993125cc7d5129aead37a06663741d42ff0189e Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 15:17:20 -0700 Subject: Prettify account setup and add eth steps of onboarding --- .../onboarding/portal_onboarding_flow.tsx | 33 ++++++++++++++++++++-- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/text.tsx | 1 + 3 files changed, 32 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 7e6ce6d02..11f1becfe 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -88,8 +88,24 @@ export class PortalOnboardingFlow extends React.Component + + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two + simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ + + ), placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -97,7 +113,18 @@ export class PortalOnboardingFlow extends React.Component + Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask + extension in your browser and click either BUY or DEPOSIT. + + + ), placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 3b55a18ce..d5665ec5d 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -14,6 +14,7 @@ export interface ContainerProps { backgroundColor?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; + width?: StringOrNum; isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 2bc4a1974..1e2a123b7 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -44,6 +44,7 @@ Text.defaultProps = { fontWeight: 400, fontColor: colors.black, fontSize: '15px', + lineHeight: '1.5em', Tag: 'div', }; -- cgit v1.2.3 From 0cf99271328a0bee0730a33659fe30aa426c59da Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:02:33 -0700 Subject: Add all steps to their own file --- .../onboarding/add_eth_onboarding_step.tsx | 18 +++++ .../onboarding/install_wallet_onboarding_step.tsx | 18 +++++ .../onboarding/intro_onboarding_step.tsx | 23 ++++++ .../onboarding/portal_onboarding_flow.tsx | 91 +++++++--------------- .../onboarding/unlock_wallet_onboarding_step.tsx | 16 ++++ .../onboarding/wrap_eth_onboarding_step.tsx | 73 +++++++++++++++++ packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/ui/icon_button.tsx | 9 ++- packages/website/ts/components/wallet/wallet.tsx | 6 +- packages/website/ts/utils/constants.ts | 1 + packages/website/ts/utils/utils.ts | 11 +++ 11 files changed, 196 insertions(+), 71 deletions(-) create mode 100644 packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/intro_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx new file mode 100644 index 000000000..31ce99d31 --- /dev/null +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface AddEthOnboardingStepProps {} + +export const AddEthOnboardingStep: React.StatelessComponent = () => ( +
+ Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask extension in your + browser and click either BUY or DEPOSIT. + +
+); diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx new file mode 100644 index 000000000..a54496186 --- /dev/null +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -0,0 +1,18 @@ +import { colors } from '@0xproject/react-shared'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface InstallWalletOnboardingStepProps {} + +export const InstallWalletOnboardingStep: React.StatelessComponent = () => ( +
+ + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. + +
+); diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx new file mode 100644 index 000000000..548839218 --- /dev/null +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface IntroOnboardingStepProps {} + +export const IntroOnboardingStep: React.StatelessComponent = () => ( +
+ + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ +
+); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11f1becfe..11ad88a1f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,13 +1,14 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; +import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; +import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; +import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; +import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; +import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -52,20 +53,7 @@ export class PortalOnboardingFlow extends React.Component - - - - - Before you begin, you need to connect to a wallet. This will be used across all 0x relayers - and dApps. - - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -73,14 +61,7 @@ export class PortalOnboardingFlow extends React.Component - - - - Unlock your metamask extension to begin. - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -88,24 +69,7 @@ export class PortalOnboardingFlow extends React.Component - - In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two - simple steps. - - -
- - Wrap ETH -
-
- - Unlock tokens -
- - - ), + content: , placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -113,27 +77,22 @@ export class PortalOnboardingFlow extends React.Component - Before you begin you will need to send some ETH to your metamask wallet. - - - - - Click on the metamask - extension in your browser and click either BUY or DEPOSIT. - - - ), + content: , placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { target: '.weth-row', title: 'Step 1/2', - content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', + content: ( + + ), placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.weth-row', @@ -165,13 +124,21 @@ export class PortalOnboardingFlow extends React.Component new BigNumber(0); } - private _userHasVisibleWeth(): boolean { + private _getWethBalance(): BigNumber { const ethToken = utils.getEthToken(this.props.tokenByAddress); if (!ethToken) { - return false; + return new BigNumber(0); } - const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; - return wethTokenState.balance > new BigNumber(0); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return ethTokenState.balance; + } + private _getFormattedWethBalance(): string { + const ethToken = utils.getEthToken(this.props.tokenByAddress); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return utils.getFormattedAmountFromToken(ethToken, ethTokenState); + } + private _userHasVisibleWeth(): boolean { + return this._getWethBalance() > new BigNumber(0); } private _userHasAllowancesForWethAndZrx(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx new file mode 100644 index 000000000..6e6a74a06 --- /dev/null +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface UnlockWalletOnboardingStepProps {} + +export const UnlockWalletOnboardingStep: React.StatelessComponent = () => ( +
+
+ + + + Unlock your metamask extension to begin. +
+
+); diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx new file mode 100644 index 000000000..b21b39341 --- /dev/null +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -0,0 +1,73 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { IconButton } from 'ts/components/ui/icon_button'; +import { Text } from 'ts/components/ui/text'; + +export interface WrapEthOnboardingStepProps { + formattedEthBalanceIfExists?: string; +} + +export const WrapEthOnboardingStep: React.StatelessComponent = ({ + formattedEthBalanceIfExists, +}) => { + if (formattedEthBalanceIfExists) { + return ( +
+ Congrats you now have {formattedEthBalanceIfExists} in your wallet. + +
+ 1 ETH + +
+ + + + + +
+ 1 WETH + +
+ +
+ ); + } else { + return ( +
+ + You need to convert some of your ETH into tradeable Wrapped ETH (WETH). + + +
+ 1 ETH + +
+ + = + +
+ 1 WETH + +
+ + + Think of it like the coin version of a paper note. It has the same value, but some machines only + take coins. + + + Click + + + + to wrap your ETH. + +
+ ); + } +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index d5665ec5d..1776345da 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -18,6 +18,7 @@ export interface ContainerProps { isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; top?: string; left?: string; right?: string; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 2f5172f05..13cd239da 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -5,15 +5,15 @@ import * as React from 'react'; export interface IconButtonProps { iconName: string; labelText?: string; - onClick: () => void; + onClick?: () => void; color?: string; + display?: string; } interface IconButtonState { isHovering: boolean; } export class IconButton extends React.Component { public static defaultProps: Partial = { - onClick: _.noop, labelText: '', color: colors.mediumBlue, }; @@ -26,8 +26,9 @@ export class IconButton extends React.Component { ); } else { - const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); - const precision = Math.min(TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()); - const formattedAmount = unitAmount.toFixed(precision); - const result = `${formattedAmount} ${symbol}`; + const result = utils.getFormattedAmount(amount, decimals, symbol); return
{result}
; } } diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index d281c5738..25670ef27 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -6,6 +6,7 @@ export const constants = { ETHER_TOKEN_SYMBOL: 'WETH', ZRX_TOKEN_SYMBOL: 'ZRX', ETHER_SYMBOL: 'ETH', + TOKEN_AMOUNT_DISPLAY_PRECISION: 5, GENESIS_ORDER_BLOCK_BY_NETWORK_ID: { 1: 4145578, 42: 3117574, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index fdee264b2..414361c1b 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -3,6 +3,7 @@ import { OrderError } from '@0xproject/order-utils'; import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; import { ECSignature, Provider } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; @@ -17,6 +18,7 @@ import { SideToAssetToken, Token, TokenByAddress, + TokenState, } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; @@ -332,4 +334,13 @@ export const utils = { const token = _.find(tokens, { symbol }); return token; }, + getFormattedAmountFromToken(token: Token, tokenState: TokenState): string { + return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol); + }, + getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string { + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); + const precision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces()); + const formattedAmount = unitAmount.toFixed(precision); + return `${formattedAmount} ${symbol}`; + }, }; -- cgit v1.2.3 From 8893bc102c7dc4faf1650180b0b1acddc333cd7a Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:03:10 -0700 Subject: Add onboarding assets --- packages/website/public/.DS_Store | Bin 0 -> 10244 bytes packages/website/public/images/.DS_Store | Bin 0 -> 8196 bytes packages/website/public/images/eth_dollar.svg | 29 +++++++++++++++++++++ packages/website/public/images/eth_token.svg | 20 ++++++++++++++ packages/website/public/images/eth_token_erc20.svg | 22 ++++++++++++++++ packages/website/public/images/ether_alt.svg | 7 +++++ packages/website/public/images/fake_toggle.svg | 4 +++ 7 files changed, 82 insertions(+) create mode 100644 packages/website/public/.DS_Store create mode 100644 packages/website/public/images/.DS_Store create mode 100644 packages/website/public/images/eth_dollar.svg create mode 100644 packages/website/public/images/eth_token.svg create mode 100644 packages/website/public/images/eth_token_erc20.svg create mode 100644 packages/website/public/images/ether_alt.svg create mode 100644 packages/website/public/images/fake_toggle.svg (limited to 'packages') diff --git a/packages/website/public/.DS_Store b/packages/website/public/.DS_Store new file mode 100644 index 000000000..bcd5b6d3e Binary files /dev/null and b/packages/website/public/.DS_Store differ diff --git a/packages/website/public/images/.DS_Store b/packages/website/public/images/.DS_Store new file mode 100644 index 000000000..56b44f004 Binary files /dev/null and b/packages/website/public/images/.DS_Store differ diff --git a/packages/website/public/images/eth_dollar.svg b/packages/website/public/images/eth_dollar.svg new file mode 100644 index 000000000..0afec94fa --- /dev/null +++ b/packages/website/public/images/eth_dollar.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/eth_token.svg b/packages/website/public/images/eth_token.svg new file mode 100644 index 000000000..9392692f9 --- /dev/null +++ b/packages/website/public/images/eth_token.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/eth_token_erc20.svg b/packages/website/public/images/eth_token_erc20.svg new file mode 100644 index 000000000..6313c826d --- /dev/null +++ b/packages/website/public/images/eth_token_erc20.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/ether_alt.svg b/packages/website/public/images/ether_alt.svg new file mode 100644 index 000000000..82199d14d --- /dev/null +++ b/packages/website/public/images/ether_alt.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/website/public/images/fake_toggle.svg b/packages/website/public/images/fake_toggle.svg new file mode 100644 index 000000000..c9632d0da --- /dev/null +++ b/packages/website/public/images/fake_toggle.svg @@ -0,0 +1,4 @@ + + + + -- cgit v1.2.3 From 433f830cf33f6383e83cca5e08b1f58bc18a0828 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:15:03 -0700 Subject: Finish set allowance step --- .../onboarding/portal_onboarding_flow.tsx | 10 ++++---- .../onboarding/set_allowances_onboarding_step.tsx | 27 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx (limited to 'packages') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11ad88a1f..ad2ada93b 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -7,6 +7,7 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step'; import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -98,11 +99,10 @@ export class PortalOnboardingFlow extends React.Component - Unlock your tokens for trading. You only need to do this once for each token. -
ETH: {this._renderEthAllowanceToggle()}
-
ZRX: {this._renderZrxAllowanceToggle()}
- + ), placement: 'right', continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx new file mode 100644 index 000000000..1ff248c40 --- /dev/null +++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface SetAllowancesOnboardingStepProps { + zrxAllowanceToggle: React.ReactNode; + ethAllowanceToggle: React.ReactNode; +} + +export const SetAllowancesOnboardingStep: React.StatelessComponent = ({ + ethAllowanceToggle, + zrxAllowanceToggle, +}) => ( +
+ Unlock your tokens for trading. You only need to do this once for each token. + +
+ Enable WETH + {ethAllowanceToggle} +
+
+ Enable ZRX + {zrxAllowanceToggle} +
+ +
+); -- cgit v1.2.3 From 8a76fdc126c4e8d8b388d9e50bbc7fb8c7862186 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:27:23 -0700 Subject: Finish last onboarding step --- packages/website/public/.DS_Store | Bin 10244 -> 0 bytes packages/website/public/images/.DS_Store | Bin 8196 -> 0 bytes packages/website/public/images/zrx_ecosystem.svg | 253 +++++++++++++++++++++ .../onboarding/congrats_onboarding_step.tsx | 15 ++ .../ts/components/onboarding/onboarding_flow.tsx | 2 + .../components/onboarding/onboarding_tooltip.tsx | 5 +- .../onboarding/portal_onboarding_flow.tsx | 4 +- 7 files changed, 277 insertions(+), 2 deletions(-) delete mode 100644 packages/website/public/.DS_Store delete mode 100644 packages/website/public/images/.DS_Store create mode 100644 packages/website/public/images/zrx_ecosystem.svg create mode 100644 packages/website/ts/components/onboarding/congrats_onboarding_step.tsx (limited to 'packages') diff --git a/packages/website/public/.DS_Store b/packages/website/public/.DS_Store deleted file mode 100644 index bcd5b6d3e..000000000 Binary files a/packages/website/public/.DS_Store and /dev/null differ diff --git a/packages/website/public/images/.DS_Store b/packages/website/public/images/.DS_Store deleted file mode 100644 index 56b44f004..000000000 Binary files a/packages/website/public/images/.DS_Store and /dev/null differ diff --git a/packages/website/public/images/zrx_ecosystem.svg b/packages/website/public/images/zrx_ecosystem.svg new file mode 100644 index 000000000..f8aed4637 --- /dev/null +++ b/packages/website/public/images/zrx_ecosystem.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx new file mode 100644 index 000000000..3a8db8c36 --- /dev/null +++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface CongratsOnboardingStepProps {} + +export const CongratsOnboardingStep: React.StatelessComponent = () => ( +
+ Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem. + + + + No need to log in. Each relayer automatically detects and connects to your metamask wallet. +
+); diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 7a5a6e40f..34aeace82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -13,6 +13,7 @@ export interface Step { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; + continueButtonText?: string; } export interface OnboardingFlowProps { @@ -65,6 +66,7 @@ export class OnboardingFlow extends React.Component { onClickNext={this._goToNextStep.bind(this)} onClickBack={this._goToPrevStep.bind(this)} continueButtonDisplay={step.continueButtonDisplay} + continueButtonText={step.continueButtonText} /> ); diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 0858ad326..45851b4de 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -21,6 +21,7 @@ export interface OnboardingTooltipProps { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; pointerDirection?: PointerDirection; + continueButtonText?: string; className?: string; } @@ -28,6 +29,7 @@ export const OnboardingTooltip: React.StatelessComponent title, content, continueButtonDisplay, + continueButtonText, onClickNext, onClickBack, onClose, @@ -59,7 +61,7 @@ export const OnboardingTooltip: React.StatelessComponent fontSize="15px" backgroundColor={colors.mediumBlue} > - Continue + {continueButtonText} )} @@ -82,6 +84,7 @@ export const OnboardingTooltip: React.StatelessComponent OnboardingTooltip.defaultProps = { pointerDirection: 'left', + continueButtonText: 'Continue', }; OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index ad2ada93b..4283022e2 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; import { Blockchain } from 'ts/blockchain'; import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; +import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; @@ -110,10 +111,11 @@ export class PortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', shouldHideNextButton: true, + continueButtonText: 'Enter the 0x Ecosystem', }, ]; return steps; -- cgit v1.2.3