aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-04 08:47:52 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-04 08:47:52 +0800
commit48bfe9274079be308df754f19dcd0030f014b93c (patch)
tree7b4fa01684a9e6d19a6eea1abd4df80b373ca0f1 /packages/website/ts/pages
parentd8a3fc0be012ff88a851d2f388662b4aaaec5199 (diff)
downloaddexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar.gz
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar.bz2
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar.lz
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar.xz
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.tar.zst
dexon-sol-tools-48bfe9274079be308df754f19dcd0030f014b93c.zip
feat: create more dank slider
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx9
-rw-r--r--packages/website/ts/pages/instant/fee_percentage_slider.tsx81
2 files changed, 84 insertions, 6 deletions
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>;
+ };
+}