aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/pages/instant/config_generator.tsx19
-rw-r--r--packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx78
-rw-r--r--packages/website/ts/@next/pages/instant/rc-slider.css295
-rw-r--r--packages/website/ts/pages/instant/fee_percentage_slider.tsx2
4 files changed, 376 insertions, 18 deletions
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 119311d94..d63ea118b 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -12,7 +12,7 @@ import { MultiSelect } from 'ts/components/ui/multi_select';
import { Spinner } from 'ts/components/ui/spinner';
import { Text } from 'ts/components/ui/text';
import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
+import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -303,21 +303,6 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec
</Container>
);
-const Mark = ({ checked }) => (
- <StyledMark checked={checked}>
- {checked && ''}
- </StyledMark>
-);
-
-const StyledMark = styled.div`
- border: 1px solid #ccc;
- border-radius: 50%;
- width: 16px;
- height: 16px;
- border-color: ${props => props.checked && colors.brandLight};
- background-color: ${props => props.checked && colors.brandLight};
-`;
-
ConfigGeneratorSection.defaultProps = {
marginBottom: '30px',
};
@@ -337,4 +322,4 @@ const CheckboxText = styled.span`
const OptionalAction = styled(OptionalText)`
cursor: pointer;
-`; \ No newline at end of file
+`;
diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
new file mode 100644
index 000000000..47b8d2b8f
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
@@ -0,0 +1,78 @@
+import Slider from 'rc-slider';
+import * as React from 'react';
+import styled from 'styled-components';
+import 'ts/@next/pages/instant/rc-slider.css';
+
+import { colors } from 'ts/style/colors';
+
+const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider);
+// tslint:disable-next-line:no-unused-expression
+
+export interface FeePercentageSliderProps {
+ value: number;
+ onChange: (value: number) => void;
+}
+
+export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> {
+ public render(): React.ReactNode {
+ return (
+ <StyledSlider
+ min={0}
+ max={0.05}
+ step={0.0025}
+ value={this.props.value}
+ onChange={this.props.onChange}
+ tipFormatter={this._feePercentageSliderFormatter}
+ tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }}
+ trackStyle={{
+ backgroundColor: colors.brandLight,
+ }}
+ railStyle={{
+ backgroundColor: 'rgba(255, 255, 255, 0.2)',
+ }}
+ handleStyle={{
+ border: 'none',
+ boxShadow: 'none',
+ }}
+ activeDotStyle={{
+ boxShadow: 'none',
+ border: 'none',
+ }}
+ />
+ );
+ }
+ private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => {
+ return <Text>{`${(value * 100).toFixed(2)}%`}</Text>;
+ };
+}
+
+const StyledSlider = styled(SliderWithTooltip)`
+ .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-width: 6px;
+ bottom: 100%;
+ left: 100%;
+ border-bottom-color: ${colors.white};
+ margin-left: -60%;
+ }
+ }
+`;
+
+const Text = styled.span`
+ color: #000000;
+ font-size: 12px;
+ line-height: 18px;
+`;
diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css
new file mode 100644
index 000000000..a4a521d54
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/rc-slider.css
@@ -0,0 +1,295 @@
+.rc-slider {
+ position: relative;
+ height: 14px;
+ padding: 5px 0;
+ width: 100%;
+ border-radius: 6px;
+ -ms-touch-action: none;
+ touch-action: none;
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider * {
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-rail {
+ position: absolute;
+ width: 100%;
+ background-color: #e9e9e9;
+ height: 4px;
+ border-radius: 6px;
+}
+
+.rc-slider-track {
+ position: absolute;
+ left: 0;
+ height: 4px;
+ border-radius: 6px;
+ background-color: #abe2fb;
+}
+
+.rc-slider-handle {
+ position: absolute;
+ margin-left: -7px;
+ margin-top: -5px;
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ cursor: -webkit-grab;
+ cursor: grab;
+ border-radius: 50%;
+ border: solid 2px #96dbfa;
+ background-color: #fff;
+ -ms-touch-action: pan-x;
+ touch-action: pan-x;
+}
+
+.rc-slider-handle:focus {
+ border-color: #57c5f7;
+ box-shadow: 0 0 0 5px #96dbfa;
+ outline: none;
+}
+
+.rc-slider-handle-click-focused:focus {
+ border-color: #96dbfa;
+ box-shadow: unset;
+}
+
+.rc-slider-handle:hover {
+ border-color: #57c5f7;
+}
+
+.rc-slider-handle:active {
+ border-color: #57c5f7;
+ box-shadow: 0 0 5px #57c5f7;
+ cursor: -webkit-grabbing;
+ cursor: grabbing;
+}
+
+.rc-slider-mark {
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: 100%;
+ font-size: 12px;
+}
+
+.rc-slider-mark-text {
+ position: absolute;
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ cursor: pointer;
+ color: #999;
+}
+
+.rc-slider-mark-text-active {
+ color: #666;
+}
+
+.rc-slider-step {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background: transparent;
+}
+
+.rc-slider-dot {
+ position: absolute;
+ bottom: -2px;
+ margin-left: -4px;
+ width: 8px;
+ height: 8px;
+ border: 2px solid #e9e9e9;
+ background-color: #fff;
+ cursor: pointer;
+ border-radius: 50%;
+ vertical-align: middle;
+}
+
+.rc-slider-dot-active {
+ border-color: #96dbfa;
+}
+
+.rc-slider-disabled {
+ background-color: #e9e9e9;
+}
+
+.rc-slider-disabled .rc-slider-track {
+ background-color: #ccc;
+}
+
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+ border-color: #ccc;
+ box-shadow: none;
+ background-color: #fff;
+ cursor: not-allowed;
+}
+
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+ cursor: not-allowed !important;
+}
+
+.rc-slider-vertical {
+ width: 14px;
+ height: 100%;
+ padding: 0 5px;
+}
+
+.rc-slider-vertical .rc-slider-rail {
+ height: 100%;
+ width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-track {
+ left: 5px;
+ bottom: 0;
+ width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-handle {
+ margin-left: -5px;
+ margin-bottom: -7px;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+}
+
+.rc-slider-vertical .rc-slider-mark {
+ top: 0;
+ left: 18px;
+ height: 100%;
+}
+
+.rc-slider-vertical .rc-slider-step {
+ height: 100%;
+ width: 4px;
+}
+
+.rc-slider-vertical .rc-slider-dot {
+ left: 2px;
+ margin-bottom: -4px;
+}
+
+.rc-slider-vertical .rc-slider-dot:first-child {
+ margin-bottom: -4px;
+}
+
+.rc-slider-vertical .rc-slider-dot:last-child {
+ margin-bottom: -4px;
+}
+
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+ animation-duration: .3s;
+ animation-fill-mode: both;
+ display: block !important;
+ animation-play-state: paused;
+}
+
+.rc-slider-tooltip-zoom-down-leave {
+ animation-duration: .3s;
+ animation-fill-mode: both;
+ display: block !important;
+ animation-play-state: paused;
+}
+
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+ animation-name: rcSliderTooltipZoomDownIn;
+ animation-play-state: running;
+}
+
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+ animation-name: rcSliderTooltipZoomDownOut;
+ animation-play-state: running;
+}
+
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+ transform: scale(0, 0);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.rc-slider-tooltip-zoom-down-leave {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+@keyframes rcSliderTooltipZoomDownIn {
+ 0% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(0, 0);
+ }
+
+ 100% {
+ transform-origin: 50% 100%;
+ transform: scale(1, 1);
+ }
+}
+
+@keyframes rcSliderTooltipZoomDownOut {
+ 0% {
+ transform-origin: 50% 100%;
+ transform: scale(1, 1);
+ }
+
+ 100% {
+ opacity: 0;
+ transform-origin: 50% 100%;
+ transform: scale(0, 0);
+ }
+}
+
+.rc-slider-tooltip {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+ visibility: visible;
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-tooltip * {
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.rc-slider-tooltip-hidden {
+ display: none;
+}
+
+.rc-slider-tooltip-placement-top {
+ padding: 4px 0 8px 0;
+}
+
+.rc-slider-tooltip-inner {
+ padding: 4px 6px 4px;
+ min-width: 24px;
+ height: 24px;
+ font-size: 12px;
+ line-height: 1;
+ color: #000;
+ text-align: center;
+ text-decoration: none;
+}
+
+.rc-slider-tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+ bottom: 4px;
+ left: 50%;
+ margin-left: -4px;
+ border-width: 4px 4px 0;
+ border-top-color: #6c6c6c;
+}
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
index 3fc6b381d..176240f2e 100644
--- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx
+++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
@@ -1,5 +1,5 @@
import Slider from 'rc-slider';
-import 'rc-slider/assets/index.css';
+//import 'rc-slider/assets/index.css';
import * as React from 'react';
import styled from 'styled-components';