aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/portal/portal.tsx129
-rw-r--r--packages/website/ts/components/portal/portal_menu.tsx29
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx18
3 files changed, 112 insertions, 64 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d6bc82587..70c99921c 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -3,7 +3,7 @@ import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -78,6 +78,7 @@ enum TokenManagementState {
const THROTTLE_TIMEOUT = 100;
const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
+const BACK_BUTTON_HEIGHT = 28;
const styles: Styles = {
root: {
@@ -97,6 +98,16 @@ const styles: Styles = {
fontWeight: 'bold',
fontSize: 20,
},
+ backButton: {
+ height: BACK_BUTTON_HEIGHT,
+ backgroundColor: colors.white,
+ borderRadius: BACK_BUTTON_HEIGHT,
+ boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+ },
+ backButtonIcon: {
+ color: colors.mediumBlue,
+ fontSize: 20,
+ },
};
export class Portal extends React.Component<PortalProps, PortalState> {
@@ -190,9 +201,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
<div id="portal" style={styles.body}>
<div className="sm-flex flex-center">
<div className="flex-last px3">
- <div className="py3" style={styles.title}>
- Your Account
- </div>
<div style={{ width: 346 }}>
<Switch>
<Route
@@ -208,9 +216,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</div>
</div>
<div className="flex-auto px3" style={styles.scrollContainer}>
- <div className="py3" style={styles.title}>
- Explore 0x Ecosystem
- </div>
<Switch>
<Route
path={`${WebsitePaths.Portal}/weth`}
@@ -218,7 +223,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
/>
<Route path={`${WebsitePaths.Portal}/fill`} render={this._renderFillOrder.bind(this)} />
<Route
- path={`${WebsitePaths.Portal}/balances`}
+ path={`${WebsitePaths.Portal}/account`}
render={this._renderTokenBalances.bind(this)}
/>
<Route
@@ -268,29 +273,37 @@ export class Portal extends React.Component<PortalProps, PortalState> {
);
}
private _renderMenu(routeComponentProps: RouteComponentProps<any>) {
- return <PortalMenu selectedPath={routeComponentProps.location.pathname} />;
+ return (
+ <div>
+ <BackButton />
+ <PortalMenu selectedPath={routeComponentProps.location.pathname} />
+ </div>
+ );
}
private _renderWallet() {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
- <Wallet
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this._blockchain}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- blockchainErr={this.props.blockchainErr}
- dispatcher={this.props.dispatcher}
- tokenByAddress={this.props.tokenByAddress}
- trackedTokens={trackedTokens}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- injectedProviderName={this.props.injectedProviderName}
- providerType={this.props.providerType}
- onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
- onAddToken={this._onAddToken.bind(this)}
- onRemoveToken={this._onRemoveToken.bind(this)}
- />
+ <div>
+ <Title titleText={'Your Account'} />
+ <Wallet
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this._blockchain}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ blockchainErr={this.props.blockchainErr}
+ dispatcher={this.props.dispatcher}
+ tokenByAddress={this.props.tokenByAddress}
+ trackedTokens={trackedTokens}
+ userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+ injectedProviderName={this.props.injectedProviderName}
+ providerType={this.props.providerType}
+ onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+ onAddToken={this._onAddToken.bind(this)}
+ onRemoveToken={this._onRemoveToken.bind(this)}
+ />
+ </div>
);
}
private _renderEthWrapper() {
@@ -319,19 +332,22 @@ export class Portal extends React.Component<PortalProps, PortalState> {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
- <TokenBalances
- blockchain={this._blockchain}
- blockchainErr={this.props.blockchainErr}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- dispatcher={this.props.dispatcher}
- screenWidth={this.props.screenWidth}
- tokenByAddress={this.props.tokenByAddress}
- trackedTokens={trackedTokens}
- userAddress={this.props.userAddress}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- networkId={this.props.networkId}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- />
+ <div>
+ <Title titleText={'Your Account'} />
+ <TokenBalances
+ blockchain={this._blockchain}
+ blockchainErr={this.props.blockchainErr}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ dispatcher={this.props.dispatcher}
+ screenWidth={this.props.screenWidth}
+ tokenByAddress={this.props.tokenByAddress}
+ trackedTokens={trackedTokens}
+ userAddress={this.props.userAddress}
+ userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+ networkId={this.props.networkId}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+ />
+ </div>
);
}
private _renderFillOrder(match: any, location: Location, history: History) {
@@ -363,7 +379,12 @@ export class Portal extends React.Component<PortalProps, PortalState> {
);
}
private _renderRelayerIndex() {
- return <RelayerIndex networkId={this.props.networkId} />;
+ return (
+ <div>
+ <Title titleText={'Explore 0x Relayers'} />
+ <RelayerIndex networkId={this.props.networkId} />
+ </div>
+ );
}
private _onTokenChosen(tokenAddress: string): void {
if (_.isEmpty(tokenAddress)) {
@@ -419,3 +440,31 @@ export class Portal extends React.Component<PortalProps, PortalState> {
this.props.dispatcher.updateScreenWidth(newScreenWidth);
}
}
+
+interface TitleProps {
+ titleText: string;
+}
+const Title = (props: TitleProps) => {
+ return (
+ <div className="py3" style={styles.title}>
+ {props.titleText}
+ </div>
+ );
+};
+
+const BackButton = () => {
+ return (
+ <div style={{ height: 65, paddingTop: 25 }}>
+ <Link to={`${WebsitePaths.Portal}`} style={{ textDecoration: 'none' }}>
+ <div className="flex right" style={{ ...styles.backButton, paddingTop: 10 }}>
+ <div style={{ marginLeft: 12 }}>
+ <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
+ </div>
+ <div style={{ marginLeft: 12, marginRight: 12 }}>
+ <div style={{ fontSize: 16, color: colors.lightGrey }}>back to Relayers</div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ );
+};
diff --git a/packages/website/ts/components/portal/portal_menu.tsx b/packages/website/ts/components/portal/portal_menu.tsx
index 33835fd98..e073596e2 100644
--- a/packages/website/ts/components/portal/portal_menu.tsx
+++ b/packages/website/ts/components/portal/portal_menu.tsx
@@ -17,39 +17,34 @@ interface MenuItemEntry {
const menuItemEntries: MenuItemEntry[] = [
{
- to: `${WebsitePaths.Portal}`,
- labelText: 'Generate order',
- iconName: 'zmdi-arrow-right-top',
- },
- {
- to: `${WebsitePaths.Portal}/fill`,
- labelText: 'Fill order',
- iconName: 'zmdi-arrow-left-bottom',
- },
- {
- to: `${WebsitePaths.Portal}/balances`,
- labelText: 'Balances',
+ to: `${WebsitePaths.Portal}/account`,
+ labelText: 'Account Overview',
iconName: 'zmdi-balance-wallet',
},
{
to: `${WebsitePaths.Portal}/trades`,
- labelText: 'Trade History',
+ labelText: 'Trade history',
iconName: 'zmdi-format-list-bulleted',
},
{
to: `${WebsitePaths.Portal}/weth`,
- labelText: 'Wrap ETH',
+ labelText: 'Wrapped ETH',
iconName: 'zmdi-circle-o',
},
+ {
+ to: `${WebsitePaths.Portal}/direct`,
+ labelText: 'Trade direct',
+ iconName: 'zmdi-swap',
+ },
];
const DEFAULT_LABEL_COLOR = colors.darkerGrey;
const DEFAULT_ICON_COLOR = colors.darkerGrey;
-const SELECTED_ICON_COLOR = colors.yellow800;
+const SELECTED_ICON_COLOR = colors.yellow900;
export const PortalMenu: React.StatelessComponent<PortalMenuProps> = (props: PortalMenuProps) => {
return (
- <div>
+ <div style={{ paddingLeft: 185 }}>
{_.map(menuItemEntries, entry => {
const selected = entry.to === props.selectedPath;
return (
@@ -80,7 +75,7 @@ const PortalMenuItemLabel: React.StatelessComponent<PortalMenuItemLabelProps> =
};
return (
<div className="flex">
- <div className="pr1 pl2">
+ <div className="pr1">
<i style={styles.iconStyle} className={`zmdi ${props.iconName}`} />
</div>
<div className="pl1" style={styles.textStyle}>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index d9c97e34a..ac79d5a21 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -18,6 +18,7 @@ import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-down
import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
import Close from 'material-ui/svg-icons/navigation/close';
import * as React from 'react';
+import { Link } from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
import firstBy = require('thenby');
@@ -38,6 +39,7 @@ import {
TokenByAddress,
TokenState,
TokenStateByAddress,
+ WebsitePaths,
} from 'ts/types';
import { backendClient } from 'ts/utils/backend_client';
import { constants } from 'ts/utils/constants';
@@ -237,13 +239,15 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const userAddress = this.props.userAddress;
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 }}
- innerDivStyle={styles.headerItemInnerDiv}
- />
+ <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+ <ListItem
+ key={HEADER_ITEM_KEY}
+ primaryText={primaryText}
+ leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
+ style={{ ...styles.paddedItem, ...styles.borderedItem }}
+ innerDivStyle={styles.headerItemInnerDiv}
+ />
+ </Link>
);
}
private _renderBody(): React.ReactElement<{}> {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 07:26:00 +0800