diff options
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 48 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/fullscreen_message.tsx | 30 | ||||
| -rw-r--r-- | packages/website/ts/pages/not_found.tsx | 43 |
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> - ); - } -} |