aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-20 01:30:28 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-20 01:30:28 +0800
commit829bc962095096a2b70516862ebddc40d21ff7ee (patch)
tree287ee807a9215ac4c7e4cd9cf80d28e3eb2ae6d7 /packages/website/ts/components
parentf97e605bf6769a17d0352219f5fb1133f7cb2430 (diff)
downloaddexon-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/ts/components')
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx3
-rw-r--r--packages/website/ts/components/ui/identicon.tsx10
-rw-r--r--packages/website/ts/components/ui/image.tsx4
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}
/>
);
}