From 723dd2bcde0a3c8277be7a000657f4acde0dfa4e Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 19:45:11 +0100
Subject: WIP configurator

---
 .../ts/@next/pages/instant/config_generator.tsx    | 314 +++++++++++++++++++++
 .../ts/@next/pages/instant/configurator.tsx        | 109 +++++++
 2 files changed, 423 insertions(+)
 create mode 100644 packages/website/ts/@next/pages/instant/config_generator.tsx
 create mode 100644 packages/website/ts/@next/pages/instant/configurator.tsx

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
new file mode 100644
index 000000000..00e491431
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -0,0 +1,314 @@
+import { StandardRelayerAPIOrderProvider } from '@0x/asset-buyer';
+import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses';
+import { assetDataUtils } from '@0x/order-utils';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { CheckMark } from 'ts/components/ui/check_mark';
+import { Container } from 'ts/components/ui/container';
+import { MultiSelect } from 'ts/components/ui/multi_select';
+import { Select, SelectItemConfig } from 'ts/components/ui/select';
+import { Spinner } from 'ts/components/ui/spinner';
+import { Text } from 'ts/components/ui/text';
+import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
+import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+// New components
+import { Heading, Paragraph } from 'ts/@next/components/text';
+
+import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map';
+import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+
+export interface ConfigGeneratorProps {
+    value: ZeroExInstantBaseConfig;
+    onConfigChange: (config: ZeroExInstantBaseConfig) => void;
+}
+
+export interface ConfigGeneratorState {
+    isLoadingAvailableTokens: boolean;
+    // Address to token info
+    availableTokens?: ObjectMap<ERC20AssetMetaData>;
+}
+
+const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/'];
+
+export class ConfigGenerator extends React.Component<ConfigGeneratorProps, ConfigGeneratorState> {
+    public state: ConfigGeneratorState = {
+        isLoadingAvailableTokens: true,
+    };
+    public componentDidMount(): void {
+        // tslint:disable-next-line:no-floating-promises
+        this._setAvailableAssetsFromOrderProvider();
+    }
+    public componentDidUpdate(prevProps: ConfigGeneratorProps): void {
+        if (prevProps.value.orderSource !== this.props.value.orderSource) {
+            // tslint:disable-next-line:no-floating-promises
+            this._setAvailableAssetsFromOrderProvider();
+            const newConfig: ZeroExInstantBaseConfig = {
+                ...this.props.value,
+                availableAssetDatas: undefined,
+            };
+            this.props.onConfigChange(newConfig);
+        }
+    }
+    public render(): React.ReactNode {
+        const { value } = this.props;
+        if (!_.isString(value.orderSource)) {
+            throw new Error('ConfigGenerator component only supports string values as an orderSource.');
+        }
+        return (
+            <Container minWidth="350px">
+                <ConfigGeneratorSection title="Standard relayer API endpoint">
+                    <Select value={value.orderSource} items={this._generateItems()} />
+                </ConfigGeneratorSection>
+                <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
+                    {this._renderTokenMultiSelectOrSpinner()}
+                </ConfigGeneratorSection>
+                <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}>
+                    <ConfigGeneratorAddressInput
+                        value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''}
+                        onChange={this._handleAffiliateAddressChange}
+                    />
+                </ConfigGeneratorSection>
+                <ConfigGeneratorSection
+                    title="Fee percentage"
+                    actionText="Learn more"
+                    onActionTextClick={this._handleAffiliatePercentageLearnMoreClick}
+                >
+                    <FeePercentageSlider
+                        value={value.affiliateInfo.feePercentage}
+                        onChange={this._handleAffiliatePercentageChange}
+                        isDisabled={
+                            _.isUndefined(value.affiliateInfo) ||
+                            _.isUndefined(value.affiliateInfo.feeRecipient) ||
+                            _.isEmpty(value.affiliateInfo.feeRecipient)
+                        }
+                    />
+                </ConfigGeneratorSection>
+            </Container>
+        );
+    }
+    private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => {
+        if (_.isEmpty(this.state.availableTokens)) {
+            return {
+                title: 'What tokens can users buy?',
+            };
+        }
+        if (_.isUndefined(this.props.value.availableAssetDatas)) {
+            return {
+                title: 'What tokens can users buy?',
+                actionText: 'Unselect All',
+                onActionTextClick: this._handleUnselectAllClick,
+            };
+        }
+        return {
+            title: 'What tokens can users buy?',
+            actionText: 'Select All',
+            onActionTextClick: this._handleSelectAllClick,
+        };
+    };
+    private readonly _generateItems = (): SelectItemConfig[] => {
+        return _.map(SRA_ENDPOINTS, endpoint => ({
+            text: endpoint,
+            onClick: this._handleSRASelection.bind(this, endpoint),
+        }));
+    };
+    private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
+        window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
+    };
+    private readonly _handleSRASelection = (sraEndpoint: string) => {
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...this.props.value,
+            orderSource: sraEndpoint,
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => {
+        const oldConfig: ZeroExInstantBaseConfig = this.props.value;
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...oldConfig,
+            affiliateInfo: {
+                feeRecipient: address,
+                feePercentage: oldConfig.affiliateInfo.feePercentage,
+            },
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _handleAffiliatePercentageChange = (value: number) => {
+        const oldConfig: ZeroExInstantBaseConfig = this.props.value;
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...oldConfig,
+            affiliateInfo: {
+                feeRecipient: oldConfig.affiliateInfo.feeRecipient,
+                feePercentage: value,
+            },
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _handleSelectAllClick = () => {
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...this.props.value,
+            availableAssetDatas: undefined,
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _handleUnselectAllClick = () => {
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...this.props.value,
+            availableAssetDatas: [],
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _handleTokenClick = (assetData: string) => {
+        const { value } = this.props;
+        let newAvailableAssetDatas: string[] = [];
+        const allKnownAssetDatas = _.keys(this.state.availableTokens);
+        const availableAssetDatas = value.availableAssetDatas;
+        if (_.isUndefined(availableAssetDatas)) {
+            // It being undefined means it's all tokens.
+            newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData);
+        } else if (!_.includes(availableAssetDatas, assetData)) {
+            // Add it
+            newAvailableAssetDatas = [...availableAssetDatas, assetData];
+            if (newAvailableAssetDatas.length === allKnownAssetDatas.length) {
+                // If all tokens are manually selected, just show none.
+                newAvailableAssetDatas = undefined;
+            }
+        } else {
+            // Remove it
+            newAvailableAssetDatas = _.pull(availableAssetDatas, assetData);
+        }
+        const newConfig: ZeroExInstantBaseConfig = {
+            ...this.props.value,
+            availableAssetDatas: newAvailableAssetDatas,
+        };
+        this.props.onConfigChange(newConfig);
+    };
+    private readonly _setAvailableAssetsFromOrderProvider = async (): Promise<void> => {
+        const { value } = this.props;
+        if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) {
+            this.setState({ isLoadingAvailableTokens: true });
+            const networkId = constants.NETWORK_ID_MAINNET;
+            const sraOrderProvider = new StandardRelayerAPIOrderProvider(value.orderSource, networkId);
+            const etherTokenAddress = getContractAddressesForNetworkOrThrow(networkId).etherToken;
+            const etherTokenAssetData = assetDataUtils.encodeERC20AssetData(etherTokenAddress);
+            const assetDatas = await sraOrderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData);
+            const availableTokens = _.reduce(
+                assetDatas,
+                (acc, assetData) => {
+                    const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData;
+                    if (metaDataIfExists) {
+                        acc[assetData] = metaDataIfExists;
+                    }
+                    return acc;
+                },
+                {} as ObjectMap<ERC20AssetMetaData>,
+            );
+            this.setState({ availableTokens, isLoadingAvailableTokens: false });
+        }
+    };
+    private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => {
+        const { value } = this.props;
+        const { availableTokens, isLoadingAvailableTokens } = this.state;
+        const multiSelectHeight = '200px';
+        if (isLoadingAvailableTokens) {
+            return (
+                <Container
+                    className="flex flex-column items-center justify-center"
+                    height={multiSelectHeight}
+                    backgroundColor={colors.white}
+                    borderRadius="4px"
+                    width="100%"
+                >
+                    <Container position="relative" left="12px" marginBottom="20px">
+                        <Spinner />
+                    </Container>
+                    <Text fontSize="16px">Loading...</Text>
+                </Container>
+            );
+        }
+        const availableAssetDatas = _.keys(availableTokens);
+        if (availableAssetDatas.length === 0) {
+            return (
+                <Container
+                    className="flex flex-column items-center justify-center"
+                    height={multiSelectHeight}
+                    backgroundColor={colors.white}
+                    borderRadius="4px"
+                    width="100%"
+                >
+                    <Text fontSize="16px">No tokens available. Try another endpoint?</Text>
+                </Container>
+            );
+        }
+        const items = _.map(_.keys(availableTokens), assetData => {
+            const metaData = availableTokens[assetData];
+            return {
+                value: assetData,
+                renderItemContent: (isSelected: boolean) => (
+                    <Container className="flex items-center">
+                        <Container marginRight="10px">
+                            <CheckMark isChecked={isSelected} />
+                        </Container>
+                        <Text
+                            fontSize="16px"
+                            fontColor={isSelected ? colors.mediumBlue : colors.darkerGrey}
+                            fontWeight={300}
+                        >
+                            <b>{metaData.symbol.toUpperCase()}</b> — {metaData.name}
+                        </Text>
+                    </Container>
+                ),
+                onClick: this._handleTokenClick.bind(this, assetData),
+            };
+        });
+        return <MultiSelect items={items} selectedValues={value.availableAssetDatas} height={multiSelectHeight} />;
+    };
+}
+
+export interface ConfigGeneratorSectionProps {
+    title: string;
+    actionText?: string;
+    onActionTextClick?: () => void;
+    isOptional?: boolean;
+    marginBottom?: string;
+}
+
+export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = ({
+    title,
+    actionText,
+    onActionTextClick,
+    isOptional,
+    marginBottom,
+    children,
+}) => (
+    <Container marginBottom={marginBottom}>
+        <Container marginBottom="10px" className="flex justify-between items-center">
+            <Container>
+                <Heading size="small" isNoMargin={true}>
+                    {title}
+                </Heading>
+                {isOptional && (
+                    <Text fontColor={colors.grey} fontSize="16px" lineHeight="18px" display="inline">
+                        {' '}
+                        (optional)
+                    </Text>
+                )}
+            </Container>
+            {actionText && (
+                <Text fontSize="12px" fontColor={colors.grey} onClick={onActionTextClick}>
+                    {actionText}
+                </Text>
+            )}
+        </Container>
+        {children}
+    </Container>
+);
+
+ConfigGeneratorSection.defaultProps = {
+    marginBottom: '30px',
+};
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
new file mode 100644
index 000000000..354a7c205
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -0,0 +1,109 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
+import { CodeDemo } from 'ts/pages/instant/code_demo';
+import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
+import { Heading, Paragraph } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
+import { Link } from 'ts/@next/components/link';
+
+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 (
+            <FlexWrap
+                isFlex={true}
+            >
+                <Column width="442px">
+                    <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
+                </Column>
+                <Column width="560px">
+                    <HeadingWrapper>
+                        <Heading size="small">Code Snippet</Heading>
+                        <Link
+                            href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
+                            isBlock={true}
+                        >
+                            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.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                ]`;
+    };
+}
+
+const HeadingWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
-- 
cgit 


From 1c413e632b3a71453a523d68507e0f464f0f61bc Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 17:38:18 +0100
Subject: Styled configurator

---
 .../website/ts/@next/pages/instant/code_demo.tsx   | 179 +++++++++++++++++++++
 .../ts/@next/pages/instant/config_generator.tsx    |  74 ++++++---
 .../instant/config_generator_address_input.tsx     |  90 +++++++++++
 .../ts/@next/pages/instant/configurator.tsx        |  12 +-
 packages/website/ts/@next/pages/instant/select.tsx |  66 ++++++++
 5 files changed, 391 insertions(+), 30 deletions(-)
 create mode 100644 packages/website/ts/@next/pages/instant/code_demo.tsx
 create mode 100644 packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
 create mode 100644 packages/website/ts/@next/pages/instant/select.tsx

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
new file mode 100644
index 000000000..fe11175d5
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/code_demo.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
+
+const CustomPre = styled.pre`
+    margin: 0px;
+    line-height: 24px;
+    overflow: scroll;
+    width: 100%;
+    height: 100%;
+    max-height: 800px;
+    border-radius: 4px;
+    code {
+        background-color: inherit !important;
+        border-radius: 0px;
+        font-family: 'Roboto Mono', sans-serif;
+        border: none;
+    }
+    code:first-of-type {
+        background-color: #060D0D !important;
+        color: #999;
+        min-height: 100%;
+        text-align: center;
+        margin-right: 15px;
+        line-height: 25px;
+        padding: 10px 7px !important;
+    }
+    code:last-of-type {
+        position: relative;
+        top: 10px;
+        top: 0;
+        padding-top: 11px;
+        display: inline-block;
+        line-height: 25px;
+    }
+`;
+
+const customStyle = {
+    'hljs-comment': {
+        color: '#7e7887',
+    },
+    'hljs-quote': {
+        color: '#7e7887',
+    },
+    'hljs-variable': {
+        color: '#be4678',
+    },
+    'hljs-template-variable': {
+        color: '#be4678',
+    },
+    'hljs-attribute': {
+        color: '#be4678',
+    },
+    'hljs-regexp': {
+        color: '#be4678',
+    },
+    'hljs-link': {
+        color: '#be4678',
+    },
+    'hljs-tag': {
+        color: '#61f5ff',
+    },
+    'hljs-name': {
+        color: '#61f5ff',
+    },
+    'hljs-selector-id': {
+        color: '#be4678',
+    },
+    'hljs-selector-class': {
+        color: '#be4678',
+    },
+    'hljs-number': {
+        color: '#c994ff',
+    },
+    'hljs-meta': {
+        color: '#61f5ff',
+    },
+    'hljs-built_in': {
+        color: '#aa573c',
+    },
+    'hljs-builtin-name': {
+        color: '#aa573c',
+    },
+    'hljs-literal': {
+        color: '#aa573c',
+    },
+    'hljs-type': {
+        color: '#aa573c',
+    },
+    'hljs-params': {
+        color: '#aa573c',
+    },
+    'hljs-string': {
+        color: '#bcff88',
+    },
+    'hljs-symbol': {
+        color: '#2a9292',
+    },
+    'hljs-bullet': {
+        color: '#2a9292',
+    },
+    'hljs-title': {
+        color: '#576ddb',
+    },
+    'hljs-section': {
+        color: '#576ddb',
+    },
+    'hljs-keyword': {
+        color: '#955ae7',
+    },
+    'hljs-selector-tag': {
+        color: '#955ae7',
+    },
+    'hljs-deletion': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#be4678',
+    },
+    'hljs-addition': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#2a9292',
+    },
+    hljs: {
+        display: 'block',
+        overflowX: 'hidden',
+        background: '#1B2625',
+        color: 'white',
+        fontSize: '12px',
+    },
+    'hljs-emphasis': {
+        fontStyle: 'italic',
+    },
+    'hljs-strong': {
+        fontWeight: 'bold',
+    },
+};
+
+export interface CodeDemoProps {
+    children: string;
+}
+
+export interface CodeDemoState {
+    didCopyCode: boolean;
+}
+
+export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
+    public state: CodeDemoState = {
+        didCopyCode: false,
+    };
+    public render(): React.ReactNode {
+        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
+        return (
+            <Container position="relative" height="100%">
+                <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
+                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
+                        <Button fontSize="14px">
+                            <b>{copyButtonText}</b>
+                        </Button>
+                    </CopyToClipboard>
+                </Container>
+                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+                    {this.props.children}
+                </SyntaxHighlighter>
+            </Container>
+        );
+    }
+    private readonly _handleCopyClick = () => {
+        this.setState({ didCopyCode: true });
+    };
+}
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 00e491431..119311d94 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -4,14 +4,14 @@ import { assetDataUtils } from '@0x/order-utils';
 import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 import * as React from 'react';
+import styled from 'styled-components';
 
 import { CheckMark } from 'ts/components/ui/check_mark';
 import { Container } from 'ts/components/ui/container';
 import { MultiSelect } from 'ts/components/ui/multi_select';
-import { Select, SelectItemConfig } from 'ts/components/ui/select';
 import { Spinner } from 'ts/components/ui/spinner';
 import { Text } from 'ts/components/ui/text';
-import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
+import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
 import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
@@ -19,6 +19,7 @@ import { constants } from 'ts/utils/constants';
 
 // New components
 import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Select, SelectItemConfig } from 'ts/@next/pages/instant/select';
 
 import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map';
 import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
@@ -62,8 +63,8 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         }
         return (
             <Container minWidth="350px">
-                <ConfigGeneratorSection title="Standard relayer API endpoint">
-                    <Select value={value.orderSource} items={this._generateItems()} />
+                <ConfigGeneratorSection title="Liquidity Source">
+                    <Select id="" value={value.orderSource} items={this._generateItems()} />
                 </ConfigGeneratorSection>
                 <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
                     {this._renderTokenMultiSelectOrSpinner()}
@@ -113,7 +114,8 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     };
     private readonly _generateItems = (): SelectItemConfig[] => {
         return _.map(SRA_ENDPOINTS, endpoint => ({
-            text: endpoint,
+            label: endpoint,
+            value: endpoint,
             onClick: this._handleSRASelection.bind(this, endpoint),
         }));
     };
@@ -252,15 +254,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                 renderItemContent: (isSelected: boolean) => (
                     <Container className="flex items-center">
                         <Container marginRight="10px">
-                            <CheckMark isChecked={isSelected} />
+                            <CheckMark isChecked={isSelected} color={colors.brandLight} />
                         </Container>
-                        <Text
-                            fontSize="16px"
-                            fontColor={isSelected ? colors.mediumBlue : colors.darkerGrey}
-                            fontWeight={300}
-                        >
-                            <b>{metaData.symbol.toUpperCase()}</b> — {metaData.name}
-                        </Text>
+                        <CheckboxText isSelected={isSelected}>{metaData.symbol.toUpperCase()} — {metaData.name}</CheckboxText>
                     </Container>
                 ),
                 onClick: this._handleTokenClick.bind(this, assetData),
@@ -288,27 +284,57 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
 }) => (
     <Container marginBottom={marginBottom}>
         <Container marginBottom="10px" className="flex justify-between items-center">
-            <Container>
-                <Heading size="small" isNoMargin={true}>
-                    {title}
-                </Heading>
+            <Heading size="small" marginBottom="0" isFlex={true}>
+                <span>{title}</span>
                 {isOptional && (
-                    <Text fontColor={colors.grey} fontSize="16px" lineHeight="18px" display="inline">
-                        {' '}
-                        (optional)
-                    </Text>
+                    <OptionalText>
+                    {' '}
+                    Optional
+                    </OptionalText>
                 )}
-            </Container>
+            </Heading>
             {actionText && (
-                <Text fontSize="12px" fontColor={colors.grey} onClick={onActionTextClick}>
+                <OptionalAction onClick={onActionTextClick}>
                     {actionText}
-                </Text>
+                </OptionalAction>
             )}
         </Container>
         {children}
     </Container>
 );
 
+const Mark = ({ checked }) => (
+    <StyledMark checked={checked}>
+        {checked && ''}
+    </StyledMark>
+);
+
+const StyledMark = styled.div`
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    border-color: ${props => props.checked && colors.brandLight};
+    background-color: ${props => props.checked && colors.brandLight};
+`;
+
 ConfigGeneratorSection.defaultProps = {
     marginBottom: '30px',
 };
+
+const OptionalText = styled.span`
+    display: inline;
+    font-size: 14px;
+    color: #999999;
+    flex-shrink: 0;
+`;
+
+const CheckboxText = styled.span`
+    font-size: 14px;
+    line-height: 18px;
+    color: ${props => props.isSelected ? colors.brandDark : '#666666'}
+`;
+
+const OptionalAction = styled(OptionalText)`
+    cursor: pointer;
+`;
\ No newline at end of file
diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
new file mode 100644
index 000000000..01453d445
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
@@ -0,0 +1,90 @@
+import { addressUtils } from '@0x/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Paragraph } from 'ts/@next/components/text';
+
+export interface ConfigGeneratorAddressInputProps {
+    value?: string;
+    onChange?: (address: string, isValid: boolean) => void;
+}
+
+export interface ConfigGeneratorAddressInputState {
+    errMsg: string;
+}
+
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: string;
+    border?: string;
+    padding?: string;
+    placeholderColor?: string;
+    placeholder?: string;
+    backgroundColor?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export class ConfigGeneratorAddressInput extends React.Component<
+    ConfigGeneratorAddressInputProps,
+    ConfigGeneratorAddressInputState
+> {
+    public state = {
+        errMsg: '',
+    };
+    public render(): React.ReactNode {
+        const { errMsg } = this.state;
+        const hasError = !_.isEmpty(errMsg);
+        const border = hasError ? '1px solid red' : undefined;
+        return (
+            <Container height="80px">
+                <Input
+                    value={this.props.value}
+                    onChange={this._handleChange}
+                    placeholder="0xe99...aa8da4"
+                />
+                <Container marginTop="5px" isHidden={!hasError} height="25px">
+                    <Paragraph size="small" isNoMargin={true}>
+                        {errMsg}
+                    </Paragraph>
+                </Container>
+            </Container>
+        );
+    }
+
+    private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const address = event.target.value;
+        const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === '';
+        const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address';
+        this.setState({
+            errMsg,
+        });
+        this.props.onChange(address, isValidAddress);
+    };
+}
+
+const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
+    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
+);
+
+export const Input = styled(PlainInput)`
+    background-color: ${colors.white};
+    color: ${colors.textDarkSecondary};
+    font-size: 1rem;
+    width: 100%;
+    padding: 16px 20px 18px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    outline: none;
+    &::placeholder {
+        color: #333333;
+        opacity: 0.5;
+    }
+`;
\ No newline at end of file
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index 354a7c205..cdba53ca9 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+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 { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 import { WebsitePaths } from 'ts/types';
@@ -44,7 +44,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                 </Column>
                 <Column width="560px">
                     <HeadingWrapper>
-                        <Heading size="small">Code Snippet</Heading>
+                        <Heading size="small" marginBottom="15px">Code Snippet</Heading>
                         <Link
                             href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
                             isBlock={true}
@@ -87,10 +87,10 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                   )}`
                 : ''
         }
