3 files changed, 49 insertions, 27 deletions
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index e9ecad40d..fa0cebc62 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme';
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
-    overflow: hidden;
+    overflow: scroll;
     width: 600px;
     height: 500px;
     border-radius: 4px;
@@ -123,7 +123,7 @@ const customStyle = {
     },
     hljs: {
         display: 'block',
-        overflowX: 'auto',
+        overflowX: 'hidden',
         background: colors.instantSecondaryBackground,
         color: 'white',
         fontSize: '12px',
@@ -136,26 +136,12 @@ const customStyle = {
     },
 };
 
-export interface CodeDemoProps {}
+export interface CodeDemoProps {
+    children: string;
+}
 
-export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
-    const codeString = `<head>
-    <script src="https://instant.0xproject.com/instant.js"></script>
-</head>
-<body>
-    <script>
-        zeroExInstant.render({
-            liquiditySource: 'https://api.relayer.com/sra/v2/',
-            affiliateInfo: {
-                feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
-                feePercentage: 0.03
-            }
-        }, 'body');
-    </script>
-</body>`;
-    return (
-        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-            {codeString}
-        </SyntaxHighlighter>
-    );
-};
+export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
+    <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+        {props.children}
+    </SyntaxHighlighter>
+);
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index f4987c0de..0fb6d7ef8 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
@@ -26,6 +27,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     };
     public render(): React.ReactNode {
         const { hash } = this.props;
+        const codeToDisplay = this._generateCodeDemoCode();
         return (
             <Container
                 className="flex justify-center py4 px3"
@@ -47,7 +49,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                         </Text>
                         <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
                     </Container>
-                    <CodeDemo />
+                    <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
                 </Container>
             </Container>
         );
@@ -57,4 +59,38 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             instantConfig: config,
         });
     };
+    private readonly _generateCodeDemoCode = (): string => {
+        const { instantConfig } = this.state;
+        console.log(instantConfig.availableAssetDatas);
+        return `<head>
+        <script src="https://instant.0xproject.com/instant.js"></script>
+    </head>
+    <body>
+        <script>
+            zeroExInstant.render({
+                liquiditySource: '${instantConfig.orderSource}',${
+            !_.isUndefined(instantConfig.availableAssetDatas)
+                ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString(
+                      instantConfig.availableAssetDatas,
+                  )}`
+                : ''
+        }${
+            !_.isUndefined(instantConfig.affiliateInfo)
+                ? `affiliateInfo: {
+                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
+                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+                }`
+                : ''
+        }
+            }, 'body');
+        </script>
+    </body>`;
+    };
+    private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
+        const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
+        if (availableAssetDatas.length < 2) {
+            return `[${stringAvailableAssetDatas.join(', ')}]`;
+        }
+        return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`;
+    };
 }
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index c88958bbf..230a8496b 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -91,8 +91,8 @@ const FeatureItem = (props: FeatureItemProps) => {
             </Container>
             <Container className="flex" marginTop="28px">
                 {_.map(linkInfos, linkInfo => (
-                    <Container marginRight="32px">
-                        <ActionLink key={linkInfo.displayText} {...linkInfo} />
+                    <Container key={linkInfo.displayText} marginRight="32px">
+                        <ActionLink {...linkInfo} />
                     </Container>
                 ))}
             </Container>