perf(cleanup): remove the material ui dependency for the input range

Uniswap · May 31, 2020 · 98d25dd · 98d25dd
1 parent f289dec
commit 98d25dd
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 254 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "@ethersproject/strings": "^5.0.0-beta.136",
     "@ethersproject/units": "^5.0.0-beta.132",
     "@ethersproject/wallet": "^5.0.0-beta.141",
-    "@material-ui/core": "^4.9.5",
     "@popperjs/core": "^2.4.0",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -1,61 +1,127 @@
-import React from 'react'
-import Slider from '@material-ui/core/Slider'
-import { withStyles } from '@material-ui/core/styles'
-
-const StyledSlider = withStyles({
-  root: {
-    width: '90%',
-    color: '#565A69',
-    height: 4,
-    marginLeft: '15px',
-    marginRight: '15px',
-    padding: '15px 0'
-  },
-  thumb: {
-    height: 28,
-    width: 28,
-    backgroundColor: '#565A69',
-    marginTop: -14,
-    marginLeft: -14,
-    '&:focus,&:hover,&$active': {
-      boxShadow:
-        '0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.04)',
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {}
+import React, { useCallback } from 'react'
+import styled from 'styled-components'
+
+const StyledRangeInput = styled.input<{ value: number }>`
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  width: 100%; /* Specific width is required for Firefox. */
+  background: transparent; /* Otherwise white in Chrome */
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    border: none;
+    transform: translateY(-50%);
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
     }
-  },
-  active: {},
-  track: {
-    height: 4
-  },
-  rail: {
-    height: 2,
-    opacity: 0.5,
-    backgroundColor: '#C3C5CB'
-  },
-  mark: {
-    backgroundColor: '#C3C5CB',
-    height: 12,
-    width: 2,
-    marginTop: -4
-  },
-  markActive: {
-    opacity: 1,
-    backgroundColor: 'currentColor',
-    height: 12,
-    width: 2,
-    marginTop: -4
-  }
-})(Slider)
+  }
+
+  &::-moz-range-thumb {
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    border: none;
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &::-ms-thumb {
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.bg5},
+      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3}
+    );
+    height: 2px;
+  }
+
+  &::-moz-range-track {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.bg5},
+      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3}
+    );
+    height: 2px;
+  }
+
+  &::-ms-track {
+    width: 100%;
+    border-color: transparent;
+    color: transparent;
+
+    background: ${({ theme }) => theme.bg5};
+    height: 2px;
+  }
+  &::-ms-fill-lower {
+    background: ${({ theme }) => theme.bg5};
+  }
+  &::-ms-fill-upper {
+    background: ${({ theme }) => theme.bg3};
+  }
+`
 
 interface InputSliderProps {
   value: number
   onChange: (value: number) => void
 }
 
 export default function InputSlider({ value, onChange }: InputSliderProps) {
-  function wrappedOnChange(_, value) {
-    onChange(value)
-  }
-  return <StyledSlider value={value} onChange={wrappedOnChange} aria-labelledby="input-slider" step={1} />
+  const changeCallback = useCallback(
+    e => {
+      onChange(e.target.value)
+    },
+    [onChange]
+  )
+
+  return (
+    <StyledRangeInput
+      type="range"
+      value={value}
+      style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
+      onChange={changeCallback}
+      aria-labelledby="input-slider"
+      step={1}
+      min={0}
+      max={100}
+    />
+  )
 }
diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx
@@ -1,7 +1,7 @@
 import { splitSignature } from '@ethersproject/bytes'
 import { Contract } from '@ethersproject/contracts'
 import { Percent, WETH } from '@uniswap/sdk'
-import React, { useContext, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router'
@@ -384,6 +384,13 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
     tokens[Field.TOKEN_A]?.symbol
   } and ${parsedAmounts[Field.TOKEN_B]?.toSignificant(6)} ${tokens[Field.TOKEN_B]?.symbol}`
 
+  const liquidityPercentChangeCallback = useCallback(
+    (value: number) => {
+      onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
+    },
+    [onUserInput]
+  )
+
   return (
     <>
       <AppBody>
@@ -426,9 +433,7 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
                   <>
                     <Slider
                       value={Number.parseInt(parsedAmounts[Field.LIQUIDITY_PERCENT].toFixed(0))}
-                      onChange={value => {
-                        onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
-                      }}
+                      onChange={liquidityPercentChangeCallback}
                     />
                     <RowBetween>
                       <MaxButton onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '25')} width="20%">