diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-11-29 05:46:41 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-11-29 05:46:41 +0800 |
commit | 63cb312c7fc5d53934473bade954157027f0f230 (patch) | |
tree | 9813b5d47035c6312ea786c808b9f04b7a4bafca /packages/website/ts/pages/instant | |
parent | e1c237a8e42c337cb329a4e2822d714bea4c7756 (diff) | |
download | dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar.gz dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar.bz2 dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar.lz dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar.xz dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.tar.zst dexon-0x-contracts-63cb312c7fc5d53934473bade954157027f0f230.zip |
feat(website): implement link directly to configure
Diffstat (limited to 'packages/website/ts/pages/instant')
-rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 8 | ||||
-rw-r--r-- | packages/website/ts/pages/instant/instant.tsx | 22 | ||||
-rw-r--r-- | packages/website/ts/pages/instant/introducing_0x_instant.tsx | 9 |
3 files changed, 34 insertions, 5 deletions
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 1cfdfea5d..c836739bb 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -3,4 +3,10 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; -export const Configurator = () => <Container height="400px" backgroundColor={colors.instantTertiaryBackground} />; +export interface ConfiguratorProps { + hash: string; +} + +export const Configurator = (props: ConfiguratorProps) => ( + <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} /> +); diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index c747f3d10..b758ef162 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -1,3 +1,4 @@ +import { utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -26,6 +27,7 @@ export interface InstantProps { export interface InstantState {} +const CONFIGURATOR_HASH = 'configure'; const THROTTLE_TIMEOUT = 100; const DOCUMENT_TITLE = '0x Instant'; const DOCUMENT_DESCRIPTION = '0x Instant'; @@ -42,7 +44,6 @@ export class Instant extends React.Component<InstantProps, InstantState> { window.scrollTo(0, 0); } public render(): React.ReactNode { - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; return ( <Container overflowX="hidden"> <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> @@ -55,15 +56,30 @@ export class Instant extends React.Component<InstantProps, InstantState> { isNightVersion={true} /> <Container backgroundColor={colors.instantPrimaryBackground} /> - <Introducing0xInstant screenWidth={this.props.screenWidth} /> + <Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onHeaderCTAClick} /> <Screenshots screenWidth={this.props.screenWidth} /> <Features screenWidth={this.props.screenWidth} /> - {!isSmallScreen && <Configurator />} + {!this._isSmallScreen() && <Configurator hash={CONFIGURATOR_HASH} />} <NeedMore screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </Container> ); } + private readonly _onHeaderCTAClick = () => { + if (this._isSmallScreen()) { + utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#About`); + } else { + this._scrollToConfigurator(); + } + }; + private _isSmallScreen(): boolean { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + return isSmallScreen; + } + private _scrollToConfigurator(): void { + sharedUtils.setUrlHash(CONFIGURATOR_HASH); + sharedUtils.scrollToHash(CONFIGURATOR_HASH, ''); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx index 21377d52e..da3f09faa 100644 --- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx +++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx @@ -8,6 +8,7 @@ import { ScreenWidths } from 'ts/types'; export interface Introducing0xInstantProps { screenWidth: ScreenWidths; + onCTAClick: () => void; } export const Introducing0xInstant = (props: Introducing0xInstantProps) => { @@ -40,7 +41,13 @@ export const Introducing0xInstant = (props: Introducing0xInstantProps) => { </Text> </Container> <div className="py3"> - <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px"> + <Button + type="button" + backgroundColor={colors.mediumBlue} + fontColor={colors.white} + fontSize="18px" + onClick={props.onCTAClick} + > Get Started </Button> </div> |