From 9e1a94266e775ac52ad8da0d825e6814457bacd4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 11:23:16 -0800
Subject: feat: have basic code syntax highlighting working

---
 packages/website/ts/pages/instant/configurator.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c836739bb..2314f968f 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { colors } from 'ts/style/colors';
 
 export interface ConfiguratorProps {
@@ -8,5 +9,9 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} />
+    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
+        <Container width="50%">
+            <CodeDemo />
+        </Container>
+    </Container>
 );
-- 
cgit v1.2.3


From 6b952c4236b6268537afc6169ac003ffa089f6cd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 13:01:41 -0800
Subject: feat: improve styling of code demo component

---
 packages/website/ts/pages/instant/configurator.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 2314f968f..09a51d0bb 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -9,9 +9,8 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
-        <Container width="50%">
-            <CodeDemo />
-        </Container>
+    <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
+        <Container> Forms </Container>
+        <CodeDemo />
     </Container>
 );
-- 
cgit v1.2.3


From a20d54781468c38c1dc524e976db93b80ad2a043 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 13:45:40 -0800
Subject: feat: implement configurator layout

---
 packages/website/ts/pages/instant/configurator.tsx | 27 +++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 09a51d0bb..29a3e2b1e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ActionLink } from 'ts/pages/instant/action_link';
 import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { colors } from 'ts/style/colors';
 
@@ -9,8 +11,27 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
-        <Container> Forms </Container>
-        <CodeDemo />
+    <Container
+        className="flex justify-center py4 px3"
+        id={props.hash}
+        backgroundColor={colors.instantTertiaryBackground}
+    >
+        <Container className="mx3">
+            <Container className="mb3">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    0x Instant Configurator
+                </Text>
+            </Container>
+            <Container height="400px" width="300px" backgroundColor="white" />
+        </Container>
+        <Container className="mx3">
+            <Container className="mb3 flex justify-between">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    Code Snippet
+                </Text>
+                <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+            </Container>
+            <CodeDemo />
+        </Container>
     </Container>
 );
-- 
cgit v1.2.3


From 9ebb0960254f1dcfb9513cbc6203840a87ee60e4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 15:57:35 -0800
Subject: feat: add Select component and use for configurator

---
 packages/website/ts/pages/instant/configurator.tsx | 70 ++++++++++++++--------
 1 file changed, 46 insertions(+), 24 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 29a3e2b1e..cf9985675 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -4,34 +4,56 @@ import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { ActionLink } from 'ts/pages/instant/action_link';
 import { CodeDemo } from 'ts/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/pages/instant/config_generator';
 import { colors } from 'ts/style/colors';
 
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
+
 export interface ConfiguratorProps {
     hash: string;
 }
 
-export const Configurator = (props: ConfiguratorProps) => (
-    <Container
-        className="flex justify-center py4 px3"
-        id={props.hash}
-        backgroundColor={colors.instantTertiaryBackground}
-    >
-        <Container className="mx3">
-            <Container className="mb3">
-                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
-                    0x Instant Configurator
-                </Text>
-            </Container>
-            <Container height="400px" width="300px" backgroundColor="white" />
-        </Container>
-        <Container className="mx3">
-            <Container className="mb3 flex justify-between">
-                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
-                    Code Snippet
-                </Text>
-                <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+export interface ConfiguratorState {
+    instantConfig: ZeroExInstantBaseConfig;
+}
+
+export class Configurator extends React.Component<ConfiguratorProps> {
+    public state = {
+        instantConfig: {
+            orderSource: 'https://api.radarrelay.com/0x/v2/',
+        },
+    };
+    public render(): React.ReactNode {
+        const { hash } = this.props;
+        return (
+            <Container
+                className="flex justify-center py4 px3"
+                id={hash}
+                backgroundColor={colors.instantTertiaryBackground}
+            >
+                <Container className="mx3">
+                    <Container className="mb3">
+                        <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                            0x Instant Configurator
+                        </Text>
+                    </Container>
+                    <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
+                </Container>
+                <Container className="mx3">
+                    <Container className="mb3 flex justify-between">
+                        <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                            Code Snippet
+                        </Text>
+                        <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+                    </Container>
+                    <CodeDemo />
+                </Container>
             </Container>
-            <CodeDemo />
-        </Container>
-    </Container>
-);
+        );
+    }
+    private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
+        this.setState({
+            instantConfig: config,
+        });
+    };
+}
-- 
cgit v1.2.3


