add slider, big fixes (#715)

src/components/ExchangePage/index.tsx

@@ -1426,7 +1426,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
             error={!!warningHigh}
           >
             <Text fontSize={20} fontWeight={500}>
-              {generalError
+              {!account
+                ? 'Connect Wallet'
+                : generalError
                 ? generalError
                 : inputError
                 ? inputError

src/components/Slider/index.js

@@ -24,7 +24,7 @@ import { useDebounce } from '../../hooks'
 const StyledSlider = withStyles({
   root: {
     width: '95%',
-    color: '#3880ff',
+    color: '#ff007a',
     height: 4,
     marginLeft: '15px',
     padding: '15px 0'
@@ -32,7 +32,7 @@ const StyledSlider = withStyles({
   thumb: {
     height: 28,
     width: 28,
-    backgroundColor: '#2172E5',
+    backgroundColor: '#ff007a',
     marginTop: -14,
     marginLeft: -14,
     '&:focus,&:hover,&$active': {
@@ -78,17 +78,17 @@ export default function InputSlider({ value, onChange, override }) {
   }
 
   useEffect(() => {
-    if (override && value !== internalVal) {
+    if (override) {
       setInternalVal(value)
     }
-  }, [internalVal, override, value])
+  }, [override, value])
 
   return (
     <StyledSlider
       value={typeof internalVal === 'number' ? internalVal : 0}
       onChange={handleChange}
       aria-labelledby="input-slider"
-      // marks={marks}
+      step={1}
     />
   )
 }

src/components/WalletModal/index.js

@@ -127,6 +127,15 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
   const walletModalOpen = useWalletModalOpen()
   const toggleWalletModal = useWalletModalToggle()
 
+  const previousAccount = usePrevious(account)
+
+  // close on connection, when logged out before
+  useEffect(() => {
+    if (account && !previousAccount && walletModalOpen) {
+      toggleWalletModal()
+    }
+  }, [account, previousAccount, toggleWalletModal, walletModalOpen])
+
   // always reset to account view
   useEffect(() => {
     if (walletModalOpen) {

src/pages/Supply/AddLiquidity.tsx

@@ -677,7 +677,7 @@ function AddLiquidity({ token0, token1, step = false }) {
           value={formattedAmounts[Field.OUTPUT]}
           onUserInput={onUserInput}
           onMax={() => {
-            onMax(maxAmountOutput?.toExact(), Field.OUTPUT)
+            maxAmountOutput && onMax(maxAmountOutput?.toExact(), Field.OUTPUT)
           }}
           atMax={atMaxAmountOutput}
           token={tokens[Field.OUTPUT]}

src/pages/Supply/RemoveLiquidity.tsx

@@ -4,6 +4,7 @@ import { ethers } from 'ethers'
 import { parseUnits } from '@ethersproject/units'
 import { TokenAmount, JSBI, Route, WETH, Percent, Token, Pair } from '@uniswap/sdk'
 
+import Slider from '../../components/Slider'
 import TokenLogo from '../../components/TokenLogo'
 import DoubleLogo from '../../components/DoubleLogo'
 import PositionCard from '../../components/PositionCard'
@@ -271,7 +272,19 @@ export default function RemoveLiquidity({ token0, token1 }) {
     parsedAmounts[Field.LIQUIDITY] &&
     new Percent(parsedAmounts[Field.LIQUIDITY]?.raw, userLiquidity.raw).toFixed(0)
 
+  const [override, setSliderOverride] = useState(false) // override slider internal value
   const handlePresetPercentage = newPercent => {
+    setSliderOverride(true)
+    onUserInput(
+      Field.LIQUIDITY,
+      new TokenAmount(
+        pair?.liquidityToken,
+        JSBI.divide(JSBI.multiply(userLiquidity.raw, JSBI.BigInt(newPercent)), JSBI.BigInt(100))
+      ).toExact()
+    )
+  }
+
+  const handleSliderChange = (event, newPercent) => {
     onUserInput(
       Field.LIQUIDITY,
       new TokenAmount(
@@ -627,6 +640,9 @@ export default function RemoveLiquidity({ token0, token1 }) {
                 {derivedPerecent ? (parseInt(derivedPerecent) < 1 ? '<1' : derivedPerecent) : '0'}%
               </Text>
             </Row>
+            {!showAdvanced && (
+              <Slider value={parseFloat(derivedPerecent)} onChange={handleSliderChange} override={override} />
+            )}
             {!showAdvanced && (
               <RowBetween>
                 <MaxButton onClick={e => handlePresetPercentage(25)} width="20%">