Remove UI (#52)

* use token0 as base in all calculations

* refactor

* fix price order

* fix existing position ticks

* remove empty space

* basic remove page
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

src/components/Button/index.tsx

@@ -226,6 +226,7 @@ export const ButtonText = styled(Base)`
   padding: 0;
   width: fit-content;
   background: none;
+  text-decoration: none;
   &:focus {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     text-decoration: underline;

src/components/Slider/index.tsx

@@ -19,7 +19,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
     -webkit-appearance: none;
     height: ${({ size }) => size}px;
     width: ${({ size }) => size}px;
-    background-color: #565a69;
+    background-color: ${({ theme }) => theme.blue1};
     border-radius: 100%;
     border: none;
     transform: translateY(-50%);
@@ -62,7 +62,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
   }
 
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(90deg, ${({ theme }) => theme.bg5}, ${({ theme }) => theme.bg3});
+    background: linear-gradient(90deg, ${({ theme }) => theme.blue1}, ${({ theme }) => theme.blue2});
     height: 2px;
   }
 
@@ -96,7 +96,15 @@ interface InputSliderProps {
   size?: number
 }
 
-export default function Slider({ value, onChange, min = 0, step = 1, max = 100, size = 28 }: InputSliderProps) {
+export default function Slider({
+  value,
+  onChange,
+  min = 0,
+  step = 1,
+  max = 100,
+  size = 28,
+  ...rest
+}: InputSliderProps) {
   const changeCallback = useCallback(
     (e) => {
       onChange(parseInt(e.target.value))
@@ -107,9 +115,10 @@ export default function Slider({ value, onChange, min = 0, step = 1, max = 100,
   return (
     <StyledRangeInput
       size={size}
+      {...rest}
       type="range"
       value={value}
-      style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
+      style={{ padding: '15px 0' }}
       onChange={changeCallback}
       aria-labelledby="input slider"
       step={step}

src/components/TransactionConfirmationModal/index.tsx

@@ -17,6 +17,7 @@ import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
 
 const Wrapper = styled.div`
   width: 100%;
+  padding: 1rem;
 `
 const Section = styled(AutoColumn)<{ inline?: boolean }>`
   padding: ${({ inline }) => (inline ? '0' : '24px')};

src/pages/AddLiquidity/index.tsx

 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, TokenAmount, Percent, ETHER } from '@uniswap/sdk-core'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
