feat(website): implement rest of links

1 files changed, 56 insertions, 50 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