aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/README.md14
-rw-r--r--packages/website/public/images/landing/project_logos/ercdex.pngbin5726 -> 3929 bytes
-rw-r--r--packages/website/ts/components/portal.tsx19
-rw-r--r--packages/website/ts/components/portal_menu.tsx26
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx84
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx118
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx46
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx17
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx6
-rw-r--r--packages/website/ts/containers/web3_wrapper_documentation.ts2
-rw-r--r--packages/website/ts/types.ts8
11 files changed, 317 insertions, 23 deletions
diff --git a/packages/website/README.md b/packages/website/README.md
index 042df52de..d93d18935 100644
--- a/packages/website/README.md
+++ b/packages/website/README.md
@@ -28,20 +28,24 @@ Add the following to your `/etc/hosts` file:
yarn install
```
-### Run dev server
+### Initial setup
+
+The **first** time you work with this package, you must build **all** packages within the monorepo. This is because packages that depend on other packages located inside this monorepo are symlinked when run from **within** the monorepo. This allows you to make changes across multiple packages without first publishing dependent packages to NPM. To build all packages, run the following from the monorepo root directory:
```bash
-yarn run dev
+yarn lerna:rebuild
```
-Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser.
+### Run dev server
-### Build
+The the `website` root directory, run:
```bash
-yarn build
+yarn dev
```
+Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser.
+
### Clean
```bash
diff --git a/packages/website/public/images/landing/project_logos/ercdex.png b/packages/website/public/images/landing/project_logos/ercdex.png
index 1367837e0..31d137be7 100644
--- a/packages/website/public/images/landing/project_logos/ercdex.png
+++ b/packages/website/public/images/landing/project_logos/ercdex.png
Binary files differ
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index ceb0ecc72..b79f5e288 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -15,6 +15,7 @@ import { EthWrappers } from 'ts/components/eth_wrappers';
import { FillOrder } from 'ts/components/fill_order';
import { Footer } from 'ts/components/footer';
import { PortalMenu } from 'ts/components/portal_menu';
+import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
import { TokenBalances } from 'ts/components/token_balances';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { TradeHistory } from 'ts/components/trade_history/trade_history';
@@ -155,6 +156,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
this.props.dispatcher,
);
+ const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
const portalStyle: React.CSSProperties = {
minHeight: '100vh',
display: 'flex',
@@ -204,12 +206,18 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
<div className="py2" style={{ backgroundColor: colors.grey50 }}>
{this.props.blockchainIsLoaded ? (
<Switch>
- {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
+ {isDevelopment && (
<Route
path={`${WebsitePaths.Portal}/wallet`}
render={this._renderWallet.bind(this)}
/>
)}
+ {isDevelopment && (
+ <Route
+ path={`${WebsitePaths.Portal}/relayers`}
+ render={this._renderRelayers.bind(this)}
+ />
+ )}
<Route
path={`${WebsitePaths.Portal}/weth`}
render={this._renderEthWrapper.bind(this)}
@@ -313,6 +321,15 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
</div>
);
}
+ private _renderRelayers() {
+ return (
+ <div className="flex flex-center">
+ <div className="mx-auto" style={{ width: 800 }}>
+ <RelayerIndex networkId={this.props.networkId} />
+ </div>
+ </div>
+ );
+ }
private _renderEthWrapper() {
return (
<EthWrappers
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx
index 9ab611556..2b4d7eea2 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/portal_menu.tsx
@@ -59,14 +59,24 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
{this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
</MenuItem>
{configs.ENVIRONMENT === Environments.DEVELOPMENT && (
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}/wallet`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
- </MenuItem>
+ <div>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/wallet`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
+ </MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/relayers`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Relayers', 'zmdi-input-antenna')}
+ </MenuItem>
+ </div>
)}
</div>
);
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 000000000..530576828
--- /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<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
+ return (
+ <GridTile style={styles.root}>
+ <div style={styles.innerDiv}>
+ <img src={props.relayerInfo.headerUrl} style={styles.header} />
+ <div style={styles.body}>
+ <div className="py1" style={styles.relayerNameLabel}>
+ {props.relayerInfo.name}
+ </div>
+ <div style={styles.marketShareBar} />
+ <div className="py1" style={styles.subLabel}>
+ Market share
+ </div>
+ <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} />
+ <div className="py1" style={styles.subLabel}>
+ Top tokens
+ </div>
+ </div>
+ </div>
+ </GridTile>
+ );
+};
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
new file mode 100644
index 000000000..db3cf07b5
--- /dev/null
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -0,0 +1,118 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import { GridList } from 'material-ui/GridList';
+import * as React from 'react';
+
+import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { RelayerInfo } from 'ts/types';
+
+export interface RelayerIndexProps {
+ networkId: number;
+}
+
+const styles: Styles = {
+ root: {
+ width: '100%',
+ },
+ item: {
+ backgroundColor: colors.white,
+ borderBottomRightRadius: 10,
+ borderBottomLeftRadius: 10,
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 10,
+ boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+ overflow: 'hidden',
+ padding: 4,
+ },
+};
+
+// TODO: replace fake data with real, remote data
+const topTokens = [
+ {
+ address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba',
+ decimals: 18,
+ iconUrl: '/images/token_icons/makerdao.png',
+ isRegistered: true,
+ isTracked: true,
+ name: 'Maker DAO',
+ symbol: 'MKR',
+ },
+ {
+ address: '0x323b5d4c32345ced77393b3530b1eed0f346429d',
+ decimals: 18,
+ iconUrl: '/images/token_icons/melon.png',
+ isRegistered: true,
+ isTracked: true,
+ name: 'Melon Token',
+ symbol: 'MLN',
+ },
+ {
+ address: '0xb18845c260f680d5b9d84649638813e342e4f8c9',
+ decimals: 18,
+ iconUrl: '/images/token_icons/augur.png',
+ isRegistered: true,
+ isTracked: true,
+ name: 'Augur Reputation Token',
+ symbol: 'REP',
+ },
+];
+
+const relayerInfos: RelayerInfo[] = [
+ {
+ id: '1',
+ headerUrl: '/images/og_image.png',
+ name: 'Radar Relay',
+ marketShare: 0.5,
+ topTokens,
+ },
+ {
+ id: '2',
+ headerUrl: '/images/og_image.png',
+ name: 'Paradex',
+ marketShare: 0.5,
+ topTokens,
+ },
+ {
+ id: '3',
+ headerUrl: '/images/og_image.png',
+ name: 'yo',
+ marketShare: 0.5,
+ topTokens,
+ },
+ {
+ id: '4',
+ headerUrl: '/images/og_image.png',
+ name: 'test',
+ marketShare: 0.5,
+ topTokens,
+ },
+ {
+ id: '5',
+ headerUrl: '/images/og_image.png',
+ name: 'blahg',
+ marketShare: 0.5,
+ topTokens,
+ },
+ {
+ id: '6',
+ headerUrl: '/images/og_image.png',
+ name: 'hello',
+ marketShare: 0.5,
+ topTokens,
+ },
+];
+
+const CELL_HEIGHT = 260;
+const NUMBER_OF_COLUMNS = 4;
+const GRID_PADDING = 16;
+
+export const RelayerIndex: React.StatelessComponent<RelayerIndexProps> = (props: RelayerIndexProps) => {
+ return (
+ <div style={styles.root}>
+ <GridList cellHeight={CELL_HEIGHT} cols={NUMBER_OF_COLUMNS} padding={GRID_PADDING} style={styles.gridList}>
+ {relayerInfos.map((relayerInfo: RelayerInfo) => (
+ <RelayerGridTile key={relayerInfo.id} relayerInfo={relayerInfo} networkId={props.networkId} />
+ ))}
+ </GridList>
+ </div>
+ );
+};
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 000000000..233590b78
--- /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<TopTokensProps> = (props: TopTokensProps) => {
+ return (
+ <div className="flex">
+ {_.map(props.tokens, (token: Token, index: number) => {
+ const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel };
+ const style = index !== 0 ? firstItemStyle : styles.tokenLabel;
+ return (
+ <a
+ key={token.address}
+ href={tokenLinkFromToken(token, props.networkId)}
+ target="_blank"
+ style={style}
+ >
+ {token.symbol}
+ </a>
+ );
+ })}
+ </div>
+ );
+};
+
+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 39c95d31c..d3dc8e3dd 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<WalletProps, WalletState> {
private _isUnmounted: boolean;
@@ -174,7 +178,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
}
public render() {
const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
- return <div style={styles.wallet}>{isReadyToRender && this._renderRows()}</div>;
+ return <div style={styles.root}>{isReadyToRender && this._renderRows()}</div>;
}
private _renderRows() {
const isAddressAvailable = !_.isEmpty(this.props.userAddress);
@@ -196,6 +200,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = 'wallet';
return (
<ListItem
+ key={HEADER_ITEM_KEY}
primaryText={primaryText.toUpperCase()}
leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />}
style={styles.paddedItem}
@@ -206,6 +211,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
private _renderDisconnectedRows() {
return (
<WalletDisconnectedItem
+ key={DISCONNECTED_ITEM_KEY}
providerType={this.props.providerType}
injectedProviderName={this.props.injectedProviderName}
onToggleLedgerDialog={this.props.onToggleLedgerDialog}
@@ -217,6 +223,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = utils.getAddressBeginAndEnd(userAddress);
return (
<ListItem
+ key={HEADER_ITEM_KEY}
primaryText={primaryText}
leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
style={{ ...styles.paddedItem, ...styles.borderedItem }}
@@ -226,7 +233,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
}
private _renderFooterRows() {
const primaryText = '+ other tokens';
- return <ListItem primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
+ return <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
}
private _renderEthRows() {
const primaryText = this._renderAmount(
@@ -245,7 +252,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
- <div>
+ <div key={ETHER_ITEM_KEY}>
<ListItem
primaryText={primaryText}
leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />}
@@ -304,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
- <div>
+ <div key={token.address}>
<ListItem
primaryText={amount}
leftIcon={this._renderTokenIcon(token, tokenLink)}
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 3a876721a..a38163770 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -111,7 +111,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
disableTouchRipple={true}
style={walletItemStyles.focusedItem}
innerDivStyle={styles.innerDiv}
- leftIcon={this.state.isEthConversionHappening && this._renderIsEthConversionHappeningSpinner()}
+ leftIcon={this._renderIsEthConversionHappeningSpinner()}
rightAvatar={this._renderWrapEtherConfirmationButton()}
/>
);
@@ -123,11 +123,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
});
}
private _renderIsEthConversionHappeningSpinner() {
- return (
+ return this.state.isEthConversionHappening ? (
<div className="pl1" style={{ paddingTop: 10 }}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div>
- );
+ ) : 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 289006f10..b0adad536 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 901483327..dba59f704 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 14:10:05 +0800