Merge pull request #1399 from 0xProject/feature/website/disable-slider-if-no-address-configurator

[website] Disable slider when no affiliate info

3 files changed, 11 insertions, 1 deletions

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 1bc1980e7..a3b5fe847 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -77,7 +77,7 @@ const customStyle = {
         color: '#c994ff',
     },
     'hljs-meta': {
-        color: '#aa573c',
+        color: '#61f5ff',
     },
     'hljs-built_in': {
         color: '#aa573c',
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index fe70ef04c..fbeeeaeaf 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -79,6 +79,11 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                     <FeePercentageSlider
                         value={value.affiliateInfo.feePercentage}
                         onChange={this._handleAffiliatePercentageChange}
+                        isDisabled={
+                            _.isUndefined(value.affiliateInfo) ||
+                            _.isUndefined(value.affiliateInfo.feeRecipient) ||
+                            _.isEmpty(value.affiliateInfo.feeRecipient)
+                        }
                     />
                 </ConfigGeneratorSection>
             </Container>
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
index 4c92883cb..d76cee58f 100644
--- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
@@ -31,10 +31,14 @@ injectGlobal`
             margin-left: -60%;
         }
     }
+    .rc-slider-disabled {
+        background-color: inherit !important;
+    }
 `;
 
 export interface FeePercentageSliderProps {
     value: number;
+    isDisabled: boolean;
     onChange: (value: number) => void;
 }
 
@@ -42,6 +46,7 @@ export class FeePercentageSlider extends React.Component<FeePercentageSliderProp
     public render(): React.ReactNode {
         return (
             <SliderWithTooltip
+                disabled={this.props.isDisabled}
                 min={0}
                 max={0.05}
                 step={0.0025}