From a849af8a48ac9346ff0da92b4c643cd66dfd855b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 30 Nov 2018 10:25:36 -0800
Subject: feat: implement multi token select component

---
 packages/website/ts/pages/instant/configurator.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index cf9985675..f4987c0de 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -18,9 +18,10 @@ export interface ConfiguratorState {
 }
 
 export class Configurator extends React.Component<ConfiguratorProps> {
-    public state = {
+    public state: ConfiguratorState = {
         instantConfig: {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
+            availableAssetDatas: [],
         },
     };
     public render(): React.ReactNode {
-- 
cgit v1.2.3


From 566953d5e164c389774136b750e7975c666eccb3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 30 Nov 2018 11:08:49 -0800
Subject: feat: implement code generation

---
 packages/website/ts/pages/instant/configurator.tsx | 38 +++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

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


From 659ae0dcca070ce771a7329d8b4bc922ed1baf4a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 12:24:37 -0800
Subject: feat: implement basic feeRecipient address in config generator

---
 packages/website/ts/pages/instant/configurator.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 0fb6d7ef8..e72f07a70 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -23,6 +23,10 @@ export class Configurator extends React.Component<ConfiguratorProps> {
         instantConfig: {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
             availableAssetDatas: [],
+            affiliateInfo: {
+                feeRecipient: '',
+                feePercentage: 0.1,
+            },
         },
     };
     public render(): React.ReactNode {
@@ -61,7 +65,6 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     };
     private readonly _generateCodeDemoCode = (): string => {
         const { instantConfig } = this.state;
-        console.log(instantConfig.availableAssetDatas);
         return `<head>
         <script src="https://instant.0xproject.com/instant.js"></script>
     </head>
@@ -69,18 +72,18 @@ export class Configurator extends React.Component<ConfiguratorProps> {
         <script>
             zeroExInstant.render({
                 liquiditySource: '${instantConfig.orderSource}',${
+            !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
+                ? `\n\t\taffiliateInfo: {
+                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
+                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+                }`
+                : ''
+        }${
             !_.isUndefined(instantConfig.availableAssetDatas)
                 ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString(
                       instantConfig.availableAssetDatas,
                   )}`
                 : ''
-        }${
-            !_.isUndefined(instantConfig.affiliateInfo)
-                ? `affiliateInfo: {
-                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
-                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-                }`
-                : ''
         }
             }, 'body');
         </script>
-- 
cgit v1.2.3


From 4d7e5b4e5de8dc01703d1ca6d00b23cbd917ea28 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 12:54:29 -0800
Subject: feat: add fee percentage slier

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index e72f07a70..0ce1d9810 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -25,7 +25,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             availableAssetDatas: [],
             affiliateInfo: {
                 feeRecipient: '',
-                feePercentage: 0.1,
+                feePercentage: 0.01,
             },
         },
     };
-- 
cgit v1.2.3


From 80a25e4b3871843d3ec4c4f3eaa86c502c4d487d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 14:30:38 -0800
Subject: feat: add fee percentage slider

---
 packages/website/ts/pages/instant/configurator.tsx | 32 +++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 0ce1d9810..5700bdc1d 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -46,7 +46,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                     </Container>
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Container>
-                <Container className="mx3">
+                <Container className="mx3" height="550px">
                     <Container className="mb3 flex justify-between">
                         <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
                             Code Snippet
