aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx8
-rw-r--r--packages/website/ts/pages/instant/instant.tsx22
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx9
-rw-r--r--packages/website/tslint.json3
4 files changed, 36 insertions, 6 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>
diff --git a/packages/website/tslint.json b/packages/website/tslint.json
index 50f5be4f6..3022b2c84 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"]
}
}