diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-20 01:19:38 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-20 01:19:38 +0800 |
commit | 7454e16aae476b3908123dadab0cf9fdf6ab5990 (patch) | |
tree | 3477ace66bc71c2aa4e09b85dd1923087effac1b /packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | |
parent | 2cc7289b7b3c3177230957ff2384c58bed4266f3 (diff) | |
parent | e4acad60e91943c2dcbdd55b7766b543e78df6f6 (diff) | |
download | dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.gz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.bz2 dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.lz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.xz dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.tar.zst dexon-sol-tools-7454e16aae476b3908123dadab0cf9fdf6ab5990.zip |
Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into feature/website/portal-v2-analytics
Diffstat (limited to 'packages/website/ts/components/relayer_index/relayer_grid_tile.tsx')
-rw-r--r-- | packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 57 |
1 files changed, 20 insertions, 37 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 7ff8208b0..23860856b 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -6,6 +6,7 @@ import { analytics } from 'ts/utils/analytics'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; import { WebsiteBackendRelayerInfo } from 'ts/types'; @@ -27,7 +28,6 @@ const styles: Styles = { header: { height: '50%', width: '100%', - objectFit: 'cover', borderBottomRightRadius: 4, borderBottomLeftRadius: 4, borderTopRightRadius: 4, @@ -59,25 +59,37 @@ const styles: Styles = { }; const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png'; +const FALLBACK_PRIMARY_COLOR = colors.grey200; const NO_CONTENT_MESSAGE = '--'; +const RELAYER_ICON_HEIGHT = '110px'; export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { const link = props.relayerInfo.appUrl || props.relayerInfo.url; const topTokens = props.relayerInfo.topTokens; const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; - let trackRelayerClick = (): void => undefined; const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId]; const eventLabel = `${props.relayerInfo.name}-${networkName}`; - trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel); + const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel); + const headerImageUrl = props.relayerInfo.logoImgUrl; + const headerBackgroundColor = + !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) + ? props.relayerInfo.primaryColor + : FALLBACK_PRIMARY_COLOR; return ( <Island style={styles.root} Component={GridTile}> <div style={styles.innerDiv}> <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}> - <ImgWithFallback - src={props.relayerInfo.headerImgUrl} - fallbackSrc={FALLBACK_IMG_SRC} - style={styles.header} - /> + <div + className="flex items-center" + style={{ ...styles.header, backgroundColor: headerBackgroundColor }} + > + <Image + className="mx-auto" + src={props.relayerInfo.logoImgUrl} + fallbackSrc={FALLBACK_IMG_SRC} + height={RELAYER_ICON_HEIGHT} + /> + </div> </a> <div style={styles.body}> <div className="py1" style={styles.relayerNameLabel}> @@ -113,32 +125,3 @@ const Section = (props: SectionProps) => { }; const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>; - -interface ImgWithFallbackProps { - src?: string; - fallbackSrc: string; - style: React.CSSProperties; -} -interface ImgWithFallbackState { - imageLoadFailed: boolean; -} -class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> { - constructor(props: ImgWithFallbackProps) { - super(props); - this.state = { - imageLoadFailed: false, - }; - } - public render(): React.ReactNode { - if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) { - return <img src={this.props.fallbackSrc} style={this.props.style} />; - } else { - return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />; - } - } - private _onError(): void { - this.setState({ - imageLoadFailed: true, - }); - } -} |