Consolidate account state messaging logic

2018-06-18 16:55:52 -07:00
parent 49f5495c45
commit f97e605bf6
5 changed files with 80 additions and 47 deletions
--- 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>
    );
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -6,8 +6,10 @@ 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 { 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 +42,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 +61,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 +69,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>
+                    <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} />
                )}
            </div>
        );
--- 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>
        );
    }
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -1,7 +1,8 @@
 import blockies = require('blockies');
 import * as _ from 'lodash';
 import * as React from 'react';
-import { constants } from 'ts/utils/constants';
+
+import { colors } from 'ts/style/colors';

 interface IdenticonProps {
    address: string;
@@ -16,14 +17,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 +30,22 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
                    ...this.props.style,
                }}
            >
-                <img
-                    src={icon.toDataURL()}
-                    style={{
-                        width: diameter,
-                        height: diameter,
-                        imageRendering: 'pixelated',
-                    }}
-                />
+                {!_.isEmpty(address) ? (
+                    <img
+                        src={blockies({
+                            seed: address.toLowerCase(),
+                        }).toDataURL()}
+                        style={{
+                            width: diameter,
+                            height: diameter,
+                            imageRendering: 'pixelated',
+                        }}
+                    />
+                ) : (
+                    <svg height={diameter} width={diameter}>
+                        <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} />
+                    </svg>
+                )}
            </div>
        );
    }
--- 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