diff options
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 51 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 154 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 8 | ||||
| -rw-r--r-- | 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<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..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<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() { + // TODO: loading and error states with a scrolling container + const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); + return ( + readyToRender && ( + <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> + ) + ); + } + 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; |