From 35cb769456d6b94c768b6ce3afd9535918aea0a1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 12:57:59 -0800
Subject: prettify file

---
 packages/website/ts/@next/pages/instant/select.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 422818f9f..1e428c9a1 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -20,9 +20,20 @@ export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items,
         <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>)}
+                {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>
     );
 };
-- 
cgit v1.2.3


From d32f77ebb93a904ee33a43db9207c20c889b0d8f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:01:15 -0800
Subject: Add includeEmpty option

---
 .../ts/@next/pages/instant/config_generator.tsx    | 32 ++++++++++++----------
 packages/website/ts/@next/pages/instant/select.tsx | 15 ++++++++--
 2 files changed, 29 insertions(+), 18 deletions(-)

(limited to 'packages')

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/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 1e428c9a1..f5b5e60c8 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,14 +12,22 @@ 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>
+                {includeEmpty && <option value="">{emptyText}</option>}
                 {items.map((item, index) => (
                     <option
                         key={`${id}-item-${index}`}
@@ -40,6 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items,
 
 Select.defaultProps = {
     emptyText: 'Select...',
+    includeEmpty: true,
 };
 
 const Container = styled.div`
-- 
cgit v1.2.3


From 33e06fdf40f04a64dbe3c42264a5518d52a5119c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:16:19 -0800
Subject: Run prettifier

---
 packages/website/ts/@next/pages/instant.tsx | 96 ++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 36 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index d86fa2203..0214ddd08 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -2,16 +2,16 @@ 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 { ModalContact } from '../components/modals/modal_contact';
 
@@ -19,7 +19,8 @@ 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',
@@ -34,7 +35,8 @@ const featuresData = [
     {
         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',
@@ -45,7 +47,8 @@ const featuresData = [
     {
         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',
@@ -72,7 +75,7 @@ export class Next0xInstant extends React.Component<Props> {
         isContactModalOpen: false,
     };
     public render(): React.ReactNode {
-        return  (
+        return (
             <SiteWrap>
                 <Hero
                     title="Introducing 0x Instant"
@@ -81,15 +84,15 @@ export class Next0xInstant extends React.Component<Props> {
                 />
 
                 <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 +109,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>
@@ -120,8 +128,18 @@ export class Next0xInstant extends React.Component<Props> {
                 <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 +147,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,7 +177,10 @@ const fadeUp = keyframes`
   }
 `;
 
-const ConfiguratorSection = styled(Section)<SectionProps>`
+const ConfiguratorSection =
+    styled(Section) <
+    SectionProps >
+    `
   @media (max-width: 1050px) {
       display: none;
   }
@@ -180,21 +201,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);
-- 
cgit v1.2.3


From 592c1715571be07ca0f28a7f48f62001b45e846a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:29:39 -0800
Subject: Custom getStartedLink based on screen size

---
 packages/website/ts/@next/pages/instant.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'packages')

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;
   }
 `;
-- 
cgit v1.2.3


From 37e5a8a8b7f841f5714cb90e0d9429ea80bf9009 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:29:46 -0800
Subject: Prettify file

---
 .../website/ts/@next/components/definition.tsx     | 37 +++++++++-------------
 1 file changed, 15 insertions(+), 22 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 77f837294..da26ee140 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -25,11 +25,7 @@ interface Props {
 
 export const Definition = (props: Props) => (
     <Wrap {...props}>
-        <Icon
-            name={props.icon}
-            size={props.iconSize || 'medium'}
-            margin={[0, 0, 'default', 0]}
-        />
+        <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />
 
         <TextWrap {...props}>
             <Heading
@@ -42,34 +38,28 @@ export const Definition = (props: Props) => (
             </Heading>
 
             {typeof props.description === 'string' ? (
-                <Paragraph isMuted={true}>
-                    {props.description}
-                </Paragraph>
+                <Paragraph isMuted={true}>{props.description}</Paragraph>
             ) : (
-                <>
-                    {props.description}
-                </>
+                <>{props.description}</>
             )}
 
-            {props.actions &&
+            {props.actions && (
                 <LinkWrap>
                     {props.actions.map((item, index) => (
-                        <Button
-                            key={`dlink-${index}`}
-                            href={item.url}
-                            isWithArrow={true}
-                            isAccentColor={true}
-                        >
+                        <Button key={`dlink-${index}`} href={item.url} isWithArrow={true} isAccentColor={true}>
                             {item.label}
                         </Button>
                     ))}
                 </LinkWrap>
-            }
+            )}
         </TextWrap>
     </Wrap>
 );
 
-const Wrap = styled.div<Props>`
+const Wrap =
+    styled.div <
+    Props >
+    `
     max-width: ${props => props.isInline && '354px'};
 
     & + & {
@@ -78,7 +68,7 @@ const Wrap = styled.div<Props>`
     }
 
     @media (min-width: 768px) {
-        width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'};
+        width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')};
         display: ${props => props.isInlineIcon && 'flex'};
         justify-content: ${props => props.isInlineIcon && 'space-between'};
         align-items: ${props => props.isInlineIcon && 'center'};
@@ -94,7 +84,10 @@ const Wrap = styled.div<Props>`
     }
 `;
 
-const TextWrap = styled.div<Props>`
+const TextWrap =
+    styled.div <
+    Props >
+    `
     width: 100%;
     max-width: 560px;
 
-- 
cgit v1.2.3


From 024e503657dd4ce7f678a850c834cec464e6a8b2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:37:05 -0800
Subject: Prettify button.tsx

---
 packages/website/ts/@next/components/button.tsx | 42 ++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index ab804b758..39c080f0b 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -25,16 +25,15 @@ interface ButtonInterface {
 }
 
 export const Button = (props: ButtonInterface) => {
-    const {
-        children,
-        href,
-        isWithArrow,
-        to,
-    } = props;
+    const { children, href, isWithArrow, to } = props;
     let linkElem;
 
-    if (href) { linkElem = 'a'; }
-    if (to) { linkElem = ReactRouterLink; }
+    if (href) {
+        linkElem = 'a';
+    }
+    if (to) {
+        linkElem = ReactRouterLink;
+    }
 
     const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
 
@@ -42,29 +41,30 @@ export const Button = (props: ButtonInterface) => {
         <Component {...props}>
             {children}
 
-            { isWithArrow &&
+            {isWithArrow && (
                 <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
-                    />
+                    <path d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" />
                 </svg>
-            }
+            )}
         </Component>
     );
 };
 
-const ButtonBase = styled.button<ButtonInterface>`
+const ButtonBase =
+    styled.button <
+    ButtonInterface >
+    `
     appearance: none;
     border: 1px solid transparent;
     display: inline-block;
     background-color: ${props => props.bgColor || colors.brandLight};
     background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'};
-    border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
-    color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
-    padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
+    border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'};
+    color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
+    padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'};
     white-space: ${props => props.isWithArrow && 'nowrap'};
     text-align: center;
-    font-size: ${props => props.isWithArrow ? '20px' : '18px'};
+    font-size: ${props => (props.isWithArrow ? '20px' : '18px')};
     text-decoration: none;
     cursor: pointer;
     outline: none;
@@ -77,12 +77,12 @@ const ButtonBase = styled.button<ButtonInterface>`
     }
 
     path {
-        fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
+        fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
     }
 
     &:hover {
-        background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'};
-        border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
+        background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'};
+        border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'};
 
         svg {
             transform: translate3d(2px, -2px, 0);
-- 
cgit v1.2.3


From 039b95c8c1423bb165cb18b48a6ee3671603fb1a Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:43:37 -0800
Subject: Janky but didn't want to mess anything else up, send in useAnchorTag
 boolean to force using anchortag

---
 packages/website/ts/@next/components/button.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 39c080f0b..4c8c0361e 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -22,13 +22,14 @@ interface ButtonInterface {
     to?: string;
     onClick?: () => any;
     theme?: ThemeInterface;
+    useAnchorTag?: boolean;
 }
 
 export const Button = (props: ButtonInterface) => {
-    const { children, href, isWithArrow, to } = props;
+    const { children, href, isWithArrow, to, useAnchorTag } = props;
     let linkElem;
 
-    if (href) {
+    if (href || useAnchorTag) {
         linkElem = 'a';
     }
     if (to) {
-- 
cgit v1.2.3


From 6d66476d35b67f91563c1a06f25fea9fc2fb4320 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:44:08 -0800
Subject: Action takes in useAnchorTag

---
 packages/website/ts/@next/components/definition.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index da26ee140..be0973bdd 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -7,7 +7,9 @@ import { Heading, Paragraph } from 'ts/@next/components/text';
 
 interface Action {
     label: string;
-    url: string;
+    url?: string;
+    onClick?: () => void;
+    useAnchorTag?: boolean;
 }
 
 interface Props {
@@ -46,7 +48,14 @@ export const Definition = (props: Props) => (
             {props.actions && (
                 <LinkWrap>
                     {props.actions.map((item, index) => (
-                        <Button key={`dlink-${index}`} href={item.url} isWithArrow={true} isAccentColor={true}>
+                        <Button
+                            key={`dlink-${index}`}
+                            href={item.url}
+                            onClick={item.onClick}
+                            isWithArrow={true}
+                            isAccentColor={true}
+                            useAnchorTag={item.useAnchorTag}
+                        >
                             {item.label}
                         </Button>
                     ))}
-- 
cgit v1.2.3


From c126d01fe3fa2f170a1c70da6ee2cb497875ef03 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:44:19 -0800
Subject: Conditional getStartedClick working on features list

---
 packages/website/ts/@next/pages/instant.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 26a296977..9c820a4e6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -20,6 +20,15 @@ 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',
@@ -29,7 +38,8 @@ const featuresData = [
         links: [
             {
                 label: 'Get Started',
-                url: '#',
+                onClick: getStartedClick,
+                useAnchorTag: true,
             },
             {
                 label: 'Explore the Docs',
@@ -75,15 +85,6 @@ 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,
-- 
cgit v1.2.3


From 0e8f0d1d53c5ecc4d7c88457c21ec423d86b2293 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:59:12 -0800
Subject: Fix URLs

---
 packages/website/ts/@next/pages/instant.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 9c820a4e6..a2df3ffc6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -43,7 +43,7 @@ const featuresData = [
             },
             {
                 label: 'Explore the Docs',
-                url: '#',
+                url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
             },
         ],
     },
@@ -55,7 +55,7 @@ const featuresData = [
         links: [
             {
                 label: 'Learn about affiliate fees',
-                url: '#',
+                url: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`,
             },
         ],
     },
@@ -67,11 +67,7 @@ const featuresData = [
         links: [
             {
                 label: 'Explore AssetBuyer',
-                url: '#',
-            },
-            {
-                label: 'Learn about liquidity',
-                url: '#',
+                url: `${WebsitePaths.Docs}/asset-buyer`,
             },
         ],
     },
@@ -137,7 +133,7 @@ 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} />
-- 
cgit v1.2.3


From 6e0d622a1559937d8867216d571156564c666c77 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 14:17:36 -0800
Subject: Open all new instant links in new window

---
 packages/website/ts/@next/components/button.tsx     |  6 ++++--
 packages/website/ts/@next/components/definition.tsx |  1 +
 packages/website/ts/@next/components/link.tsx       | 21 ++++++++++++++-------
 .../website/ts/@next/pages/instant/configurator.tsx | 13 +++++--------
 4 files changed, 24 insertions(+), 17 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 4c8c0361e..b686b27a2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -19,6 +19,7 @@ interface ButtonInterface {
     isInline?: boolean;
     href?: string;
     type?: string;
+    target?: string;
     to?: string;
     onClick?: () => any;
     theme?: ThemeInterface;
@@ -26,7 +27,7 @@ interface ButtonInterface {
 }
 
 export const Button = (props: ButtonInterface) => {
-    const { children, href, isWithArrow, to, useAnchorTag } = props;
+    const { children, href, isWithArrow, to, useAnchorTag, target } = props;
     let linkElem;
 
     if (href || useAnchorTag) {
@@ -37,9 +38,10 @@ export const Button = (props: ButtonInterface) => {
     }
 
     const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+    const targetProp = href && target ? { target } : {};
 
     return (
-        <Component {...props}>
+        <Component {...props} {...targetProp}>
             {children}
 
             {isWithArrow && (
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index be0973bdd..d203151b9 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -55,6 +55,7 @@ export const Definition = (props: Props) => (
                             isWithArrow={true}
                             isAccentColor={true}
                             useAnchorTag={item.useAnchorTag}
+                            target="_blank"
                         >
                             {item.label}
                         </Button>
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index c3633987a..0976a57a8 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -13,19 +13,23 @@ interface LinkInterface {
     theme?: {
         textColor: string;
     };
+    target?: string;
 }
 
 export const Link = (props: LinkInterface) => {
-    const {
-        children,
-        isNoArrow,
-        href,
-    } = props;
+    const { children, isNoArrow, href, target } = props;
 
     return (
         <StyledLink to={href} {...props}>
             {children}
-            {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>}
+            {!isNoArrow && (
+                <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z"
+                        fill="currentColor"
+                    />
+                </svg>
+            )}
         </StyledLink>
     );
 };
@@ -39,7 +43,10 @@ export const LinkWrap = styled.div`
     }
 `;
 
-const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+const StyledLink =
+    styled(ReactRouterLink) <
+    LinkInterface >
+    `
     display: ${props => !props.isBlock && 'inline-flex'};
     color: ${props => props.color || props.theme.linkColor};
     text-align: center;
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>
-- 
cgit v1.2.3