aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-30 08:20:20 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-07-01 03:37:34 +0800
commitb9b00e10d39c3c84bc72892ef37f1313e904414d (patch)
treed9345ba267889eed5bbdc10b2d2ee06708ecf19c /packages/website/ts/components
parent6c34255a3e45a2f0b85dd7e9d925c7a789f603f1 (diff)
downloaddexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.gz
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.bz2
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.lz
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.xz
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.zst
dexon-sol-tools-b9b00e10d39c3c84bc72892ef37f1313e904414d.zip
Update relayer grid tiles to use Text
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx63
-rw-r--r--packages/website/ts/components/ui/text.tsx4
2 files changed, 17 insertions, 50 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index f544fc924..c48b672e9 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -2,44 +2,30 @@ import {
colors,
constants as sharedConstants,
EtherscanLinkSuffixes,
- Styles,
utils as sharedUtils,
} from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { analytics } from 'ts/utils/analytics';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
import { WebsiteBackendTokenInfo } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
+import { utils } from 'ts/utils/utils';
export interface TopTokensProps {
tokens: WebsiteBackendTokenInfo[];
networkId: number;
}
-const styles: Styles = {
- tokenLabel: {
- textDecoration: 'none',
- color: colors.mediumBlue,
- fontSize: 14,
- },
- followingTokenLabel: {
- paddingLeft: 16,
- },
-};
-
export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTokensProps) => {
return (
<div className="flex">
- {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => {
- const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel };
- const style = index !== 0 ? firstItemStyle : styles.tokenLabel;
+ {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo) => {
return (
- <TokenLink
- key={tokenInfo.address}
- tokenInfo={tokenInfo}
- style={style}
- networkId={props.networkId}
- />
+ <Container key={tokenInfo.address} marginRight="16px">
+ <TokenLink tokenInfo={tokenInfo} networkId={props.networkId} />
+ </Container>
);
})}
</div>
@@ -48,12 +34,9 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo
interface TokenLinkProps {
tokenInfo: WebsiteBackendTokenInfo;
- style: React.CSSProperties;
networkId: number;
}
-interface TokenLinkState {
- isHovering: boolean;
-}
+interface TokenLinkState {}
class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
constructor(props: TokenLinkProps) {
@@ -63,37 +46,21 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
};
}
public render(): React.ReactNode {
- const style = {
- ...this.props.style,
- cursor: 'pointer',
- opacity: this.state.isHovering ? 0.5 : 1,
- };
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`;
const onClick = (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
analytics.logEvent('Portal', 'Token Click', eventLabel);
+ const tokenLink = this._tokenLinkFromToken(this.props.tokenInfo, this.props.networkId);
+ utils.openUrl(tokenLink);
};
return (
- <a
- href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)}
- target="_blank"
- style={style}
- onMouseEnter={this._onToggleHover.bind(this, true)}
- onMouseLeave={this._onToggleHover.bind(this, false)}
- onClick={onClick}
- >
+ <Text fontSize="14px" fontColor={colors.mediumBlue} onClick={onClick}>
{this.props.tokenInfo.symbol}
- </a>
+ </Text>
);
}
- private _onToggleHover(isHovering: boolean): void {
- this.setState({
- isHovering,
- });
+ private _tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string {
+ return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address);
}
}
-
-function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string {
- return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address);
-}
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 88f216d4e..c1cb2ade4 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -16,7 +16,7 @@ export interface TextProps {
center?: boolean;
fontWeight?: number | string;
textDecorationLine?: string;
- onClick?: () => void;
+ onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -37,7 +37,7 @@ export const Text = styled(PlainText)`
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
&:hover {
- ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')};
+ ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
}
`;