refactor: use bips base constant (#7464)

* refactor: use bips base constant

* fix: missed usage

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -6,6 +6,7 @@ import { TraceEvent } from 'analytics'
 import { useToggleAccountDrawer } from 'components/AccountDrawer'
 import Row from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
+import { BIPS_BASE } from 'constants/misc'
 import { useFilterPossiblyMaliciousPositions } from 'hooks/useFilterPossiblyMaliciousPositions'
 import { useSwitchChain } from 'hooks/useSwitchChain'
 import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
@@ -162,7 +163,7 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
             </ThemedText.SubHeader>
           </Row>
         }
-        descriptor={<ThemedText.BodySmall>{`${pool.fee / 10000}%`}</ThemedText.BodySmall>}
+        descriptor={<ThemedText.BodySmall>{`${pool.fee / BIPS_BASE}%`}</ThemedText.BodySmall>}
         right={
           <>
             <MouseoverTooltip

src/components/PositionPreview/index.tsx

@@ -9,6 +9,7 @@ import { Break } from 'components/earn/styled'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import RateToggle from 'components/RateToggle'
 import { RowBetween, RowFixed } from 'components/Row'
+import { BIPS_BASE } from 'constants/misc'
 import JSBI from 'jsbi'
 import { ReactNode, useCallback, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
@@ -104,7 +105,7 @@ export const PositionPreview = ({
               <Trans>Fee tier</Trans>
             </ThemedText.DeprecatedLabel>
             <ThemedText.DeprecatedLabel>
-              <Trans>{position?.pool?.fee / 10000}%</Trans>
+              <Trans>{position?.pool?.fee / BIPS_BASE}%</Trans>
             </ThemedText.DeprecatedLabel>
           </RowBetween>
         </AutoColumn>

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -6,6 +6,7 @@ import Badge from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import Row, { AutoRow } from 'components/Row'
+import { BIPS_BASE } from 'constants/misc'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components'
@@ -148,7 +149,7 @@ function Pool({ currency0, currency1, feeAmount }: { currency0: Currency; curren
         <Box margin="0 4px 0 12px">
           <DoubleCurrencyLogo currency0={tokenInfo1} currency1={tokenInfo0} size={20} />
         </Box>
-        <BadgeText>{feeAmount / 10000}%</BadgeText>
+        <BadgeText>{feeAmount / BIPS_BASE}%</BadgeText>
       </PoolBadge>
     </MouseoverTooltip>
   )

src/constants/misc.ts

@@ -9,24 +9,25 @@ export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 export const DEFAULT_DEADLINE_FROM_NOW = 60 * 10
 export const L2_DEADLINE_FROM_NOW = 60 * 5
 
-// transaction popup dismisal amounts
+// transaction popup dismissal amounts
 export const DEFAULT_TXN_DISMISS_MS = 10000
 export const L2_TXN_DISMISS_MS = 5000
 
 export const BIG_INT_ZERO = JSBI.BigInt(0)
 
+export const BIPS_BASE = 10_000
+
 // one basis JSBI.BigInt
-const BIPS_BASE = JSBI.BigInt(10000)
 export const ONE_BIPS = new Percent(JSBI.BigInt(1), BIPS_BASE)
 
 // used for warning states
-export const ALLOWED_PRICE_IMPACT_LOW: Percent = new Percent(JSBI.BigInt(100), BIPS_BASE) // 1%
+export const ALLOWED_PRICE_IMPACT_LOW: Percent = new Percent(1, 100) // 1%
-export const ALLOWED_PRICE_IMPACT_MEDIUM: Percent = new Percent(JSBI.BigInt(300), BIPS_BASE) // 3%
+export const ALLOWED_PRICE_IMPACT_MEDIUM: Percent = new Percent(3, 100) // 3%
-export const ALLOWED_PRICE_IMPACT_HIGH: Percent = new Percent(JSBI.BigInt(500), BIPS_BASE) // 5%
+export const ALLOWED_PRICE_IMPACT_HIGH: Percent = new Percent(5, 100) // 5%
 // if the price slippage exceeds this number, force the user to type 'confirm' to execute
-export const PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN: Percent = new Percent(JSBI.BigInt(1000), BIPS_BASE) // 10%
+export const PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN: Percent = new Percent(10, 100) // 10%
 // for non expert mode disable swaps above this
-export const BLOCKED_PRICE_IMPACT_NON_EXPERT: Percent = new Percent(JSBI.BigInt(1500), BIPS_BASE) // 15%
+export const BLOCKED_PRICE_IMPACT_NON_EXPERT: Percent = new Percent(15, 100) // 15%
 
-export const ZERO_PERCENT = new Percent('0')
+export const ZERO_PERCENT = new Percent(0)
-export const ONE_HUNDRED_PERCENT = new Percent('1')
+export const ONE_HUNDRED_PERCENT = new Percent(1)

src/graphql/data/nft/NftBalance.ts

@@ -1,3 +1,4 @@
+import { BIPS_BASE } from 'constants/misc'
 import { parseEther } from 'ethers/lib/utils'
 import gql from 'graphql-tag'
 import { GenieCollection, WalletAsset } from 'nft/types'
@@ -190,7 +191,7 @@ export function useNftBalance(
       collectionIsVerified: asset?.collection?.isVerified,
       lastPrice: queryAsset.node.lastPrice?.value,
       floorPrice: asset?.collection?.markets?.[0]?.floorPrice?.value,
-      basisPoints: queryAsset?.node?.listingFees?.[0]?.basisPoints ?? 0 / 10000,
+      basisPoints: queryAsset?.node?.listingFees?.[0]?.basisPoints ?? 0 / BIPS_BASE,
       listing_date: asset?.listings?.edges?.[0]?.node?.createdAt?.toString(),
       date_acquired: queryAsset.node.lastPrice?.timestamp?.toString(),
       sellOrders: asset?.listings?.edges.map((edge: any) => edge.node),

src/hooks/useSwapTaxes.ts

@@ -5,7 +5,7 @@ import { useWeb3React } from '@web3-react/core'
 import FOT_DETECTOR_ABI from 'abis/fee-on-transfer-detector.json'
 import { FeeOnTransferDetector } from 'abis/types'
 import { sendAnalyticsEvent } from 'analytics'
-import { ZERO_PERCENT } from 'constants/misc'
+import { BIPS_BASE, ZERO_PERCENT } from 'constants/misc'
 import { useEffect, useState } from 'react'
 
 import { useContract } from './useContract'
@@ -53,8 +53,8 @@ async function getSwapTaxes(
 
       addresses.forEach((address, index) => {
         const { sellFeeBps, buyFeeBps } = data[index]
-        const sellTax = new Percent(sellFeeBps.toNumber(), 10000)
+        const sellTax = new Percent(sellFeeBps.toNumber(), BIPS_BASE)
-        const buyTax = new Percent(buyFeeBps.toNumber(), 10000)
+        const buyTax = new Percent(buyFeeBps.toNumber(), BIPS_BASE)
 
         FEE_CACHE[address] = { sellTax, buyTax }
       })

src/pages/PoolDetails/PoolDetailsHeader.tsx

@@ -4,6 +4,7 @@ import blankTokenUrl from 'assets/svg/blank_token.svg'
 import Column from 'components/Column'
 import { ChainLogo } from 'components/Logo/ChainLogo'
 import Row from 'components/Row'
+import { BIPS_BASE } from 'constants/misc'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useCurrency } from 'hooks/Tokens'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
@@ -88,7 +89,7 @@ export function PoolDetailsHeader({
             {token0?.symbol} / {token1?.symbol}
           </ThemedText.HeadlineSmall>
         </Row>
-        {!!feeTier && <FeeTier>{feeTier / 10000}%</FeeTier>}
+        {!!feeTier && <FeeTier>{feeTier / BIPS_BASE}%</FeeTier>}
         <ToggleReverseArrows data-testid="toggle-tokens-reverse-arrows" onClick={toggleReversed} />
       </Row>
     </HeaderColumn>

src/utils/computeFiatValuePriceImpact.tsx

@@ -1,6 +1,6 @@
 import { Percent } from '@uniswap/sdk-core'
+import { BIPS_BASE } from 'constants/misc'
 
-const PRECISION = 10000
 export function computeFiatValuePriceImpact(
   fiatValueInput: number | undefined | null,
   fiatValueOutput: number | undefined | null
@@ -9,6 +9,6 @@ export function computeFiatValuePriceImpact(
   if (fiatValueInput === 0) return undefined
 
   const ratio = 1 - fiatValueOutput / fiatValueInput
-  const numerator = Math.floor(ratio * PRECISION)
+  const numerator = Math.floor(ratio * BIPS_BASE)
-  return new Percent(numerator, PRECISION)
+  return new Percent(numerator, BIPS_BASE)
 }

src/utils/prices.ts

@@ -2,19 +2,19 @@ import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Fraction, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import JSBI from 'jsbi'
 import { DefaultTheme } from 'styled-components'
 
 import {
   ALLOWED_PRICE_IMPACT_HIGH,
   ALLOWED_PRICE_IMPACT_LOW,
   ALLOWED_PRICE_IMPACT_MEDIUM,
+  BIPS_BASE,
   BLOCKED_PRICE_IMPACT_NON_EXPERT,
   ONE_HUNDRED_PERCENT,
   ZERO_PERCENT,
 } from '../constants/misc'
 
-const THIRTY_BIPS_FEE = new Percent(JSBI.BigInt(30), JSBI.BigInt(10000))
+const THIRTY_BIPS_FEE = new Percent(30, BIPS_BASE)
 const INPUT_FRACTION_AFTER_FEE = ONE_HUNDRED_PERCENT.subtract(THIRTY_BIPS_FEE)
 
 export function computeRealizedPriceImpact(trade: Trade<Currency, Currency, TradeType>): Percent {