diff options
author | Fabio Berger <me@fabioberger.com> | 2018-04-09 13:34:36 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-04-09 13:34:36 +0800 |
commit | e05b55d4a5698d3e936e7164ed69d9417d12cd12 (patch) | |
tree | 1f9be2d21d21cc915687f3606b2dad9e8a4add8e /packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | |
parent | 6f24337a5309bc4b06d0a91eac3af7566bde5754 (diff) | |
parent | 073bf738ddb271b6b4158798baf4cac3cb0608e9 (diff) | |
download | dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar.gz dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar.bz2 dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar.lz dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar.xz dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.tar.zst dexon-sol-tools-e05b55d4a5698d3e936e7164ed69d9417d12cd12.zip |
merge development
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 | 84 |
1 files changed, 84 insertions, 0 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 new file mode 100644 index 000000000..530576828 --- /dev/null +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -0,0 +1,84 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import { GridTile } from 'material-ui/GridList'; +import * as React from 'react'; + +import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; +import { TokenIcon } from 'ts/components/ui/token_icon'; +import { RelayerInfo, Token } from 'ts/types'; + +export interface RelayerGridTileProps { + relayerInfo: RelayerInfo; + networkId: number; +} + +const styles: Styles = { + root: { + backgroundColor: colors.white, + borderBottomRightRadius: 10, + borderBottomLeftRadius: 10, + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + overflow: 'hidden', + boxSizing: 'border-box', + }, + innerDiv: { + padding: 6, + height: '100%', + boxSizing: 'border-box', + }, + header: { + height: '50%', + width: '100%', + objectFit: 'cover', + borderBottomRightRadius: 4, + borderBottomLeftRadius: 4, + borderTopRightRadius: 4, + borderTopLeftRadius: 4, + }, + body: { + paddingLeft: 6, + paddingRight: 6, + height: '50%', + width: '100%', + boxSizing: 'border-box', + }, + marketShareBar: { + height: 14, + width: '100%', + backgroundColor: colors.mediumBlue, + }, + subLabel: { + fontSize: 12, + color: colors.lightGrey, + }, + relayerNameLabel: { + fontSize: 16, + fontWeight: 'bold', + color: colors.black, + }, +}; + +export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { + return ( + <GridTile style={styles.root}> + <div style={styles.innerDiv}> + <img src={props.relayerInfo.headerUrl} style={styles.header} /> + <div style={styles.body}> + <div className="py1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <div style={styles.marketShareBar} /> + <div className="py1" style={styles.subLabel}> + Market share + </div> + <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> + <div className="py1" style={styles.subLabel}> + Top tokens + </div> + </div> + </div> + </GridTile> + ); +}; |