feat: add support for 0.01% tier

cypress/fixtures/feeTierDistribution.json

@@ -5,6 +5,11 @@
     }
   },
   "asToken0": [
+    {
+      "feeTier": "100",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "3"
+    },
     {
       "feeTier": "500",
       "totalValueLockedToken0": "0",
@@ -13,7 +18,7 @@
     {
       "feeTier": "3000",
       "totalValueLockedToken0": "0",
-      "totalValueLockedToken1": "7"
+      "totalValueLockedToken1": "4"
     },
     {
       "feeTier": "10000",

cypress/integration/add-liquidity.test.ts

@@ -58,7 +58,7 @@ describe('Add Liquidity', () => {
       cy.wait('@feeTierDistributionQuery')
 
       cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
-      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '70%')
+      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '40%')
     })
   })
 })

package.json

@@ -66,7 +66,7 @@
     "@uniswap/v2-sdk": "^3.0.0-alpha.2",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@uniswap/v3-sdk": "^3.4.1",
+    "@uniswap/v3-sdk": "^3.7.0",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",

src/components/Button/index.tsx

@@ -315,8 +315,8 @@ const ActiveOutlined = styled(ButtonOutlined)`
 `
 
 const Circle = styled.div`
-  height: 20px;
-  width: 20px;
+  height: 17px;
+  width: 17px;
   border-radius: 50%;
   background-color: ${({ theme }) => theme.primary1};
   display: flex;
@@ -325,11 +325,11 @@ const Circle = styled.div`
 `
 
 const CheckboxWrapper = styled.div`
-  width: 30px;
+  width: 20px;
   padding: 0 10px;
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 11px;
+  right: 15px;
 `
 
 const ResponsiveCheck = styled(Check)`

src/components/FeeSelector/FeeOption.tsx

