aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-04-20 04:25:55 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-04-20 04:28:35 +0800
commit12d8c0b6af7950e8aef12022007bd490fcf2ddaf (patch)
treeb4fc1adc69a4c912816975743971e5b1786dc04b /packages/website/ts/components
parent8634551f53bac9769e866b9a2f6f7d0dbd203704 (diff)
downloaddexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar.gz
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar.bz2
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar.lz
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar.xz
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.tar.zst
dexon-0x-contracts-12d8c0b6af7950e8aef12022007bd490fcf2ddaf.zip
Integrate relayer index with website backend
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx51
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx154
2 files changed, 107 insertions, 98 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,
+ });
+ }
+ }
+ }
+}