aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-05-25 14:16:44 +0800
committerGitHub <noreply@github.com>2018-05-25 14:16:44 +0800
commitc7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0 (patch)
treed8f4b1f155181237d2112446877b93d4261e8b24 /packages/website
parent817248369a168f9afa2fac378f215f1406f2ff88 (diff)
parentdab2d5db4442bc9e5c0591863c58e7fd9635e5f4 (diff)
downloaddexon-0x-contracts-c7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0.tar.gz
dexon-0x-contracts-c7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0.tar.zst
dexon-0x-contracts-c7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0.zip
Merge pull request #620 from 0xProject/feature/website/relayer-empty
Implement design for relayers with no volume or tokens
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx37
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx1
-rw-r--r--packages/website/ts/types.ts2
3 files changed, 31 insertions, 9 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 23c2f0b56..ad6ab3de1 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -4,6 +4,7 @@ import { GridTile } from 'material-ui/GridList';
import * as React from 'react';
import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
+import { Container } from 'ts/components/ui/container';
import { Island } from 'ts/components/ui/island';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { Token, WebsiteBackendRelayerInfo } from 'ts/types';
@@ -58,9 +59,12 @@ const styles: Styles = {
};
const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+const NO_CONTENT_MESSAGE = '--';
export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
const link = props.relayerInfo.appUrl || props.relayerInfo.url;
+ const topTokens = props.relayerInfo.topTokens;
+ const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
return (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
@@ -75,20 +79,37 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
<div className="py1" style={styles.relayerNameLabel}>
{props.relayerInfo.name}
</div>
- <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
- <div className="py1" style={styles.subLabel}>
- Weekly Trade Volume
- </div>
- <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} />
- <div className="py1" style={styles.subLabel}>
- Top tokens
- </div>
+ <Section titleText="Weekly Trade Volume">
+ {!_.isUndefined(weeklyTxnVolume) && (
+ <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
+ )}
+ </Section>
+ <Container marginTop="10px">
+ <Section titleText="Top Tokens">
+ {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+ </Section>
+ </Container>
</div>
</div>
</Island>
);
};
+interface SectionProps {
+ titleText: string;
+ children?: React.ReactNode;
+}
+const Section = (props: SectionProps) => {
+ return (
+ <div>
+ <div style={styles.subLabel}>{props.titleText}</div>
+ <Container marginTop="6px">{props.children || <NoContent />}</Container>
+ </div>
+ );
+};
+
+const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
+
interface ImgWithFallbackProps {
src?: string;
fallbackSrc: string;
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 40ab7bd03..e42f8a81a 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -14,6 +14,7 @@ const styles: Styles = {
tokenLabel: {
textDecoration: 'none',
color: colors.mediumBlue,
+ fontSize: 14,
},
followingTokenLabel: {
paddingLeft: 16,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index aca3edae8..9567e129b 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -513,7 +513,7 @@ export interface TokenState {
export interface WebsiteBackendRelayerInfo {
name: string;
- weeklyTxnVolume: string;
+ weeklyTxnVolume?: string;
url: string;
appUrl?: string;
headerImgUrl?: string;