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

Consolidate account state display message logic

2 files changed, 21 insertions, 17 deletions

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}
             />
         );
     }