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>