diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 18 |
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; } `; |