aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-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}
/>
);
}