feat(website): add expanded and minimized display types to relayer grid

3 files changed, 56 insertions, 22 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b42954f60..1470239d6 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading';
 import { Menu, MenuTheme } from 'ts/components/portal/menu';
 import { Section } from 'ts/components/portal/section';
 import { TextHeader } from 'ts/components/portal/text_header';
-import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
+import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
@@ -541,6 +541,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
     private _renderRelayerIndexSection(): React.ReactNode {
         const isMobile = utils.isMobileWidth(this.props.screenWidth);
+        // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume
         return (
             <Section
                 header={!isMobile && <TextHeader labelText="0x Relayers" />}
@@ -551,7 +552,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 {this._renderStartOnboarding()}
                             </Container>
                         )}
-                        <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />
+                        <RelayerIndex
+                            networkId={this.props.networkId}
+                            screenWidth={this.props.screenWidth}
+                            cellStyle={RelayerIndexCellStyle.Minimized}
+                        />
                     </Container>
                 }
             />
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 193dd237a..a81ab107a 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
+export enum RelayerGridTileStyle {
+    Expanded = 0,
+    Minimized,
+}
+
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
     networkId: number;
+    style: RelayerGridTileStyle;
 }
 
 const styles: Styles = {
@@ -30,10 +36,14 @@ const styles: Styles = {
         height: '100%',
         boxSizing: 'border-box',
     },
-    header: {
+    expandedHeader: {
         height: '50%',
         width: '100%',
     },
+    minimizedHeader: {
+        height: '100%',
+        width: '100%',
+    },
     body: {
         height: '50%',
         width: '100%',
@@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
         !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
             ? props.relayerInfo.primaryColor
             : FALLBACK_PRIMARY_COLOR;
+    const isExpanded = props.style === RelayerGridTileStyle.Expanded;
+    const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader;
     return (
         <Island style={styles.root} Component={GridTile}>
             <div style={styles.innerDiv} onClick={onClick}>
-                <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}>
                     <Image
                         className="mx-auto"
                         src={props.relayerInfo.logoImgUrl}
@@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
                         height={RELAYER_ICON_HEIGHT}
                     />
                 </div>
-                <div style={styles.body}>
-                    <div className="pb1" style={styles.relayerNameLabel}>
-                        {props.relayerInfo.name}
-                    </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} />}
+                {isExpanded && (
+                    <div style={styles.body}>
+                        <div className="pb1" style={styles.relayerNameLabel}>
+                            {props.relayerInfo.name}
+                        </div>
+                        <Section titleText="Weekly Trade Volume">
+                            {!_.isUndefined(weeklyTxnVolume) && (
+                                <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
+                            )}
                         </Section>
-                    </Container>
-                </div>
+                        <Container marginTop="10px">
+                            <Section titleText="Top Tokens">
+                                {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+                            </Section>
+                        </Container>
+                    </div>
+                )}
             </div>
         </Island>
     );
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 91dbeb27a..e88c20d7e 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress';
 import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
-import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile';
 import { Retry } from 'ts/components/ui/retry';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 
+export enum RelayerIndexCellStyle {
+    Expanded = 0,
+    Minimized,
+}
+
 export interface RelayerIndexProps {
     networkId: number;
     screenWidth: ScreenWidths;
+    cellStyle: RelayerIndexCellStyle;
 }
 
 interface RelayerIndexState {
@@ -18,7 +24,8 @@ interface RelayerIndexState {
     error?: Error;
 }
 
-const CELL_HEIGHT = 290;
+const CELL_HEIGHT_EXPANDED = 290;
+const CELL_HEIGHT_MINIMIZED = 225;
 const NUMBER_OF_COLUMNS_LARGE = 3;
 const NUMBER_OF_COLUMNS_MEDIUM = 2;
 const NUMBER_OF_COLUMNS_SMALL = 2;
@@ -61,15 +68,23 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                 numberOfRelayers,
                 this._numberOfColumnsForScreenWidth(this.props.screenWidth),
             );
+            const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded;
+            const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED;
+            const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized;
             return (
                 <GridList
-                    cellHeight={CELL_HEIGHT}
+                    cellHeight={cellHeight}
                     cols={numberOfColumns}
                     padding={GRID_PADDING}
                     style={{ marginTop: -10, marginBottom: 0 }}
                 >
                     {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
-                        <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+                        <RelayerGridTile
+                            key={index}
+                            relayerInfo={relayerInfo}
+                            networkId={this.props.networkId}
+                            style={gridTileStyle}
+                        />
                     ))}
                 </GridList>
             );