Implement design for relayers with no volume or tokens

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;