feat: add fee percentage slider

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;

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">
+            <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',
+};

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">
+                <Container marginTop="5px" isHidden={!hasError} height="25px">
                     <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic">
                         {errMsg}
                     </Text>
                 </Container>
-                )}
             </Container>
         );
     }

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
@@ -67,33 +67,33 @@ export class Configurator extends React.Component<ConfiguratorProps> {
         const { instantConfig } = this.state;
         return `<head>
     <script src="https://instant.0xproject.com/instant.js"></script>
-    </head>
-    <body>
+</head>
+<body>
     <script>
         zeroExInstant.render({
             liquiditySource: '${instantConfig.orderSource}',${
             !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
-                ? `\n\t\taffiliateInfo: {
+                ? `\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>`;
     };
     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            ]`;
     };
 }