From dab2d5db4442bc9e5c0591863c58e7fd9635e5f4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 24 May 2018 13:03:03 -0700 Subject: Implement design for relayers with no volume or tokens --- .../components/relayer_index/relayer_grid_tile.tsx | 37 +++++++++++++++++----- .../relayer_index/relayer_top_tokens.tsx | 1 + packages/website/ts/types.ts | 2 +- 3 files changed, 31 insertions(+), 9 deletions(-) (limited to 'packages/website') 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 = (props: RelayerGridTileProps) => { const link = props.relayerInfo.appUrl || props.relayerInfo.url; + const topTokens = props.relayerInfo.topTokens; + const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; return (
@@ -75,20 +79,37 @@ export const RelayerGridTile: React.StatelessComponent = (
{props.relayerInfo.name}
-
{props.relayerInfo.weeklyTxnVolume}
-
- Weekly Trade Volume -
- -
- Top tokens -
+
+ {!_.isUndefined(weeklyTxnVolume) && ( +
{props.relayerInfo.weeklyTxnVolume}
+ )} +
+ +
+ {!_.isEmpty(topTokens) && } +
+
); }; +interface SectionProps { + titleText: string; + children?: React.ReactNode; +} +const Section = (props: SectionProps) => { + return ( +
+
{props.titleText}
+ {props.children || } +
+ ); +}; + +const NoContent = () =>
{NO_CONTENT_MESSAGE}
; + 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; -- cgit v1.2.3