1 files changed, 101 insertions, 3 deletions
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c836739bb..2cb1a1c1c 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,12 +1,110 @@
+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 const Configurator = (props: ConfiguratorProps) => (
-    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} />
-);
+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.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}
+                },`
+                : ''
+        }${
+            !_.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                ]`;
+    };
+}