{this.props.blockchainIsLoaded ? (
- {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
+ {isDevelopment && (
{
);
}
+ private _renderRelayers() {
+ return (
+
+
+ );
+ }
private _renderEthWrapper() {
return (
+
+
+
+
+
)}
);
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
new file mode 100644
index 0000000000..530576828c
--- /dev/null
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -0,0 +1,84 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import { GridTile } from 'material-ui/GridList';
+import * as React from 'react';
+
+import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { RelayerInfo, Token } from 'ts/types';
+
+export interface RelayerGridTileProps {
+ relayerInfo: RelayerInfo;
+ networkId: number;
+}
+
+const styles: Styles = {
+ root: {
+ backgroundColor: colors.white,
+ borderBottomRightRadius: 10,
+ borderBottomLeftRadius: 10,
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 10,
+ boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+ overflow: 'hidden',
+ boxSizing: 'border-box',
+ },
+ innerDiv: {
+ padding: 6,
+ height: '100%',
+ boxSizing: 'border-box',
+ },
+ header: {
+ height: '50%',
+ width: '100%',
+ objectFit: 'cover',
+ borderBottomRightRadius: 4,
+ borderBottomLeftRadius: 4,
+ borderTopRightRadius: 4,
+ borderTopLeftRadius: 4,
+ },
+ body: {
+ paddingLeft: 6,
+ paddingRight: 6,
+ height: '50%',
+ width: '100%',
+ boxSizing: 'border-box',
+ },
+ marketShareBar: {
+ height: 14,
+ width: '100%',
+ backgroundColor: colors.mediumBlue,
+ },
+ subLabel: {
+ fontSize: 12,
+ color: colors.lightGrey,
+ },
+ relayerNameLabel: {
+ fontSize: 16,
+ fontWeight: 'bold',
+ color: colors.black,
+ },
+};
+
+export const RelayerGridTile: React.StatelessComponent
+ 
+
+
+
+
+ {props.relayerInfo.name}
+
+
+
+ Market share
+
+
+ Top tokens
+
+
+
+ {relayerInfos.map((relayerInfo: RelayerInfo) => (
+
+
+ );
+};
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
new file mode 100644
index 0000000000..233590b784
--- /dev/null
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -0,0 +1,46 @@
+import { colors, EtherscanLinkSuffixes, Styles, utils as sharedUtils } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { Token } from 'ts/types';
+
+export interface TopTokensProps {
+ tokens: Token[];
+ networkId: number;
+}
+
+const styles: Styles = {
+ tokenLabel: {
+ textDecoration: 'none',
+ color: colors.mediumBlue,
+ },
+ followingTokenLabel: {
+ paddingLeft: 16,
+ },
+};
+
+export const TopTokens: React.StatelessComponent
+ {_.map(props.tokens, (token: Token, index: number) => {
+ const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel };
+ const style = index !== 0 ? firstItemStyle : styles.tokenLabel;
+ return (
+
+ {token.symbol}
+
+ );
+ })}
+
+ );
+};
+
+function tokenLinkFromToken(token: Token, networkId: number) {
+ return sharedUtils.getEtherScanLinkIfExists(token.address, networkId, EtherscanLinkSuffixes.Address);
+}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 39c95d31cf..d3dc8e3dd7 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -71,7 +71,7 @@ interface AccessoryItemConfig {
}
const styles: Styles = {
- wallet: {
+ root: {
width: 346,
backgroundColor: colors.white,
borderBottomRightRadius: 10,
@@ -121,6 +121,10 @@ const ZRX_TOKEN_SYMBOL = 'ZRX';
const ETHER_SYMBOL = 'ETH';
const ICON_DIMENSION = 24;
const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+const HEADER_ITEM_KEY = 'HEADER';
+const FOOTER_ITEM_KEY = 'FOOTER';
+const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
+const ETHER_ITEM_KEY = 'ETHER';
export class Wallet extends React.Component{isReadyToRender && this._renderRows()}
;
+ return {isReadyToRender && this._renderRows()}
;
}
private _renderRows() {
const isAddressAvailable = !_.isEmpty(this.props.userAddress);
@@ -196,6 +200,7 @@ export class Wallet extends React.Component
+
{
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
-
+
- );
+ ) : null;
}
private _renderWrapEtherConfirmationButton() {
const isWrappingEth = this.props.direction === Side.Deposit;
diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts
index 289006f107..b0adad5366 100644
--- a/packages/website/ts/containers/web3_wrapper_documentation.ts
+++ b/packages/website/ts/containers/web3_wrapper_documentation.ts
@@ -39,7 +39,7 @@ const docsInfoConfig: DocsInfoConfig = {
[docSections.installation]: InstallationMarkdown,
},
sectionNameToModulePath: {
- [docSections.web3Wrapper]: ['"web3-wrapper/src/index"'],
+ [docSections.web3Wrapper]: ['"web3-wrapper/src/web3_wrapper"'],
[docSections.types]: ['"types/src/index"'],
},
menuSubsectionToVersionWhenIntroduced: {},
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 901483327c..dba59f7044 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -490,4 +490,12 @@ export interface TokenState {
allowance: BigNumber;
isLoaded: boolean;
}
+
+export interface RelayerInfo {
+ headerUrl: string;
+ id: string;
+ name: string;
+ marketShare: number;
+ topTokens: Token[];
+}
// tslint:disable:max-file-line-count