-            }, 'body');
-        </script>
-    </body>
-</html>`;
+                }, 'body');
+            </script>
+        </body>
+    </html>`;
     };
     private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
         const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
new file mode 100644
index 000000000..7c601da1c
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+export interface SelectItemConfig {
+    label: string;
+    value?: string;
+    onClick?: () => void;
+}
+
+interface SelectProps {
+    value?: string;
+    id: string;
+    items: SelectItemConfig[];
+    emptyText?: string;
+}
+
+export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText }) => {
+    return (
+        <Container>
+            <StyledSelect id={id}>
+                <option value="">{emptyText}</option>
+                {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
+            </StyledSelect>
+            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
+        </Container>
+    );
+};
+
+Select.defaultProps = {
+    emptyText: 'Select...',
+};
+
+const Container = styled.div`
+    background-color: #fff;
+    border-radius: 4px;
+    display: flex;
+    width: 100%;
+    position: relative;
+`;
+
+const StyledSelect = styled.select`
+    appearance: none;
+    border: 0;
+    font-size: 1rem;
+    width: 100%;
+    padding: 20px 20px 20px 20px;
+`;
+
+const SelectAllButton = styled.button`
+    appearance: none;
+    border: 0;
+    font-size: 0.777777778rem;
+    display: block;
+    opacity: 0.75;
+`;
+
+const Caret = styled.svg`
+    position: absolute;
+    right: 20px;
+    top: calc(50% - 4px);
+`;
-- 
cgit 


From 142d29ba57f55aefd5c5e5f669c388ab57152173 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 17:48:58 +0100
Subject: Tweak padding

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index cdba53ca9..a90176e0c 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -39,7 +39,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             <FlexWrap
                 isFlex={true}
             >
-                <Column width="442px">
+                <Column width="442px" padding={[0, 'small', 0, 0]}>
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Column>
                 <Column width="560px">
-- 
cgit 


From 52272cd2906b9d18a5ff77fde08854ea1c6e9e4c Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 18:57:22 +0100
Subject: Hide configurator on smaller screens

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index a90176e0c..af37ea8e7 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -39,7 +39,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             <FlexWrap
                 isFlex={true}
             >
-                <Column width="442px" padding={[0, 'small', 0, 0]}>
+                <Column width="442px" padding="0 30px 0 0">
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Column>
                 <Column width="560px">
-- 
cgit 


From e48887bc6f2ba158430a911d4d07376e65401f26 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 19:39:56 +0100
Subject: Tweak slider

---
 .../ts/@next/pages/instant/config_generator.tsx    |  19 +-
 .../@next/pages/instant/fee_percentage_slider.tsx  |  78 ++++++
 .../website/ts/@next/pages/instant/rc-slider.css   | 295 +++++++++++++++++++++
 3 files changed, 375 insertions(+), 17 deletions(-)
 create mode 100644 packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
 create mode 100644 packages/website/ts/@next/pages/instant/rc-slider.css

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 119311d94..d63ea118b 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -12,7 +12,7 @@ import { MultiSelect } from 'ts/components/ui/multi_select';
 import { Spinner } from 'ts/components/ui/spinner';
 import { Text } from 'ts/components/ui/text';
 import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
+import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -303,21 +303,6 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
     </Container>
 );
 