@@ -0,0 +1,51 @@
+import { Trans } from '@lingui/macro'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { ButtonRadioChecked } from 'components/Button'
+import { AutoColumn } from 'components/Column'
+import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
+import { PoolState } from 'hooks/usePools'
+import React from 'react'
+import styled from 'styled-components/macro'
+import { TYPE } from 'theme'
+
+import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
+import { FEE_AMOUNT_DETAIL } from './shared'
+
+const ResponsiveText = styled(TYPE.label)`
+  line-height: 16px;
+  font-size: 14px;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 12px;
+    line-height: 12px;
+  `};
+`
+
+interface FeeOptionProps {
+  feeAmount: FeeAmount
+  active: boolean
+  distributions: ReturnType<typeof useFeeTierDistribution>['distributions']
+  poolState: PoolState
+  onClick: () => void
+}
+
+export function FeeOption({ feeAmount, active, poolState, distributions, onClick }: FeeOptionProps) {
+  return (
+    <ButtonRadioChecked active={active} onClick={onClick}>
+      <AutoColumn gap="sm" justify="flex-start">
+        <AutoColumn justify="flex-start" gap="6px">
+          <ResponsiveText>
+            <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}%</Trans>
+          </ResponsiveText>
+          <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
+            {FEE_AMOUNT_DETAIL[feeAmount].description}
+          </TYPE.main>
+        </AutoColumn>
+
+        {distributions && (
+          <FeeTierPercentageBadge distributions={distributions} feeAmount={feeAmount} poolState={poolState} />
+        )}
+      </AutoColumn>
+    </ButtonRadioChecked>
+  )
+}

src/components/FeeSelector/FeeTierPercentageBadge.tsx

@@ -0,0 +1,31 @@
+import { Trans } from '@lingui/macro'
+import { FeeAmount } from '@uniswap/v3-sdk'
+import Badge from 'components/Badge'
+import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
+import { PoolState } from 'hooks/usePools'
+import React from 'react'
+import { TYPE } from 'theme'
+
+export function FeeTierPercentageBadge({
+  feeAmount,
+  distributions,
+  poolState,
+}: {
+  feeAmount: FeeAmount
+  distributions: ReturnType<typeof useFeeTierDistribution>['distributions']
+  poolState: PoolState
+}) {
+  return (
+    <Badge>
+      <TYPE.label fontSize={11}>
+        {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
+          <Trans>Not created</Trans>
+        ) : distributions[feeAmount] !== undefined ? (
+          <Trans>{distributions[feeAmount]?.toFixed(0)}% select</Trans>
+        ) : (
+          <Trans>No data</Trans>
+        )}
+      </TYPE.label>
+    </Badge>
+  )
+}

src/components/FeeSelector/index.tsx

@@ -1,21 +1,25 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import Badge from 'components/Badge'
-import { ButtonGray, ButtonRadioChecked } from 'components/Button'
+import { ButtonGray } from 'components/Button'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import { RowBetween } from 'components/Row'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 import { PoolState, usePools } from 'hooks/usePools'
 import usePrevious from 'hooks/usePrevious'
+import { useActiveWeb3React } from 'hooks/web3'
 import { DynamicSection } from 'pages/AddLiquidity/styled'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components/macro'
 import { TYPE } from 'theme'
 
+import { FeeOption } from './FeeOption'
+import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
+import { FEE_AMOUNT_DETAIL } from './shared'
+
 const pulse = (color: string) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${color};
@@ -29,60 +33,18 @@ const pulse = (color: string) => keyframes`
     box-shadow: 0 0 0 0 ${color};
   }
 `
-
-const ResponsiveText = styled(TYPE.label)`
-  line-height: 16px;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 12px;
-    line-height: 12px;
-  `};
-`
-
 const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
   border: 1px solid ${({ theme }) => theme.bg2};
   animation: ${({ pulsing, theme }) => pulsing && pulse(theme.primary1)} 0.6s linear;
   align-self: center;
 `
 
-const FeeAmountLabel = {
-  [FeeAmount.LOW]: {
-    label: '0.05',
-    description: <Trans>Best for stable pairs.</Trans>,
-  },
-  [FeeAmount.MEDIUM]: {
-    label: '0.3',
-    description: <Trans>Best for most pairs.</Trans>,
-  },
-  [FeeAmount.HIGH]: {
-    label: '1',
-    description: <Trans>Best for exotic pairs.</Trans>,
-  },
-}
-
-function FeeTierPercentageBadge({
-  feeAmount,
-  distributions,
-  poolState,
-}: {
-  feeAmount: FeeAmount
-  distributions: ReturnType<typeof useFeeTierDistribution>['distributions']
-  poolState: PoolState
-}) {
-  return (
-    <Badge>
-      <TYPE.label fontSize={12}>
-        {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
-          <Trans>Not created</Trans>
-        ) : distributions[feeAmount] !== undefined ? (
-          <Trans>{distributions[feeAmount]?.toFixed(0)}% select</Trans>
-        ) : (
-          <Trans>No data</Trans>
-        )}
-      </TYPE.label>
-    </Badge>
-  )
-}
+const Select = styled.div`
+  align-items: flex-start;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+`
 
 export default function FeeSelector({
   disabled = false,
@@ -97,16 +59,19 @@ export default function FeeSelector({
   currencyA?: Currency | undefined
   currencyB?: Currency | undefined
 }) {
+  const { chainId } = useActiveWeb3React()
+
   const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
 
   // get pool data on-chain for latest states
   const pools = usePools([
+    [currencyA, currencyB, FeeAmount.LOWEST],
     [currencyA, currencyB, FeeAmount.LOW],
     [currencyA, currencyB, FeeAmount.MEDIUM],
     [currencyA, currencyB, FeeAmount.HIGH],
   ])
 
-  const poolsByFeeTier = useMemo(
+  const poolsByFeeTier: Record<FeeAmount, PoolState> = useMemo(
     () =>
       pools.reduce(
         (acc, [curPoolState, curPool]) => {
@@ -118,6 +83,7 @@ export default function FeeSelector({
         },
         {
           // default all states to NOT_EXISTS
+          [FeeAmount.LOWEST]: PoolState.NOT_EXISTS,
           [FeeAmount.LOW]: PoolState.NOT_EXISTS,
           [FeeAmount.MEDIUM]: PoolState.NOT_EXISTS,
           [FeeAmount.HIGH]: PoolState.NOT_EXISTS,
@@ -134,7 +100,7 @@ export default function FeeSelector({
   const recommended = useRef(false)
 
   const handleFeePoolSelectWithEvent = useCallback(
-    (fee) => {
+    (fee: FeeAmount) => {
       ReactGA.event({
         category: 'FeePoolSelect',
         action: 'Manual',
@@ -193,7 +159,7 @@ export default function FeeSelector({
               ) : (
                 <>
                   <TYPE.label className="selected-fee-label">
-                    <Trans>{FeeAmountLabel[feeAmount].label}% fee tier</Trans>
+                    <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
                   </TYPE.label>
                   <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && (
@@ -214,81 +180,25 @@ export default function FeeSelector({
           </RowBetween>
         </FocusedOutlineCard>
 
-        {showOptions && (
-          <RowBetween>
-            <ButtonRadioChecked
-              width="32%"
-              active={feeAmount === FeeAmount.LOW}
-              onClick={() => handleFeePoolSelectWithEvent(FeeAmount.LOW)}
-            >
-              <AutoColumn gap="sm" justify="flex-start">
-                <AutoColumn justify="flex-start" gap="6px">
-                  <ResponsiveText>
-                    <Trans>0.05% fee</Trans>
-                  </ResponsiveText>
-                  <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                    <Trans>Best for stable pairs.</Trans>
-                  </TYPE.main>
-                </AutoColumn>
-
-                {distributions && (
-                  <FeeTierPercentageBadge
+        {chainId && showOptions && (
+          <Select>
+            {[FeeAmount.LOWEST, FeeAmount.LOW, FeeAmount.MEDIUM, FeeAmount.HIGH].map((_feeAmount, i) => {
+              const { supportedChains } = FEE_AMOUNT_DETAIL[_feeAmount]
+              if (supportedChains === 'all' || supportedChains.includes(chainId)) {
+                return (
+                  <FeeOption
+                    feeAmount={_feeAmount}
+                    active={feeAmount === _feeAmount}
+                    onClick={() => handleFeePoolSelectWithEvent(_feeAmount)}
                     distributions={distributions}
-                    feeAmount={FeeAmount.LOW}
-                    poolState={poolsByFeeTier[FeeAmount.LOW]}
+                    poolState={poolsByFeeTier[_feeAmount]}
+                    key={i}
                   />
-                )}
-              </AutoColumn>
-            </ButtonRadioChecked>
-            <ButtonRadioChecked
-              width="32%"
-              active={feeAmount === FeeAmount.MEDIUM}
-              onClick={() => handleFeePoolSelectWithEvent(FeeAmount.MEDIUM)}
-            >
-              <AutoColumn gap="sm" justify="flex-start">
-                <AutoColumn justify="flex-start" gap="4px">
-                  <ResponsiveText>
-                    <Trans>0.3% fee</Trans>
-                  </ResponsiveText>
-                  <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                    <Trans>Best for most pairs.</Trans>
-                  </TYPE.main>
-                </AutoColumn>
-
-                {distributions && (
-                  <FeeTierPercentageBadge
-                    distributions={distributions}
-                    feeAmount={FeeAmount.MEDIUM}
-                    poolState={poolsByFeeTier[FeeAmount.MEDIUM]}
-                  />
-                )}
-              </AutoColumn>
-            </ButtonRadioChecked>
-            <ButtonRadioChecked
-              width="32%"
-              active={feeAmount === FeeAmount.HIGH}
-              onClick={() => handleFeePoolSelectWithEvent(FeeAmount.HIGH)}
-            >
-              <AutoColumn gap="sm" justify="flex-start">
-                <AutoColumn justify="flex-start" gap="4px">
-                  <ResponsiveText>
-                    <Trans>1% fee</Trans>
-                  </ResponsiveText>
-                  <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                    <Trans>Best for exotic pairs.</Trans>
-                  </TYPE.main>
-                </AutoColumn>
-
-                {distributions && (
-                  <FeeTierPercentageBadge
-                    distributions={distributions}
-                    feeAmount={FeeAmount.HIGH}
-                    poolState={poolsByFeeTier[FeeAmount.HIGH]}
-                  />
-                )}
-              </AutoColumn>
-            </ButtonRadioChecked>
-          </RowBetween>
+                )
+              }
+              return null
+            })}
+          </Select>
         )}
       </DynamicSection>
     </AutoColumn>