Use Image component instead of img tag

3 files changed, 9 insertions, 8 deletions

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 0e9954350..1e8855c14 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -9,6 +9,7 @@ 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';
@@ -75,7 +76,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                     </Text>
                 </Container>
                 {isProviderMetamask && (
-                    <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} />
+                    <Image src="/images/metamask_icon.png" height={ROOT_HEIGHT} width={ROOT_HEIGHT} />
                 )}
             </div>
         );
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index 6a9b94e5b..30df995c8 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -2,6 +2,7 @@ import blockies = require('blockies');
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Image } from 'ts/components/ui/image';
 import { colors } from 'ts/style/colors';
 
 interface IdenticonProps {
@@ -31,15 +32,12 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
                 }}
             >
                 {!_.isEmpty(address) ? (
-                    <img
+                    <Image
                         src={blockies({
                             seed: address.toLowerCase(),
                         }).toDataURL()}
-                        style={{
-                            width: diameter,
-                            height: diameter,
-                            imageRendering: 'pixelated',
-                        }}
+                        height={diameter}
+                        width={diameter}
                     />
                 ) : (
                     <svg height={diameter} width={diameter}>
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}
             />
         );
     }