feat(website): implement rest of links

3 files changed, 77 insertions, 55 deletions

diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 73be793d5..9c1668c1c 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -6,63 +6,65 @@ import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface FeatureProps {
     screenWidth: ScreenWidths;
+    onGetStartedClick: () => void;
 }
 
-export const Features = (props: FeatureProps) => (
-    <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
-        <FeatureItem
-            imgSrc="images/instant/feature_1.svg"
-            title="Support ERC-20 and ERC-721 tokens"
-            description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
-            linkInfos={[
-                {
-                    displayText: 'Get started',
-                    linkSrc: 'google.com',
-                },
-                {
-                    displayText: 'Explore the docs',
-                    linkSrc: 'google.com',
-                },
-            ]}
-            screenWidth={props.screenWidth}
-        />
-        <FeatureItem
-            imgSrc="images/instant/feature_2.svg"
-            title="Generate revenue for your business"
-            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."
-            linkInfos={[
-                {
-                    displayText: 'Learn about affiliate fees',
-                    linkSrc: 'google.com',
-                },
-            ]}
-            screenWidth={props.screenWidth}
-        />
-        <FeatureItem
-            imgSrc="images/instant/feature_3.svg"
-            title="Easy and Flexible Integration"
-            description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
-            linkInfos={[
-                {
-                    displayText: 'Explore AssetBuyer',
-                    linkSrc: 'google.com',
-                },
-                {
-                    displayText: 'Learn about liquidity',
-                    linkSrc: 'google.com',
-                },
-            ]}
-            screenWidth={props.screenWidth}
-        />
-    </Container>
-);
+export const Features = (props: FeatureProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const getStartedLinkInfo = {
+        displayText: 'Get started',
+        onClick: props.onGetStartedClick,
+    };
+    const exploreTheDocsLinkInfo = {
+        displayText: 'Explore the docs',
+        linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`,
+    };
+    const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo];
+    return (
+        <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
+            <FeatureItem
+                imgSrc="images/instant/feature_1.svg"
+                title="Support ERC-20 and ERC-721 tokens"
+                description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
+                linkInfos={tokenLinkInfos}
+                screenWidth={props.screenWidth}
+            />
+            <FeatureItem
+                imgSrc="images/instant/feature_2.svg"
+                title="Generate revenue for your business"
+                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."
+                linkInfos={[
+                    {
+                        displayText: 'Learn about affiliate fees',
+                        linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`,
+                    },
+                ]}
+                screenWidth={props.screenWidth}
+            />
+            <FeatureItem
+                imgSrc="images/instant/feature_3.svg"
+                title="Easy and Flexible Integration"
+                description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
+                linkInfos={[
+                    {
+                        displayText: 'Explore AssetBuyer',
+                        linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`,
+                    },
+                ]}
+                screenWidth={props.screenWidth}
+            />
+        </Container>
+    );
+};
 
 interface LinkInfo {
     displayText: string;
-    linkSrc: string;
+    linkSrc?: string;
+    onClick?: () => void;
 }
 
 interface FeatureItemProps {
@@ -95,7 +97,11 @@ const FeatureItem = (props: FeatureItemProps) => {
             <Container className="flex" marginTop="28px">
                 {_.map(linkInfos, linkInfo => {
                     const onClick = (event: React.MouseEvent<HTMLElement>) => {
-                        window.open(linkInfo.linkSrc, '_blank');
+                        if (!_.isUndefined(linkInfo.onClick)) {
+                            linkInfo.onClick();
+                        } else if (!_.isUndefined(linkInfo.linkSrc)) {
+                            utils.openUrl(linkInfo.linkSrc);
+                        }
                     };
                     return (
                         <Container
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index b758ef162..fa6bd1c33 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -56,18 +56,18 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                     isNightVersion={true}
                 />
                 <Container backgroundColor={colors.instantPrimaryBackground} />
-                <Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onHeaderCTAClick} />
+                <Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onGetStartedClick} />
                 <Screenshots screenWidth={this.props.screenWidth} />
-                <Features screenWidth={this.props.screenWidth} />
+                <Features screenWidth={this.props.screenWidth} onGetStartedClick={this._onGetStartedClick} />
                 {!this._isSmallScreen() && <Configurator hash={CONFIGURATOR_HASH} />}
                 <NeedMore screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </Container>
         );
     }
-    private readonly _onHeaderCTAClick = () => {
+    private readonly _onGetStartedClick = () => {
         if (this._isSmallScreen()) {
-            utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#About`);
+            utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`);
         } else {
             this._scrollToConfigurator();
         }
diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx
index 190b27f9a..e6d5c3694 100644
--- a/packages/website/ts/pages/instant/need_more.tsx
+++ b/packages/website/ts/pages/instant/need_more.tsx
@@ -5,6 +5,8 @@ import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 export interface NeedMoreProps {
     screenWidth: ScreenWidths;
@@ -32,11 +34,18 @@ export const NeedMore = (props: NeedMoreProps) => {
                             backgroundColor={colors.white}
                             fontColor={backgroundColor}
                             fontSize="18px"
+                            onClick={onGetInTouchClick}
                         >
                             Get in Touch
                         </Button>
                     </Container>
-                    <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
+                    <Button
+                        type="button"
+                        backgroundColor={colors.mediumBlue}
+                        fontColor={colors.white}
+                        fontSize="18px"
+                        onClick={onDocsClick}
+                    >
                         Explore the Docs
                     </Button>
                 </Container>
@@ -44,3 +53,10 @@ export const NeedMore = (props: NeedMoreProps) => {
         </Container>
     );
 };
+
+const onGetInTouchClick = () => {
+    utils.openUrl(constants.URL_ZEROEX_CHAT);
+};
+const onDocsClick = () => {
+    utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`);
+};