feat: add fee percentage slider

4 files changed, 44 insertions, 31 deletions

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 20eb6b8d1..e57e39dff 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -20,7 +20,7 @@ const CustomPre = styled.pre`
     code:first-of-type {
         background-color: #2a2a2a !important;
         color: #999;
-        height: 100%;
+        min-height: 100%;
         text-align: center;
         padding-right: 5px !important;
         padding-left: 5px;
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index 8b56834ea..efd1be096 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -53,14 +53,14 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
             throw new Error('ConfigGenerator component only supports string values as an orderSource.');
         }
         return (
-            <Container>
+            <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">
+                <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}>
                     <ConfigGeneratorAddressInput
                         value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''}
                         onChange={this._handleAffiliateAddressChange}
@@ -252,19 +252,30 @@ 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="30px">
+    <Container marginBottom={marginBottom}>
         <Container marginBottom="10px" className="flex justify-between items-center">
-            <Text fontColor={colors.white} fontSize="16px" lineHeight="18px">
-                {title}
-            </Text>
+            <Container>
+                <Text fontColor={colors.white} fontSize="16px" lineHeight="18px">
+                    {title}
+                </Text>
+                {isOptional && (
+                    <Text fontColor={colors.grey} fontSize="16px" lineHeight="18px">
+                        (optional)
+                    </Text>
+                )}
+            </Container>
             {actionText && (
                 <Text fontSize="12px" fontColor={colors.grey} onClick={onActionTextClick}>
                     {actionText}
@@ -274,3 +285,7 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
         {children}
     </Container>
 );
+
+ConfigGeneratorSection.defaultProps = {
+    marginBottom: '30px',
+};
diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx
index de2640f48..2e5a6e533 100644
--- a/packages/website/ts/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx
@@ -28,7 +28,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
         const hasError = !_.isEmpty(errMsg);
         const border = hasError ? '1px solid red' : undefined;
         return (
-            <Container>
+            <Container height="80px">
                 <Input
                     width="100%"
                     fontSize="16px"
@@ -37,13 +37,11 @@ export class ConfigGeneratorAddressInput extends React.Component<
                     placeholder="0xe99...aa8da4"
                     border={border}
                 />
-                {hasError && (
-                    <Container marginTop="5px">
-                        <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic">
-                            {errMsg}
-                        </Text>
-                    </Container>
-                )}
+                <Container marginTop="5px" isHidden={!hasError} height="25px">
+                    <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic">
+                        {errMsg}
+                    </Text>
+                </Container>
             </Container>
         );
     }
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 0ce1d9810..5700bdc1d 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -46,7 +46,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
                     </Container>
                     <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
                 </Container>
-                <Container className="mx3">
+                <Container className="mx3" height="550px">
                     <Container className="mb3 flex justify-between">
                         <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
                             Code Snippet
@@ -66,34 +66,34 @@ export class Configurator extends React.Component<ConfiguratorProps> {
     private readonly _generateCodeDemoCode = (): string => {
         const { instantConfig } = this.state;
         return `<head>
-        <script src="https://instant.0xproject.com/instant.js"></script>
-    </head>
-    <body>
-        <script>
-            zeroExInstant.render({
-                liquiditySource: '${instantConfig.orderSource}',${
+    <script src="https://instant.0xproject.com/instant.js"></script>
+</head>
+<body>
+    <script>
+        zeroExInstant.render({
+            liquiditySource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
-                ? `\n\t\taffiliateInfo: {
-                    feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
-                    feePercentage: ${instantConfig.affiliateInfo.feePercentage}
-                }`
+                ? `\n            affiliateInfo: {
+                feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}',
+                feePercentage: ${instantConfig.affiliateInfo.feePercentage}
+            }`
                 : ''
         }${
             !_.isUndefined(instantConfig.availableAssetDatas)
-                ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString(
+                ? `\n            availableAssetDatas: ${this._renderAvailableAssetDatasString(
                       instantConfig.availableAssetDatas,
                   )}`
                 : ''
         }
-            }, 'body');
-        </script>
-    </body>`;
+        }, 'body');
+    </script>
+</body>`;
     };
     private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
         const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
         if (availableAssetDatas.length < 2) {
             return `[${stringAvailableAssetDatas.join(', ')}]`;
         }
-        return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`;
+        return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n            ]`;
     };
 }