diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 1cfdfea5de..c836739bb8 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 = () => ;
+export interface ConfiguratorProps {
+ hash: string;
+}
+
+export const Configurator = (props: ConfiguratorProps) => (
+
+);
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index c747f3d107..b758ef1623 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 {
window.scrollTo(0, 0);
}
public render(): React.ReactNode {
- const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
return (
@@ -55,15 +56,30 @@ export class Instant extends React.Component {
isNightVersion={true}
/>
-
+
- {!isSmallScreen && }
+ {!this._isSmallScreen() && }
);
}
+ 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 21377d52e0..da3f09faa0 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) => {
-
diff --git a/packages/website/tslint.json b/packages/website/tslint.json
index 50f5be4f69..3022b2c84a 100644
--- a/packages/website/tslint.json
+++ b/packages/website/tslint.json
@@ -5,6 +5,7 @@
"no-object-literal-type-assertion": false,
"completed-docs": false,
"prefer-function-over-method": false,
- "custom-no-magic-numbers": false
+ "custom-no-magic-numbers": false,
+ "semicolon": [true, "always", "ignore-bound-class-methods"]
}
}