Merge pull request #1444 from 0xProject/feature/website/0x-org-instant-config

[website] 0x.org Instant

4 files changed, 129 insertions, 75 deletions

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index d86fa2203..a2df3ffc6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,59 +1,73 @@
+import { utils as sharedUtils } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
-import {colors} from 'ts/style/colors';
+import { colors } from 'ts/style/colors';
 
-import {Banner} from 'ts/@next/components/banner';
-import {Hero} from 'ts/@next/components/hero';
+import { Banner } from 'ts/@next/components/banner';
+import { Hero } from 'ts/@next/components/hero';
 
-import {Button} from 'ts/@next/components/button';
-import {Definition} from 'ts/@next/components/definition';
-import {Section, SectionProps} from 'ts/@next/components/newLayout';
-import {SiteWrap} from 'ts/@next/components/siteWrap';
-import {Heading, Paragraph} from 'ts/@next/components/text';
+import { Button } from 'ts/@next/components/button';
+import { Definition } from 'ts/@next/components/definition';
+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;
+
+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', '');
+    }
+};
+
 const featuresData = [
     {
         title: 'Support ERC-20 and ERC-721 tokens',
         icon: 'supportForAllEthereumStandards-large',
-        description: 'Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.',
+        description:
+            'Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.',
         links: [
             {
                 label: 'Get Started',
-                url: '#',
+                onClick: getStartedClick,
+                useAnchorTag: true,
             },
             {
                 label: 'Explore the Docs',
-                url: '#',
+                url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
             },
         ],
     },
     {
         title: 'Generate revenue for your business',
         icon: 'generateRevenueForYourBusiness-large',
-        description: 'With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.',
+        description:
+            'With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.',
         links: [
             {
                 label: 'Learn about affiliate fees',
-                url: '#',
+                url: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`,
             },
         ],
     },
     {
         title: 'Easy and flexible integration',
         icon: 'flexibleIntegration0xInstant',
-        description: 'Use our out-of-the-box design or customize the user interface by integrating via the AssetBuyer engine.. You can also tap into 0x networked liquidity or choose your own liquidity pool.',
+        description:
+            'Use our out-of-the-box design or customize the user interface by integrating via the AssetBuyer engine.. You can also tap into 0x networked liquidity or choose your own liquidity pool.',
         links: [
             {
                 label: 'Explore AssetBuyer',
-                url: '#',
-            },
-            {
-                label: 'Learn about liquidity',
-                url: '#',
+                url: `${WebsitePaths.Docs}/asset-buyer`,
             },
         ],
     },
@@ -72,24 +86,24 @@ export class Next0xInstant extends React.Component<Props> {
         isContactModalOpen: false,
     };
     public render(): React.ReactNode {
-        return  (
+        return (
             <SiteWrap>
                 <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">
-                <MarqueeWrap>
-                    <div>
-                        {[...Array(18)].map((item, index) => (
-                            <Card key={`card-${index}`} index={index}>
-                            <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
-                            </Card>
-                        ))}
-                    </div>
-                </MarqueeWrap>
+                    <MarqueeWrap>
+                        <div>
+                            {[...Array(18)].map((item, index) => (
+                                <Card key={`card-${index}`} index={index}>
+                                    <img src={`/images/@next/0x-instant/widget-${index % 6 + 1}.png`} />
+                                </Card>
+                            ))}
+                        </div>
+                    </MarqueeWrap>
                 </Section>
 
                 <Section>
@@ -106,7 +120,12 @@ export class Next0xInstant extends React.Component<Props> {
                     ))}
                 </Section>
 
-                <ConfiguratorSection id="configurator" maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}>
+                <ConfiguratorSection
+                    id="configurator"
+                    maxWidth="1386px"
+                    padding="0 58px 70px"
+                    bgColor={colors.backgroundDark}
+                >
                     <Heading>0x Instant Configurator</Heading>
                     <Configurator />
                 </ConfiguratorSection>
@@ -114,14 +133,24 @@ export class Next0xInstant extends React.Component<Props> {
                 <Banner
                     heading="Need more flexibility?"
                     subline="Dive into our docs, or contact us if needed"
-                    mainCta={{ text: 'Explore the Docs', href: '/docs' }}
+                    mainCta={{ text: 'Explore the Docs', href: `${WebsitePaths.Wiki}#Get-Started-With-Instant` }}
                     secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
                 />
                 <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
 
                 <Section maxWidth="1170px" isPadded={false} padding="60px 0">
-                    <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
-                    <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
+                    <Paragraph size="small" isMuted={0.5}>
+                        Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and
+                        blockchain-native tokens, including through any software developed using the licensed work
+                        created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License,
+                        Version 2.0 applicable to the Work, developers are “solely responsible for determining the
+                        appropriateness of using or redistributing the Work,” which includes responsibility for ensuring
+                        compliance with any such applicable laws and regulations.
+                    </Paragraph>
+                    <Paragraph size="small" isMuted={0.5}>
+                        See the Apache License, Version 2.0 for the specific language governing all applicable
+                        permissions and limitations.
+                    </Paragraph>
                 </Section>
             </SiteWrap>
         );
@@ -129,11 +158,11 @@ export class Next0xInstant extends React.Component<Props> {
 
     public _onOpenContactModal = (): void => {
         this.setState({ isContactModalOpen: true });
-    }
+    };
 
     public _onDismissContactModal = (): void => {
         this.setState({ isContactModalOpen: false });
-    }
+    };
 }
 
 // scroll animation calc is simply (imageWidth * totalRepetitions) / 2
@@ -159,8 +188,11 @@ const fadeUp = keyframes`
   }
 `;
 
-const ConfiguratorSection = styled(Section)<SectionProps>`
-  @media (max-width: 1050px) {
+const ConfiguratorSection =
+    styled(Section) <
+    SectionProps >
+    `
+  @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) {
       display: none;
   }
 `;
@@ -180,21 +212,24 @@ const MarqueeWrap = styled.div`
     }
 
     @media (min-width: 768px) {
-      > div {
-          width: 6660px;
-          animation: ${scroll} 70s linear infinite;
-      }
+        > div {
+            width: 6660px;
+            animation: ${scroll} 70s linear infinite;
+        }
     }
 
     @media (max-width: 768px) {
-      > div {
-          width: 5400px;
-          animation: ${scrollMobile} 70s linear infinite;
-      }
+        > div {
+            width: 5400px;
+            animation: ${scrollMobile} 70s linear infinite;
+        }
     }
 `;
 
-const Card = styled.div<{index: number}>`
+const Card =
+    styled.div <
+    { index: number } >
+    `
   opacity: 0;
   flex-shrink: 0;
   transform: translateY(10px);
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 4f837d7fa..a1263da58 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -64,7 +64,13 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         return (
             <Container minWidth="350px">
                 <ConfigGeneratorSection title="Liquidity Source">
-                    <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} />
+                    <Select
+                        includeEmpty={false}
+                        id=""
+                        value={value.orderSource}
+                        items={this._generateItems()}
+                        onChange={this._handleSRASelection.bind(this)}
+                    />
                 </ConfigGeneratorSection>
                 <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
                     {this._renderTokenMultiSelectOrSpinner()}
@@ -257,7 +263,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                         <Container marginRight="10px">
                             <CheckMark isChecked={isSelected} color={colors.brandLight} />
                         </Container>
-                        <CheckboxText isSelected={isSelected}>{metaData.symbol.toUpperCase()} — {metaData.name}</CheckboxText>
+                        <CheckboxText isSelected={isSelected}>
+                            {metaData.symbol.toUpperCase()} — {metaData.name}
+                        </CheckboxText>
                     </Container>
                 ),
                 onClick: this._handleTokenClick.bind(this, assetData),
@@ -287,18 +295,9 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
         <Container marginBottom="10px" className="flex justify-between items-center">
             <Heading size="small" marginBottom="0" isFlex={true}>
                 <span>{title}</span>
-                {isOptional && (
-                    <OptionalText>
-                    {' '}
-                    Optional
-                    </OptionalText>
-                )}
+                {isOptional && <OptionalText> Optional</OptionalText>}
             </Heading>
-            {actionText && (
-                <OptionalAction onClick={onActionTextClick}>
-                    {actionText}
-                </OptionalAction>
-            )}
+            {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>}
         </Container>
         {children}
     </Container>
@@ -319,10 +318,13 @@ interface CheckboxTextProps {
     isSelected?: boolean;
 }
 
-const CheckboxText = styled.span<CheckboxTextProps>`
+const CheckboxText =
+    styled.span <
+    CheckboxTextProps >
+    `
     font-size: 14px;
     line-height: 18px;
-    color: ${props => props.isSelected ? colors.brandDark : '#666666'}
+    color: ${props => (props.isSelected ? colors.brandDark : '#666666')}
 `;
 
 const OptionalAction = styled(OptionalText)`
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index 007526396..7c67e6333 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -30,19 +30,16 @@ export class Configurator extends React.Component {
     public render(): React.ReactNode {
         const codeToDisplay = this._generateCodeDemoCode();
         return (
-            <FlexWrap
-                isFlex={true}
-            >
+            <FlexWrap isFlex={true}>
                 <Column width="442px" padding="0 70px 0 0">
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Column>
                 <Column width="100%">
                     <HeadingWrapper>
-                        <Heading size="small" marginBottom="15px">Code Snippet</Heading>
-                        <Link
-                            href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
-                            isBlock={true}
-                        >
+                        <Heading size="small" marginBottom="15px">
+                            Code Snippet
+                        </Heading>
+                        <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank">
                             Explore the Docs
                         </Link>
                     </HeadingWrapper>
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 422818f9f..f5b5e60c8 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,23 +12,43 @@ interface SelectProps {
     id: string;
     items: SelectItemConfig[];
     emptyText?: string;
-    onChange?: () => void;
+    onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
+    includeEmpty: boolean;
 }
 
-export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => {
+export const Select: React.FunctionComponent<SelectProps> = ({
+    value,
+    id,
+    items,
+    includeEmpty,
+    emptyText,
+    onChange,
+}) => {
     return (
         <Container>
             <StyledSelect id={id} onChange={onChange}>
-                <option value="">{emptyText}</option>
-                {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
+                {includeEmpty && <option value="">{emptyText}</option>}
+                {items.map((item, index) => (
+                    <option
+                        key={`${id}-item-${index}`}
+                        value={item.value}
+                        selected={item.value === value}
+                        onClick={item.onClick}
+                    >
+                        {item.label}
+                    </option>
+                ))}
             </StyledSelect>
-            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
+            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </Caret>
         </Container>
     );
 };
 
 Select.defaultProps = {
     emptyText: 'Select...',
+    includeEmpty: true,
 };
 
 const Container = styled.div`