aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 05:29:39 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 05:29:39 +0800
commit592c1715571be07ca0f28a7f48f62001b45e846a (patch)
tree28a59ae7d808bdeb6a0ed9995a650b9dc99e14cf /packages/website/ts/@next
parent33e06fdf40f04a64dbe3c42264a5518d52a5119c (diff)
downloaddexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar.gz
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar.bz2
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar.lz
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar.xz
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.tar.zst
dexon-sol-tools-592c1715571be07ca0f28a7f48f62001b45e846a.zip
Custom getStartedLink based on screen size
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/pages/instant.tsx18
1 files changed, 16 insertions, 2 deletions
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 0214ddd08..26a296977 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,3 +1,4 @@
+import { utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
@@ -13,8 +14,12 @@ import { Section, SectionProps } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Configurator } from 'ts/@next/pages/instant/configurator';
+import { WebsitePaths } from 'ts/types';
+import { utils } from 'ts/utils/utils';
import { ModalContact } from '../components/modals/modal_contact';
+const CONFIGURATOR_MIN_WIDTH_PX = 1050;
+
const featuresData = [
{
title: 'Support ERC-20 and ERC-721 tokens',
@@ -70,6 +75,15 @@ interface Props {
};
}
+export const getStartedClick = () => {
+ if (window.innerWidth < CONFIGURATOR_MIN_WIDTH_PX) {
+ utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`);
+ } else {
+ sharedUtils.setUrlHash('configurator');
+ sharedUtils.scrollToHash('configurator', '');
+ }
+};
+
export class Next0xInstant extends React.Component<Props> {
public state = {
isContactModalOpen: false,
@@ -80,7 +94,7 @@ export class Next0xInstant extends React.Component<Props> {
<Hero
title="Introducing 0x Instant"
description="A free and flexible way to offer simple crypto purchasing in any app or website"
- actions={<Button href="#configurator">Get Started</Button>}
+ actions={<Button onClick={getStartedClick}>Get Started</Button>}
/>
<Section isFullWidth={true} isPadded={false} padding="30px 0">
@@ -181,7 +195,7 @@ const ConfiguratorSection =
styled(Section) <
SectionProps >
`
- @media (max-width: 1050px) {
+ @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) {
display: none;
}
`;