diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-30 08:20:20 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-07-01 03:37:34 +0800 |
commit | b9b00e10d39c3c84bc72892ef37f1313e904414d (patch) | |
tree | d9345ba267889eed5bbdc10b2d2ee06708ecf19c /packages/website/ts/components | |
parent | 6c34255a3e45a2f0b85dd7e9d925c7a789f603f1 (diff) | |
download | dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.gz dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.bz2 dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.lz dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.xz dexon-0x-contracts-b9b00e10d39c3c84bc72892ef37f1313e904414d.tar.zst dexon-0x-contracts-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.tsx | 63 | ||||
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 4 |
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)}` : '')}; } `; |