aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/relayer_index/relayer_index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/relayer_index/relayer_index.tsx')
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx156
1 files changed, 68 insertions, 88 deletions
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,
+ });
+ }
+ }
+ }
+}