aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx63
-rw-r--r--packages/website/ts/components/ui/token_icon.tsx25
2 files changed, 79 insertions, 9 deletions
diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx
new file mode 100644
index 000000000..2f5172f05
--- /dev/null
+++ b/packages/website/ts/components/ui/icon_button.tsx
@@ -0,0 +1,63 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+export interface IconButtonProps {
+ iconName: string;
+ labelText?: string;
+ onClick: () => void;
+ color?: string;
+}
+interface IconButtonState {
+ isHovering: boolean;
+}
+export class IconButton extends React.Component<IconButtonProps, IconButtonState> {
+ public static defaultProps: Partial<IconButtonProps> = {
+ onClick: _.noop,
+ labelText: '',
+ color: colors.mediumBlue,
+ };
+ public constructor(props: IconButtonProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render(): React.ReactNode {
+ const styles: Styles = {
+ root: {
+ cursor: 'pointer',
+ opacity: this.state.isHovering ? 0.5 : 1,
+ },
+ icon: {
+ color: this.props.color,
+ fontSize: 20,
+ },
+ label: {
+ color: this.props.color,
+ fontSize: 10,
+ },
+ };
+ return (
+ <div
+ className="flex items-center py2"
+ onClick={this.props.onClick}
+ onMouseEnter={this._onToggleHover.bind(this, true)}
+ onMouseLeave={this._onToggleHover.bind(this, false)}
+ style={styles.root}
+ >
+ <i style={styles.icon} className={`zmdi ${this.props.iconName}`} />
+ {!_.isEmpty(this.props.labelText) && (
+ <div className="pl1" style={styles.label}>
+ {this.props.labelText}
+ </div>
+ )}
+ </div>
+ );
+ }
+ private _onToggleHover(isHovering: boolean): void {
+ this.setState({
+ isHovering,
+ });
+ }
+}
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>
+ );
+ }
}
}