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.tsx48
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx4
-rw-r--r--packages/website/ts/pages/fullscreen_message.tsx30
-rw-r--r--packages/website/ts/pages/not_found.tsx43
4 files changed, 78 insertions, 47 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index f3b0cc721..bdaf9b18e 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,6 +1,7 @@
import { colors, Styles } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
@@ -22,6 +23,7 @@ import { Wallet } from 'ts/components/wallet/wallet';
import { GenerateOrderForm } from 'ts/containers/generate_order_form';
import { localStorage } from 'ts/local_storage/local_storage';
import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { FullscreenMessage } from 'ts/pages/fullscreen_message';
import { Dispatcher } from 'ts/redux/dispatcher';
import {
BlockchainErrs,
@@ -218,20 +220,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
<div className="flex-auto px3" style={styles.scrollContainer}>
<Switch>
<Route
- path={`${WebsitePaths.Portal}/weth`}
- render={this._renderEthWrapper.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/account`}
- render={this._renderTokenBalances.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/trades`}
- render={this._renderTradeHistory.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/direct`}
- render={this._renderTradeDirect.bind(this)}
+ path={`${WebsitePaths.Portal}/:route`}
+ render={this._renderAccountManagement.bind(this)}
/>
<Route
exact={true}
@@ -313,6 +303,28 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</div>
);
}
+ private _renderAccountManagement(): React.ReactNode {
+ return this.props.blockchainIsLoaded ? (
+ <Switch>
+ <Route path={`${WebsitePaths.Portal}/weth`} render={this._renderEthWrapper.bind(this)} />
+ <Route path={`${WebsitePaths.Portal}/account`} render={this._renderTokenBalances.bind(this)} />
+ <Route path={`${WebsitePaths.Portal}/trades`} render={this._renderTradeHistory.bind(this)} />
+ <Route path={`${WebsitePaths.Portal}/direct`} render={this._renderTradeDirect.bind(this)} />
+ <Route render={this._renderNotFoundMessage.bind(this)} />
+ </Switch>
+ ) : (
+ <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
+ <div
+ className="relative sm-px2 sm-pt2 sm-m1"
+ style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
+ >
+ <div className="center pb2">
+ <CircularProgress size={40} thickness={5} />
+ </div>
+ </div>
+ </div>
+ );
+ }
private _renderEthWrapper(): React.ReactNode {
return (
<div>
@@ -383,6 +395,14 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</div>
);
}
+ private _renderNotFoundMessage(): React.ReactNode {
+ return (
+ <FullscreenMessage
+ headerText={'404 Not Found'}
+ bodyText={"Hm... looks like we couldn't find what you are looking for."}
+ />
+ );
+ }
private _onTokenChosen(tokenAddress: string): void {
if (_.isEmpty(tokenAddress)) {
this.setState({
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d4fd6aeaf..9eaf9fe03 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -59,10 +59,10 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
if (!readyToRender) {
return (
- <div className="col col-12" style={{ ...styles.root, height: '100%' }}>
+ <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
<div
className="relative sm-px2 sm-pt2 sm-m1"
- style={{ height: 122, top: '33%', transform: 'translateY(-50%)' }}
+ style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
>
<div className="center pb2">
{_.isUndefined(this.state.error) ? (
diff --git a/packages/website/ts/pages/fullscreen_message.tsx b/packages/website/ts/pages/fullscreen_message.tsx
new file mode 100644
index 000000000..141fb38a4
--- /dev/null
+++ b/packages/website/ts/pages/fullscreen_message.tsx
@@ -0,0 +1,30 @@
+import { Styles } from '@0xproject/react-shared';
+import * as React from 'react';
+
+export interface FullscreenMessageProps {
+ headerText: string;
+ bodyText: string;
+}
+
+const styles: Styles = {
+ thin: {
+ fontWeight: 100,
+ },
+};
+
+export const FullscreenMessage = (props: FullscreenMessageProps) => {
+ return (
+ <div className="mx-auto max-width-4 py4">
+ <div className="center py4">
+ <div className="py4">
+ <div className="py4">
+ <h1 style={{ ...styles.thin }}>{props.headerText}</h1>
+ <div className="py1">
+ <div className="py3">{props.bodyText}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index 96c73d4ec..674271636 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
+import { FullscreenMessage } from 'ts/pages/fullscreen_message';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Translate } from 'ts/utils/translate';
@@ -12,35 +13,15 @@ export interface NotFoundProps {
dispatcher: Dispatcher;
}
-interface NotFoundState {}
-
-const styles: Styles = {
- thin: {
- fontWeight: 100,
- },
+export const NotFound = (props: NotFoundProps) => {
+ return (
+ <div>
+ <TopBar blockchainIsLoaded={false} location={this.props.location} translate={this.props.translate} />
+ <FullscreenMessage
+ headerText={'404 Not Found'}
+ bodyText={"Hm... looks like we couldn't find what you are looking for."}
+ />
+ <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
+ </div>
+ );
};
-
-export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
- public render(): React.ReactNode {
- return (
- <div>
- <TopBar blockchainIsLoaded={false} location={this.props.location} translate={this.props.translate} />
- <div className="mx-auto max-width-4 py4">
- <div className="center py4">
- <div className="py4">
- <div className="py4">
- <h1 style={{ ...styles.thin }}>404 Not Found</h1>
- <div className="py1">
- <div className="py3">
- Hm... looks like we couldn't find what you are looking for.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
- </div>
- );
- }
-}