feat: add Select component and use for configurator

5 files changed, 86 insertions, 29 deletions

diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx
index 8a0bf24ff..5612dc25b 100644
--- a/packages/website/ts/pages/instant/action_link.tsx
+++ b/packages/website/ts/pages/instant/action_link.tsx
@@ -41,7 +41,7 @@ export class ActionLink extends React.Component<ActionLinkProps> {
         );
     }
 
-    private _handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    private readonly _handleClick = (event: React.MouseEvent<HTMLElement>) => {
         if (!_.isUndefined(this.props.onClick)) {
             this.props.onClick();
         } else if (!_.isUndefined(this.props.linkSrc)) {
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4f44a6160..e9ecad40d 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 
-import { Container } from 'ts/components/ui/container';
-
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
new file mode 100644
index 000000000..d63975e31
--- /dev/null
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -0,0 +1,38 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Select, SelectItemConfig } from 'ts/components/ui/select';
+
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
+
+export interface ConfigGeneratorProps {
+    value: ZeroExInstantBaseConfig;
+    onConfigChange: (config: ZeroExInstantBaseConfig) => void;
+}
+
+const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/'];
+
+export class ConfigGenerator extends React.Component<ConfigGeneratorProps> {
+    public render(): React.ReactNode {
+        const { value } = this.props;
+        return (
+            <Container>
+                <Select value={value.orderSource as string} items={this._generateItems()} />
+            </Container>
+        );
+    }
+    private readonly _generateItems = (): SelectItemConfig[] => {
+        return _.map(SRA_ENDPOINTS, endpoint => ({
+            text: endpoint,
+            onClick: this._handleSRASelection.bind(this, endpoint),
+        }));
+    };
+    private readonly _handleSRASelection = (sraEndpoint: string) => {
+        const newConfig = {
+            ...this.props.value,
+            orderSource: sraEndpoint,
+        };
+        this.props.onConfigChange(newConfig);
+    };
+}
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,
+        });
+    };
+}
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 6c6835311..1e187c9da 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -2,9 +2,9 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
-import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
 import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
+import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 import { utils } from 'ts/utils/utils';