Merge pull request #603 from 0xProject/feature/website/wallet-flex-box

Improve wallet layout using flexbox

1 files changed, 16 insertions, 9 deletions

diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx
index a9ad567ef..0875cc56b 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -6,6 +6,7 @@ import { Token } from 'ts/types';
 interface TokenIconProps {
     token: Token;
     diameter: number;
+    link?: string;
 }
 
 interface TokenIconState {}
@@ -14,14 +15,20 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
     public render(): React.ReactNode {
         const token = this.props.token;
         const diameter = this.props.diameter;
-        return (
-            <div>
-                {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
-                    <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
-                ) : (
-                    <Identicon address={token.address} diameter={diameter} />
-                )}
-            </div>
-        );
+        const icon =
+            token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+                <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+            ) : (
+                <Identicon address={token.address} diameter={diameter} />
+            );
+        if (_.isEmpty(this.props.link)) {
+            return icon;
+        } else {
+            return (
+                <a href={this.props.link} target="_blank" style={{ textDecoration: 'none' }}>
+                    {icon}
+                </a>
+            );
+        }
     }
 }