Add all steps to their own file

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<AddEthOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
+        <Container marginTop="15px" marginBottom="15px">
+            <img src="/images/ether_alt.svg" height="50px" width="50px" />
+        </Container>
+        <Text>
+            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your
+            browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+        </Text>
+    </div>
+);

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<InstallWalletOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Container marginTop="15px" marginBottom="15px">
+            <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
+        </Container>
+        <Text>
+            Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
+        </Text>
+    </div>
+);

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<IntroOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <Text>
+            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps.
+        </Text>
+        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+            <div className="flex flex-column items-center">
+                <img src="/images/eth_token.svg" height="50px" width="50x" />
+                <Text> Wrap ETH </Text>
+            </div>
+            <div className="flex flex-column items-center">
+                <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+                <Text> Unlock tokens </Text>
+            </div>
+        </Container>
+    </div>
+);

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 { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
-import { Text } from 'ts/components/ui/text';
+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<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Setup',
-                content: (
+                content: <InstallWalletOnboardingStep />,
-                    <div className="flex items-center flex-column">
-                        <Container marginTop="15px" marginBottom="15px">
-                            <ActionAccountBalanceWallet
-                                style={{ width: '30px', height: '30px' }}
-                                color={colors.orange}
-                            />
-                        </Container>
-                        <Text>
-                            Before you begin, you need to connect to a wallet. This will be used across all 0x relayers
-                            and dApps.
-                        </Text>
-                    </div>
-                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
@@ -73,14 +61,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Setup',
-                content: (
+                content: <UnlockWalletOnboardingStep />,
-                    <div className="flex items-center flex-column">
-                        <Container marginTop="15px" marginBottom="15px">
-                            <img src="/images/metamask_icon.png" height="50px" width="50px" />
-                        </Container>
-                        <Text>Unlock your metamask extension to begin.</Text>
-                    </div>
-                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
@@ -88,24 +69,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Account Setup',
-                content: (
+                content: <IntroOnboardingStep />,
-                    <div className="flex items-center flex-column">
-                        <Text>
-                            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two
-                            simple steps.
-                        </Text>
-                        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
-                            <div className="flex flex-column items-center">
-                                <img src="/images/eth_token.svg" height="50px" width="50x" />
-                                <Text> Wrap ETH </Text>
-                            </div>
-                            <div className="flex flex-column items-center">
-                                <img src="/images/fake_toggle.svg" height="50px" width="50px" />
-                                <Text> Unlock tokens </Text>
-                            </div>
-                        </Container>
-                    </div>
-                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 continueButtonDisplay: 'enabled',
@@ -113,27 +77,22 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.eth-row',
                 title: 'Add ETH',
-                content: (
+                content: <AddEthOnboardingStep />,
-                    <div className="flex items-center flex-column">
-                        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
-                        <Container marginTop="15px" marginBottom="15px">
-                            <img src="/images/ether_alt.svg" height="50px" width="50px" />
-                        </Container>
-                        <Text>
-                            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask
-                            extension in your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
-                        </Text>
-                    </div>
-                ),
                 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: (
+                    <WrapEthOnboardingStep
+                        formattedEthBalanceIfExists={
+                            this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
+                        }
+                    />
+                ),
                 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<PortalOnboardingFlowPr
     private _userHasVisibleEth(): boolean {
         return this.props.userEtherBalanceInWei > 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];
+        const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
-        return wethTokenState.balance > new BigNumber(0);
+        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);

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<UnlockWalletOnboardingStepProps> = () => (
+    <div className="flex items-center flex-column">
+        <div className="flex items-center flex-column">
+            <Container marginTop="15px" marginBottom="15px">
+                <img src="/images/metamask_icon.png" height="50px" width="50px" />
+            </Container>
+            <Text>Unlock your metamask extension to begin.</Text>
+        </div>
+    </div>
+);

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<WrapEthOnboardingStepProps> = ({
+    formattedEthBalanceIfExists,
+}) => {
+    if (formattedEthBalanceIfExists) {
+        return (
+            <div className="flex items-center flex-column">
+                <Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</Text>
+                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 ETH </Text>
+                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+                    </div>
+                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                        <Text fontSize="25px">
+                            <i className="zmdi zmdi-long-arrow-right" />
+                        </Text>
+                    </Container>
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 WETH </Text>
+                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+                    </div>
+                </Container>
+            </div>
+        );
+    } else {
+        return (
+            <div className="flex items-center flex-column">
+                <Text>
+                    You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
+                </Text>
+                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 ETH </Text>
+                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+                    </div>
+                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                        <Text fontSize="36px">=</Text>
+                    </Container>
+                    <div className="flex flex-column items-center">
+                        <Text fontWeight={700}> 1 WETH </Text>
+                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+                    </div>
+                </Container>
+                <Text>
+                    Think of it like the coin version of a paper note. It has the same value, but some machines only
+                    take coins.
+                </Text>
+                <Text>
+                    Click
+                    <Container display="inline-block" marginLeft="10px" marginRight="10px">
+                        <IconButton
+                            iconName="zmdi-long-arrow-down"
+                            color={colors.mediumBlue}
+                            labelText="wrap"
+                            display="inline-flex"
+                        />
+                    </Container>
+                    to wrap your ETH.
+                </Text>
+            </div>
+        );
+    }
+};

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;

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<IconButtonProps, IconButtonState> {
     public static defaultProps: Partial<IconButtonProps> = {
-        onClick: _.noop,
         labelText: '',
         color: colors.mediumBlue,
     };
@@ -26,8 +26,9 @@ export class IconButton extends React.Component<IconButtonProps, IconButtonState
     public render(): React.ReactNode {
         const styles: Styles = {
             root: {
-                cursor: 'pointer',
+                cursor: this.props.onClick ? 'pointer' : 'undefined',
-                opacity: this.state.isHovering ? 0.5 : 1,
+                opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1,
+                display: this.props.display,
             },
             icon: {
                 color: this.props.color,

packages/website/ts/components/wallet/wallet.tsx

@@ -124,7 +124,6 @@ const styles: Styles = {
 
 const ETHER_ICON_PATH = '/images/ether.png';
 const ICON_DIMENSION = 28;
-const TOKEN_AMOUNT_DISPLAY_PRECISION = 5;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
@@ -438,10 +437,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 </PlaceHolder>
             );
         } else {
-            const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+            const result = utils.getFormattedAmount(amount, decimals, symbol);
-            const precision = Math.min(TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
-            const formattedAmount = unitAmount.toFixed(precision);
-            const result = `${formattedAmount} ${symbol}`;
             return <div style={styles.amountLabel}>{result}</div>;
         }
     }

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,

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}`;
+    },
 };