aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/package.json2
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx9
-rw-r--r--packages/website/ts/pages/instant/fee_percentage_slider.tsx81
-rw-r--r--yarn.lock120
4 files changed, 199 insertions, 13 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>;
+ };
+}
diff --git a/yarn.lock b/yarn.lock
index ed01009aa..c64f666e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1457,6 +1457,19 @@
version "5.1.0"
resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-5.1.0.tgz#7f40cdea49ddafa0ea4f3db35fb6c24d3bfd4dcc"
+"@types/rc-slider@^8.6.0":
+ version "8.6.0"
+ resolved "https://registry.npmjs.org/@types/rc-slider/-/rc-slider-8.6.0.tgz#7f061a920b067825c8455cf481c57b0927889c72"
+ dependencies:
+ "@types/rc-tooltip" "*"
+ "@types/react" "*"
+
+"@types/rc-tooltip@*":
+ version "3.7.0"
+ resolved "https://registry.npmjs.org/@types/rc-tooltip/-/rc-tooltip-3.7.0.tgz#6dc9898dc426495baea1b786e5dbde8980bf9737"
+ dependencies:
+ "@types/react" "*"
+
"@types/react-addons-linked-state-mixin@*":
version "0.14.19"
resolved "https://registry.yarnpkg.com/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.19.tgz#7ef00a5618a089da4a99e1f58c9aa4c1781d46d5"
@@ -1898,6 +1911,12 @@ acorn@^6.0.2:
version "6.0.4"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.4.tgz#77377e7353b72ec5104550aa2d2097a2fd40b754"
+add-dom-event-listener@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
+ dependencies:
+ object-assign "4.x"
+
aes-js@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
@@ -2856,7 +2875,7 @@ babel-register@^6.26.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"
-babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
@@ -4147,10 +4166,20 @@ compare-versions@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.1.0.tgz#43310256a5c555aaed4193c04d8f154cf9c6efd5"
+component-classes@^1.2.5:
+ version "1.2.6"
+ resolved "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
+ dependencies:
+ component-indexof "0.0.3"
+
component-emitter@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+component-indexof@0.0.3:
+ version "0.0.3"
+ resolved "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
+
compressible@~2.0.13:
version "2.0.13"
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.13.tgz#0d1020ab924b2fdb4d6279875c7d6daba6baa7a9"
@@ -4597,6 +4626,13 @@ crypto-random-string@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+css-animation@^1.3.2:
+ version "1.5.0"
+ resolved "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz#c96b9097a5ef74a7be8480b45cc44e4ec6ca2bf5"
+ dependencies:
+ babel-runtime "6.x"
+ component-classes "^1.2.5"
+
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -5216,6 +5252,10 @@ doctrine@^2.1.0:
dependencies:
esutils "^2.0.2"
+dom-align@^1.7.0:
+ version "1.8.0"
+ resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz#c0e89b5b674c6e836cd248c52c2992135f093654"
+
dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -9767,7 +9807,7 @@ lodash.isequal@^4.0.0, lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-lodash.keys@^3.0.0:
+lodash.keys@^3.0.0, lodash.keys@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
dependencies:
@@ -11091,14 +11131,14 @@ oauth-sign@~0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+object-assign@4.x, object-assign@^4, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
object-assign@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
-object-assign@^4, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
object-copy@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@@ -12231,7 +12271,7 @@ promzard@^0.3.0:
dependencies:
read "1"
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2:
+prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@@ -12531,6 +12571,66 @@ raw-loader@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+rc-align@^2.4.0:
+ version "2.4.3"
+ resolved "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz#b9b3c2a6d68adae71a8e1d041cd5e3b2a655f99a"
+ dependencies:
+ babel-runtime "^6.26.0"
+ dom-align "^1.7.0"
+ prop-types "^15.5.8"
+ rc-util "^4.0.4"
+
+rc-animate@2.x:
+ version "2.6.0"
+ resolved "https://registry.npmjs.org/rc-animate/-/rc-animate-2.6.0.tgz#ca8440d042781af7a1329d84f97ea94794c5ec15"
+ dependencies:
+ babel-runtime "6.x"
+ classnames "^2.2.6"
+ css-animation "^1.3.2"
+ prop-types "15.x"
+ raf "^3.4.0"
+ react-lifecycles-compat "^3.0.4"
+
+rc-slider@^8.6.3:
+ version "8.6.3"
+ resolved "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.3.tgz#1ca0e0bd2863252741de75e7bf8c9f2cfcffccb7"
+ dependencies:
+ babel-runtime "6.x"
+ classnames "^2.2.5"
+ prop-types "^15.5.4"
+ rc-tooltip "^3.7.0"
+ rc-util "^4.0.4"
+ shallowequal "^1.0.1"
+ warning "^3.0.0"
+
+rc-tooltip@^3.7.0:
+ version "3.7.3"
+ resolved "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz#280aec6afcaa44e8dff0480fbaff9e87fc00aecc"
+ dependencies:
+ babel-runtime "6.x"
+ prop-types "^15.5.8"
+ rc-trigger "^2.2.2"
+
+rc-trigger@^2.2.2:
+ version "2.6.2"
+ resolved "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz#a9c09ba5fad63af3b2ec46349c7db6cb46657001"
+ dependencies:
+ babel-runtime "6.x"
+ classnames "^2.2.6"
+ prop-types "15.x"
+ rc-align "^2.4.0"
+ rc-animate "2.x"
+ rc-util "^4.4.0"
+
+rc-util@^4.0.4, rc-util@^4.4.0:
+ version "4.6.0"
+ resolved "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz#ba33721783192ec4f3afb259e182b04e55deb7f6"
+ dependencies:
+ add-dom-event-listener "^1.1.0"
+ babel-runtime "6.x"
+ prop-types "^15.5.10"
+ shallowequal "^0.2.2"
+
rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
version "1.2.6"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092"
@@ -13907,6 +14007,12 @@ sha3@^1.1.0:
dependencies:
nan "2.10.0"
+shallowequal@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
+ dependencies:
+ lodash.keys "^3.1.2"
+
shallowequal@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"