diff options
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 | 51 |
1 files changed, 41 insertions, 10 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 530576828..0c4b2841c 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -5,13 +5,45 @@ 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'; +import { Token, WebsiteBackendRelayerInfo } from 'ts/types'; export interface RelayerGridTileProps { - relayerInfo: RelayerInfo; + relayerInfo: WebsiteBackendRelayerInfo; 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, @@ -44,10 +76,9 @@ const styles: Styles = { width: '100%', boxSizing: 'border-box', }, - marketShareBar: { - height: 14, - width: '100%', - backgroundColor: colors.mediumBlue, + dailyTradeVolumeLabel: { + fontSize: 14, + color: colors.mediumBlue, }, subLabel: { fontSize: 12, @@ -64,16 +95,16 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( return ( <GridTile style={styles.root}> <div style={styles.innerDiv}> - <img src={props.relayerInfo.headerUrl} style={styles.header} /> + <img src={headerUrl} style={styles.header} /> <div style={styles.body}> <div className="py1" style={styles.relayerNameLabel}> {props.relayerInfo.name} </div> - <div style={styles.marketShareBar} /> + <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div> <div className="py1" style={styles.subLabel}> - Market share + Daily Trade Volume </div> - <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> + <TopTokens tokens={topTokens} networkId={props.networkId} /> <div className="py1" style={styles.subLabel}> Top tokens </div> |