crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1152 from 0xProject/feature/website/hide-v1-volume

Browse Source 
[website] Add expanded and minimized display types to relayer grid
This commit is contained in:
Kadinsky 2018-10-18 11:32:07 +01:00 committed by GitHub
commit bd8ba14bf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/website/ts/components/portal/portal.tsx
View File

@ -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>
}
/>

46
packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
View File

@ -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>
);

23
packages/website/ts/components/relayer_index/relayer_index.tsx
View File

@ -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>
);