aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-10-18 15:10:33 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-10-18 15:10:33 +0800
commit95775dca1fbd115f57ee7cde314ebcdb9ca80c45 (patch)
treedc18138ee3faa1c7bafd897df7112f7c8c917369
parent86aa5f9643da7ccdc32e77220db22a949a7507fa (diff)
downloaddexon-0x-contracts-95775dca1fbd115f57ee7cde314ebcdb9ca80c45.tar.gz
dexon-0x-contracts-95775dca1fbd115f57ee7cde314ebcdb9ca80c45.tar.zst
dexon-0x-contracts-95775dca1fbd115f57ee7cde314ebcdb9ca80c45.zip
feat(website): add expanded and minimized display types to relayer grid
-rw-r--r--packages/website/ts/components/portal/portal.tsx9
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx46
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx23
-rw-r--r--yarn.lock39
4 files changed, 57 insertions, 60 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>
);
diff --git a/yarn.lock b/yarn.lock
index b4f48b8ac..b0bbd8fb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1602,10 +1602,6 @@ aes-js@^0.2.3:
version "0.2.4"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
-aes-js@^3.1.1:
- version "3.1.1"
- resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
-
ajv-errors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@@ -3006,7 +3002,7 @@ bs-logger@0.x:
dependencies:
fast-json-stable-stringify "^2.0.0"
-bs58@=4.0.1, bs58@^4.0.0:
+bs58@=4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
dependencies:
@@ -3029,14 +3025,6 @@ bs58check@^1.0.8:
bs58 "^3.1.0"
create-hash "^1.1.0"
-bs58check@^2.1.2:
- version "2.1.2"
- resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
- dependencies:
- bs58 "^4.0.0"
- create-hash "^1.1.0"
- safe-buffer "^5.1.2"
-
bser@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -5590,19 +5578,6 @@ ethereumjs-wallet@0.6.0:
utf8 "^2.1.1"
uuid "^2.0.1"
-ethereumjs-wallet@~0.6.0:
- version "0.6.2"
- resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
- dependencies:
- aes-js "^3.1.1"
- bs58check "^2.1.2"
- ethereumjs-util "^5.2.0"
- hdkey "^1.0.0"
- safe-buffer "^5.1.2"
- scrypt.js "^0.2.0"
- utf8 "^3.0.0"
- uuid "^3.3.2"
-
ethers@3.0.22:
version "3.0.22"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436"
@@ -7097,14 +7072,6 @@ hdkey@^0.7.0, hdkey@^0.7.1:
coinstring "^2.0.0"
secp256k1 "^3.0.1"
-hdkey@^1.0.0:
- version "1.1.0"
- resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
- dependencies:
- coinstring "^2.0.0"
- safe-buffer "^5.1.1"
- secp256k1 "^3.0.1"
-
he@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -15246,10 +15213,6 @@ utf8@^2.1.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
-utf8@^3.0.0:
- version "3.0.0"
- resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
-
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"