+import { WETH9 } from '@uniswap/sdk-core'
 import { Link2, AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
@@ -225,17 +226,8 @@ export default function AddLiquidity({
               setAttemptingTxn(false)
               addTransaction(response, {
                 summary: noLiquidity
-                  ? 'Create Pool + '
-                  : '' + 'Add ' + !depositADisabled
-                  ? parsedAmounts[Field.CURRENCY_A]?.toSignificant(3) +
-                    ' ' +
-                    currencies[Field.CURRENCY_A]?.symbol +
-                    !outOfRange
-                  : ''
-                  ? ' and '
-                  : '' + !depositBDisabled
-                  ? parsedAmounts[Field.CURRENCY_B]?.toSignificant(3) + ' ' + currencies[Field.CURRENCY_B]?.symbol
-                  : '',
+                  ? `Create pool and add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`
+                  : `Add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`,
               })
               setTxHash(response.hash)
               ReactGA.event({
@@ -273,13 +265,17 @@ export default function AddLiquidity({
   const handleCurrencyASelect = useCallback(
     (currencyA: Currency) => {
       const newCurrencyIdA = currencyId(currencyA)
+      //switch order if same selected
       if (newCurrencyIdA === currencyIdB) {
         history.push(`/add/${currencyIdB}/${currencyIdA}`)
+      } else if (chainId && newCurrencyIdA === WETH9[chainId]?.address && currencyIdB === 'ETH') {
+        // prevent eth / weth
+        history.push(`/add/${newCurrencyIdA}`)
       } else {
         history.push(`/add/${newCurrencyIdA}/${currencyIdB ?? 'ETH'}`)
       }
     },
-    [currencyIdB, history, currencyIdA]
+    [currencyIdB, chainId, history, currencyIdA]
   )
   const handleCurrencyBSelect = useCallback(
     (currencyB: Currency) => {
@@ -290,11 +286,14 @@ export default function AddLiquidity({
         } else {
           history.push(`/add/${newCurrencyIdB}`)
         }
+      } else if (chainId && newCurrencyIdB === WETH9[chainId]?.address && currencyIdA === 'ETH') {
+        // prevent eth / weth
+        history.push(`/add/${newCurrencyIdB}`)
       } else {
         history.push(`/add/${currencyIdA ?? 'ETH'}/${newCurrencyIdB}`)
       }
     },
-    [currencyIdA, history, currencyIdB]
+    [currencyIdA, chainId, currencyIdB, history]
   )
 
   const handleFeePoolSelect = useCallback(

src/pages/AddLiquidity/styled.tsx

@@ -26,6 +26,7 @@ export const RangeBadge = styled(Card)<{ inRange?: boolean }>`
   font-weight: 500;
   border-radius: 8px;
   padding: 4px 6px;
+  color: ${({ theme }) => theme.black};
   background-color: ${({ inRange, theme }) => (inRange ? theme.green1 : theme.yellow2)};
 `
 

src/pages/Pool/PositionPage.tsx

@@ -48,17 +48,17 @@ const ResponsiveGrid = styled.div`
   display: grid;
   grid-gap: 1em;
 
-  grid-template-columns: 1.5fr repeat(3, 1fr);
+  grid-template-columns: 1.5fr repeat(2, 1fr);
 
   @media screen and (max-width: 900px) {
-    grid-template-columns: 1.5fr repeat(3, 1fr);
+    grid-template-columns: 1.5fr repeat(2, 1fr);
     & :nth-child(4) {
       display: none;
     }
   }
 
   @media screen and (max-width: 700px) {
-    grid-template-columns: 20px 1.5fr repeat(3, 1fr);
+    grid-template-columns: 20px 1.5fr repeat(2, 1fr);
     & :nth-child(4) {
       display: none;
     }
@@ -288,9 +288,8 @@ export function PositionPage({
           <AutoColumn gap="lg">
             <ResponsiveGrid>
               <Label>Tokens</Label>
-              <Label end={true}>Current</Label>
+              <Label end={true}>Amount Deposited</Label>
               <Label end={true}>Fees</Label>
-              <Label end={true}>USD Value</Label>
             </ResponsiveGrid>
             <ResponsiveGrid>
               <RowFixed>
@@ -299,7 +298,6 @@ export function PositionPage({
               </RowFixed>
               <Label end={true}>{position?.amount0.toSignificant(4)}</Label>
               <Label end={true}>{feeValue0 ? formatTokenAmount(feeValue0, 4) : '-'}</Label>
-              <Label end={true}>-</Label>
             </ResponsiveGrid>
             <ResponsiveGrid>
               <RowFixed>
@@ -308,7 +306,6 @@ export function PositionPage({
               </RowFixed>
               <Label end={true}>{position?.amount1.toSignificant(4)}</Label>
               <Label end={true}>{feeValue1 ? formatTokenAmount(feeValue1, 4) : '-'}</Label>
-              <Label end={true}>-</Label>
             </ResponsiveGrid>
           </AutoColumn>
         </DarkCard>
@@ -322,13 +319,13 @@ export function PositionPage({
                   <RowFixed>
                     <TYPE.label>{price0Lower?.toSignificant(4)}</TYPE.label>
                     <TYPE.label ml="10px">
-                      {currency1?.symbol} / {currency0?.symbol}
+                      {currency0?.symbol} / {currency1?.symbol}
                     </TYPE.label>
                   </RowFixed>
                   <RowFixed>
                     <TYPE.label>{price1Lower?.toSignificant(4)}</TYPE.label>
                     <TYPE.label ml="10px">
-                      {currency0?.symbol} / {currency1?.symbol}
+                      {currency1?.symbol} / {currency0?.symbol}
                     </TYPE.label>
                   </RowFixed>
                   <DarkBadge>
@@ -346,13 +343,13 @@ export function PositionPage({
                   <RowFixed>
                     <TYPE.label>{price0Upper?.toSignificant(4)}</TYPE.label>
                     <TYPE.label ml="10px">
-                      {currency1?.symbol} / {currency0?.symbol}
+                      {currency0?.symbol} / {currency1?.symbol}
                     </TYPE.label>
                   </RowFixed>
                   <RowFixed>
                     <TYPE.label>{price1Upper?.toSignificant(4)}</TYPE.label>
                     <TYPE.label ml="10px">
-                      {currency0?.symbol} / {currency1?.symbol}
+                      {currency1?.symbol} / {currency0?.symbol}
                     </TYPE.label>
                   </RowFixed>
                   <DarkBadge>

src/pages/Pool/index.tsx

@@ -138,7 +138,7 @@ export default function Pool() {
           <AutoColumn gap="lg" style={{ width: '100%' }}>
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
               <HideSmall>
-                <TYPE.mediumHeader>{t('Pool Overview')}</TYPE.mediumHeader>
+                <TYPE.mediumHeader>Your Positions</TYPE.mediumHeader>
               </HideSmall>
               <ButtonRow>
                 <Menu

src/pages/RemoveLiquidity/styled.ts

+import { MaxButton } from 'pages/Pool/styleds'
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  position: relative;
+  padding: 20px;
+  min-width: 460px;
+`
+
+export const SmallMaxButton = styled(MaxButton)`
+  font-size: 12px;
+`

src/pages/Swap/index.tsx

@@ -89,14 +89,7 @@ export default function Swap({ history }: RouteComponentProps) {
 
   // swap state
   const { independentField, typedValue, recipient } = useSwapState()
-  const {
-    v2Trade,
-    currencyBalances,
-    parsedAmount,
-    currencies,
-    v3Route,
-    inputError: swapInputError,
-  } = useDerivedSwapInfo()
+  const { v2Trade, currencyBalances, parsedAmount, currencies, inputError: swapInputError } = useDerivedSwapInfo()
 
   const { wrapType, execute: onWrap, inputError: wrapInputError } = useWrapCallback(
     currencies[Field.INPUT],

src/state/burn/v3/hooks.ts

@@ -24,6 +24,7 @@ export function useDerivedV3BurnInfo(
   liquidityValue1?: TokenAmount
   feeValue0?: TokenAmount
   feeValue1?: TokenAmount
+  outOfRange: boolean
   error?: string
 } {
   const { account } = useActiveWeb3React()
@@ -52,6 +53,9 @@ export function useDerivedV3BurnInfo(
 
   const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, position)
 
+  const outOfRange =
+    pool && position ? pool.tickCurrent < position.tickLower || pool.tickCurrent > position.tickUpper : false
+
   let error: string | undefined
   if (!account) {
     error = 'Connect Wallet'
@@ -65,6 +69,7 @@ export function useDerivedV3BurnInfo(
     liquidityValue1,
     feeValue0,
     feeValue1,
+    outOfRange,
     error,
   }
 }