feat(website): implement link directly to configure

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>