fix for inactive positions

src/components/Badge/RangeBadge.tsx

@@ -33,15 +33,27 @@ export const DarkBadge = styled.div`
   padding: 4px 6px;
 `
 
-export default function RangeBadge({ inRange }: { inRange?: boolean }) {
+export default function RangeBadge({
+  removed,
+  inRange,
+}: {
+  removed: boolean | undefined
+  inRange: boolean | undefined
+}) {
   const { t } = useTranslation()
 
   return (
     <BadgeWrapper>
-      {inRange ? (
-        <MouseoverTooltip
-          text={`The price of this pair is within your selected range. Your positions is earning fees.`}
-        >
+      {removed ? (
+        <MouseoverTooltip text={`Your position has 0 liquidity, and is not earning fees.`}>
+          <Badge variant={BadgeVariant.WARNING_OUTLINE}>
+            <AlertCircle width={14} height={14} />
+            &nbsp;
+            <BadgeText>{t('Inactive')}</BadgeText>
+          </Badge>
+        </MouseoverTooltip>
+      ) : inRange ? (
+        <MouseoverTooltip text={`The price of this pool is within your selected range. Your position is earning fees.`}>
           <Badge variant={BadgeVariant.DEFAULT}>
             <ActiveDot /> &nbsp;
             <BadgeText>{t('In range')}</BadgeText>
@@ -49,7 +61,7 @@ export default function RangeBadge({ inRange }: { inRange?: boolean }) {
         </MouseoverTooltip>
       ) : (
         <MouseoverTooltip
-          text={`The price of this pair is outside of your selected range. Your positions is not earning fees.`}
+          text={`The price of this pool is outside of your selected range. Your position is not earning fees.`}
         >
           <Badge variant={BadgeVariant.WARNING}>
             <AlertCircle width={14} height={14} />

src/components/PositionListItem/index.tsx

 import React, { useMemo, useState } from 'react'
 import { Position } from '@uniswap/v3-sdk'
-import Badge, { BadgeVariant } from 'components/Badge'
+import Badge from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
-import { AlertCircle } from 'react-feather'
-import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
@@ -15,16 +13,9 @@ import { formatPrice } from 'utils/formatTokenAmount'
 import Loader from 'components/Loader'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import { DAI, USDC, USDT, WBTC } from '../../constants'
-import { MouseoverTooltip } from '../Tooltip'
+import RangeBadge from 'components/Badge/RangeBadge'
 import { RowFixed } from 'components/Row'
 
-const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.success};
-  border-radius: 50%;
-  height: 8px;
-  width: 8px;
-  margin-right: 4px;
-`
 const Row = styled(Link)`
   align-items: center;
   border-radius: 20px;
@@ -65,9 +56,7 @@ const BadgeText = styled.div`
     font-size: 12px;
   `};
 `
-const BadgeWrapper = styled.div`
-  font-size: 14px;
-`
+
 const DataLineItem = styled.div`
   font-size: 14px;
 `
@@ -185,8 +174,6 @@ export function getPriceOrderingFromPositionForUI(
 }
 
 export default function PositionListItem({ positionDetails }: PositionListItemProps) {
-  const { t } = useTranslation()
-
   const {
     token0: token0Address,
     token1: token1Address,
@@ -228,11 +215,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
     ;[priceLower, priceUpper, base, quote] = [priceUpper?.invert(), priceLower?.invert(), quote, base]
   }
 
-  const quotePrice = useMemo(() => {
-    return manuallyInverted
-      ? position?.pool.priceOf(position?.pool.token0)
-      : position?.pool.priceOf(position?.pool.token1)
-  }, [manuallyInverted, position?.pool])
+  const removed = liquidity?.eq(0)
 
   return (
     <Row to={positionSummaryLink}>
@@ -247,36 +230,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             <BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
           </Badge>
         </PrimaryPositionIdData>
-        <BadgeWrapper>
-          {outOfRange ? (
-            <MouseoverTooltip
-              text={`The price of this pair is outside of your selected range. Your positions is not earning fees. Current price: ${quotePrice?.toSignificant(
-                6
-              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
-                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
-              }`}
-            >
-              <Badge variant={BadgeVariant.WARNING}>
-                <AlertCircle width={14} height={14} style={{ marginRight: '' }} />
-                &nbsp;
-                <BadgeText>{t('Out of range')}</BadgeText>
-              </Badge>
-            </MouseoverTooltip>
-          ) : (
-            <MouseoverTooltip
-              text={`The price of this pair is within your selected range. Your positions is earning fees. Current price: ${quotePrice?.toSignificant(
-                6
-              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
-                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
-              }`}
-            >
-              <Badge variant={BadgeVariant.DEFAULT}>
-                <ActiveDot /> &nbsp;
-                <BadgeText>{t('In range')}</BadgeText>
-              </Badge>
-            </MouseoverTooltip>
-          )}
-        </BadgeWrapper>
+        <RangeBadge removed={removed} inRange={!outOfRange} />
       </RowFixed>
 
       {priceLower && priceUpper ? (

src/components/PositionPreview/index.tsx

@@ -13,6 +13,7 @@ import RateToggle from 'components/RateToggle'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import RangeBadge from 'components/Badge/RangeBadge'
 import { ThemeContext } from 'styled-components'
+import { JSBI } from '@uniswap/v2-sdk'
 
 export const PositionPreview = ({
   position,
@@ -55,6 +56,8 @@ export const PositionPreview = ({
     setBaseCurrency(quoteCurrency)
   }, [quoteCurrency])
 
+  const removed = position?.liquidity && JSBI.equal(position?.liquidity, JSBI.BigInt(0))
+
   return (
     <AutoColumn gap="md" style={{ marginTop: '0.5rem' }}>
       <RowBetween style={{ marginBottom: '0.5rem' }}>
@@ -69,7 +72,7 @@ export const PositionPreview = ({
             {currency0?.symbol} / {currency1?.symbol}
           </TYPE.label>
         </RowFixed>
-        <RangeBadge inRange={inRange} />
+        <RangeBadge removed={removed} inRange={inRange} />
       </RowBetween>
 
       <LightCard>

src/pages/AddLiquidity/styled.tsx

 import styled from 'styled-components'
 import { AutoColumn } from 'components/Column'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
-import Card, { DarkGreyCard } from 'components/Card'
+import { DarkGreyCard } from 'components/Card'
 import Input from 'components/NumericalInput'
 
 export const Wrapper = styled.div`
@@ -24,16 +24,6 @@ export const ScrollablePage = styled.div`
   flex-direction: row;
 `
 
-export const RangeBadge = styled(Card)<{ inRange?: boolean }>`
-  width: fit-content;
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 8px;
-  padding: 4px 6px;
-  color: ${({ theme }) => theme.black};
-  background-color: ${({ inRange, theme }) => (inRange ? theme.green1 : theme.yellow2)};
-`
-
 export const FixedPreview = styled.div`
   position: relative;
   padding: 16px;
@@ -49,8 +39,8 @@ export const FixedPreview = styled.div`
 `
 
 export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
-    opacity: ${({ disabled }) => (disabled ? '0.3' : '1')}
-    pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')}
+  opacity: ${({ disabled }) => (disabled ? '0.3' : '1')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')};
 `
 
 export const CurrencyDropdown = styled(CurrencyInputPanel)`

src/pages/Pool/PositionPage.tsx

@@ -194,6 +194,8 @@ export function PositionPage({
   const { token0: token0Address, token1: token1Address, fee: feeAmount, liquidity, tickLower, tickUpper, tokenId } =
     positionDetails || {}
 
+  const removed = liquidity?.eq(0)
+
   const token0 = useToken(token0Address)
   const token1 = useToken(token1Address)
 
@@ -236,9 +238,6 @@ export function PositionPage({
       : undefined
   }, [inverted, pool, priceLower, priceUpper])
 
-  // really can't figure out why i have to do this, getting conditional hook call errors otherwise
-  const WORKAROUND = typeof ratio === 'number' ? (inverted ? 100 - ratio : ratio) : undefined
-
   // fees
   const [feeValue0, feeValue1] = useV3PositionFees(pool ?? undefined, positionDetails)
 
@@ -408,7 +407,7 @@ export function PositionPage({
               <Badge style={{ marginRight: '8px' }}>
                 <BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
               </Badge>
-              <RangeBadge inRange={inRange} />
+              <RangeBadge removed={removed} inRange={inRange} />
             </RowFixed>
             {ownsNFT && (
               <RowFixed>
@@ -424,7 +423,7 @@ export function PositionPage({
                     {t('Add Liquidity')}
                   </ButtonGray>
                 ) : null}
-                {tokenId && (
+                {tokenId && !removed ? (
                   <ResponsiveButtonPrimary
                     as={Link}
                     to={`/remove/${tokenId}`}
@@ -434,7 +433,7 @@ export function PositionPage({
                   >
                     {t('Remove Liquidity')}
                   </ResponsiveButtonPrimary>
-                )}
+                ) : null}
               </RowFixed>
             )}
           </ResponsiveRow>
@@ -498,13 +497,13 @@ export function PositionPage({
                         <TYPE.main>
                           {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
                         </TYPE.main>
-                        {typeof ratio === 'number' && (
+                        {typeof ratio === 'number' && !removed ? (
                           <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
                             <TYPE.main color={theme.text2} fontSize={11}>
                               {inverted ? ratio : 100 - ratio}%
                             </TYPE.main>
                           </DarkGreyCard>
-                        )}
+                        ) : null}
                       </RowFixed>
                     </RowBetween>
                     <RowBetween>
@@ -516,13 +515,13 @@ export function PositionPage({
                         <TYPE.main>
                           {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
                         </TYPE.main>
-                        {typeof ratio === 'number' && (
+                        {typeof ratio === 'number' && !removed ? (
                           <DarkGreyCard padding="4px 6px" style={{ width: 'fit-content', marginLeft: '8px' }}>
                             <TYPE.main color={theme.text2} fontSize={11}>
-                              {WORKAROUND}%
+                              {inverted ? 100 - ratio : ratio}%
                             </TYPE.main>
                           </DarkGreyCard>
-                        )}
+                        ) : null}
                       </RowFixed>
                     </RowBetween>
                   </AutoColumn>
@@ -621,7 +620,7 @@ export function PositionPage({
                 </Label>
                 <HideExtraSmall>
                   <>
-                    <RangeBadge inRange={inRange} />
+                    <RangeBadge removed={removed} inRange={inRange} />
                     <span style={{ width: '8px' }} />
                   </>
                 </HideExtraSmall>

src/pages/RemoveLiquidity/V3.tsx

@@ -28,12 +28,12 @@ import Loader from 'components/Loader'
 import { useToken } from 'hooks/Tokens'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import { RangeBadge } from 'pages/AddLiquidity/styled'
 import { Break } from 'components/earn/styled'
 import { NonfungiblePositionManager } from '@uniswap/v3-sdk'
 import { calculateGasMargin } from 'utils'
 import useTheme from 'hooks/useTheme'
 import { AddRemoveTabs } from 'components/NavigationTabs'
+import RangeBadge from 'components/Badge/RangeBadge'
 
 export const UINT128MAX = BigNumber.from(2).pow(128).sub(1)
 
@@ -83,6 +83,8 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
   } = useDerivedV3BurnInfo(position)
   const { onPercentSelect } = useBurnV3ActionHandlers()
 
+  const removed = position?.liquidity?.eq(0)
+
   // boilerplate for the slider
   const [percentForSlider, onPercentSelectForSlider] = useDebouncedChangeHandler(percent, onPercentSelect)
 
@@ -281,7 +283,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                   <DoubleCurrencyLogo currency0={currency1} currency1={currency0} size={20} margin={true} />
                   <TYPE.label ml="10px" fontSize="20px">{`${currency0?.symbol}/${currency1?.symbol}`}</TYPE.label>
                 </RowFixed>
-                <RangeBadge inRange={!outOfRange}>{outOfRange ? 'Out of range' : 'In Range'}</RangeBadge>
+                <RangeBadge removed={removed} inRange={!outOfRange} />
               </RowBetween>
               <LightCard>
                 <AutoColumn gap="md">
@@ -363,10 +365,10 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                 <AutoColumn gap="12px" style={{ flex: '1' }}>
                   <ButtonConfirmed
                     confirmed={false}
-                    disabled={percent === 0 || !liquidityValue0}
+                    disabled={removed || percent === 0 || !liquidityValue0}
                     onClick={() => setShowConfirm(true)}
                   >
-                    {error ?? 'Remove'}
+                    {removed ? 'Inactive' : error ?? 'Remove'}
                   </ButtonConfirmed>
                 </AutoColumn>
               </div>