improvement(Add): skeleton UI with dummy state (#29)

* start add liquidity * update add state, add input UI * basic add skeleton with dummy state * refactor with preview steps on add

improvement(Add): skeleton UI with dummy state (#29)
* start add liquidity * update add state, add input UI * basic add skeleton with dummy state * refactor with preview steps on add
eeb258eb · Ian Lapham · GitHub · ab1538b1 · eeb258eb · eeb258eb
Commit eeb258eb authored Mar 08, 2021 by Ian Lapham Committed by GitHub Mar 08, 2021
23 changed files
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -87,5 +87,28 @@
  "forAtLeast": "for at least ",
  "brokenToken": "The selected token is not compatible with Uniswap V1. Adding liquidity will result in locked funds.",
  "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
-  "tokenSearchPlaceholder": "Search name or paste address"
+  "tokenSearchPlaceholder": "Search name or paste address",
+  "selectFee": "Select Fee",
+  "selectLiquidityRange": "Select liquidity range",
+  "selectPool": "Select Fee Pool",
+  "inputTokens": "Input Tokens",
+  "fee": "fee",
+  "setLimits": "Set Limits",
+  "percent": "Percent",
+  "rate": "Rate",
+  "currentRate": "Current {{label}} Rate:",
+  "inactiveRangeWarning": "Your position will not be active or earn fees until the selected rates come into range.",
+  "invalidRangeWarning": "Invalid Range",
+  "connectWallet": "Connect Wallet",
+  "unsupportedAsset": "Unsupported Asset",
+  "feePool": "Fee Pool",
+  "rebalanceMessage": "Your underlying tokens will be automatically rebalanced when the rate of the pool changes and may be different when you withdraw the position.",
+  "addEarnHelper": "You will earn fees from trades proportional to your share of the pool.",
+  "learnMoreAboutFess": " Learn more about earning fees.",
+  "selectAPool": "Select a pool to provide liquidity to.",
+  "poolType": "Select a pool type based on your preferred liquidity provider fee.",
+  "rangeWarning": "Your liquidity will only be active and earning fees when the rate of the pool is within this price range.",
+  "chooseLiquidityAmount": "Choose an amount of tokens to open this liquidity position. If you don’t have enough tokens you can trade for them with a Swap.",
+  "selectPriceLimits": "Select Price Limits",
+  "inputTokenDynamic": "Input {{label}}"
 }
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { darken, lighten } from 'polished'
 import { RowBetween } from '../Row'
-import { ChevronDown } from 'react-feather'
+import { ChevronDown, Check } from 'react-feather'
 import { Button as RebassButton, ButtonProps } from 'rebass/styled-components'
 const Base = styled(RebassButton)<{
@@ -221,6 +221,26 @@ export const ButtonEmpty = styled(Base)`
  }
 `
+export const ButtonText = styled(Base)`
+  padding: 0;
+  width: fit-content;
+  background: none;
+  &:focus {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    text-decoration: underline;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+  &:active {
+    text-decoration: underline;
+  }
+  &:disabled {
+    opacity: 50%;
+    cursor: auto;
+  }
+`
 export const ButtonWhite = styled(Base)`
  border: 1px solid #edeef2;
  background-color: ${({ theme }) => theme.bg1};
@@ -337,3 +357,48 @@ export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonPr
    return <ButtonPrimary {...rest} />
  }
 }
+const ActiveOutlined = styled(ButtonOutlined)`
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.primary1};
+`
+const Circle = styled.div`
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.primary1};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+const CheckboxWrapper = styled.div`
+  width: 30px;
+  padding: 0 10px;
+`
+export function ButtonRadioChecked({ active = false, children, ...rest }: { active?: boolean } & ButtonProps) {
+  if (!active) {
+    return (
+      <ButtonOutlined borderRadius="12px" padding="12px 8px" {...rest}>
+        {<RowBetween>{children}</RowBetween>}
+      </ButtonOutlined>
+    )
+  } else {
+    return (
+      <ActiveOutlined {...rest} padding="12px 8px" borderRadius="12px">
+        {
+          <RowBetween>
+            {children}
+            <CheckboxWrapper>
+              <Circle>
+                <Check size={13} />
+              </Circle>
+            </CheckboxWrapper>
+          </RowBetween>
+        }
+      </ActiveOutlined>
+    )
+  }
+}
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
-import React from 'react'
 import styled from 'styled-components'
-import { CardProps, Text } from 'rebass'
 import { Box } from 'rebass/styled-components'
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`
@@ -26,13 +24,17 @@ export const GreyCard = styled(Card)`
  background-color: ${({ theme }) => theme.bg3};
 `
+export const DarkGreyCard = styled(Card)`
+  background-color: ${({ theme }) => theme.bg2};
+`
 export const OutlineCard = styled(Card)`
  border: 1px solid ${({ theme }) => theme.bg3};
 `
 export const YellowCard = styled(Card)`
  background-color: rgba(243, 132, 30, 0.05);
-  color: ${({ theme }) => theme.yellow2};
+  color: ${({ theme }) => theme.yellow3};
  font-weight: 500;
 `
@@ -42,19 +44,9 @@ export const PinkCard = styled(Card)`
  font-weight: 500;
 `
-const BlueCardStyled = styled(Card)`
+export const BlueCard = styled(Card)`
  background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.primary1};
+  color: ${({ theme }) => theme.blue2};
  border-radius: 12px;
  width: fit-content;
 `
-export const BlueCard = ({ children }: CardProps) => {
-  return (
-    <BlueCardStyled>
-      <Text fontWeight={500} color="#2172E5">
-        {children}
-      </Text>
-    </BlueCardStyled>
-  )
-}
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -6,7 +6,7 @@ import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { RowBetween } from '../Row'
+import { RowBetween, RowFixed } from '../Row'
 import { TYPE } from '../../theme'
 import { Input as NumericalInput } from '../NumericalInput'
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -15,15 +15,24 @@ import { useActiveWeb3React } from '../../hooks'
 import { useTranslation } from 'react-i18next'
 import useTheme from '../../hooks/useTheme'
-const InputRow = styled.div<{ selected: boolean }>`
+const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap}
+  ${({ theme }) => theme.flexColumnNoWrap}
-  align-items: center;
+  position: relative;
-  padding: ${({ selected }) => (selected ? '0.75rem 0.5rem 0.75rem 1rem' : '0.75rem 0.75rem 0.75rem 1rem')};
+  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
+  background-color: ${({ theme }) => theme.bg2};
+  z-index: 1;
+  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
+`
+const Container = styled.div<{ hideInput: boolean }>`
+  border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
+  border: 1px solid ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.bg1};
+  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
 `
-const CurrencySelect = styled.button<{ selected: boolean }>`
+const CurrencySelect = styled.button<{ selected: boolean; hideInput?: boolean }>`
  align-items: center;
-  height: 2.2rem;
  font-size: 20px;
  font-weight: 500;
  background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
@@ -34,7 +43,9 @@ const CurrencySelect = styled.button<{ selected: boolean }>`
  cursor: pointer;
  user-select: none;
  border: none;
-  padding: 0 0.5rem;
+  height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.2rem')};
+  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  :focus,
  :hover {
@@ -42,13 +53,19 @@ const CurrencySelect = styled.button<{ selected: boolean }>`
  }
 `
+const InputRow = styled.div<{ selected: boolean }>`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  padding: ${({ selected }) => (selected ? '0.75rem 0.5rem 0.75rem 1rem' : '0.75rem 0.75rem 0.75rem 1rem')};
+`
 const LabelRow = styled.div`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  color: ${({ theme }) => theme.text1};
  font-size: 0.75rem;
  line-height: 1rem;
