Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into bug/website/onboarding-improvements

2 files changed, 23 insertions, 11 deletions

diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index 8ac2b9091..4bd07769f 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -2,10 +2,12 @@ import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Blockchain } from 'ts/blockchain';
 import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu';
 import { Identicon } from 'ts/components/ui/identicon';
+import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
+import { ProviderType, WebsitePaths } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 const IDENTICON_DIAMETER = 45;
@@ -25,14 +27,15 @@ const styles: Styles = {
         MozBorderRadius: BORDER_RADIUS,
         WebkitBorderRadius: BORDER_RADIUS,
     },
-    userAddress: {
-        color: colors.white,
-    },
 };
 
 export interface DrawerMenuProps {
     selectedPath?: string;
     userAddress?: string;
+    injectedProviderName: string;
+    providerType: ProviderType;
+    blockchain?: Blockchain;
+    blockchainIsLoaded: boolean;
 }
 export const DrawerMenu = (props: DrawerMenuProps) => {
     const relayerItemEntry = {
@@ -41,9 +44,15 @@ export const DrawerMenu = (props: DrawerMenuProps) => {
         iconName: 'zmdi-portable-wifi',
     };
     const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries);
+    const displayMessage = utils.getReadableAccountState(
+        props.blockchainIsLoaded && !_.isUndefined(props.blockchain),
+        props.providerType,
+        props.injectedProviderName,
+        props.userAddress,
+    );
     return (
         <div style={styles.root}>
-            <Header userAddress={props.userAddress} />
+            <Header userAddress={props.userAddress} displayMessage={displayMessage} />
             <Menu selectedPath={props.selectedPath} menuItemEntries={menuItemEntries} />
         </div>
     );
@@ -51,17 +60,16 @@ export const DrawerMenu = (props: DrawerMenuProps) => {
 
 interface HeaderProps {
     userAddress?: string;
+    displayMessage: string;
 }
 const Header = (props: HeaderProps) => {
     return (
         <div className="flex flex-center py4">
             <div className="flex flex-column mx-auto">
                 <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} />
-                {!_.isUndefined(props.userAddress) && (
-                    <div className="pt2" style={styles.userAddress}>
-                        {utils.getAddressBeginAndEnd(props.userAddress)}
-                    </div>
-                )}
+                <Text className="pt2" fontColor={colors.white}>
+                    {props.displayMessage}
+                </Text>
             </div>
         </div>
     );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 046cb2096..2b2273a09 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, 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';
@@ -47,6 +47,7 @@ import {
     TokenVisibility,
     WebsitePaths,
 } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
 import { backendClient } from 'ts/utils/backend_client';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
@@ -75,6 +76,7 @@ export interface PortalProps {
     lastForceTokenStateRefetch: number;
     translate: Translate;
     isPortalOnboardingShowing: boolean;
+    portalOnboardingStep: number;
 }
 
 interface PortalState {
@@ -387,6 +389,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
 
     private _startOnboarding(): void {
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
+        analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep);
         this.props.dispatcher.updatePortalOnboardingShowing(true);
     }
     private _renderWalletSection(): React.ReactNode {