feat: create more dank slider

3 files changed, 86 insertions, 6 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index c02e1eee2..5d2e563e9 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -48,6 +48,7 @@
         "numeral": "^2.0.6",
         "polished": "^1.9.2",
         "query-string": "^6.0.0",
+        "rc-slider": "^8.6.3",
         "react": "^16.4.2",
         "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
@@ -80,6 +81,7 @@
         "@types/node": "*",
         "@types/numeral": "^0.0.22",
         "@types/query-string": "^5.1.0",
+        "@types/rc-slider": "^8.6.0",
         "@types/react": "^16.4.2",
         "@types/react-copy-to-clipboard": "^4.2.0",
         "@types/react-dom": "^16.0.7",
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index 08aaa1d81..facda850e 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -3,7 +3,6 @@ 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';
@@ -13,6 +12,7 @@ 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 { WebsiteBackendTokenInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
@@ -71,10 +71,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
                     actionText="Learn more"
                     onActionTextClick={this._handleAffiliatePercentageLearnMoreClick}
                 >
-                    <Slider
-                        min={0}
-                        max={0.05}
-                        step={0.0025}
+                    <FeePercentageSlider
                         value={value.affiliateInfo.feePercentage}
                         onChange={this._handleAffiliatePercentageChange}
                     />
@@ -126,7 +123,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         };
         this.props.onConfigChange(newConfig);
     };
-    private readonly _handleAffiliatePercentageChange = (event: any, value: number) => {
+    private readonly _handleAffiliatePercentageChange = (value: number) => {
         const oldConfig: ZeroExInstantBaseConfig = this.props.value;
         const newConfig: ZeroExInstantBaseConfig = {
             ...oldConfig,
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
new file mode 100644
index 000000000..e57319ed5
--- /dev/null
+++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
@@ -0,0 +1,81 @@
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import * as React from 'react';
+
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { injectGlobal, styled } from 'ts/style/theme';
+
+const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider);
+
+injectGlobal`
+    .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-color: rgba(136, 183, 213, 0);
+            border-width: 6px;
+            bottom: 100%;
+            left: 100%;
+            border-bottom-color: ${colors.white};
+            margin-left: -60%;
+        }
+    }
+`;
+
+const StyledSlider = styled(SliderWithTooltip)`
+    .rc-slider-tooltip-inner {
+        background-color: ${colors.white};
+        box-shadow: none;
+        padding: 3px;
+    }
+`;
+
+export interface FeePercentageSliderProps {
+    value: number;
+    onChange: (value: number) => void;
+}
+
+export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> {
+    public render(): React.ReactNode {
+        return (
+            <SliderWithTooltip
+                min={0}
+                max={0.05}
+                step={0.0025}
+                value={this.props.value}
+                onChange={this.props.onChange}
+                tipFormatter={this._feePercentageSliderFormatter}
+                tipProps={{ placement: 'bottom' }}
+                trackStyle={{
+                    backgroundColor: '#b4b4b4',
+                }}
+                railStyle={{
+                    backgroundColor: '#696969',
+                }}
+                handleStyle={{
+                    border: 'none',
+                    boxShadow: 'none',
+                }}
+                activeDotStyle={{
+                    boxShadow: 'none',
+                    border: 'none',
+                }}
+            />
+        );
+    }
+    private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => {
+        return <Text fontColor={colors.black} fontSize="14px" fontWeight={700}>{`${(value * 100).toFixed(2)}%`}</Text>;
+    };
+}