aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-05-09 05:30:26 +0800
committerGitHub <noreply@github.com>2018-05-09 05:30:26 +0800
commit71e2ee62e4b68fe6a65e788c4aef61d8574f8803 (patch)
tree17ac2dbeb3ead320b639671910b33c42fa542a9b
parent6c8ee4d55df2d9fdd9f9781fff31ddcc1c9b4be1 (diff)
parentf94d4b492dc0a2bfdd8bfa8d9a1376ed33b03060 (diff)
downloaddexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar.gz
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar.bz2
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar.lz
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar.xz
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.tar.zst
dexon-sol-tools-71e2ee62e4b68fe6a65e788c4aef61d8574f8803.zip
Merge pull request #576 from 0xProject/feature/website/top-tokens
Display top tokens from backend
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx33
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx16
-rw-r--r--packages/website/ts/types.ts9
3 files changed, 17 insertions, 41 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 0b9b8165e..677c66695 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -12,37 +12,6 @@ export interface RelayerGridTileProps {
networkId: number;
}
-// TODO: Get top tokens from remote
-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,
@@ -108,7 +77,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
<div className="py1" style={styles.subLabel}>
Daily Trade Volume
</div>
- <TopTokens tokens={topTokens} networkId={props.networkId} />
+ <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} />
<div className="py1" style={styles.subLabel}>
Top tokens
</div>
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index 233590b78..db4d3a211 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -3,10 +3,10 @@ import * as _ from 'lodash';
import * as React from 'react';
import { TokenIcon } from 'ts/components/ui/token_icon';
-import { Token } from 'ts/types';
+import { WebsiteBackendTokenInfo } from 'ts/types';
export interface TopTokensProps {
- tokens: Token[];
+ tokens: WebsiteBackendTokenInfo[];
networkId: number;
}
@@ -23,17 +23,17 @@ const styles: Styles = {
export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTokensProps) => {
return (
<div className="flex">
- {_.map(props.tokens, (token: Token, index: number) => {
+ {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => {
const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel };
const style = index !== 0 ? firstItemStyle : styles.tokenLabel;
return (
<a
- key={token.address}
- href={tokenLinkFromToken(token, props.networkId)}
+ key={tokenInfo.address}
+ href={tokenLinkFromToken(tokenInfo, props.networkId)}
target="_blank"
style={style}
>
- {token.symbol}
+ {tokenInfo.symbol}
</a>
);
})}
@@ -41,6 +41,6 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo
);
};
-function tokenLinkFromToken(token: Token, networkId: number) {
- return sharedUtils.getEtherScanLinkIfExists(token.address, networkId, EtherscanLinkSuffixes.Address);
+function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number) {
+ return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address);
}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2754075a7..f6752aef1 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -503,19 +503,26 @@ export interface TokenState {
price?: BigNumber;
}
-// TODO: Add topTokens property once available from backend
export interface WebsiteBackendRelayerInfo {
name: string;
dailyTxnVolume: string;
url: string;
appUrl?: string;
headerImgUrl: string;
+ topTokens: WebsiteBackendTokenInfo[];
}
export interface WebsiteBackendPriceInfo {
[symbol: string]: string;
}
+export interface WebsiteBackendTokenInfo {
+ address: string;
+ decimals: number;
+ name: string;
+ symbol: string;
+}
+
export interface WebsiteBackendGasInfo {
average: number;
}