diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-15 15:52:51 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-15 15:52:51 +0800 |
commit | ca08dd9705c2aefb092b10926af359ed8fabac79 (patch) | |
tree | 92400053c684b477b9bfc1dcb24bcfd41bdf7527 /packages/website/ts/components | |
parent | b3e53b609b997921aa11063f7ccb513682d1c621 (diff) | |
download | dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar.gz dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar.bz2 dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar.lz dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar.xz dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.tar.zst dexon-0x-contracts-ca08dd9705c2aefb092b10926af359ed8fabac79.zip |
Add hover state to top tokens
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/relayer_index/relayer_top_tokens.tsx | 53 |
1 files changed, 43 insertions, 10 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 468a350e4..03c70c9dd 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -26,21 +26,54 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; const style = index !== 0 ? firstItemStyle : styles.tokenLabel; - return ( - <a - key={tokenInfo.address} - href={tokenLinkFromToken(tokenInfo, props.networkId)} - target="_blank" - style={style} - > - {tokenInfo.symbol} - </a> - ); + return <TokenLink tokenInfo={tokenInfo} style={style} networkId={props.networkId} />; })} </div> ); }; +interface TokenLinkProps { + tokenInfo: WebsiteBackendTokenInfo; + style: React.CSSProperties; + networkId: number; +} +interface TokenLinkState { + isHovering: boolean; +} + +class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { + constructor(props: TokenLinkProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const style = { + ...this.props.style, + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }; + return ( + <a + key={this.props.tokenInfo.address} + href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)} + target="_blank" + style={style} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + > + {this.props.tokenInfo.symbol} + </a> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} + function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); } |