-const Mark = ({ checked }) => (
-    <StyledMark checked={checked}>
-        {checked && ''}
-    </StyledMark>
-);
-
-const StyledMark = styled.div`
-    border: 1px solid #ccc;
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    border-color: ${props => props.checked && colors.brandLight};
-    background-color: ${props => props.checked && colors.brandLight};
-`;
-
 ConfigGeneratorSection.defaultProps = {
     marginBottom: '30px',
 };
@@ -337,4 +322,4 @@ const CheckboxText = styled.span`
 
 const OptionalAction = styled(OptionalText)`
     cursor: pointer;
-`;
\ No newline at end of file
+`;
diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
new file mode 100644
index 000000000..47b8d2b8f
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
@@ -0,0 +1,78 @@
+import Slider from 'rc-slider';
+import * as React from 'react';
+import styled from 'styled-components';
+import 'ts/@next/pages/instant/rc-slider.css';
+
+import { colors } from 'ts/style/colors';
+
+const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider);
+// tslint:disable-next-line:no-unused-expression
+
+export interface FeePercentageSliderProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+
+export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> {
+    public render(): React.ReactNode {
+        return (
+            <StyledSlider
+                min={0}
+                max={0.05}
+                step={0.0025}
+                value={this.props.value}
+                onChange={this.props.onChange}
+                tipFormatter={this._feePercentageSliderFormatter}
+                tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }}
+                trackStyle={{
+                    backgroundColor: colors.brandLight,
+                }}
+                railStyle={{
+                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                }}
+                handleStyle={{
+                    border: 'none',
+                    boxShadow: 'none',
+                }}
+                activeDotStyle={{
+                    boxShadow: 'none',
+                    border: 'none',
+                }}
+            />
+        );
+    }
+    private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => {
+        return <Text>{`${(value * 100).toFixed(2)}%`}</Text>;
+    };
+}
+
+const StyledSlider = styled(SliderWithTooltip)`
+    .rc-slider-tooltip__inner {
+        box-shadow: none !important;
+        background-color: ${colors.white} !important;
+        border-radius: 4px !important;
+        padding: 3px 12px !important;
+        height: auto !important;
+        position: relative;
+        top: 7px;
+        &:after {
+            border: solid transparent;
+            content: " ";
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-width: 6px;
+            bottom: 100%;
+            left: 100%;
+            border-bottom-color: ${colors.white};
+            margin-left: -60%;
+        }
+    }
+`;
+
+const Text = styled.span`
+    color: #000000;
+    font-size: 12px;
+    line-height: 18px;
+`;
diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css
new file mode 100644
index 000000000..a4a521d54
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/rc-slider.css
@@ -0,0 +1,295 @@
+.rc-slider {
+    position: relative;
+    height: 14px;
+    padding: 5px 0;
+    width: 100%;
+    border-radius: 6px;
+    -ms-touch-action: none;
+    touch-action: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: #e9e9e9;
+    height: 4px;
+    border-radius: 6px;
+}
+
+.rc-slider-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: 6px;
+    background-color: #abe2fb;
+}
+
+.rc-slider-handle {
+    position: absolute;
+    margin-left: -7px;
+    margin-top: -5px;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-radius: 50%;
+    border: solid 2px #96dbfa;
+    background-color: #fff;
+    -ms-touch-action: pan-x;
+    touch-action: pan-x;
+}
+
+.rc-slider-handle:focus {
+    border-color: #57c5f7;
+    box-shadow: 0 0 0 5px #96dbfa;
+    outline: none;
+}
+
+.rc-slider-handle-click-focused:focus {
+    border-color: #96dbfa;
+    box-shadow: unset;
+}
+
+.rc-slider-handle:hover {
+    border-color: #57c5f7;
+}
+
+.rc-slider-handle:active {
+    border-color: #57c5f7;
+    box-shadow: 0 0 5px #57c5f7;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.rc-slider-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+}
+
+.rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+}
+
+.rc-slider-mark-text-active {
+    color: #666;
+}
+
+.rc-slider-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+}
+
+.rc-slider-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+
+.rc-slider-dot-active {
+    border-color: #96dbfa;
+}
+
+.rc-slider-disabled {
+    background-color: #e9e9e9;
+}
+
+.rc-slider-disabled .rc-slider-track {
+    background-color: #ccc;
+}
+
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+    border-color: #ccc;
+    box-shadow: none;
+    background-color: #fff;
+    cursor: not-allowed;
+}
+
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+    cursor: not-allowed !important;
+}
+
+.rc-slider-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
+}
+
+.rc-slider-vertical .rc-slider-rail {
+    height: 100%;
+    width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-track {
+    left: 5px;
+    bottom: 0;
+    width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-handle {
+    margin-left: -5px;
+    margin-bottom: -7px;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+}
+
+.rc-slider-vertical .rc-slider-mark {
+    top: 0;
+    left: 18px;
+    height: 100%;
+}
+
+.rc-slider-vertical .rc-slider-step {
+    height: 100%;
+    width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-dot {
+    left: 2px;
+    margin-bottom: -4px;
+}
+
+.rc-slider-vertical .rc-slider-dot:first-child {
+    margin-bottom: -4px;
+}
+
+.rc-slider-vertical .rc-slider-dot:last-child {
+    margin-bottom: -4px;
+}
+
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    animation-duration: .3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+
+.rc-slider-tooltip-zoom-down-leave {
+    animation-duration: .3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+    animation-name: rcSliderTooltipZoomDownIn;
+    animation-play-state: running;
+}
+
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+    animation-name: rcSliderTooltipZoomDownOut;
+    animation-play-state: running;
+}
+
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    transform: scale(0, 0);
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.rc-slider-tooltip-zoom-down-leave {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+@keyframes rcSliderTooltipZoomDownIn {
+    0% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+
+    100% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+}
+
+@keyframes rcSliderTooltipZoomDownOut {
+    0% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+}
+
+.rc-slider-tooltip {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    visibility: visible;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-tooltip-hidden {
+    display: none;
+}
+
+.rc-slider-tooltip-placement-top {
+    padding: 4px 0 8px 0;
+}
+
+.rc-slider-tooltip-inner {
+    padding: 4px 6px 4px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: #000;
+    text-align: center;
+    text-decoration: none;
+}
+
+.rc-slider-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px 4px 0;
+    border-top-color: #6c6c6c;
+}
-- 
cgit 


From 66480ccb1e0dc72e6716060ab472b7584bfa910c Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 11:26:59 +0100
Subject: Linting fixes

---
 packages/website/ts/@next/pages/instant/config_generator.tsx   | 10 +++++++---
 .../website/ts/@next/pages/instant/fee_percentage_slider.tsx   |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index d63ea118b..c71d2b238 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -6,13 +6,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
+import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider';
 import { CheckMark } from 'ts/components/ui/check_mark';
 import { Container } from 'ts/components/ui/container';
 import { MultiSelect } from 'ts/components/ui/multi_select';
 import { Spinner } from 'ts/components/ui/spinner';
 import { Text } from 'ts/components/ui/text';
-import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -314,7 +314,11 @@ const OptionalText = styled.span`
     flex-shrink: 0;
 `;
 
-const CheckboxText = styled.span`
+interface CheckboxTextProps {
+    isSelected?: boolean;
+}
+
+const CheckboxText = styled.span<CheckboxTextProps>`
     font-size: 14px;
     line-height: 18px;
     color: ${props => props.isSelected ? colors.brandDark : '#666666'}
diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
index 47b8d2b8f..512ae06b4 100644
--- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
@@ -10,6 +10,7 @@ const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider);
 
 export interface FeePercentageSliderProps {
     value: number;
+    isDisabled?: boolean;
     onChange: (value: number) => void;
 }
 
-- 
cgit 


From 377b87071a4f221279b5c9f033c28ae51c7ef08d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 15:22:14 +0100
Subject: Tweak configurator code width

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index af37ea8e7..ac7133cf6 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -39,10 +39,10 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             <FlexWrap
                 isFlex={true}
             >
-                <Column width="442px" padding="0 30px 0 0">
+                <Column width="442px" padding="0 70px 0 0">
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Column>
-                <Column width="560px">
+                <Column width="100%">
                     <HeadingWrapper>
                         <Heading size="small" marginBottom="15px">Code Snippet</Heading>
                         <Link
-- 
cgit 


From 9fa9a30c4d51ebb106bd7f80c889d14337358fa4 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 17:50:27 +0100
Subject: More lint cleanup

---
 packages/website/ts/@next/pages/instant/code_demo.tsx        | 1 -
 packages/website/ts/@next/pages/instant/config_generator.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
index fe11175d5..35eaf6b2a 100644
--- a/packages/website/ts/@next/pages/instant/code_demo.tsx
+++ b/packages/website/ts/@next/pages/instant/code_demo.tsx
@@ -4,7 +4,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
-import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index c71d2b238..8857e4fea 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -18,7 +18,7 @@ import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 // New components
-import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Heading } from 'ts/@next/components/text';
 import { Select, SelectItemConfig } from 'ts/@next/pages/instant/select';
 
 import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map';
-- 
cgit 


From 84321c41f346f11380d49d2b5d882022816abd43 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 18:52:38 +0100
Subject: Cleanup configurator

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index ac7133cf6..15c9ba2ca 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -2,26 +2,21 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
 import { CodeDemo } from 'ts/@next/pages/instant/code_demo';
 import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
-import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
-import { Heading, Paragraph } from 'ts/@next/components/text';
-import { WebsitePaths } from 'ts/types';
+
 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 ConfiguratorProps {
-    hash: string;
-}
-
 export interface ConfiguratorState {
     instantConfig: ZeroExInstantBaseConfig;
 }
 
-export class Configurator extends React.Component<ConfiguratorProps> {
+export class Configurator extends React.Component {
     public state: ConfiguratorState = {
         instantConfig: {
             orderSource: 'https://api.radarrelay.com/0x/v2/',
@@ -33,7 +28,6 @@ export class Configurator extends React.Component<ConfiguratorProps> {
         },
     };
     public render(): React.ReactNode {
-        const { hash } = this.props;
         const codeToDisplay = this._generateCodeDemoCode();
         return (
             <FlexWrap
-- 
cgit 


From 2b4c557a3fd97f966e375966ff39dd28ba550ef8 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 18:53:43 +0100
Subject: Cleanup select

---
 packages/website/ts/@next/pages/instant/select.tsx | 13 -------------
 1 file changed, 13 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 7c601da1c..ae2a07b3d 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
-import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-
 export interface SelectItemConfig {
     label: string;
     value?: string;
@@ -51,14 +46,6 @@ const StyledSelect = styled.select`
     padding: 20px 20px 20px 20px;
 `;
 
-const SelectAllButton = styled.button`
-    appearance: none;
-    border: 0;
-    font-size: 0.777777778rem;
-    display: block;
-    opacity: 0.75;
-`;
-
 const Caret = styled.svg`
     position: absolute;
     right: 20px;
-- 
cgit 


From 96cb278caed79961be08e9145cbd59e91e12d9a4 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 18:56:53 +0100
Subject: Cleanup

---
 .../ts/@next/pages/instant/config_generator_address_input.tsx       | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
index 01453d445..23cdfcf7f 100644
--- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
+
 import { Paragraph } from 'ts/@next/components/text';
 
 export interface ConfigGeneratorAddressInputProps {
@@ -24,7 +24,6 @@ export interface InputProps {
     width?: string;
     fontSize?: string;
     fontColor?: string;
-    border?: string;
     padding?: string;
     placeholderColor?: string;
     placeholder?: string;
@@ -42,7 +41,6 @@ export class ConfigGeneratorAddressInput extends React.Component<
     public render(): React.ReactNode {
         const { errMsg } = this.state;
         const hasError = !_.isEmpty(errMsg);
-        const border = hasError ? '1px solid red' : undefined;
         return (
             <Container height="80px">
                 <Input
@@ -87,4 +85,4 @@ export const Input = styled(PlainInput)`
         color: #333333;
         opacity: 0.5;
     }
-`;
\ No newline at end of file
+`;
-- 
cgit 


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/@next/pages/instant/configurator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index 15c9ba2ca..e4334eabb 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -62,7 +62,7 @@ export class Configurator extends React.Component {
 <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 


From 88240f6401c0a741ae66e63b77c1abe9d22a9037 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 17 Dec 2018 13:31:41 +0100
Subject: Fix liquidity source change

---
 packages/website/ts/@next/pages/instant/config_generator.tsx | 5 +++--
 packages/website/ts/@next/pages/instant/select.tsx           | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 8857e4fea..4f837d7fa 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -64,7 +64,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         return (
             <Container minWidth="350px">
                 <ConfigGeneratorSection title="Liquidity Source">
-                    <Select id="" value={value.orderSource} items={this._generateItems()} />
+                    <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} />
                 </ConfigGeneratorSection>
                 <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
                     {this._renderTokenMultiSelectOrSpinner()}
@@ -122,7 +122,8 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
         window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
     };
-    private readonly _handleSRASelection = (sraEndpoint: string) => {
+    private readonly _handleSRASelection = (event: Event) => {
+        const sraEndpoint = event.target.value;
         const newConfig: ZeroExInstantBaseConfig = {
             ...this.props.value,
             orderSource: sraEndpoint,
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index ae2a07b3d..422818f9f 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,12 +12,13 @@ interface SelectProps {
     id: string;
     items: SelectItemConfig[];
     emptyText?: string;
+    onChange?: () => void;
 }
 
-export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText }) => {
+export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => {
     return (
         <Container>
-            <StyledSelect id={id}>
+            <StyledSelect id={id} onChange={onChange}>
                 <option value="">{emptyText}</option>
                 {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
             </StyledSelect>
-- 
cgit 


From 8490c31fb7ff788d725b7636cd6bce7b2ae13ac4 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 17 Dec 2018 14:03:14 +0100
Subject: Tweak configurator

---
 packages/website/ts/@next/pages/instant/code_demo.tsx    | 15 +++++++++++----
 packages/website/ts/@next/pages/instant/configurator.tsx |  4 ++++
 2 files changed, 15 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
index 35eaf6b2a..04556123e 100644
--- a/packages/website/ts/@next/pages/instant/code_demo.tsx
+++ b/packages/website/ts/@next/pages/instant/code_demo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-import { Button } from 'ts/components/ui/button';
+import { Button } from 'ts/@next/components/button';
 import { Container } from 'ts/components/ui/container';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
@@ -161,9 +161,9 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <Button fontSize="14px">
-                            <b>{copyButtonText}</b>
-                        </Button>
+                        <StyledButton>
+                            {copyButtonText}
+                        </StyledButton>
                     </CopyToClipboard>
                 </Container>
                 <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
@@ -176,3 +176,10 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         this.setState({ didCopyCode: true });
     };
 }
+
+const StyledButton = styled(Button)`
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 400;
+    padding: 9px 21px 7px;
+`;
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index e4334eabb..007526396 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -100,4 +100,8 @@ export class Configurator extends React.Component {
 const HeadingWrapper = styled.div`
     display: flex;
     justify-content: space-between;
+
+    a {
+        transform: translateY(-8px);
+    }
 `;
-- 
cgit 


From 35cb769456d6b94c768b6ce3afd9535918aea0a1 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 12:57:59 -0800
Subject: prettify file

---
 packages/website/ts/@next/pages/instant/select.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 422818f9f..1e428c9a1 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -20,9 +20,20 @@ export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items,
         <Container>
             <StyledSelect id={id} onChange={onChange}>
                 <option value="">{emptyText}</option>
-                {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
+                {items.map((item, index) => (
+                    <option
+                        key={`${id}-item-${index}`}
+                        value={item.value}
+                        selected={item.value === value}
+                        onClick={item.onClick}
+                    >
+                        {item.label}
+                    </option>
+                ))}
             </StyledSelect>
-            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
+            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </Caret>
         </Container>
     );
 };
-- 
cgit 


From d32f77ebb93a904ee33a43db9207c20c889b0d8f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 13:01:15 -0800
Subject: Add includeEmpty option

---
 .../ts/@next/pages/instant/config_generator.tsx    | 32 ++++++++++++----------
 packages/website/ts/@next/pages/instant/select.tsx | 15 ++++++++--
 2 files changed, 29 insertions(+), 18 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 4f837d7fa..a1263da58 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -64,7 +64,13 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         return (
             <Container minWidth="350px">
                 <ConfigGeneratorSection title="Liquidity Source">
-                    <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} />
+                    <Select
+                        includeEmpty={false}
+                        id=""
+                        value={value.orderSource}
+                        items={this._generateItems()}
+                        onChange={this._handleSRASelection.bind(this)}
+                    />
                 </ConfigGeneratorSection>
                 <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
                     {this._renderTokenMultiSelectOrSpinner()}
@@ -257,7 +263,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                         <Container marginRight="10px">
                             <CheckMark isChecked={isSelected} color={colors.brandLight} />
                         </Container>
-                        <CheckboxText isSelected={isSelected}>{metaData.symbol.toUpperCase()} — {metaData.name}</CheckboxText>
+                        <CheckboxText isSelected={isSelected}>
+                            {metaData.symbol.toUpperCase()} — {metaData.name}
+                        </CheckboxText>
                     </Container>
                 ),
                 onClick: this._handleTokenClick.bind(this, assetData),
@@ -287,18 +295,9 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
         <Container marginBottom="10px" className="flex justify-between items-center">
             <Heading size="small" marginBottom="0" isFlex={true}>
                 <span>{title}</span>
-                {isOptional && (
-                    <OptionalText>
-                    {' '}
-                    Optional
-                    </OptionalText>
-                )}
+                {isOptional && <OptionalText> Optional</OptionalText>}
             </Heading>
-            {actionText && (
-                <OptionalAction onClick={onActionTextClick}>
-                    {actionText}
-                </OptionalAction>
-            )}
+            {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>}
         </Container>
         {children}
     </Container>
@@ -319,10 +318,13 @@ interface CheckboxTextProps {
     isSelected?: boolean;
 }
 
-const CheckboxText = styled.span<CheckboxTextProps>`
+const CheckboxText =
+    styled.span <
+    CheckboxTextProps >
+    `
     font-size: 14px;
     line-height: 18px;
-    color: ${props => props.isSelected ? colors.brandDark : '#666666'}
+    color: ${props => (props.isSelected ? colors.brandDark : '#666666')}
 `;
 
 const OptionalAction = styled(OptionalText)`
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index 1e428c9a1..f5b5e60c8 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,14 +12,22 @@ interface SelectProps {
     id: string;
     items: SelectItemConfig[];
     emptyText?: string;
-    onChange?: () => void;
+    onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
+    includeEmpty: boolean;
 }
 
-export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => {
+export const Select: React.FunctionComponent<SelectProps> = ({
+    value,
+    id,
+    items,
+    includeEmpty,
+    emptyText,
+    onChange,
+}) => {
     return (
         <Container>
             <StyledSelect id={id} onChange={onChange}>
-                <option value="">{emptyText}</option>
+                {includeEmpty && <option value="">{emptyText}</option>}
                 {items.map((item, index) => (
                     <option
                         key={`${id}-item-${index}`}
@@ -40,6 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items,
 
 Select.defaultProps = {
     emptyText: 'Select...',
+    includeEmpty: true,
 };
 
 const Container = styled.div`
-- 
cgit 


From 6e0d622a1559937d8867216d571156564c666c77 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 17 Dec 2018 14:17:36 -0800
Subject: Open all new instant links in new window

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index 007526396..7c67e6333 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -30,19 +30,16 @@ export class Configurator extends React.Component {
     public render(): React.ReactNode {
         const codeToDisplay = this._generateCodeDemoCode();
         return (
-            <FlexWrap
-                isFlex={true}
-            >
+            <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}
-                        >
+                        <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>
-- 
cgit 


From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 13:24:53 -0800
Subject: run prettier on website

---
 packages/website/ts/@next/pages/instant/code_demo.tsx               | 6 ++----
 .../ts/@next/pages/instant/config_generator_address_input.tsx       | 6 +-----
 packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx   | 2 +-
 3 files changed, 4 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
index 04556123e..4a3022df5 100644
--- a/packages/website/ts/@next/pages/instant/code_demo.tsx
+++ b/packages/website/ts/@next/pages/instant/code_demo.tsx
@@ -22,7 +22,7 @@ const CustomPre = styled.pre`
         border: none;
     }
     code:first-of-type {
-        background-color: #060D0D !important;
+        background-color: #060d0d !important;
         color: #999;
         min-height: 100%;
         text-align: center;
@@ -161,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <StyledButton>
-                            {copyButtonText}
-                        </StyledButton>
+                        <StyledButton>{copyButtonText}</StyledButton>
                     </CopyToClipboard>
                 </Container>
                 <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
index 23cdfcf7f..9b0e9b1d1 100644
--- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
@@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
         const hasError = !_.isEmpty(errMsg);
         return (
             <Container height="80px">
-                <Input
-                    value={this.props.value}
-                    onChange={this._handleChange}
-                    placeholder="0xe99...aa8da4"
-                />
+                <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
                 <Container marginTop="5px" isHidden={!hasError} height="25px">
                     <Paragraph size="small" isNoMargin={true}>
                         {errMsg}
diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
index 512ae06b4..e9f8ba83b 100644
--- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
@@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)`
         top: 7px;
         &:after {
             border: solid transparent;
-            content: " ";
+            content: ' ';
             height: 0;
             width: 0;
             position: absolute;
-- 
cgit 


From e10b30886ff0c3be4ef5f91e64107c79c9074725 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 14:11:29 -0800
Subject: includeEmpty -> shouldIncludeEmpty

---
 packages/website/ts/@next/pages/instant/config_generator.tsx | 2 +-
 packages/website/ts/@next/pages/instant/select.tsx           | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index a1263da58..d4497ac92 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -65,7 +65,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
             <Container minWidth="350px">
                 <ConfigGeneratorSection title="Liquidity Source">
                     <Select
-                        includeEmpty={false}
+                        shouldIncludeEmpty={false}
                         id=""
                         value={value.orderSource}
                         items={this._generateItems()}
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index f5b5e60c8..d4146cfb0 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -13,21 +13,21 @@ interface SelectProps {
     items: SelectItemConfig[];
     emptyText?: string;
     onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
-    includeEmpty: boolean;
+    shouldIncludeEmpty: boolean;
 }
 
 export const Select: React.FunctionComponent<SelectProps> = ({
     value,
     id,
     items,
-    includeEmpty,
+    shouldIncludeEmpty,
     emptyText,
     onChange,
 }) => {
     return (
         <Container>
             <StyledSelect id={id} onChange={onChange}>
-                {includeEmpty && <option value="">{emptyText}</option>}
+                {shouldIncludeEmpty && <option value="">{emptyText}</option>}
                 {items.map((item, index) => (
                     <option
                         key={`${id}-item-${index}`}
@@ -48,7 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({
 
 Select.defaultProps = {
     emptyText: 'Select...',
-    includeEmpty: true,
+    shouldIncludeEmpty: true,
 };
 
 const Container = styled.div`
-- 
cgit 


From e6f36938137fa7e2e48e1e97aed8bfa0c3c4aacd Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 20 Dec 2018 00:16:39 +0100
Subject: Disable fee slider when no address is put in

---
 packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx | 1 +
 packages/website/ts/@next/pages/instant/rc-slider.css             | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
index e9f8ba83b..5775d6dfb 100644
--- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
@@ -22,6 +22,7 @@ export class FeePercentageSlider extends React.Component<FeePercentageSliderProp
                 max={0.05}
                 step={0.0025}
                 value={this.props.value}
+                disabled={this.props.isDisabled}
                 onChange={this.props.onChange}
                 tipFormatter={this._feePercentageSliderFormatter}
                 tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }}
diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css
index a4a521d54..63038324e 100644
--- a/packages/website/ts/@next/pages/instant/rc-slider.css
+++ b/packages/website/ts/@next/pages/instant/rc-slider.css
@@ -115,7 +115,7 @@
 }
 
 .rc-slider-disabled {
-    background-color: #e9e9e9;
+    opacity: 0.2;
 }
 
 .rc-slider-disabled .rc-slider-track {
-- 
cgit 


From fb003903c7b0dacc808e10a7ecc082a52c23f1eb Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 20 Dec 2018 09:21:29 -0800
Subject: Fix types

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

(limited to 'packages/website/ts/@next/pages/instant')

diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index d4497ac92..3f00e33e2 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -128,7 +128,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
         window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
     };
-    private readonly _handleSRASelection = (event: Event) => {
+    private readonly _handleSRASelection = (event: React.ChangeEvent<HTMLSelectElement>) => {
         const sraEndpoint = event.target.value;
         const newConfig: ZeroExInstantBaseConfig = {
             ...this.props.value,
-- 
cgit