-  padding: 0.75rem 1rem 0 1rem;
+  padding: 0rem 1rem 0.75rem 1rem;
  span:hover {
    cursor: pointer;
    color: ${({ theme }) => darken(0.2, theme.text2)};
@@ -71,20 +88,6 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
  }
 `
-const InputPanel = styled.div<{ hideInput?: boolean }>`
-  ${({ theme }) => theme.flexColumnNoWrap}
-  position: relative;
-  border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
-  background-color: ${({ theme }) => theme.bg2};
-  z-index: 1;
-`
-const Container = styled.div<{ hideInput: boolean }>`
-  border-radius: ${({ hideInput }) => (hideInput ? '8px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.bg2};
-  background-color: ${({ theme }) => theme.bg1};
-`
 const StyledTokenName = styled.span<{ active?: boolean }>`
  ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.75rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
  font-size:  ${({ active }) => (active ? '20px' : '16px')};
@@ -148,6 +151,7 @@ export default function CurrencyInputPanel({
  id,
  showCommonBases,
  customBalanceText,
+  ...rest
 }: CurrencyInputPanelProps) {
  const { t } = useTranslation()
@@ -161,30 +165,8 @@ export default function CurrencyInputPanel({
  }, [setModalOpen])
  return (
-    <InputPanel id={id}>
+    <InputPanel id={id} hideInput={hideInput} {...rest}>
      <Container hideInput={hideInput}>
-        {!hideInput && (
-          <LabelRow>
-            <RowBetween>
-              <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
-                {label}
-              </TYPE.body>
-              {account && (
-                <TYPE.body
-                  onClick={onMax}
-                  color={theme.text2}
-                  fontWeight={500}
-                  fontSize={14}
-                  style={{ display: 'inline', cursor: 'pointer' }}
-                >
-                  {!hideBalance && !!currency && selectedCurrencyBalance
-                    ? (customBalanceText ?? 'Balance: ') + selectedCurrencyBalance?.toSignificant(6)
-                    : ' -'}
-                </TYPE.body>
-              )}
-            </RowBetween>
-          </LabelRow>
-        )}
        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableCurrencySelect}>
          {!hideInput && (
            <>
@@ -202,6 +184,7 @@ export default function CurrencyInputPanel({
          )}
          <CurrencySelect
            selected={!!currency}
+            hideInput={hideInput}
            className="open-currency-select-button"
            onClick={() => {
              if (!disableCurrencySelect) {
@@ -210,28 +193,52 @@ export default function CurrencyInputPanel({
            }}
          >
            <Aligner>
-              {pair ? (
+              <RowFixed>
-                <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
+                {pair ? (
-              ) : currency ? (
+                  <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
-                <CurrencyLogo currency={currency} size={'24px'} />
+                ) : currency ? (
-              ) : null}
+                  <CurrencyLogo currency={currency} size={'24px'} />
-              {pair ? (
+                ) : null}
-                <StyledTokenName className="pair-name-container">
+                {pair ? (
-                  {pair?.token0.symbol}:{pair?.token1.symbol}
+                  <StyledTokenName className="pair-name-container">
-                </StyledTokenName>
+                    {pair?.token0.symbol}:{pair?.token1.symbol}
-              ) : (
+                  </StyledTokenName>
-                <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
+                ) : (
-                  {(currency && currency.symbol && currency.symbol.length > 20
+                  <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
-                    ? currency.symbol.slice(0, 4) +
+                    {(currency && currency.symbol && currency.symbol.length > 20
-                      '...' +
+                      ? currency.symbol.slice(0, 4) +
-                      currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
+                        '...' +
-                    : currency?.symbol) || t('selectToken')}
+                        currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                </StyledTokenName>
+                      : currency?.symbol) || t('selectToken')}
-              )}
+                  </StyledTokenName>
+                )}
+              </RowFixed>
              {!disableCurrencySelect && <StyledDropDown selected={!!currency} />}
            </Aligner>
          </CurrencySelect>
        </InputRow>
+        {!hideInput && (
+          <LabelRow>
+            <RowBetween>
+              <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
+                {label}
+              </TYPE.body>
+              {account && (
+                <TYPE.body
+                  onClick={onMax}
+                  color={theme.text2}
+                  fontWeight={500}
+                  fontSize={14}
+                  style={{ display: 'inline', cursor: 'pointer' }}
+                >
+                  {!hideBalance && !!currency && selectedCurrencyBalance
+                    ? (customBalanceText ?? 'Balance: ') + selectedCurrencyBalance?.toSignificant(6)
+                    : ' -'}
+                </TYPE.body>
+              )}
+            </RowBetween>
+          </LabelRow>
+        )}
      </Container>
      {!disableCurrencySelect && onCurrencySelect && (
        <CurrencySearchModal

--- a/src/components/InputStepCounter/InputStepCounter.tsx
+++ b/src/components/InputStepCounter/InputStepCounter.tsx
+import React, { useState, useCallback, useEffect } from 'react'
+import { OutlineCard } from 'components/Card'
+import { RowBetween } from 'components/Row'
+import { ButtonGray } from 'components/Button'
+import { TYPE } from 'theme'
+import { Input as NumericalInput } from '../NumericalInput'
+import styled, { keyframes, css } from 'styled-components'
+const pulse = (color: string) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${color};
+  }
+  70% {
+    box-shadow: 0 0 0 2px ${color};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${color};
+  }
+`
+const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
+  border-color: ${({ active, theme }) => active && theme.blue1};
+  padding: 8px 12px;
+  ${({ pulsing, theme }) =>
+    pulsing &&
+    css`
+      animation: ${pulse(theme.blue1)} 0.8s linear;
+    `}
+`
+const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
+  background-color: ${({ theme }) => theme.bg0};
+  text-align: ${({ usePercent }) => (usePercent ? 'right' : 'center')};
+  margin-right: 2px;
+`
+const ContentWrapper = styled(RowBetween)`
+  padding: 0 8px;
+  width: 70%;
+`
+interface StepCounterProps {
+  value: string
+  onUserInput: (value: string) => void
+  onIncrement?: () => void
+  onDecrement?: () => void
+  usePercent?: boolean
+  prependSymbol?: string | undefined
+}
+const StepCounter = ({ value, onUserInput, usePercent = false, prependSymbol }: StepCounterProps) => {
+  //  for focus state, styled components doesnt let you select input parent container
+  const [active, setActive] = useState(false)
+  // let user type value and only update parent value on blur
+  const [localValue, setLocalValue] = useState('')
+  const [useLocalValue, setUseLocalValue] = useState(false)
+  // animation if parent value updates local value
+  const [pulsing, setPulsing] = useState<boolean>(false)
+  const handleOnFocus = () => {
+    setUseLocalValue(true)
+    setActive(true)
+  }
+  const handleOnBlur = useCallback(() => {
+    setUseLocalValue(false)
+    setActive(false)
+    onUserInput(localValue) // trigger update on parent value
+  }, [localValue, onUserInput])
+  useEffect(() => {
+    if (localValue !== value && !useLocalValue) {
+      setTimeout(() => {
+        setLocalValue(value) // reset local value to match parent
+        setPulsing(true) // trigger animation
+        setTimeout(function () {
+          setPulsing(false)
+        }, 1800)
+      }, 400)
+    }
+  }, [localValue, useLocalValue, value])
+  const handleDeccrement = useCallback(() => {
+    localValue && setLocalValue((parseFloat(localValue) * 0.997).toString())
+  }, [localValue])
+  const handleIncrement = useCallback(() => {
+    localValue && setLocalValue((parseFloat(localValue) * 1.003).toString())
+  }, [localValue])
+  return (
+    <FocusedOutlineCard pulsing={pulsing} active={active} onFocus={handleOnFocus} onBlur={handleOnBlur}>
+      <RowBetween>
+        <ButtonGray padding="2px 0px" borderRadius="8px" onClick={handleDeccrement} width="50px">
+          <TYPE.label>-</TYPE.label>
+        </ButtonGray>
+        <ContentWrapper>
+          <StyledInput
+            className="rate-input-0"
+            value={localValue}
+            fontSize="18px"
+            onUserInput={(val) => {
+              setLocalValue(val)
+            }}
+            prependSymbol={prependSymbol}
+            usePercent={usePercent}
+          />
+          {usePercent && <TYPE.main>%</TYPE.main>}
+        </ContentWrapper>
+        <ButtonGray padding="2px 0px" borderRadius="8px" onClick={handleIncrement} width="50px">
+          <TYPE.label>+</TYPE.label>
+        </ButtonGray>
+      </RowBetween>
+    </FocusedOutlineCard>
+  )
+}
+export default StepCounter
--- a/src/components/NumericalInput/index.tsx
+++ b/src/components/NumericalInput/index.tsx
@@ -43,6 +43,7 @@ export const Input = React.memo(function InnerInput({
  value,
  onUserInput,
  placeholder,
+  prependSymbol,
  ...rest
 }: {
  value: string | number
@@ -50,6 +51,7 @@ export const Input = React.memo(function InnerInput({
  error?: boolean
  fontSize?: string
  align?: 'right' | 'left'
+  prependSymbol?: string | undefined
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
  const enforcer = (nextUserInput: string) => {
    if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
@@ -60,10 +62,21 @@ export const Input = React.memo(function InnerInput({
  return (
    <StyledInput
      {...rest}
-      value={value}
+      value={prependSymbol && value ? prependSymbol + value : value}
      onChange={(event) => {
-        // replace commas with periods, because uniswap exclusively uses period as the decimal separator
+        if (prependSymbol) {
-        enforcer(event.target.value.replace(/,/g, '.'))
+          const value = event.target.value
+          // cut off prepended symbol
+          const formattedValue = value.toString().includes(prependSymbol)
+            ? value.toString().slice(1, value.toString().length + 1)
+            : value
+          // replace commas with periods, because uniswap exclusively uses period as the decimal separator
+          enforcer(formattedValue.replace(/,/g, '.'))
+        } else {
+          enforcer(event.target.value.replace(/,/g, '.'))
+        }
      }}
      // universal input options
      inputMode="decimal"

--- a/src/components/QuestionHelper/index.tsx
+++ b/src/components/QuestionHelper/index.tsx
@@ -47,7 +47,7 @@ const QuestionMark = styled.span`
  font-size: 1rem;
 `
-export default function QuestionHelper({ text }: { text: string }) {
+export default function QuestionHelper({ text, size = 16 }: { text: string; size?: number }) {
  const [show, setShow] = useState<boolean>(false)
  const open = useCallback(() => setShow(true), [setShow])
@@ -57,7 +57,7 @@ export default function QuestionHelper({ text }: { text: string }) {
    <span style={{ marginLeft: 4 }}>
      <Tooltip text={text} show={show}>
        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
-          <Question size={16} />
+          <Question size={size} />
        </QuestionWrapper>
      </Tooltip>
    </span>

--- a/src/components/Toggle/MultiToggle.tsx
+++ b/src/components/Toggle/MultiToggle.tsx
 import React from 'react'
 import styled from 'styled-components'
-const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
+export const ToggleWrapper = styled.button<{ width?: string }>`
-  width: 100%;
-  padding: 0.25rem 0.5rem;
-  border-radius: 8px;
-  background: ${({ theme, isActive }) => (isActive ? theme.bg2 : 'none')};
-  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
-  font-size: 1rem;
-  font-weight: 400;
-  padding: 0.35rem 0.6rem;
-  :hover {
-    user-select: initial;
-    color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
-  }
-`
-const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean; width?: string }>`
  display: flex;
+  align-items: center;
  width: ${({ width }) => width ?? '100%'}
-  padding: 2px;
+  padding: 1px;
  background: ${({ theme }) => theme.bg0};
  border-radius: 8px;
  border: ${({ theme }) => '2px solid ' + theme.bg2};
@@ -27,6 +13,25 @@ const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean
  outline: none;
 `
+export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string }>`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 4px 0.5rem;
+  border-radius: 6px;
+  justify-content: center;
+  height: 100%;
+  background: ${({ theme, isActive }) => (isActive ? theme.bg2 : 'none')};
+  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
+  font-size: ${({ fontSize }) => fontSize ?? '1rem'};
+  font-weight: 500;
+  white-space: nowrap;
+  :hover {
+    user-select: initial;
+    color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
+  }
+`
 export interface ToggleProps {
  options: string[]
  activeIndex: number
@@ -37,17 +42,12 @@ export interface ToggleProps {
 export default function MultiToggle({ id, options, activeIndex, toggle, width }: ToggleProps) {
  return (
-    <StyledToggle id={id} isActive={activeIndex === 0} width={width}>
+    <ToggleWrapper id={id} width={width}>
      {options.map((option, index) => (
-        <ToggleElement
+        <ToggleElement key={id + '-' + index} isActive={index === activeIndex} onClick={() => toggle(index)}>
-          key={id + '-' + index}
-          isActive={index === activeIndex}
-          isOnSwitch={true}
-          onClick={() => toggle(index)}
-        >
          {option}
        </ToggleElement>
      ))}
-    </StyledToggle>
+    </ToggleWrapper>
  )
 }
--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@@ -23,7 +23,7 @@ const Section = styled(AutoColumn)`
 `
 const BottomSection = styled(Section)`
-  background-color: ${({ theme }) => theme.bg2};
+  // background-color: ${({ theme }) => theme.bg2};
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
 `
@@ -139,7 +139,7 @@ export function ConfirmationModalContent({
  title: string
  onDismiss: () => void
  topContent: () => React.ReactNode
-  bottomContent: () => React.ReactNode
+  bottomContent?: () => React.ReactNode | undefined
 }) {
  return (
    <Wrapper>
@@ -152,7 +152,7 @@ export function ConfirmationModalContent({
        </RowBetween>
        {topContent()}
      </Section>
-      <BottomSection gap="12px">{bottomContent()}</BottomSection>
+      {bottomContent && <BottomSection gap="12px">{bottomContent()}</BottomSection>}
    </Wrapper>
  )
 }

--- a/src/pages/AddLiquidity/ConfirmAddModalBottom.tsx
+++ b/src/pages/AddLiquidity/ConfirmAddModalBottom.tsx
-import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk'
-import React from 'react'
-import { Text } from 'rebass'
-import { ButtonPrimary } from '../../components/Button'
-import { RowBetween, RowFixed } from '../../components/Row'
-import CurrencyLogo from '../../components/CurrencyLogo'
-import { Field } from '../../state/mint/actions'
-import { TYPE } from '../../theme'
-export function ConfirmAddModalBottom({
-  noLiquidity,
-  price,
-  currencies,
-  parsedAmounts,
-  poolTokenPercentage,
-  onAdd,
-}: {
-  noLiquidity?: boolean
-  price?: Fraction
-  currencies: { [field in Field]?: Currency }
-  parsedAmounts: { [field in Field]?: CurrencyAmount }
-  poolTokenPercentage?: Percent
-  onAdd: () => void
-}) {
-  return (
-    <>
-      <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_A]?.symbol} Deposited</TYPE.body>
-        <RowFixed>
-          <CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
-          <TYPE.body>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.body>
-        </RowFixed>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_B]?.symbol} Deposited</TYPE.body>
-        <RowFixed>
-          <CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
-          <TYPE.body>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.body>
-        </RowFixed>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>Rates</TYPE.body>
-        <TYPE.body>
-          {`1 ${currencies[Field.CURRENCY_A]?.symbol} = ${price?.toSignificant(4)} ${
-            currencies[Field.CURRENCY_B]?.symbol
-          }`}
-        </TYPE.body>
-      </RowBetween>
-      <RowBetween style={{ justifyContent: 'flex-end' }}>
-        <TYPE.body>
-          {`1 ${currencies[Field.CURRENCY_B]?.symbol} = ${price?.invert().toSignificant(4)} ${
-            currencies[Field.CURRENCY_A]?.symbol
-          }`}
-        </TYPE.body>
-      </RowBetween>
-      <RowBetween>
-        <TYPE.body>Share of Pool:</TYPE.body>
-        <TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
-      </RowBetween>
-      <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
-        <Text fontWeight={500} fontSize={20}>
-          {noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
-        </Text>
-      </ButtonPrimary>
-    </>
-  )
-}
--- a/src/pages/AddLiquidity/ConfirmContent.tsx
+++ b/src/pages/AddLiquidity/ConfirmContent.tsx
+import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk'
+import React, { useState } from 'react'
+import { ButtonPrimary } from '../../components/Button'
+import { RowBetween, RowFixed } from '../../components/Row'
+import CurrencyLogo from '../../components/CurrencyLogo'
+import { Field } from '../../state/mint/actions'
+import { TYPE, ExternalLink } from '../../theme'
+import { AutoColumn } from 'components/Column'
+import { OutlineCard, GreyCard, BlueCard } from 'components/Card'
+import styled from 'styled-components'
+import { Break } from 'components/earn/styled'
+import useTheme from 'hooks/useTheme'
+import { AlertOctagon } from 'react-feather'
+import { ToggleWrapper, ToggleElement } from 'components/Toggle/MultiToggle'
+import { useTranslation } from 'react-i18next'
+const Wrapper = styled(AutoColumn)`
+  padding: 1rem 0;
+`
+export function ConfirmContent({
+  currencies,
+  parsedAmounts,
+  onAdd,
+}: {
+  noLiquidity?: boolean
+  price?: Fraction
+  currencies: { [field in Field]?: Currency }
+  parsedAmounts: { [field in Field]?: CurrencyAmount }
+  poolTokenPercentage?: Percent
+  onAdd: () => void
+}) {
+  const currencyA: Currency | undefined = currencies[Field.CURRENCY_A]
+  const currencyB: Currency | undefined = currencies[Field.CURRENCY_B]
+  const [rateCurrency, setRateCurrency] = useState<Currency | undefined>(currencyA)
+  const theme = useTheme()
+  const { t } = useTranslation()
+  return (
+    <Wrapper gap="lg">
+      <OutlineCard>
+        <AutoColumn gap="md">
+          <RowBetween>
+            <RowFixed>
+              <CurrencyLogo currency={currencyA} />
+              <TYPE.label ml="8px">{currencyA?.symbol}</TYPE.label>
+            </RowFixed>
+            <RowFixed>
+              <TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.label>
+              <GreyCard padding="4px 8px" width="fit-content" borderRadius="12px">
+                <TYPE.darkGray>50%</TYPE.darkGray>
+              </GreyCard>
+            </RowFixed>
+          </RowBetween>
+          <RowBetween>
+            <RowFixed>
+              <CurrencyLogo currency={currencyB} />
+              <TYPE.label ml="8px">{currencyB?.symbol}</TYPE.label>
+            </RowFixed>
+            <RowFixed>
+              <TYPE.label mr="8px">{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.label>
+              <GreyCard padding="4px 8px" borderRadius="12px" width="fit-content">
+                <TYPE.darkGray>50%</TYPE.darkGray>
+              </GreyCard>
+            </RowFixed>
+          </RowBetween>
+          <Break />
+          <RowBetween>
+            <TYPE.label>{t('feePool')}</TYPE.label>
+            <TYPE.label>0.6%</TYPE.label>
+          </RowBetween>
+        </AutoColumn>
+      </OutlineCard>
+      <BlueCard padding="12px">
+        <RowBetween>
+          <AlertOctagon stroke={theme.primary1} width={'90px'} />
+          <TYPE.blue ml="12px" fontSize="14px">
+            {t('rebalanceMessage')}
+          </TYPE.blue>
+        </RowBetween>
+      </BlueCard>
+      <OutlineCard padding="16px">
+        <AutoColumn gap="md">
+          <RowBetween>
+            <TYPE.label>Position Limits</TYPE.label>
+            {currencyA && currencyB && (
+              <ToggleWrapper width="80px">
+                <ToggleElement
+                  fontSize="10px"
+                  isActive={rateCurrency === currencyA}
+                  onClick={() => setRateCurrency(currencyA)}
+                >
+                  {currencyA?.symbol}
+                </ToggleElement>
+                <ToggleElement
+                  fontSize="10px"
+                  isActive={rateCurrency === currencyB}
+                  onClick={() => setRateCurrency(currencyB)}
+                >
+                  {currencyB?.symbol}
+                </ToggleElement>
+              </ToggleWrapper>
+            )}
+          </RowBetween>
+          <RowBetween>
+            <AutoColumn gap="2px">
+              <TYPE.darkGray>Lower Limit</TYPE.darkGray>
+              <TYPE.label fontSize="14px">1621.82</TYPE.label>
+              <GreyCard padding="4px" borderRadius="4px" mt="6px">
+                <RowFixed>
+                  <CurrencyLogo currency={currencyA} size="12px" />
+                  <TYPE.label fontSize="12px" ml="6px">
+                    100%
+                  </TYPE.label>
+                  <TYPE.label fontSize="12px" ml="6px">
+                    {currencyA?.symbol}
+                  </TYPE.label>
+                </RowFixed>
+              </GreyCard>
+            </AutoColumn>
+            <AutoColumn gap="2px">
+              <TYPE.darkGray>Entry Price</TYPE.darkGray>
+              <TYPE.label fontSize="14px">1621.82</TYPE.label>
+              <GreyCard padding="4px" borderRadius="4px" mt="6px">
+                <TYPE.label fontSize="12px" ml="6px">
+                  50%/50%
+                </TYPE.label>
+              </GreyCard>
+            </AutoColumn>
+            <AutoColumn gap="2px">
+              <TYPE.darkGray>Upper Limit</TYPE.darkGray>
+              <TYPE.label fontSize="14px">1621.82</TYPE.label>
+              <GreyCard padding="4px" borderRadius="4px" mt="6px">
+                <RowFixed>
+                  <CurrencyLogo currency={currencyB} size="12px" />
+                  <TYPE.label fontSize="12px" ml="6px">
+                    100%
+                  </TYPE.label>
+                  <TYPE.label fontSize="12px" ml="6px">
+                    {currencyB?.symbol}
+                  </TYPE.label>
+                </RowFixed>
+              </GreyCard>
+            </AutoColumn>
+          </RowBetween>
+        </AutoColumn>
+      </OutlineCard>
+      <TYPE.main>
+        {t('addEarnHelper')}
+        <ExternalLink href="">{t('learnMoreAboutFess')}</ExternalLink>
+      </TYPE.main>
+      <ButtonPrimary onClick={onAdd} fontSize="20px">
+        {t('addLiquidity')}
+      </ButtonPrimary>
+    </Wrapper>
+  )
+}
+export default ConfirmContent
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
 import { BigNumber } from '@ethersproject/bignumber'
 import { TransactionResponse } from '@ethersproject/providers'
-import { Currency, currencyEquals, ETHER, TokenAmount, WETH } from '@uniswap/sdk'
+import { Currency, ETHER, TokenAmount } from '@uniswap/sdk'
 import React, { useCallback, useContext, useState } from 'react'
-import { Plus } from 'react-feather'
+import { Link2, AlertTriangle, LifeBuoy, Circle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
-import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
+import { ButtonError, ButtonLight, ButtonPrimary, ButtonRadioChecked, ButtonText } from '../../components/Button'
-import { BlueCard, LightCard } from '../../components/Card'
+import { YellowCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import DoubleCurrencyLogo from '../../components/DoubleLogo'
+import { RowBetween, RowFixed, AutoRow } from '../../components/Row'
-import { AddRemoveTabs } from '../../components/NavigationTabs'
+import ConfirmContent from './ConfirmContent'
-import { MinimalPositionCard } from '../../components/PositionCard'
-import Row, { RowBetween, RowFlat } from '../../components/Row'
 import { ROUTER_ADDRESS } from '../../constants'
-import { PairState } from '../../data/Reserves'
 import { useActiveWeb3React } from '../../hooks'
 import { useCurrency } from '../../hooks/Tokens'
 import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { useWalletModalToggle } from '../../state/application/hooks'
-import { Field } from '../../state/mint/actions'
+import { Field, Bound, RangeType } from '../../state/mint/actions'
 import { useDerivedMintInfo, useMintActionHandlers, useMintState } from '../../state/mint/hooks'
 import { useTransactionAdder } from '../../state/transactions/hooks'
@@ -35,11 +31,22 @@ import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { wrappedCurrency } from '../../utils/wrappedCurrency'
 import AppBody from '../AppBody'
 import { Dots, Wrapper } from '../Pool/styleds'
-import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
 import { currencyId } from '../../utils/currencyId'
-import { PoolPriceBar } from './PoolPriceBar'
 import { useIsTransactionUnsupported } from 'hooks/Trades'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
+import { ToggleWrapper, ToggleElement } from 'components/Toggle/MultiToggle'
+import StepCounter from 'components/InputStepCounter/InputStepCounter'
+import {
+  DynamicSection,
+  CurrencyDropdown,
+  ScrollablePage,
+  ScrollableContent,
+  FixedPreview,
+  PreviewCard,
+} from './styled'
+import { useTranslation } from 'react-i18next'
+import CurrencyLogo from 'components/CurrencyLogo'
+import QuestionHelper from 'components/QuestionHelper'
 export default function AddLiquidity({
  match: {
@@ -47,39 +54,41 @@ export default function AddLiquidity({
  },
  history,
 }: RouteComponentProps<{ currencyIdA?: string; currencyIdB?: string }>) {
+  const { t } = useTranslation()
  const { account, chainId, library } = useActiveWeb3React()
  const theme = useContext(ThemeContext)
  const currencyA = useCurrency(currencyIdA)
  const currencyB = useCurrency(currencyIdB)
-  const oneCurrencyIsWETH = Boolean(
+  // const oneCurrencyIsWETH = Boolean(
-    chainId &&
+  //   chainId &&
-      ((currencyA && currencyEquals(currencyA, WETH[chainId])) ||
+  //     ((currencyA && currencyEquals(currencyA, WETH[chainId])) ||
-        (currencyB && currencyEquals(currencyB, WETH[chainId])))
+  //       (currencyB && currencyEquals(currencyB, WETH[chainId])))
-  )
+  // )
  const toggleWalletModal = useWalletModalToggle() // toggle wallet when disconnected
  const expertMode = useIsExpertMode()
  // mint state
-  const { independentField, typedValue, otherTypedValue } = useMintState()
+  const { independentField, typedValue, otherTypedValue, rangeType } = useMintState()
  const {
    dependentField,
    currencies,
    pair,
-    pairState,
+    // pairState,
    currencyBalances,
    parsedAmounts,
+    ticks,
    price,
    noLiquidity,
-    liquidityMinted,
    poolTokenPercentage,
    error,
  } = useDerivedMintInfo(currencyA ?? undefined, currencyB ?? undefined)
-  const { onFieldAInput, onFieldBInput } = useMintActionHandlers(noLiquidity)
+  const { onFieldAInput, onFieldBInput, onLowerRangeInput, onUpperRangeInput } = useMintActionHandlers(noLiquidity)
  const isValid = !error
@@ -211,51 +220,9 @@ export default function AddLiquidity({
      })
  }
-  const modalHeader = () => {
+  const modalContent = () => {
-    return noLiquidity ? (
-      <AutoColumn gap="20px">
-        <LightCard mt="20px" borderRadius="20px">
-          <RowFlat>
-            <Text fontSize="48px" fontWeight={500} lineHeight="42px" marginRight={10}>
-              {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol}
-            </Text>
-            <DoubleCurrencyLogo
-              currency0={currencies[Field.CURRENCY_A]}
-              currency1={currencies[Field.CURRENCY_B]}
-              size={30}
-            />
-          </RowFlat>
-        </LightCard>
-      </AutoColumn>
-    ) : (
-      <AutoColumn gap="20px">
-        <RowFlat style={{ marginTop: '20px' }}>
-          <Text fontSize="48px" fontWeight={500} lineHeight="42px" marginRight={10}>
-            {liquidityMinted?.toSignificant(6)}
-          </Text>
-          <DoubleCurrencyLogo
-            currency0={currencies[Field.CURRENCY_A]}
-            currency1={currencies[Field.CURRENCY_B]}
-            size={30}
-          />
-        </RowFlat>
-        <Row>
-          <Text fontSize="24px">
-            {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol + ' Pool Tokens'}
-          </Text>
-        </Row>
-        <TYPE.italic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}>
-          {`Output is estimated. If the price changes by more than ${
-            allowedSlippage / 100
-          }% your transaction will revert.`}
-        </TYPE.italic>
-      </AutoColumn>
-    )
-  }
-  const modalBottom = () => {
    return (
-      <ConfirmAddModalBottom
+      <ConfirmContent
        price={price}
        currencies={currencies}
        parsedAmounts={parsedAmounts}
@@ -306,179 +273,403 @@ export default function AddLiquidity({
    setTxHash('')
  }, [onFieldAInput, txHash])
-  const isCreate = history.location.pathname.includes('/create')
+  // const isCreate = history.location.pathname.includes('/create')
  const addIsUnsupported = useIsTransactionUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
+  /**
+   *
+   * dummy values for v3 prototype
+   *
+   */
+  const [feeLevel, setFeeLevel] = useState<number>(4)
+  const clearAll = useCallback(() => {
+    onFieldAInput('')
+    onFieldBInput('')
+    onLowerRangeInput('')
+    onUpperRangeInput('')
+    history.push(`/add/`)
+  }, [history, onFieldAInput, onFieldBInput, onLowerRangeInput, onUpperRangeInput])
+  const currentTick = ticks[Bound.CURRENT]
+  const lowerTick = ticks[Bound.LOWER]
+  const upperTick = ticks[Bound.UPPER]
+  const [rateCurrencyBase, setRateCurrencyBase] = useState<Currency | null | undefined>(currencyA)
+  const invalidRange = lowerTick && upperTick && lowerTick.rate > upperTick.rate
+  const outOfRange =
+    currentTick &&
+    lowerTick &&
+    upperTick &&
+    !invalidRange &&
+    (lowerTick.rate > currentTick.rate || upperTick.rate < currentTick.rate)
  return (
-    <>
+    <ScrollablePage>
-      <AppBody>
+      <TransactionConfirmationModal
-        <AddRemoveTabs creating={isCreate} adding={true} />
+        isOpen={showConfirm}
-        <Wrapper>
+        onDismiss={handleDismissConfirmation}
-          <TransactionConfirmationModal
+        attemptingTxn={attemptingTxn}
-            isOpen={showConfirm}
+        hash={txHash}
+        content={() => (
+          <ConfirmationModalContent
+            title={'Review Position'}
            onDismiss={handleDismissConfirmation}
-            attemptingTxn={attemptingTxn}
+            topContent={modalContent}
-            hash={txHash}
-            content={() => (
-              <ConfirmationModalContent
-                title={noLiquidity ? 'You are creating a pool' : 'You will receive'}
-                onDismiss={handleDismissConfirmation}
-                topContent={modalHeader}
-                bottomContent={modalBottom}
-              />
-            )}
-            pendingText={pendingText}
-            currencyToAdd={pair?.liquidityToken}
          />
-          <AutoColumn gap="20px">
+        )}
-            {noLiquidity ||
+        pendingText={pendingText}
-              (isCreate ? (
+        currencyToAdd={pair?.liquidityToken}
-                <ColumnCenter>
+      />
-                  <BlueCard>
+      <ScrollableContent>
-                    <AutoColumn gap="10px">
+        <AppBody>
-                      <TYPE.link fontWeight={600} color={'primaryText1'}>
+          <Wrapper>
-                        You are the first liquidity provider.
+            <AutoColumn gap="40px">
-                      </TYPE.link>
+              <AutoColumn gap="md">
-                      <TYPE.link fontWeight={400} color={'primaryText1'}>
+                <RowBetween paddingBottom="20px">
-                        The ratio of tokens you add will set the price of this pool.
+                  <TYPE.label>Select a pair</TYPE.label>
-                      </TYPE.link>
+                  <ButtonText onClick={clearAll}>
-                      <TYPE.link fontWeight={400} color={'primaryText1'}>
+                    <TYPE.blue fontSize="12px">Clear All</TYPE.blue>
-                        Once you are happy with the rate click supply to review.
+                  </ButtonText>
-                      </TYPE.link>
+                </RowBetween>
-                    </AutoColumn>
+                <TYPE.main fontWeight={400} fontSize="14px">
-                  </BlueCard>
+                  {t('selectAPool')}
-                </ColumnCenter>
+                </TYPE.main>
-              ) : (
+                <RowBetween>
-                <ColumnCenter>
+                  <CurrencyDropdown
-                  <BlueCard>
+                    value={formattedAmounts[Field.CURRENCY_A]}
-                    <AutoColumn gap="10px">
+                    onUserInput={onFieldAInput}
-                      <TYPE.link fontWeight={400} color={'primaryText1'}>
+                    hideInput={true}
-                        <b>Tip:</b> When you add liquidity, you will receive pool tokens representing your position.
+                    onMax={() => {
-                        These tokens automatically earn fees proportional to your share of the pool, and can be redeemed
+                      onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
-                        at any time.
+                    }}
-                      </TYPE.link>
+                    onCurrencySelect={handleCurrencyASelect}
-                    </AutoColumn>
+                    showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
-                  </BlueCard>
+                    currency={currencies[Field.CURRENCY_A]}
-                </ColumnCenter>
+                    id="add-liquidity-input-tokena"
-              ))}
+                    showCommonBases
-            <CurrencyInputPanel
+                  />
-              value={formattedAmounts[Field.CURRENCY_A]}
-              onUserInput={onFieldAInput}
+                  <CurrencyDropdown
-              onMax={() => {
+                    value={formattedAmounts[Field.CURRENCY_B]}
-                onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
+                    hideInput={true}
-              }}
+                    onUserInput={onFieldBInput}
-              onCurrencySelect={handleCurrencyASelect}
+                    onCurrencySelect={handleCurrencyBSelect}
-              showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
+                    onMax={() => {
-              currency={currencies[Field.CURRENCY_A]}
+                      onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
-              id="add-liquidity-input-tokena"
+                    }}
-              showCommonBases
+                    showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-            />
+                    currency={currencies[Field.CURRENCY_B]}
-            <ColumnCenter>
+                    id="add-liquidity-input-tokenb"
-              <Plus size="16" color={theme.text2} />
+                    showCommonBases
-            </ColumnCenter>
+                  />
-            <CurrencyInputPanel
+                </RowBetween>
-              value={formattedAmounts[Field.CURRENCY_B]}
+              </AutoColumn>
-              onUserInput={onFieldBInput}
+              <AutoColumn gap="16px">
-              onCurrencySelect={handleCurrencyBSelect}
+                <DynamicSection gap="md" disabled={!currencyB || !currencyA}>
-              onMax={() => {
+                  <TYPE.label>{t('selectPool')}</TYPE.label>
-                onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+                  <TYPE.main fontWeight={400} fontSize="14px">
-              }}
+                    {t('poolType')}
-              showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
+                  </TYPE.main>
-              currency={currencies[Field.CURRENCY_B]}
+                  <RowBetween>
-              id="add-liquidity-input-tokenb"
+                    <ButtonRadioChecked width="32%" active={feeLevel === 0} onClick={() => setFeeLevel(0)}>
-              showCommonBases
+                      <TYPE.label>0.1% {t('fee')}</TYPE.label>
-            />
+                    </ButtonRadioChecked>
-            {currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && (
+                    <ButtonRadioChecked active={feeLevel === 1} width="32%" onClick={() => setFeeLevel(1)}>
-              <>
+                      <TYPE.label>0.3% {t('fee')}</TYPE.label>
-                <LightCard padding="0px" borderRadius={'20px'}>
+                    </ButtonRadioChecked>
-                  <RowBetween padding="1rem">
+                    <ButtonRadioChecked width="32%" active={feeLevel === 2} onClick={() => setFeeLevel(2)}>
-                    <TYPE.subHeader fontWeight={500} fontSize={14}>
+                      <TYPE.label>0.5% {t('fee')}</TYPE.label>
-                      {noLiquidity ? 'Initial prices' : 'Prices'} and pool share
+                    </ButtonRadioChecked>
-                    </TYPE.subHeader>
+                  </RowBetween>
-                  </RowBetween>{' '}
+                </DynamicSection>
-                  <LightCard padding="1rem" borderRadius={'20px'}>
+              </AutoColumn>
-                    <PoolPriceBar
-                      currencies={currencies}
-                      poolTokenPercentage={poolTokenPercentage}
-                      noLiquidity={noLiquidity}
-                      price={price}
-                    />
-                  </LightCard>
-                </LightCard>
-              </>
-            )}
-            {addIsUnsupported ? (
+              <DynamicSection gap="md" disabled={feeLevel >= 4}>
-              <ButtonPrimary disabled={true}>
+                <RowBetween>
-                <TYPE.main mb="4px">Unsupported Asset</TYPE.main>
+                  <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
-              </ButtonPrimary>
+                  {currencyA && currencyB && (
-            ) : !account ? (
+                    <ToggleWrapper width="fit-content">
-              <ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight>
+                      <ToggleElement
-            ) : (
+                        isActive={rateCurrencyBase === currencyA}
-              <AutoColumn gap={'md'}>
+                        fontSize="12px"
-                {(approvalA === ApprovalState.NOT_APPROVED ||
+                        onClick={() => setRateCurrencyBase(rateCurrencyBase === currencyB ? currencyA : currencyB)}
-                  approvalA === ApprovalState.PENDING ||
+                      >
-                  approvalB === ApprovalState.NOT_APPROVED ||
+                        {currencyA.symbol} {t('rate')}
-                  approvalB === ApprovalState.PENDING) &&
+                      </ToggleElement>
-                  isValid && (
+                      <ToggleElement
+                        fontSize="12px"
+                        isActive={currencyB === rateCurrencyBase}
+                        onClick={() => setRateCurrencyBase(rateCurrencyBase === currencyB ? currencyA : currencyB)}
+                      >
+                        {currencyB.symbol} Rate
+                      </ToggleElement>
+                    </ToggleWrapper>
+                  )}
+                </RowBetween>
+                <TYPE.main fontWeight={400} fontSize="14px">
+                  {t('rangeWarning')}
+                </TYPE.main>
+                {price && rateCurrencyBase && (
+                  <RowBetween style={{ backgroundColor: '#1A2028', padding: '8px' }}>
+                    <TYPE.main>{t('currentRate', { label: rateCurrencyBase.symbol })}</TYPE.main>
+                    <TYPE.main>
+                      {rateCurrencyBase === currencyA ? price.toSignificant(3) : price.invert().toSignificant(3)}{' '}
+                      {rateCurrencyBase === currencyB ? currencyA?.symbol : currencyB?.symbol}
+                    </TYPE.main>
+                  </RowBetween>
+                )}
+                <RowBetween>
+                  <StepCounter
+                    value={lowerTick?.rate?.toString() ?? ''}
+                    onUserInput={onLowerRangeInput}
+                    usePercent={rangeType === RangeType.PERCENT}
+                    prependSymbol={rangeType === RangeType.PERCENT ? '-' : undefined}
+                  />
+                  <Link2 style={{ margin: '0 10px' }} size={40} />
+                  <StepCounter
+                    value={upperTick?.rate?.toString() ?? ''}
+                    onUserInput={onUpperRangeInput}
+                    usePercent={rangeType === RangeType.PERCENT}
+                    prependSymbol={rangeType === RangeType.PERCENT ? '+' : undefined}
+                  />
+                </RowBetween>
+                {outOfRange && (
+                  <YellowCard>
                    <RowBetween>
-                      {approvalA !== ApprovalState.APPROVED && (
+                      <AlertTriangle stroke={theme.yellow3} size="24px" />
-                        <ButtonPrimary
+                      <TYPE.yellow ml="12px" fontSize="12px">
-                          onClick={approveACallback}
+                        {t('inactiveRangeWarning')}
-                          disabled={approvalA === ApprovalState.PENDING}
+                      </TYPE.yellow>
-                          width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
-                        >
-                          {approvalA === ApprovalState.PENDING ? (
-                            <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
-                          ) : (
-                            'Approve ' + currencies[Field.CURRENCY_A]?.symbol
-                          )}
-                        </ButtonPrimary>
-                      )}
-                      {approvalB !== ApprovalState.APPROVED && (
-                        <ButtonPrimary
-                          onClick={approveBCallback}
-                          disabled={approvalB === ApprovalState.PENDING}
-                          width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
-                        >
-                          {approvalB === ApprovalState.PENDING ? (
-                            <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>
-                          ) : (
-                            'Approve ' + currencies[Field.CURRENCY_B]?.symbol
-                          )}
-                        </ButtonPrimary>
-                      )}
                    </RowBetween>
-                  )}
+                  </YellowCard>
-                <ButtonError
+                )}
-                  onClick={() => {
-                    expertMode ? onAdd() : setShowConfirm(true)
+                {invalidRange && (
-                  }}
+                  <YellowCard>
-                  disabled={!isValid || approvalA !== ApprovalState.APPROVED || approvalB !== ApprovalState.APPROVED}
+                    <RowBetween>
-                  error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
+                      <AlertTriangle stroke={theme.yellow3} size="24px" />
-                >
+                      <TYPE.yellow ml="12px" fontSize="12px">
-                  <Text fontSize={20} fontWeight={500}>
+                        {t('invalidRangeWarning')}
-                    {error ?? 'Supply'}
+                      </TYPE.yellow>
-                  </Text>
+                    </RowBetween>
-                </ButtonError>
+                  </YellowCard>
-              </AutoColumn>
+                )}
-            )}
+              </DynamicSection>
-          </AutoColumn>
-        </Wrapper>
+              <DynamicSection disabled={!lowerTick || !upperTick}>
-      </AppBody>
+                <AutoColumn gap="md">
-      {!addIsUnsupported ? (
+                  <TYPE.label>{t('inputTokens')}</TYPE.label>
-        pair && !noLiquidity && pairState !== PairState.INVALID ? (
+                  <TYPE.main fontWeight={400} fontSize="14px">
-          <AutoColumn style={{ minWidth: '20rem', width: '100%', maxWidth: '400px', marginTop: '1rem' }}>
+                    {t('chooseLiquidityAmount')}
-            <MinimalPositionCard showUnwrapped={oneCurrencyIsWETH} pair={pair} />
+                  </TYPE.main>
-          </AutoColumn>
+                  <CurrencyInputPanel
-        ) : null
+                    value={formattedAmounts[Field.CURRENCY_A]}
-      ) : (
+                    onUserInput={onFieldAInput}
+                    disableCurrencySelect={true}
+                    onMax={() => {
+                      onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
+                    }}
+                    onCurrencySelect={handleCurrencyASelect}
+                    showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
+                    currency={currencies[Field.CURRENCY_A]}
+                    id="add-liquidity-input-tokena"
+                    showCommonBases
+                  />
+                  <ColumnCenter>
+                    <Link2 stroke={theme.text2} size={'24px'} />
+                  </ColumnCenter>
+                  <CurrencyInputPanel
+                    value={formattedAmounts[Field.CURRENCY_B]}
+                    disableCurrencySelect={true}
+                    onUserInput={onFieldBInput}
+                    onCurrencySelect={handleCurrencyBSelect}
+                    onMax={() => {
+                      onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
+                    }}
+                    showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
+                    currency={currencies[Field.CURRENCY_B]}
+                    id="add-liquidity-input-tokenb"
+                    showCommonBases
+                  />
+                </AutoColumn>
+              </DynamicSection>
+            </AutoColumn>
+          </Wrapper>
+        </AppBody>
+      </ScrollableContent>
+      {addIsUnsupported && (
        <UnsupportedCurrencyFooter
          show={addIsUnsupported}
          currencies={[currencies.CURRENCY_A, currencies.CURRENCY_B]}
        />
      )}
-    </>
+      <FixedPreview>
+        <AutoColumn gap="md">
+          <TYPE.main fontSize="12px">Position Preview</TYPE.main>
+          <PreviewCard>
+            {!currencyA || !currencyB ? (
+              <RowBetween>
+                <TYPE.label>Select a pair to begin</TYPE.label>
+                <QuestionHelper text="Select a pair to begin" size={20} />
+              </RowBetween>
+            ) : (
+              <AutoRow gap="4px">
+                <CurrencyLogo currency={currencyA} size={'20px'} />
+                <TYPE.label ml="4px">{currencyA.symbol}</TYPE.label>
+                <TYPE.main>/</TYPE.main>
+                <CurrencyLogo currency={currencyB} size={'20px'} />
+                <TYPE.label ml="4px">{currencyB.symbol}</TYPE.label>
+              </AutoRow>
+            )}
+          </PreviewCard>
+          <PreviewCard disabled={!currencyA || !currencyB}>
+            <RowBetween>
+              <TYPE.label>
+                {feeLevel >= 4
+                  ? t('selectPool')
+                  : `${feeLevel === 0 ? '0.1' : feeLevel === 1 ? '0.3' : '0.5'}% fee pool`}
+              </TYPE.label>
+              <LifeBuoy size="20px" />
+            </RowBetween>
+          </PreviewCard>
+          <PreviewCard disabled={feeLevel >= 4}>
+            {!lowerTick || !upperTick ? (
+              <RowBetween>
+                <TYPE.label>{t('selectPriceLimits')}</TYPE.label>
+                <Circle size="20px" />
+              </RowBetween>
+            ) : (
+              currencyA &&
+              currencyB && (
+                <AutoColumn gap="sm" style={{ width: '100%' }}>
+                  <ToggleWrapper width="100%">
+                    <ToggleElement
+                      isActive={rateCurrencyBase === currencyA}
+                      fontSize="12px"
+                      onClick={() => setRateCurrencyBase(rateCurrencyBase === currencyB ? currencyA : currencyB)}
+                    >
+                      {currencyA.symbol} {t('rate')}
+                    </ToggleElement>
+                    <ToggleElement
+                      fontSize="12px"
+                      isActive={currencyB === rateCurrencyBase}
+                      onClick={() => setRateCurrencyBase(rateCurrencyBase === currencyB ? currencyA : currencyB)}
+                    >
+                      {currencyB.symbol} Rate
+                    </ToggleElement>
+                  </ToggleWrapper>
+                  <RowBetween padding="0 32px">
+                    <TYPE.label>{lowerTick.rate}</TYPE.label>
+                    <TYPE.main>⟷</TYPE.main>
+                    <TYPE.label>{upperTick.rate}</TYPE.label>
+                  </RowBetween>
+                </AutoColumn>
+              )
+            )}
+          </PreviewCard>
+          <PreviewCard disabled={!lowerTick || !upperTick}>
+            {!formattedAmounts[Field.CURRENCY_A] || !currencyA || !currencyB ? (
+              <RowBetween>
+                <TYPE.label>{t('inputTokenDynamic', { label: currencyA ? currencyA.symbol : 'Token' })}</TYPE.label>
+                <Circle size="20px" />
+              </RowBetween>
+            ) : (
+              <RowBetween>
+                <RowFixed>
+                  <CurrencyLogo currency={currencyA} />
+                  <TYPE.label ml="8px">{formattedAmounts[Field.CURRENCY_A]}</TYPE.label>
+                  <TYPE.label ml="8px">{currencyA.symbol}</TYPE.label>
+                </RowFixed>
+                <TYPE.main>50%</TYPE.main>
+              </RowBetween>
+            )}
+          </PreviewCard>
+          <PreviewCard disabled={!lowerTick || !upperTick}>
+            {!formattedAmounts[Field.CURRENCY_B] || !currencyA || !currencyB ? (
+              <RowBetween>
+                <TYPE.label>{t('inputTokenDynamic', { label: currencyB ? currencyB.symbol : 'Token' })}</TYPE.label>
+                <Circle size="20px" />
+              </RowBetween>
+            ) : (
+              <RowBetween>
+                <RowFixed>
+                  <CurrencyLogo currency={currencyB} />
+                  <TYPE.label ml="8px">{formattedAmounts[Field.CURRENCY_B]}</TYPE.label>
+                  <TYPE.label ml="8px">{currencyB.symbol}</TYPE.label>
+                </RowFixed>
+                <TYPE.main>50%</TYPE.main>
+              </RowBetween>
+            )}
+          </PreviewCard>
+          {addIsUnsupported ? (
+            <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
+              <TYPE.main mb="4px">{t('unsupportedAsset')}</TYPE.main>
+            </ButtonPrimary>
+          ) : !account ? (
+            <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
+              {t('connectWallet')}
+            </ButtonLight>
+          ) : (
+            <AutoColumn gap={'md'}>
+              {(approvalA === ApprovalState.NOT_APPROVED ||
+                approvalA === ApprovalState.PENDING ||
+                approvalB === ApprovalState.NOT_APPROVED ||
+                approvalB === ApprovalState.PENDING) &&
+                isValid && (
+                  <RowBetween>
+                    {approvalA !== ApprovalState.APPROVED && (
+                      <ButtonPrimary
+                        borderRadius="12px"
+                        padding={'12px'}
+                        onClick={approveACallback}
+                        disabled={approvalA === ApprovalState.PENDING}
+                        width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
+                      >
+                        {approvalA === ApprovalState.PENDING ? (
+                          <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
+                        ) : (
+                          'Approve ' + currencies[Field.CURRENCY_A]?.symbol
+                        )}
+                      </ButtonPrimary>
+                    )}
+                    {approvalB !== ApprovalState.APPROVED && (
+                      <ButtonPrimary
+                        borderRadius="12px"
+                        padding={'12px'}
+                        onClick={approveBCallback}
+                        disabled={approvalB === ApprovalState.PENDING}
+                        width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
+                      >
+                        {approvalB === ApprovalState.PENDING ? (
+                          <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>
+                        ) : (
+                          'Approve ' + currencies[Field.CURRENCY_B]?.symbol
+                        )}
+                      </ButtonPrimary>
+                    )}
+                  </RowBetween>
+                )}
+              <ButtonError
+                onClick={() => {
+                  expertMode ? onAdd() : setShowConfirm(true)
+                }}
+                style={{ borderRadius: '12px' }}
+                padding={'12px'}
+                disabled={!isValid || approvalA !== ApprovalState.APPROVED || approvalB !== ApprovalState.APPROVED}
+                error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
+              >
+                <Text fontWeight={500}>{error ?? 'Next'}</Text>
+              </ButtonError>
+            </AutoColumn>
+          )}
+        </AutoColumn>
+      </FixedPreview>
+    </ScrollablePage>
  )
 }
--- a/src/pages/AddLiquidity/styled.tsx
+++ b/src/pages/AddLiquidity/styled.tsx
+import styled from 'styled-components'
+import { AutoColumn } from 'components/Column'
+import CurrencyInputPanel from 'components/CurrencyInputPanel'
+import { DarkGreyCard } from 'components/Card'
+export const ScrollablePage = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+`
+export const ScrollableContent = styled.div`
+  margin-right: 24px;
+`
+export const FixedPreview = styled.div`
+  position: relative;
+  padding: 8px;
+  width: 260px;
+  height: fit-content;
+  background: ${({ theme }) => theme.bg0};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 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.01);
+  border-radius: 12px;
+`
+export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
+    opacity: ${({ disabled }) => (disabled ? '0.3' : '1')}
+    pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')}
+`
+export const CurrencyDropdown = styled(CurrencyInputPanel)`
+  width: 49%;
+`
+export const PreviewCard = styled(DarkGreyCard)<{ disabled?: boolean }>`
+  padding: 8px;
+  border-radius: 12px;
+  min-height: 40px;
+  opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -40,22 +40,15 @@ const AppWrapper = styled.div`
  overflow-x: hidden;
 `
-const HeaderWrapper = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
-  width: 100%;
-  justify-content: space-between;
-`
 const BodyWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
-  padding-top: 100px;
+  padding-top: 160px;
  align-items: center;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
-  z-index: 10;
  ${({ theme }) => theme.mediaWidth.upToSmall`
    padding: 16px;
@@ -65,6 +58,15 @@ const BodyWrapper = styled.div`
  z-index: 1;
 `
+const HeaderWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  width: 100%;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  z-index: 2;
+`
 const Marginer = styled.div`
  margin-top: 5rem;
 `

--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const BodyWrapper = styled.div`
  position: relative;
-  max-width: 420px;
+  max-width: 460px;
  width: 100%;
  background: ${({ theme }) => theme.bg0};
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),

--- a/src/pages/Pool/styleds.tsx
+++ b/src/pages/Pool/styleds.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const Wrapper = styled.div`
  position: relative;
-  padding: 1rem;
+  padding: 20px;
 `
 export const ClickableText = styled(Text)`

--- a/src/state/mint/actions.ts
+++ b/src/state/mint/actions.ts
@@ -5,5 +5,19 @@ export enum Field {
  CURRENCY_B = 'CURRENCY_B',
 }
+export enum Bound {
+  CURRENT = 'CURRENT',
+  LOWER = 'LOWER',
+  UPPER = 'UPPER',
+}
+export enum RangeType {
+  PERCENT = 'PERCENT',
+  RATE = 'RATE',
+}
 export const typeInput = createAction<{ field: Field; typedValue: string; noLiquidity: boolean }>('mint/typeInputMint')
+export const typeLowerRangeInput = createAction<{ typedValue: string }>('mint/typeLowerRangeInput')
+export const typeUpperRangeInput = createAction<{ typedValue: string }>('mint/typeUpperRangeInput')
+export const updateRangeType = createAction<{ rangeType: RangeType }>('mint/updateRangeType')
 export const resetMintState = createAction<void>('mint/resetMintState')
--- a/src/state/mint/hooks.ts
+++ b/src/state/mint/hooks.ts
@@ -9,7 +9,16 @@ import { wrappedCurrency, wrappedCurrencyAmount } from '../../utils/wrappedCurre
 import { AppDispatch, AppState } from '../index'
 import { tryParseAmount } from '../swap/hooks'
 import { useCurrencyBalances } from '../wallet/hooks'
-import { Field, typeInput } from './actions'
+import {
+  Field,
+  Bound,
+  typeInput,
+  typeLowerRangeInput,
+  typeUpperRangeInput,
+  RangeType,
+  updateRangeType as updateRangeTypeAction,
+} from './actions'
+import { tryParseTick } from './utils'
 const ZERO = JSBI.BigInt(0)
@@ -22,6 +31,9 @@ export function useMintActionHandlers(
 ): {
  onFieldAInput: (typedValue: string) => void
  onFieldBInput: (typedValue: string) => void
+  onLowerRangeInput: (typedValue: string) => void
+  onUpperRangeInput: (typedValue: string) => void
+  updateRangeType: (rangetype: RangeType) => void
 } {
  const dispatch = useDispatch<AppDispatch>()
@@ -31,6 +43,7 @@ export function useMintActionHandlers(
    },
    [dispatch, noLiquidity]
  )
  const onFieldBInput = useCallback(
    (typedValue: string) => {
      dispatch(typeInput({ field: Field.CURRENCY_B, typedValue, noLiquidity: noLiquidity === true }))
@@ -38,12 +51,41 @@ export function useMintActionHandlers(
    [dispatch, noLiquidity]
  )
+  const onLowerRangeInput = useCallback(
+    (typedValue: string) => {
+      dispatch(typeLowerRangeInput({ typedValue }))
+    },
+    [dispatch]
+  )
+  const onUpperRangeInput = useCallback(
+    (typedValue: string) => {
+      dispatch(typeUpperRangeInput({ typedValue }))
+    },
+    [dispatch]
+  )
+  const updateRangeType = useCallback(
+    (rangeType: RangeType) => {
+      dispatch(updateRangeTypeAction({ rangeType }))
+    },
+    [dispatch]
+  )
  return {
    onFieldAInput,
    onFieldBInput,
+    onLowerRangeInput,
+    onUpperRangeInput,
+    updateRangeType,
  }
 }
+// dummy entity
+export interface Tick {
+  rate: number
+}
 export function useDerivedMintInfo(
  currencyA: Currency | undefined,
  currencyB: Currency | undefined
@@ -54,6 +96,7 @@ export function useDerivedMintInfo(
  pairState: PairState
  currencyBalances: { [field in Field]?: CurrencyAmount }
  parsedAmounts: { [field in Field]?: CurrencyAmount }
+  ticks: { [bound in Bound]?: Tick }
  price?: Price
  noLiquidity?: boolean
  liquidityMinted?: TokenAmount
@@ -62,7 +105,7 @@ export function useDerivedMintInfo(
 } {
  const { account, chainId } = useActiveWeb3React()
-  const { independentField, typedValue, otherTypedValue } = useMintState()
+  const { independentField, typedValue, otherTypedValue, lowerRangeTypedValue, upperRangeTypedValue } = useMintState()
  const dependentField = independentField === Field.CURRENCY_A ? Field.CURRENCY_B : Field.CURRENCY_A
@@ -117,10 +160,13 @@ export function useDerivedMintInfo(
      return undefined
    }
  }, [noLiquidity, otherTypedValue, currencies, dependentField, independentAmount, currencyA, chainId, currencyB, pair])
-  const parsedAmounts: { [field in Field]: CurrencyAmount | undefined } = {
-    [Field.CURRENCY_A]: independentField === Field.CURRENCY_A ? independentAmount : dependentAmount,
+  const parsedAmounts: { [field in Field]: CurrencyAmount | undefined } = useMemo(() => {
-    [Field.CURRENCY_B]: independentField === Field.CURRENCY_A ? dependentAmount : independentAmount,
+    return {
-  }
+      [Field.CURRENCY_A]: independentField === Field.CURRENCY_A ? independentAmount : dependentAmount,
+      [Field.CURRENCY_B]: independentField === Field.CURRENCY_A ? dependentAmount : independentAmount,
+    }
+  }, [dependentAmount, independentAmount, independentField])
  const price = useMemo(() => {
    if (noLiquidity) {
@@ -135,6 +181,17 @@ export function useDerivedMintInfo(
    }
  }, [chainId, currencyA, noLiquidity, pair, parsedAmounts])
+  // parse typed range values and determine closest ticks, dummy rn
+  const ticks = {
+    [Bound.CURRENT]: {
+      rate: parseFloat(
+        independentField === Field.CURRENCY_A ? price?.toFixed(6) ?? '0' : price?.invert().toFixed(6) ?? '0'
+      ),
+    },
+    [Bound.LOWER]: tryParseTick(lowerRangeTypedValue),
+    [Bound.UPPER]: tryParseTick(upperRangeTypedValue),
+  }
  // liquidity minted
  const liquidityMinted = useMemo(() => {
    const { [Field.CURRENCY_A]: currencyAAmount, [Field.CURRENCY_B]: currencyBAmount } = parsedAmounts
@@ -187,6 +244,7 @@ export function useDerivedMintInfo(
    pairState,
    currencyBalances,
    parsedAmounts,
+    ticks,
    price,
    noLiquidity,
    liquidityMinted,

--- a/src/state/mint/reducer.ts
+++ b/src/state/mint/reducer.ts
 import { createReducer } from '@reduxjs/toolkit'
-import { Field, resetMintState, typeInput } from './actions'
+import {
+  Field,
+  resetMintState,
+  typeInput,
+  typeLowerRangeInput,
+  typeUpperRangeInput,
+  RangeType,
+  updateRangeType,
+} from './actions'
 export interface MintState {
  readonly independentField: Field
  readonly typedValue: string
  readonly otherTypedValue: string // for the case when there's no liquidity
+  readonly lowerRangeTypedValue: string
+  readonly upperRangeTypedValue: string
+  readonly rangeType: RangeType
 }
 const initialState: MintState = {
  independentField: Field.CURRENCY_A,
  typedValue: '',
  otherTypedValue: '',
+  lowerRangeTypedValue: '',
+  upperRangeTypedValue: '',
+  rangeType: RangeType.RATE,
 }
 export default createReducer<MintState>(initialState, (builder) =>
  builder
    .addCase(resetMintState, () => initialState)
+    .addCase(updateRangeType, (state, { payload: { rangeType } }) => {
+      return {
+        ...state,
+        rangeType,
+      }
+    })
+    .addCase(typeLowerRangeInput, (state, { payload: { typedValue } }) => {
+      return {
+        ...state,
+        lowerRangeTypedValue: typedValue,
+      }
+    })
+    .addCase(typeUpperRangeInput, (state, { payload: { typedValue } }) => {
+      return {
+        ...state,
+        upperRangeTypedValue: typedValue,
+      }
+    })
    .addCase(typeInput, (state, { payload: { field, typedValue, noLiquidity } }) => {
      if (noLiquidity) {
        // they're typing into the field they've last typed in

--- a/src/state/mint/utils.ts
+++ b/src/state/mint/utils.ts
+import { Tick } from './hooks'
+/**
+ * @todo
+ * udpate to actually parse input and calculate next tick
+ */
+export function tryParseTick(value?: string): Tick | undefined {
+  if (!value) {
+    return undefined
+  }
+  try {
+    return { rate: parseFloat(value) * 0.999 }
+  } catch (error) {
+    console.debug(`Failed to parse range amount: "${value}"`, error)
+  }
+  return undefined
+}
--- a/src/state/user/hooks.tsx
+++ b/src/state/user/hooks.tsx
@@ -162,7 +162,7 @@ export function useUserAddedTokens(): Token[] {
  return useMemo(() => {
    if (!chainId) return []
-    return Object.values(serializedTokensMap[chainId as ChainId] ?? {}).map(deserializeToken)
+    return Object.values(serializedTokensMap?.[chainId as ChainId] ?? {}).map(deserializeToken)
  }, [serializedTokensMap, chainId])
 }

--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -80,7 +80,9 @@ export function colors(darkMode: boolean): Colors {
    green1: '#27AE60',
    yellow1: '#FFE270',
    yellow2: '#F3841E',
+    yellow3: '#F3B71E',
    blue1: '#2172E5',
+    blue2: '#5199FF',
    error: '#FD4040',
    success: '#27AE60',
@@ -139,6 +141,9 @@ export const TYPE = {
  link(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
  },
+  label(props: TextProps) {
+    return <TextWrapper fontWeight={600} color={'text1'} {...props} />
+  },
  black(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text1'} {...props} />
  },
@@ -164,7 +169,7 @@ export const TYPE = {
    return <TextWrapper fontWeight={500} color={'blue1'} {...props} />
  },
  yellow(props: TextProps) {
-    return <TextWrapper fontWeight={500} color={'yellow1'} {...props} />
+    return <TextWrapper fontWeight={500} color={'yellow3'} {...props} />
  },
  darkGray(props: TextProps) {
    return <TextWrapper fontWeight={500} color={'text3'} {...props} />

--- a/src/theme/styled.d.ts
+++ b/src/theme/styled.d.ts
@@ -45,7 +45,9 @@ export interface Colors {
  green1: Color
  yellow1: Color
  yellow2: Color
+  yellow3: Color
  blue1: Color
+  blue2: Color
  error: Color
  success: Color