feat: add fee percentage slier

3 files changed, 30 insertions, 2 deletions

diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index 9c3161dcc..8b56834ea 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -3,6 +3,7 @@ import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses';
 import { assetDataUtils } from '@0x/order-utils';
 import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
+import Slider from 'material-ui/Slider';
 import * as React from 'react';
 
 import { CheckMark } from 'ts/components/ui/check_mark';
@@ -65,6 +66,19 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                         onChange={this._handleAffiliateAddressChange}
                     />
                 </ConfigGeneratorSection>
+                <ConfigGeneratorSection
+                    title="Fee percentage"
+                    actionText="Learn more"
+                    onActionTextClick={this._handleAffiliatePercentageLearnMoreClick}
+                >
+                    <Slider
+                        min={0}
+                        max={0.05}
+                        step={0.0025}
+                        value={value.affiliateInfo.feePercentage}
+                        onChange={this._handleAffiliatePercentageChange}
+                    />
+                </ConfigGeneratorSection>
             </Container>
         );
     }
@@ -91,6 +105,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     private readonly _getAllKnownAssetDatas = (): string[] => {
         return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address));
     };
+    private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
+        window.open('/wiki#Learn-About-Affiliate-Fees', '_blank');
+    };
     private readonly _handleSRASelection = (sraEndpoint: string) => {
         const newConfig: ZeroExInstantBaseConfig = {
             ...this.props.value,
@@ -109,6 +126,17 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         };
         this.props.onConfigChange(newConfig);
     };
+    private readonly _handleAffiliatePercentageChange = (event: any, 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,
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 dbda547cd..de2640f48 100644
--- a/packages/website/ts/pages/instant/config_generator_address_input.tsx
+++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx
@@ -48,7 +48,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
         );
     }
 
-    private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    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';
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index e72f07a70..0ce1d9810 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -25,7 +25,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
             availableAssetDatas: [],
             affiliateInfo: {
                 feeRecipient: '',
-                feePercentage: 0.1,
+                feePercentage: 0.01,
             },
         },
     };