Merge pull request #723 from 0xProject/bug/website/drawer-address

Consolidate account state display message logic

6 files changed, 82 insertions, 48 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/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index cb7c9b483..1e8855c14 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -6,8 +6,11 @@ import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
 import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
+import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { ProviderType } from 'ts/types';
@@ -40,23 +43,16 @@ const styles: Styles = {
 
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render(): React.ReactNode {
-        const isAddressAvailable = !_.isEmpty(this.props.userAddress);
         const isExternallyInjectedProvider = utils.isExternallyInjected(
             this.props.providerType,
             this.props.injectedProviderName,
         );
-        let displayMessage;
-        if (!this._isBlockchainReady()) {
-            displayMessage = 'loading account';
-        } else if (isAddressAvailable) {
-            displayMessage = utils.getAddressBeginAndEnd(this.props.userAddress);
-            // tslint:disable-next-line: prefer-conditional-expression
-        } else if (isExternallyInjectedProvider) {
-            displayMessage = 'Account locked';
-        } else {
-            displayMessage = '0x0000...0000';
-        }
-
+        const displayMessage = utils.getReadableAccountState(
+            this._isBlockchainReady(),
+            this.props.providerType,
+            this.props.injectedProviderName,
+            this.props.userAddress,
+        );
         // If the "injected" provider is our fallback public node, then we want to
         // show the "connect a wallet" message instead of the providerName
         const injectedProviderName = isExternallyInjectedProvider
@@ -66,7 +62,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S';
         const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK;
         const hoverActiveNode = (
-            <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}>
+            <div className="flex items-center p1" style={styles.root}>
                 <div>
                     {this._isBlockchainReady() ? (
                         <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
@@ -74,13 +70,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                         <CircularProgress size={ROOT_HEIGHT} thickness={2} />
                     )}
                 </div>
-                <div style={{ marginLeft: 12, paddingTop: 3 }}>
-                    <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayMessage}</div>
-                </div>
+                <Container marginLeft="12px" marginRight="12px">
+                    <Text fontSize="14px" fontColor={colors.darkGrey}>
+                        {displayMessage}
+                    </Text>
+                </Container>
                 {isProviderMetamask && (
-                    <div style={{ marginLeft: 16 }}>
-                        <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} />
-                    </div>
+                    <Image src="/images/metamask_icon.png" height={ROOT_HEIGHT} width={ROOT_HEIGHT} />
                 )}
             </div>
         );
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 1a69827a4..537edc7bb 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -297,7 +297,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 openSecondary={true}
                 onRequestChange={this._onMenuButtonClick.bind(this)}
             >
-                <DrawerMenu selectedPath={this.props.location.pathname} userAddress={this.props.userAddress} />
+                <DrawerMenu
+                    selectedPath={this.props.location.pathname}
+                    userAddress={this.props.userAddress}
+                    injectedProviderName={this.props.injectedProviderName}
+                    providerType={this.props.providerType}
+                    blockchainIsLoaded={this.props.blockchainIsLoaded}
+                    blockchain={this.props.blockchain}
+                />
             </Drawer>
         );
     }
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index 83c86a144..30df995c8 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -1,7 +1,9 @@
 import blockies = require('blockies');
 import * as _ from 'lodash';
 import * as React from 'react';
-import { constants } from 'ts/utils/constants';
+
+import { Image } from 'ts/components/ui/image';
+import { colors } from 'ts/style/colors';
 
 interface IdenticonProps {
     address: string;
@@ -16,14 +18,9 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
         style: {},
     };
     public render(): React.ReactNode {
-        let address = this.props.address;
-        if (_.isEmpty(address)) {
-            address = constants.NULL_ADDRESS;
-        }
+        const address = this.props.address;
         const diameter = this.props.diameter;
-        const icon = blockies({
-            seed: address.toLowerCase(),
-        });
+        const radius = diameter / 2;
         return (
             <div
                 className="circle mx-auto relative transitionFix"
@@ -34,14 +31,19 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
                     ...this.props.style,
                 }}
             >
-                <img
-                    src={icon.toDataURL()}
-                    style={{
-                        width: diameter,
-                        height: diameter,
-                        imageRendering: 'pixelated',
-                    }}
-                />
+                {!_.isEmpty(address) ? (
+                    <Image
+                        src={blockies({
+                            seed: address.toLowerCase(),
+                        }).toDataURL()}
+                        height={diameter}
+                        width={diameter}
+                    />
+                ) : (
+                    <svg height={diameter} width={diameter}>
+                        <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} />
+                    </svg>
+                )}
             </div>
         );
     }
diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
index 0958d2e5e..369dc8b7e 100644
--- a/packages/website/ts/components/ui/image.tsx
+++ b/packages/website/ts/components/ui/image.tsx
@@ -5,7 +5,8 @@ export interface ImageProps {
     className?: string;
     src?: string;
     fallbackSrc?: string;
-    height?: string;
+    height?: string | number;
+    width?: string | number;
 }
 interface ImageState {
     imageLoadFailed: boolean;
@@ -26,6 +27,7 @@ export class Image extends React.Component<ImageProps, ImageState> {
                 onError={this._onError.bind(this)}
                 src={src}
                 height={this.props.height}
+                width={this.props.width}
             />
         );
     }
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 414361c1b..0bd3dbcfa 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -190,6 +190,25 @@ export const utils = {
         const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287
         return truncatedAddress;
     },
+    getReadableAccountState(
+        isBlockchainReady: boolean,
+        providerType: ProviderType,
+        injectedProviderName: string,
+        userAddress?: string,
+    ): string {
+        const isAddressAvailable = !_.isUndefined(userAddress) && !_.isEmpty(userAddress);
+        const isExternallyInjectedProvider = utils.isExternallyInjected(providerType, injectedProviderName);
+        if (!isBlockchainReady) {
+            return 'Loading account';
+        } else if (isAddressAvailable) {
+            return utils.getAddressBeginAndEnd(userAddress);
+            // tslint:disable-next-line: prefer-conditional-expression
+        } else if (isExternallyInjectedProvider) {
+            return 'Account locked';
+        } else {
+            return 'No wallet detected';
+        }
+    },
     hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean {
         if (token.isRegistered) {
             return true; // Since it's registered, it is the canonical token