From 12d8c0b6af7950e8aef12022007bd490fcf2ddaf Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 19 Apr 2018 16:25:55 -0400 Subject: Integrate relayer index with website backend --- .../components/relayer_index/relayer_grid_tile.tsx | 51 +++++-- .../ts/components/relayer_index/relayer_index.tsx | 154 +++++++++------------ packages/website/ts/types.ts | 8 +- packages/website/ts/utils/backend_client.ts | 13 +- 4 files changed, 123 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 = ( return (
- +
{props.relayerInfo.name}
-
+
{props.relayerInfo.dailyTxnVolume}
- Market share + Daily Trade Volume
- +
Top tokens
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index db3cf07b5..3881b97bb 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,65 @@ 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 = (props: RelayerIndexProps) => { - return ( -
- - {relayerInfos.map((relayerInfo: RelayerInfo) => ( - - ))} - -
- ); -}; +export class RelayerIndex extends React.Component { + 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() { + // TODO: loading and error states with a scrolling container + const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); + return ( + readyToRender && ( +
+ + {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo) => ( + + ))} + +
+ ) + ); + } + private async _fetchRelayerInfosAsync(): Promise { + 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 { + const result = await requestAsync(RELAYERS_ENDPOINT); + return result; + }, async getWikiArticlesBySectionAsync(): Promise { const result = await requestAsync(WIKI_ENDPOINT); return result; -- cgit v1.2.3 From c453012a8e28b32b71c90717c3976ace5f89e9b0 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 20 Apr 2018 15:36:00 -0400 Subject: Add specific render path for error and loading --- .../website/ts/components/relayer_index/relayer_index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 3881b97bb..50760c32d 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -54,10 +54,9 @@ export class RelayerIndex extends React.Component
- ) - ); + ); + } else { + // TODO: loading and error states with a scrolling container + return null; + } } private async _fetchRelayerInfosAsync(): Promise { try { -- cgit v1.2.3