diff options
author | Amir Bandeali <abandeali1@gmail.com> | 2018-05-16 03:52:49 +0800 |
---|---|---|
committer | Amir Bandeali <abandeali1@gmail.com> | 2018-05-16 03:52:49 +0800 |
commit | 9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a (patch) | |
tree | f72aae5170b6f1f6d3d70ebf6c03ed171680ff50 /packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | |
parent | 9744b1906a111aa0c65c8fafb4db66aef32a5a23 (diff) | |
parent | 6aed4fb1ae27dabed027c855f2cbdc0bfb4f3b6b (diff) | |
download | dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar.gz dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar.bz2 dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar.lz dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar.xz dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.tar.zst dexon-sol-tools-9e0471bfbb4bb2b3b490e10ce34b16c88e8bab9a.zip |
Merge branch 'development' into v2-prototype
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 | 77 |
1 files changed, 43 insertions, 34 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 0c4b2841c..d88a59d15 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -12,38 +12,6 @@ export interface RelayerGridTileProps { networkId: number; } -// TODO: Get top tokens and headerurl from remote -const headerUrl = '/images/og_image.png'; -const topTokens = [ - { - address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', - decimals: 18, - iconUrl: '/images/token_icons/makerdao.png', - isRegistered: true, - isTracked: true, - name: 'Maker DAO', - symbol: 'MKR', - }, - { - address: '0x323b5d4c32345ced77393b3530b1eed0f346429d', - decimals: 18, - iconUrl: '/images/token_icons/melon.png', - isRegistered: true, - isTracked: true, - name: 'Melon Token', - symbol: 'MLN', - }, - { - address: '0xb18845c260f680d5b9d84649638813e342e4f8c9', - decimals: 18, - iconUrl: '/images/token_icons/augur.png', - isRegistered: true, - isTracked: true, - name: 'Augur Reputation Token', - symbol: 'REP', - }, -]; - const styles: Styles = { root: { backgroundColor: colors.white, @@ -68,6 +36,9 @@ const styles: Styles = { borderBottomLeftRadius: 4, borderTopRightRadius: 4, borderTopLeftRadius: 4, + borderWidth: 1, + borderStyle: 'solid', + borderColor: colors.walletBorder, }, body: { paddingLeft: 6, @@ -91,11 +62,20 @@ const styles: Styles = { }, }; +const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png'; + export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { + const link = props.relayerInfo.appUrl || props.relayerInfo.url; return ( <GridTile style={styles.root}> <div style={styles.innerDiv}> - <img src={headerUrl} style={styles.header} /> + <a href={link} target="_blank" style={{ textDecoration: 'none' }}> + <ImgWithFallback + src={props.relayerInfo.headerImgUrl} + fallbackSrc={FALLBACK_IMG_SRC} + style={styles.header} + /> + </a> <div style={styles.body}> <div className="py1" style={styles.relayerNameLabel}> {props.relayerInfo.name} @@ -104,7 +84,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( <div className="py1" style={styles.subLabel}> Daily Trade Volume </div> - <TopTokens tokens={topTokens} networkId={props.networkId} /> + <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> <div className="py1" style={styles.subLabel}> Top tokens </div> @@ -113,3 +93,32 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( </GridTile> ); }; + +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() { + 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() { + this.setState({ + imageLoadFailed: true, + }); + } +} |