diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-20 01:30:28 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-20 01:30:28 +0800 |
commit | 829bc962095096a2b70516862ebddc40d21ff7ee (patch) | |
tree | 287ee807a9215ac4c7e4cd9cf80d28e3eb2ae6d7 /packages/website | |
parent | f97e605bf6769a17d0352219f5fb1133f7cb2430 (diff) | |
download | dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar.gz dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar.bz2 dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar.lz dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar.xz dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.tar.zst dexon-0x-contracts-829bc962095096a2b70516862ebddc40d21ff7ee.zip |
Use Image component instead of img tag
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 3 | ||||
-rw-r--r-- | packages/website/ts/components/ui/identicon.tsx | 10 | ||||
-rw-r--r-- | packages/website/ts/components/ui/image.tsx | 4 |
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} /> ); } |