@@ -66,34 +66,34 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     private readonly _generateCodeDemoCode = (): string => {
         const { instantConfig } = this.state;
         return `<head>
-        <script src="https://instant.0xproject.com/instant.js"></script>
-    </head>
-    <body>
-        <script>
-            zeroExInstant.render({
-                liquiditySource: '${instantConfig.orderSource}',${
+    <script src="https://instant.0xproject.com/instant.js"></script>
+</head>
+<body>
+    <script>
+        zeroExInstant.render({
+            liquiditySource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
-                ? `\n\t\taffiliateInfo: {
-                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
-                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-                }`
+                ? `\n            affiliateInfo: {
+                feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
+                feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+            }`
                 : ''
         }${
             !_.isUndefined(instantConfig.availableAssetDatas)
-                ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString(
+                ? `\n            availableAssetDatas: ${this._renderAvailableAssetDatasString(
                       instantConfig.availableAssetDatas,
                   )}`
                 : ''
         }
-            }, 'body');
-        </script>
-    </body>`;
+        }, '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]`;
+        return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n            ]`;
     };
 }
-- 
cgit v1.2.3


From 7f8dc8bb1bd0d5249e43a8688f30718ec49d9be5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 16:51:55 -0800
Subject: fix: address to lowercase and explore the docs leads to correct wiki

---
 packages/website/ts/pages/instant/configurator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 5700bdc1d..725b02fae 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -51,7 +51,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                         <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
                             Code Snippet
                         </Text>
-                        <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+                        <ActionLink displayText="Explore the Docs" linkSrc="/wiki#Get-Started" color={colors.grey} />
                     </Container>
                     <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
                 </Container>
@@ -74,7 +74,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             liquiditySource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
                 ? `\n            affiliateInfo: {
-                feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
+                feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
                 feePercentage: ${instantConfig.affiliateInfo.feePercentage}
             }`
                 : ''
-- 
cgit v1.2.3


From 42d6284cf7d26695efe7eac1a9f2c4bb43c3ed81 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 18:00:30 -0800
Subject: fix: change liquiditySource to orderSource

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 725b02fae..9f1fa8359 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -71,7 +71,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
 <body>
     <script>
         zeroExInstant.render({
-            liquiditySource: '${instantConfig.orderSource}',${
+            orderSource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
                 ? `\n            affiliateInfo: {
                 feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
-- 
cgit v1.2.3


From 27cb0386a3da6bc725035c0f150a3ab890195c1b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Dec 2018 10:58:43 -0800
Subject: feat: update configurator snippet to actually work if copy and pasted

---
 packages/website/ts/pages/instant/configurator.tsx | 40 +++++++++++++---------
 1 file changed, 23 insertions(+), 17 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 9f1fa8359..e3766057e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -22,7 +22,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     public state: ConfiguratorState = {
         instantConfig: {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
-            availableAssetDatas: [],
+            availableAssetDatas: undefined,
             affiliateInfo: {
                 feeRecipient: '',
                 feePercentage: 0.01,
@@ -65,35 +65,41 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     };
     private readonly _generateCodeDemoCode = (): string => {
         const { instantConfig } = this.state;
-        return `<head>
-    <script src="https://instant.0xproject.com/instant.js"></script>
-</head>
-<body>
-    <script>
-        zeroExInstant.render({
-            orderSource: '${instantConfig.orderSource}',${
+        return `<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <script src="https://instant.0xproject.com/instant.js"></script>
+    </head>
+    <body>
+        <script>
+            zeroExInstant.render({
+                orderSource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
-                ? `\n            affiliateInfo: {
-                feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
-                feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-            }`
+                ? `\n                affiliateInfo: {
+                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
+                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+                }`
                 : ''
         }${
             !_.isUndefined(instantConfig.availableAssetDatas)
-                ? `\n            availableAssetDatas: ${this._renderAvailableAssetDatasString(
+                ? `\n                availableAssetDatas: ${this._renderAvailableAssetDatasString(
                       instantConfig.availableAssetDatas,
                   )}`
                 : ''
         }
-        }, 'body');
-    </script>
-</body>`;
+            }, 'body');
+        </script>
+    </body>
+</html>`;
     };
     private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
         const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
         if (availableAssetDatas.length < 2) {
             return `[${stringAvailableAssetDatas.join(', ')}]`;
         }
-        return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n            ]`;
+        return `[\n                    ${stringAvailableAssetDatas.join(
+            ', \n                    ',
+        )}\n                ]`;
     };
 }
-- 
cgit v1.2.3


From 4e03c754e7353b2db71f6da17d75bda4e57ba467 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Dec 2018 12:43:39 -0800
Subject: fix: use WebsitePaths type and update wiki link to new link

---
 packages/website/ts/pages/instant/configurator.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index e3766057e..d19a5b4fe 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -7,6 +7,7 @@ import { ActionLink } from 'ts/pages/instant/action_link';
 import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { ConfigGenerator } from 'ts/pages/instant/config_generator';
 import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
 
 import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
@@ -51,7 +52,11 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                         <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
                             Code Snippet
                         </Text>
-                        <ActionLink displayText="Explore the Docs" linkSrc="/wiki#Get-Started" color={colors.grey} />
+                        <ActionLink
+                            displayText="Explore the Docs"
+                            linkSrc={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
+                            color={colors.grey}
+                        />
                     </Container>
                     <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
                 </Container>
-- 
cgit v1.2.3


From cba8dc8a759cb8bebe289af7e6fc115af2ebe4ed Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 5 Dec 2018 12:34:24 -0800
Subject: chore: make default fee percentage in configurator 0

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index d19a5b4fe..a6c792edf 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -26,7 +26,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             availableAssetDatas: undefined,
             affiliateInfo: {
                 feeRecipient: '',
-                feePercentage: 0.01,
+                feePercentage: 0,
             },
         },
     };
-- 
cgit v1.2.3


From c1698aa634a2c73203708f83b050640d314e3066 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 5 Dec 2018 23:08:18 -0800
Subject: fix: add comma to affiliateInfo config in configurator

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index a6c792edf..2cb1a1c1c 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -84,7 +84,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                 ? `\n                affiliateInfo: {
                     feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
                     feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-                }`
+                },`
                 : ''
         }${
             !_.isUndefined(instantConfig.availableAssetDatas)
-- 
cgit v1.2.3


From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 14 Dec 2018 14:46:05 -0800
Subject: fix(website) replace 0xproject.com with 0x.org

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 2cb1a1c1c..a9dd5864c 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -74,7 +74,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
 <html>
     <head>
         <meta charset="utf-8" />
-        <script src="https://instant.0xproject.com/instant.js"></script>
+        <script src="https://instant.0x.org/instant.js"></script>
     </head>
     <body>
         <script>
-- 
cgit v1.2.3


From 473537e6e7e6b323b3768a479e1c2574a755c12c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 19 Dec 2018 15:56:12 -0800
Subject: remove unused instant pages

---
 packages/website/ts/pages/instant/configurator.tsx | 110 ---------------------
 1 file changed, 110 deletions(-)
 delete mode 100644 packages/website/ts/pages/instant/configurator.tsx

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
deleted file mode 100644
index a9dd5864c..000000000
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-import { ActionLink } from 'ts/pages/instant/action_link';
-import { CodeDemo } from 'ts/pages/instant/code_demo';
-import { ConfigGenerator } from 'ts/pages/instant/config_generator';
-import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-
-import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
-
-export interface ConfiguratorProps {
-    hash: string;
-}
-
-export interface ConfiguratorState {
-    instantConfig: ZeroExInstantBaseConfig;
-}
-
-export class Configurator extends React.Component<ConfiguratorProps> {
-    public state: ConfiguratorState = {
-        instantConfig: {
-            orderSource: 'https://api.radarrelay.com/0x/v2/',
-            availableAssetDatas: undefined,
-            affiliateInfo: {
-                feeRecipient: '',
-                feePercentage: 0,
-            },
-        },
-    };
-    public render(): React.ReactNode {
-        const { hash } = this.props;
-        const codeToDisplay = this._generateCodeDemoCode();
-        return (
-            <Container
-                className="flex justify-center py4 px3"
-                id={hash}
-                backgroundColor={colors.instantTertiaryBackground}
-            >
-                <Container className="mx3">
-                    <Container className="mb3">
-                        <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
-                            0x Instant Configurator
-                        </Text>
-                    </Container>
-                    <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
-                </Container>
-                <Container className="mx3" height="550px">
-                    <Container className="mb3 flex justify-between">
-                        <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
-                            Code Snippet
-                        </Text>
-                        <ActionLink
-                            displayText="Explore the Docs"
-                            linkSrc={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
-                            color={colors.grey}
-                        />
-                    </Container>
-                    <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
-                </Container>
-            </Container>
-        );
-    }
-    private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
-        this.setState({
-            instantConfig: config,
-        });
-    };
-    private readonly _generateCodeDemoCode = (): string => {
-        const { instantConfig } = this.state;
-        return `<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <script src="https://instant.0x.org/instant.js"></script>
-    </head>
-    <body>
-        <script>
-            zeroExInstant.render({
-                orderSource: '${instantConfig.orderSource}',${
-            !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
-                ? `\n                affiliateInfo: {
-                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
-                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-                },`
-                : ''
-        }${
-            !_.isUndefined(instantConfig.availableAssetDatas)
-                ? `\n                availableAssetDatas: ${this._renderAvailableAssetDatasString(
-                      instantConfig.availableAssetDatas,
-                  )}`
-                : ''
-        }
-            }, 'body');
-        </script>
-    </body>
-</html>`;
-    };
-    private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
-        const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
-        if (availableAssetDatas.length < 2) {
-            return `[${stringAvailableAssetDatas.join(', ')}]`;
-        }
-        return `[\n                    ${stringAvailableAssetDatas.join(
-            ', \n                    ',
-        )}\n                ]`;
-    };
-}
-- 
cgit v1.2.3


From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 20 Dec 2018 16:01:53 -0800
Subject: feat: move all @next files to non @next directory

---
 packages/website/ts/pages/instant/configurator.tsx | 104 +++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 packages/website/ts/pages/instant/configurator.tsx

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
new file mode 100644
index 000000000..7c67e6333
--- /dev/null
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -0,0 +1,104 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CodeDemo } from 'ts/@next/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
+
+import { Link } from 'ts/@next/components/link';
+import { Column, FlexWrap } from 'ts/@next/components/newLayout';
+import { Heading } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
+
+import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+
+export interface ConfiguratorState {
+    instantConfig: ZeroExInstantBaseConfig;
+}
+
+export class Configurator extends React.Component {
+    public state: ConfiguratorState = {
+        instantConfig: {
+            orderSource: 'https://api.radarrelay.com/0x/v2/',
+            availableAssetDatas: undefined,
+            affiliateInfo: {
+                feeRecipient: '',
+                feePercentage: 0,
+            },
+        },
+    };
+    public render(): React.ReactNode {
+        const codeToDisplay = this._generateCodeDemoCode();
+        return (
+            <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} target="_blank">
+                            Explore the Docs
+                        </Link>
+                    </HeadingWrapper>
+                    <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
+                </Column>
+            </FlexWrap>
+        );
+    }
+    private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
+        this.setState({
+            instantConfig: config,
+        });
+    };
+    private readonly _generateCodeDemoCode = (): string => {
+        const { instantConfig } = this.state;
+        return `<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <script src="https://instant.0x.org/instant.js"></script>
+    </head>
+    <body>
+        <script>
+            zeroExInstant.render({
+                orderSource: '${instantConfig.orderSource}',${
+            !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
+                ? `\n                affiliateInfo: {
+                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
+                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+                },`
+                : ''
+        }${
+            !_.isUndefined(instantConfig.availableAssetDatas)
+                ? `\n                availableAssetDatas: ${this._renderAvailableAssetDatasString(
+                      instantConfig.availableAssetDatas,
+                  )}`
+                : ''
+        }
+                }, 'body');
+            </script>
+        </body>
+    </html>`;
+    };
+    private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
+        const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
+        if (availableAssetDatas.length < 2) {
+            return `[${stringAvailableAssetDatas.join(', ')}]`;
+        }
+        return `[\n                    ${stringAvailableAssetDatas.join(
+            ', \n                    ',
+        )}\n                ]`;
+    };
+}
+
+const HeadingWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+
+    a {
+        transform: translateY(-8px);
+    }
+`;
-- 
cgit v1.2.3


From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 20 Dec 2018 16:03:06 -0800
Subject: feat: remove @next directory from all imports

---
 packages/website/ts/pages/instant/configurator.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 7c67e6333..c5f7b06a5 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -2,12 +2,12 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { CodeDemo } from 'ts/@next/pages/instant/code_demo';
-import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/pages/instant/config_generator';
 
-import { Link } from 'ts/@next/components/link';
-import { Column, FlexWrap } from 'ts/@next/components/newLayout';
-import { Heading } from 'ts/@next/components/text';
+import { Link } from 'ts/components/link';
+import { Column, FlexWrap } from 'ts/components/newLayout';
+import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
 import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
-- 
cgit v1.2.3


From ba7c8d924429a96f6d2b3280faa6b508b582f557 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 20 Dec 2018 16:19:52 -0800
Subject: feat: make project build by adding back old footer component

---
 packages/website/ts/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/configurator.tsx')

diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c5f7b06a5..a63e1752e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -10,7 +10,7 @@ import { Column, FlexWrap } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
-import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
 export interface ConfiguratorState {
     instantConfig: ZeroExInstantBaseConfig;
-- 
cgit v1.2.3