Merge pull request #543 from 0xProject/feature/website/integrate-relayer-info

Integrate relayer index with website backend

4 files changed, 125 insertions, 103 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>
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index db3cf07b5..50760c32d 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,14 +1,21 @@
 import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
 import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
-import { RelayerInfo } from 'ts/types';
+import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { backendClient } from 'ts/utils/backend_client';
 
 export interface RelayerIndexProps {
     networkId: number;
 }
 
+interface RelayerIndexState {
+    relayerInfos?: WebsiteBackendRelayerInfo[];
+    error?: Error;
+}
+
 const styles: Styles = {
     root: {
         width: '100%',
@@ -25,94 +32,67 @@ const styles: Styles = {
     },
 };
 
-// TODO: replace fake data with real, remote data
-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 relayerInfos: RelayerInfo[] = [
-    {
-        id: '1',
-        headerUrl: '/images/og_image.png',
-        name: 'Radar Relay',
-        marketShare: 0.5,
-        topTokens,
-    },
-    {
-        id: '2',
-        headerUrl: '/images/og_image.png',
-        name: 'Paradex',
-        marketShare: 0.5,
-        topTokens,
-    },
-    {
-        id: '3',
-        headerUrl: '/images/og_image.png',
-        name: 'yo',
-        marketShare: 0.5,
-        topTokens,
-    },
-    {
-        id: '4',
-        headerUrl: '/images/og_image.png',
-        name: 'test',
-        marketShare: 0.5,
-        topTokens,
-    },
-    {
-        id: '5',
-        headerUrl: '/images/og_image.png',
-        name: 'blahg',
-        marketShare: 0.5,
-        topTokens,
-    },
-    {
-        id: '6',
-        headerUrl: '/images/og_image.png',
-        name: 'hello',
-        marketShare: 0.5,
-        topTokens,
-    },
-];
-
 const CELL_HEIGHT = 260;
 const NUMBER_OF_COLUMNS = 4;
 const GRID_PADDING = 16;
 
-export const RelayerIndex: React.StatelessComponent<RelayerIndexProps> = (props: RelayerIndexProps) => {
-    return (
-        <div style={styles.root}>
-            <GridList cellHeight={CELL_HEIGHT} cols={NUMBER_OF_COLUMNS} padding={GRID_PADDING} style={styles.gridList}>
-                {relayerInfos.map((relayerInfo: RelayerInfo) => (
-                    <RelayerGridTile key={relayerInfo.id} relayerInfo={relayerInfo} networkId={props.networkId} />
-                ))}
-            </GridList>
-        </div>
-    );
-};
+export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
+    private _isUnmounted: boolean;
+    constructor(props: RelayerIndexProps) {
+        super(props);
+        this._isUnmounted = false;
+        this.state = {
+            relayerInfos: undefined,
+            error: undefined,
+        };
+    }
+    public componentWillMount() {
+        // tslint:disable-next-line:no-floating-promises
+        this._fetchRelayerInfosAsync();
+    }
+    public componentWillUnmount() {
+        this._isUnmounted = true;
+    }
+    public render() {
+        const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
+        if (readyToRender) {
+            return (
+                <div style={styles.root}>
+                    <GridList
+                        cellHeight={CELL_HEIGHT}
+                        cols={NUMBER_OF_COLUMNS}
+                        padding={GRID_PADDING}
+                        style={styles.gridList}
+                    >
+                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo) => (
+                            <RelayerGridTile
+                                key={relayerInfo.id}
+                                relayerInfo={relayerInfo}
+                                networkId={this.props.networkId}
+                            />
+                        ))}
+                    </GridList>
+                </div>
+            );
+        } else {
+            // TODO: loading and error states with a scrolling container
+            return null;
+        }
+    }
+    private async _fetchRelayerInfosAsync(): Promise<void> {
+        try {
+            const relayerInfos = await backendClient.getRelayerInfosAsync();
+            if (!this._isUnmounted) {
+                this.setState({
+                    relayerInfos,
+                });
+            }
+        } catch (error) {
+            if (!this._isUnmounted) {
+                this.setState({
+                    error,
+                });
+            }
+        }
+    }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 98d080afb..2544e6735 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -500,12 +500,12 @@ export interface TokenState {
     price?: BigNumber;
 }
 
-export interface RelayerInfo {
-    headerUrl: string;
+// TODO: Add topTokens and headerUrl properties once available from backend
+export interface WebsiteBackendRelayerInfo {
     id: string;
     name: string;
-    marketShare: number;
-    topTokens: Token[];
+    dailyTxnVolume: string;
+    url: string;
 }
 
 export interface WebsiteBackendPriceInfo {
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index 366519856..fdbb3e03a 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -2,12 +2,19 @@ import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as queryString from 'query-string';
 
-import { ArticlesBySection, ItemByAddress, WebsiteBackendGasInfo, WebsiteBackendPriceInfo } from 'ts/types';
+import {
+    ArticlesBySection,
+    ItemByAddress,
+    WebsiteBackendGasInfo,
+    WebsiteBackendPriceInfo,
+    WebsiteBackendRelayerInfo,
+} from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { errorReporter } from 'ts/utils/error_reporter';
 
 const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
 const PRICES_ENDPOINT = '/prices';
+const RELAYERS_ENDPOINT = '/relayers';
 const WIKI_ENDPOINT = '/wiki';
 
 export const backendClient = {
@@ -26,6 +33,10 @@ export const backendClient = {
         const result = await requestAsync(PRICES_ENDPOINT, queryParams);
         return result;
     },
+    async getRelayerInfosAsync(): Promise<WebsiteBackendRelayerInfo[]> {
+        const result = await requestAsync(RELAYERS_ENDPOINT);
+        return result;
+    },
     async getWikiArticlesBySectionAsync(): Promise<ArticlesBySection> {
         const result = await requestAsync(WIKI_ENDPOINT);
         return result;