{
if (enabled) {
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTTab.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTTab.tsx
index e99d5db4fc2..62d21d21f23 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTTab.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTTab.tsx
@@ -13,9 +13,9 @@ import InfiniteScroll from 'react-infinite-scroll-component'
import { useNavigate } from 'react-router-dom'
import { Gallery } from 'ui/src/components/icons/Gallery'
import { Chain } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
-import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
import { t } from 'uniswap/src/i18n'
const StyledTabButton = styled(TabButton)`
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/PoolsTab.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/PoolsTab.tsx
index ff549dfce27..dd9730c5947 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/PoolsTab.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/PoolsTab.tsx
@@ -1,19 +1,21 @@
import { InterfaceElementName } from '@uniswap/analytics-events'
-import { Position } from '@uniswap/v3-sdk'
+// eslint-disable-next-line no-restricted-imports
+import { PositionStatus, ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
import { ExpandoRow } from 'components/AccountDrawer/MiniPortfolio/ExpandoRow'
-import { PositionInfo } from 'components/AccountDrawer/MiniPortfolio/Pools/cache'
-import { useFeeValues } from 'components/AccountDrawer/MiniPortfolio/Pools/hooks'
-import useMultiChainPositions from 'components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions'
import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
import PortfolioRow, {
PortfolioSkeleton,
PortfolioTabWrapper,
} from 'components/AccountDrawer/MiniPortfolio/PortfolioRow'
import { useAccountDrawer } from 'components/AccountDrawer/MiniPortfolio/hooks'
+import { useV3OrV4PositionDerivedInfo } from 'components/Liquidity/hooks'
+import { PositionInfo } from 'components/Liquidity/types'
+import { getPositionUrl, parseRestPosition } from 'components/Liquidity/utils'
import { MouseoverTooltip } from 'components/Tooltip'
import Row from 'components/deprecated/Row'
+import { ZERO_ADDRESS } from 'constants/misc'
import { useAccount } from 'hooks/useAccount'
-import { useFilterPossiblyMaliciousPositions } from 'hooks/useFilterPossiblyMaliciousPositions'
import { useSwitchChain } from 'hooks/useSwitchChain'
import styled from 'lib/styled-components'
import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
@@ -21,83 +23,82 @@ import { useCallback, useMemo, useReducer } from 'react'
import { useNavigate } from 'react-router-dom'
import { ThemedText } from 'theme/components'
import { BIPS_BASE } from 'uniswap/src/constants/misc'
+import { useGetPositionsQuery } from 'uniswap/src/data/rest/getPositions'
+import { FeatureFlags } from 'uniswap/src/features/gating/flags'
+import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
+import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext'
import Trace from 'uniswap/src/features/telemetry/Trace'
+import { useUSDCValue } from 'uniswap/src/features/transactions/swap/hooks/useUSDCPrice'
import { t } from 'uniswap/src/i18n'
-import { NumberType, useFormatter } from 'utils/formatNumbers'
-
-/**
- * Takes an array of PositionInfo objects (format used by the Uniswap Labs gql API).
- * The hook access PositionInfo.details (format used by the NFT position contract),
- * filters the PositionDetails data for malicious content,
- * and then returns the original data in its original format.
- */
-export function useFilterPossiblyMaliciousPositionInfo(positions: PositionInfo[] | undefined): PositionInfo[] {
- const tokenIdsToPositionInfo: Record
= useMemo(
- () =>
- positions
- ? positions.reduce((acc, position) => ({ ...acc, [position.details.tokenId.toString()]: position }), {})
- : {},
- [positions],
- )
- const positionDetails = useMemo(() => positions?.map((position) => position.details) ?? [], [positions])
- const filteredPositionDetails = useFilterPossiblyMaliciousPositions(positionDetails)
+import { NumberType } from 'utilities/src/format/types'
- return useMemo(
- () => filteredPositionDetails.map((positionDetails) => tokenIdsToPositionInfo[positionDetails.tokenId.toString()]),
- [filteredPositionDetails, tokenIdsToPositionInfo],
- )
+function isPositionInfo(position: PositionInfo | undefined): position is PositionInfo {
+ return !!position
+}
+
+function getPositionKey(position: PositionInfo) {
+ const { chainId } = position
+ if (position.version === ProtocolVersion.V2) {
+ return `${position.liquidityToken.address}-${chainId}`
+ }
+
+ return `${position.tokenId}-${chainId}`
}
export default function Pools({ account }: { account: string }) {
- const { positions, loading } = useMultiChainPositions(account)
- const filteredPositions = useFilterPossiblyMaliciousPositionInfo(positions)
- const [showClosed, toggleShowClosed] = useReducer((showClosed) => !showClosed, false)
+ const isV4EverywhereEnabled = useFeatureFlag(FeatureFlags.V4Everywhere)
+
+ const { data, isLoading } = useGetPositionsQuery({
+ address: account,
+ positionStatuses: [PositionStatus.IN_RANGE, PositionStatus.OUT_OF_RANGE],
+ protocolVersions: isV4EverywhereEnabled
+ ? [ProtocolVersion.V2, ProtocolVersion.V3, ProtocolVersion.V4]
+ : [ProtocolVersion.V2, ProtocolVersion.V3],
+ })
+
+ const { data: closedData } = useGetPositionsQuery({
+ address: account,
+ positionStatuses: [PositionStatus.CLOSED],
+ protocolVersions: isV4EverywhereEnabled
+ ? [ProtocolVersion.V2, ProtocolVersion.V3, ProtocolVersion.V4]
+ : [ProtocolVersion.V2, ProtocolVersion.V3],
+ })
+
+ const openPositions = useMemo(() => data?.positions.map(parseRestPosition).filter(isPositionInfo), [data?.positions])
+ const closedPositions = useMemo(
+ () => closedData?.positions.map(parseRestPosition).filter(isPositionInfo),
+ [closedData?.positions],
+ )
- const [openPositions, closedPositions] = useMemo(() => {
- const openPositions: PositionInfo[] = []
- const closedPositions: PositionInfo[] = []
- for (let i = 0; i < filteredPositions.length; i++) {
- const position = filteredPositions[i]
- if (position.closed) {
- closedPositions.push(position)
- } else {
- openPositions.push(position)
- }
- }
- return [openPositions, closedPositions]
- }, [filteredPositions])
+ const [showClosed, toggleShowClosed] = useReducer((showClosed) => !showClosed, false)
const accountDrawer = useAccountDrawer()
- if (!filteredPositions || loading) {
+ if (!openPositions && isLoading) {
return
}
- if (filteredPositions.length === 0) {
+ if (!openPositions || (openPositions?.length === 0 && closedPositions?.length === 0)) {
return
}
return (
{openPositions.map((positionInfo) => (
-
+
))}
-
- {closedPositions.map((positionInfo) => (
-
- ))}
-
+ {closedPositions && closedPositions.length > 0 && (
+
+ {closedPositions.map((positionInfo) => (
+
+ ))}
+
+ )}
)
}
@@ -112,23 +113,46 @@ const ActiveDot = styled.span<{ closed: boolean; outOfRange: boolean }>`
margin-top: 1px;
`
-function calculateLiquidityValue(price0: number | undefined, price1: number | undefined, position: Position) {
- if (!price0 || !price1) {
- return undefined
- }
+function useDerivedPositionInfo(positionInfo: PositionInfo): {
+ liquidityValue?: CurrencyAmount
+ feeValue?: CurrencyAmount
+ totalValue?: CurrencyAmount
+ formattedFeeTier?: string
+} {
+ const { feeTier, currency0Amount, currency1Amount } = positionInfo
+ const fiatValue0 = useUSDCValue(currency0Amount)
+ const fiatValue1 = useUSDCValue(currency1Amount)
+
+ const { fiatFeeValue0, fiatFeeValue1 } = useV3OrV4PositionDerivedInfo(positionInfo)
+
+ return useMemo(() => {
+ const liquidityValue = fiatValue0 && fiatValue1 ? fiatValue0.add(fiatValue1) : undefined
+
+ if (positionInfo.version === ProtocolVersion.V3 || positionInfo.version === ProtocolVersion.V4) {
+ const feeValue = fiatFeeValue0 && fiatFeeValue1 && fiatFeeValue0.add(fiatFeeValue1)
+ const totalValue = liquidityValue && feeValue ? liquidityValue.add(feeValue) : undefined
+ const formattedFeeTier = feeTier ? `${Number(feeTier) / BIPS_BASE}%` : undefined // TODO(WEB-5452): support dynamic fee tiers
+ return {
+ liquidityValue,
+ feeValue,
+ totalValue,
+ formattedFeeTier,
+ }
+ }
- const value0 = parseFloat(position.amount0.toExact()) * price0
- const value1 = parseFloat(position.amount1.toExact()) * price1
- return value0 + value1
+ // V2 has no fee value so the total value and the liquidity value is the same
+ return { liquidityValue, totalValue: liquidityValue }
+ }, [feeTier, fiatFeeValue0, fiatFeeValue1, fiatValue0, fiatValue1, positionInfo.version])
}
function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
- const { formatNumber } = useFormatter()
-
- const { chainId, position, pool, details, inRange, closed } = positionInfo
+ const isV4EverywhereEnabled = useFeatureFlag(FeatureFlags.V4Everywhere)
+ const { formatCurrencyAmount } = useLocalizationContext()
- const { priceA, priceB, fees: feeValue } = useFeeValues(positionInfo)
- const liquidityValue = calculateLiquidityValue(priceA, priceB, position)
+ const { tokenId, status, chainId, currency0Amount, currency1Amount } = positionInfo
+ const { liquidityValue, feeValue, totalValue, formattedFeeTier } = useDerivedPositionInfo(positionInfo)
+ const token0 = currency0Amount.currency
+ const token1 = currency1Amount.currency
const navigate = useNavigate()
const accountDrawer = useAccountDrawer()
@@ -138,52 +162,59 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
if (account.chainId !== chainId) {
await switchChain(chainId)
}
+
accountDrawer.close()
- navigate('/pool/' + details.tokenId)
- }, [account.chainId, chainId, switchChain, accountDrawer, navigate, details.tokenId])
+
+ const positionUrl = isV4EverywhereEnabled
+ ? getPositionUrl(positionInfo)
+ : positionInfo.version === ProtocolVersion.V3
+ ? '/pool/' + tokenId
+ : '/pools/v2'
+ navigate(positionUrl)
+ }, [account.chainId, chainId, switchChain, accountDrawer, navigate, tokenId, isV4EverywhereEnabled, positionInfo])
const analyticsEventProperties = useMemo(
() => ({
chain_id: chainId,
- pool_token_0_symbol: pool.token0.symbol,
- pool_token_1_symbol: pool.token1.symbol,
- pool_token_0_address: pool.token0.address,
- pool_token_1_address: pool.token1.address,
+ pool_token_0_symbol: token0.symbol,
+ pool_token_1_symbol: token1.symbol,
+ pool_token_0_address: token0.isToken ? token0.wrapped.address : ZERO_ADDRESS,
+ pool_token_1_address: token1.isToken ? token1.wrapped.address : ZERO_ADDRESS,
}),
- [chainId, pool.token0.address, pool.token0.symbol, pool.token1.address, pool.token1.symbol],
+ [chainId, token0, token1],
)
return (
}
+ left={}
title={
- {pool.token0.symbol} / {pool.token1?.symbol}
+ {token0.symbol} / {token1?.symbol}
}
- descriptor={{`${pool.fee / BIPS_BASE}%`}}
+ descriptor={{formattedFeeTier}}
right={
<>
- {`${formatNumber({
- input: liquidityValue,
+ {`${formatCurrencyAmount({
+ value: liquidityValue,
type: NumberType.PortfolioBalance,
- })} (liquidity) + ${formatNumber({
- input: feeValue,
+ })} (liquidity) + ${formatCurrencyAmount({
+ value: feeValue,
type: NumberType.PortfolioBalance,
})} (fees)`}
}
>
- {formatNumber({
- input: (liquidityValue ?? 0) + (feeValue ?? 0),
+ {formatCurrencyAmount({
+ value: totalValue,
type: NumberType.PortfolioBalance,
})}
@@ -191,9 +222,16 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
- {closed ? t('common.closed') : inRange ? t('common.withinRange') : t('common.outOfRange')}
+ {status === PositionStatus.CLOSED
+ ? t('common.closed')
+ : status === PositionStatus.IN_RANGE
+ ? t('common.withinRange')
+ : t('common.outOfRange')}
-
+
}
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts
index b92f8be40ad..6e7c4e444fb 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts
@@ -7,8 +7,8 @@ import { atomWithStorage } from 'jotai/utils'
import ms from 'ms'
import { useCallback } from 'react'
import { PositionDetails } from 'types/position'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { SerializedToken } from 'uniswap/src/features/tokens/slice/types'
-import { UniverseChainId } from 'uniswap/src/types/chains'
import { deserializeToken, serializeToken } from 'uniswap/src/utils/currency'
import { buildCurrencyKey, currencyKey } from 'utils/currencyKey'
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/getTokensAsync.ts b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/getTokensAsync.ts
index c141bf98669..5813bd48454 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/getTokensAsync.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/getTokensAsync.ts
@@ -4,7 +4,7 @@ import ERC20_ABI from 'uniswap/src/abis/erc20.json'
import { Erc20Interface } from 'uniswap/src/abis/types/Erc20'
import { Erc20Bytes32Interface } from 'uniswap/src/abis/types/Erc20Bytes32'
import { UniswapInterfaceMulticall } from 'uniswap/src/abis/types/v3'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { isAddress } from 'utilities/src/addresses'
import { logger } from 'utilities/src/logger/logger'
import { DEFAULT_ERC20_DECIMALS } from 'utilities/src/tokens/constants'
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts
index b08d4cb607b..de41ee698a6 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts
@@ -1,26 +1,21 @@
-import {
- MULTICALL_ADDRESSES,
- Token,
- NONFUNGIBLE_POSITION_MANAGER_ADDRESSES as V3NFT_ADDRESSES,
-} from '@uniswap/sdk-core'
+import { MULTICALL_ADDRESSES, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES as V3NFT_ADDRESSES } from '@uniswap/sdk-core'
import type { AddressMap } from '@uniswap/smart-order-router'
import NFTPositionManagerJSON from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
import MulticallJSON from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
import { useWeb3React } from '@web3-react/core'
import { PositionInfo } from 'components/AccountDrawer/MiniPortfolio/Pools/cache'
-import { useIsSupportedChainIdCallback } from 'constants/chains'
import { RPC_PROVIDERS } from 'constants/providers'
import { BaseContract } from 'ethers/lib/ethers'
import { toContractInput } from 'graphql/data/util'
import { useAccount } from 'hooks/useAccount'
-import useStablecoinPrice from 'hooks/useStablecoinPrice'
import { useMemo } from 'react'
import { NonfungiblePositionManager, UniswapInterfaceMulticall } from 'uniswap/src/abis/types/v3'
import {
ContractInput,
useUniswapPricesQuery,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { useEnabledChains, useIsSupportedChainIdCallback } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { getContract } from 'utilities/src/contracts/getContract'
import { CurrencyKey, currencyKey, currencyKeyFromGraphQL } from 'utils/currencyKey'
@@ -68,18 +63,19 @@ export function useInterfaceMulticallContracts(chainIds: UniverseChainId[]): Con
type PriceMap = { [key: CurrencyKey]: number | undefined }
export function usePoolPriceMap(positions: PositionInfo[] | undefined) {
+ const { defaultChainId } = useEnabledChains()
const contracts = useMemo(() => {
if (!positions || !positions.length) {
return []
}
// Avoids fetching duplicate tokens by placing in map
const contractMap = positions.reduce((acc: { [key: string]: ContractInput }, { pool: { token0, token1 } }) => {
- acc[currencyKey(token0)] = toContractInput(token0)
- acc[currencyKey(token1)] = toContractInput(token1)
+ acc[currencyKey(token0)] = toContractInput(token0, defaultChainId)
+ acc[currencyKey(token1)] = toContractInput(token1, defaultChainId)
return acc
}, {})
return Object.values(contractMap)
- }, [positions])
+ }, [defaultChainId, positions])
const { data, loading } = useUniswapPricesQuery({ variables: { contracts }, skip: !contracts.length })
@@ -96,21 +92,3 @@ export function usePoolPriceMap(positions: PositionInfo[] | undefined) {
return { priceMap, pricesLoading: loading && !data }
}
-
-function useFeeValue(token: Token, fee: number | undefined, queriedPrice: number | undefined) {
- const { price: stablecoinPrice } = useStablecoinPrice(!queriedPrice ? token : undefined)
- return useMemo(() => {
- // Prefers gql price, as fetching stablecoinPrice will trigger multiple infura calls for each pool position
- const price = queriedPrice ?? (stablecoinPrice ? parseFloat(stablecoinPrice.toSignificant()) : undefined)
- const feeValue = fee && price ? fee * price : undefined
-
- return [price, feeValue]
- }, [fee, queriedPrice, stablecoinPrice])
-}
-
-export function useFeeValues(position: PositionInfo) {
- const [priceA, feeValueA] = useFeeValue(position.pool.token0, position.fees?.[0], position.prices?.[0])
- const [priceB, feeValueB] = useFeeValue(position.pool.token1, position.fees?.[1], position.prices?.[1])
-
- return { priceA, priceB, fees: (feeValueA || 0) + (feeValueB || 0) }
-}
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx
index 57a59cc0e12..b585c1566f0 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx
@@ -19,9 +19,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { PositionDetails } from 'types/position'
import { NonfungiblePositionManager, UniswapInterfaceMulticall } from 'uniswap/src/abis/types/v3'
import { UniswapV3PoolInterface } from 'uniswap/src/abis/types/v3/UniswapV3Pool'
-import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
-import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { logger } from 'utilities/src/logger/logger'
import { DEFAULT_ERC20_DECIMALS } from 'utilities/src/tokens/constants'
import { currencyKey } from 'utils/currencyKey'
@@ -145,7 +145,7 @@ export default function useMultiChainPositions(account: string): UseMultiChainPo
tokenA,
tokenB,
fee: details.fee,
- chainId: UNIVERSE_CHAIN_INFO[chainId].sdkId,
+ chainId: getChainInfo(chainId).sdkId,
})
poolAddressCache.set(details, chainId, poolAddress)
}
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.test.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.test.tsx
index 01a3b34973c..7005f1396de 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.test.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.test.tsx
@@ -3,7 +3,7 @@ import 'test-utils/tokens/mocks'
import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
import { render } from 'test-utils/render'
import { DAI, DAI_ARBITRUM_ONE, USDC_ARBITRUM, USDC_MAINNET } from 'uniswap/src/constants/tokens'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
describe('PortfolioLogo', () => {
it('renders without L2 icon', () => {
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
index 846031a3071..04c26e10476 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
@@ -11,11 +11,10 @@ import {
L2LogoContainer,
SingleLogoContainer,
} from 'components/Logo/DoubleLogo'
-import { TESTNET_CHAIN_IDS } from 'constants/chains'
import styled from 'lib/styled-components'
import React, { memo } from 'react'
import { Flex, SpinningLoader, styled as TamaguiStyled } from 'ui/src'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { SUPPORTED_TESTNET_CHAIN_IDS, UniverseChainId } from 'uniswap/src/features/chains/types'
const UnknownContract = styled(UnknownStatus)`
color: ${({ theme }) => theme.neutral2};
@@ -67,7 +66,7 @@ const AbsoluteCenteredElement = TamaguiStyled(Flex, {
* Renders an image by prioritizing a list of sources, and then eventually a fallback contract icon
*/
export const PortfolioLogo = memo(function PortfolioLogo(props: PortfolioLogoProps) {
- if (TESTNET_CHAIN_IDS.includes(props.chainId)) {
+ if (SUPPORTED_TESTNET_CHAIN_IDS.includes(props.chainId)) {
return
}
diff --git a/apps/web/src/components/AccountDrawer/MiniPortfolio/Tokens/TokensTab.tsx b/apps/web/src/components/AccountDrawer/MiniPortfolio/Tokens/TokensTab.tsx
index 49ba0b49473..ece508a6229 100644
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Tokens/TokensTab.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Tokens/TokensTab.tsx
@@ -17,11 +17,8 @@ import { useCallback, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { EllipsisStyle, ThemedText } from 'theme/components'
import { Text, Tooltip } from 'ui/src'
-import {
- useEnabledChains,
- useHideSmallBalancesSetting,
- useHideSpamTokensSetting,
-} from 'uniswap/src/features/settings/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useHideSmallBalancesSetting, useHideSpamTokensSetting } from 'uniswap/src/features/settings/hooks'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { useTranslation } from 'uniswap/src/i18n'
import { logger } from 'utilities/src/logger/logger'
diff --git a/apps/web/src/components/AccountDrawer/SettingsMenu.tsx b/apps/web/src/components/AccountDrawer/SettingsMenu.tsx
index aa3c2ddcb9d..75f96b9323d 100644
--- a/apps/web/src/components/AccountDrawer/SettingsMenu.tsx
+++ b/apps/web/src/components/AccountDrawer/SettingsMenu.tsx
@@ -6,16 +6,13 @@ import { SpamToggle } from 'components/AccountDrawer/SpamToggle'
import { TestnetsToggle } from 'components/AccountDrawer/TestnetsToggle'
import Column from 'components/deprecated/Column'
import Row from 'components/deprecated/Row'
-import { useActiveLocalCurrency } from 'hooks/useActiveLocalCurrency'
-import { useActiveLanguage } from 'hooks/useActiveLocale'
import styled from 'lib/styled-components'
import { ReactNode } from 'react'
import { ChevronRight } from 'react-feather'
import { ClickableStyle, ThemedText } from 'theme/components'
import ThemeToggle from 'theme/components/ThemeToggle'
-import { FeatureFlags } from 'uniswap/src/features/gating/flags'
-import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
-import { useLanguageInfo } from 'uniswap/src/features/language/hooks'
+import { useAppFiatCurrency } from 'uniswap/src/features/fiatCurrency/hooks'
+import { useCurrentLanguage, useLanguageInfo } from 'uniswap/src/features/language/hooks'
import { Trans } from 'uniswap/src/i18n'
const Container = styled(Column)`
@@ -72,10 +69,9 @@ export default function SettingsMenu({
openLanguageSettings: () => void
openLocalCurrencySettings: () => void
}) {
- const activeLanguage = useActiveLanguage()
- const activeLocalCurrency = useActiveLocalCurrency()
+ const activeLanguage = useCurrentLanguage()
+ const activeLocalCurrency = useAppFiatCurrency()
const languageInfo = useLanguageInfo(activeLanguage)
- const isTestnetFeatureFlagOn = useFeatureFlag(FeatureFlags.TestnetMode)
return (
} onClose={onClose}>
@@ -86,7 +82,7 @@ export default function SettingsMenu({
- {isTestnetFeatureFlagOn &&
}
+
diff --git a/apps/web/src/components/AccountDrawer/SmallBalanceToggle.tsx b/apps/web/src/components/AccountDrawer/SmallBalanceToggle.tsx
index 3bf664c6075..96150ddfde7 100644
--- a/apps/web/src/components/AccountDrawer/SmallBalanceToggle.tsx
+++ b/apps/web/src/components/AccountDrawer/SmallBalanceToggle.tsx
@@ -1,6 +1,7 @@
import { SettingsToggle } from 'components/AccountDrawer/SettingsToggle'
import { useDispatch } from 'react-redux'
-import { useEnabledChains, useHideSmallBalancesSetting } from 'uniswap/src/features/settings/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useHideSmallBalancesSetting } from 'uniswap/src/features/settings/hooks'
import { setHideSmallBalances } from 'uniswap/src/features/settings/slice'
import { t } from 'uniswap/src/i18n'
diff --git a/apps/web/src/components/AccountDrawer/TestnetsToggle.tsx b/apps/web/src/components/AccountDrawer/TestnetsToggle.tsx
index 3a5d6196f70..a12a405cfff 100644
--- a/apps/web/src/components/AccountDrawer/TestnetsToggle.tsx
+++ b/apps/web/src/components/AccountDrawer/TestnetsToggle.tsx
@@ -1,7 +1,7 @@
import { SettingsToggle } from 'components/AccountDrawer/SettingsToggle'
import { useDispatch } from 'react-redux'
import { useOpenModal } from 'state/application/hooks'
-import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
import { setIsTestnetModeEnabled } from 'uniswap/src/features/settings/slice'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { t } from 'uniswap/src/i18n'
diff --git a/apps/web/src/components/AddressQRModal.tsx b/apps/web/src/components/AddressQRModal.tsx
index 6e0232f7e70..35aa53a0418 100644
--- a/apps/web/src/components/AddressQRModal.tsx
+++ b/apps/web/src/components/AddressQRModal.tsx
@@ -2,7 +2,6 @@ import { AddressDisplay } from 'components/AccountDetails/AddressDisplay'
import { SecondaryIdentifiers } from 'components/AccountDrawer/Status'
import Identicon from 'components/Identicon'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
-import { PRODUCTION_CHAIN_IDS } from 'constants/chains'
import useENSName from 'hooks/useENSName'
import { useCallback } from 'react'
import { useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
@@ -11,6 +10,7 @@ import { ThemedText } from 'theme/components'
import { AdaptiveWebModal, Flex, QRCodeDisplay, Text, useSporeColors } from 'ui/src'
import { NetworkLogos } from 'uniswap/src/components/network/NetworkLogos'
import { useAddressColorProps } from 'uniswap/src/features/address/color'
+import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/features/chains/types'
import { useUnitagByAddress } from 'uniswap/src/features/unitags/hooks'
import { Trans } from 'uniswap/src/i18n'
@@ -72,10 +72,10 @@ export function AddressQRModal({ accountAddress }: { accountAddress: Address })
-
+
diff --git a/apps/web/src/components/Banner/Outage/OutageBanner.tsx b/apps/web/src/components/Banner/Outage/OutageBanner.tsx
index a25c0a4512d..2a460f9828c 100644
--- a/apps/web/src/components/Banner/Outage/OutageBanner.tsx
+++ b/apps/web/src/components/Banner/Outage/OutageBanner.tsx
@@ -1,13 +1,14 @@
import { Container, PopupContainer, StyledXButton, TextContainer } from 'components/Banner/shared/styled'
-import { chainIdToBackendChain } from 'constants/chains'
import { ChainOutageData } from 'featureFlags/flags/outageBanner'
import styled, { useTheme } from 'lib/styled-components'
import { useState } from 'react'
import { Globe } from 'react-feather'
import { ExternalLink, ThemedText } from 'theme/components'
import { capitalize } from 'tsafe'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+import { toGraphQLChain } from 'uniswap/src/features/chains/utils'
import { Trans } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
const IconContainer = styled.div`
height: 100%;
@@ -43,7 +44,8 @@ export function OutageBanner({ chainId, version }: ChainOutageData) {
const [hidden, setHidden] = useState(false)
const theme = useTheme()
const versionName = version ? version.toString().toLowerCase() + ' data' : 'Data'
- const chainName = capitalize(chainIdToBackendChain({ chainId, withFallback: true }).toLowerCase())
+ const { defaultChainId } = useEnabledChains()
+ const chainName = capitalize(toGraphQLChain(chainId ?? defaultChainId).toLowerCase())
const versionDescription = version ? ' ' + version.toString().toLowerCase() : ''
return (
diff --git a/apps/web/src/components/Banner/shared/Banners.tsx b/apps/web/src/components/Banner/shared/Banners.tsx
index 2b7d497db27..d8535f0d5f6 100644
--- a/apps/web/src/components/Banner/shared/Banners.tsx
+++ b/apps/web/src/components/Banner/shared/Banners.tsx
@@ -1,11 +1,11 @@
import { InterfacePageName } from '@uniswap/analytics-events'
import { OutageBanner, getOutageBannerSessionStorageKey } from 'components/Banner/Outage/OutageBanner'
-import { getChainFromChainUrlParam, isChainUrlParam } from 'constants/chains'
import { manualChainOutageAtom, useOutageBanners } from 'featureFlags/flags/outageBanner'
import { useAtomValue } from 'jotai/utils'
import { useMemo } from 'react'
import { useLocation } from 'react-router-dom'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+import { getChainIdFromChainUrlParam, isChainUrlParam } from 'utils/chainParams'
import { getCurrentPageFromLocation } from 'utils/urlRoutes'
export function Banners() {
@@ -18,7 +18,7 @@ export function Banners() {
// Calculate the chainId for the current page's contextual chain (e.g. /tokens/ethereum or /tokens/arbitrum), if it exists.
const pageChainId = useMemo(() => {
const chainUrlParam = pathname.split('/').find(isChainUrlParam)
- return chainUrlParam ? getChainFromChainUrlParam(chainUrlParam)?.id : UniverseChainId.Mainnet
+ return chainUrlParam ? getChainIdFromChainUrlParam(chainUrlParam) : UniverseChainId.Mainnet
}, [pathname])
const currentPageHasManualOutage = manualOutage?.chainId === pageChainId
diff --git a/apps/web/src/components/BreadcrumbNav/index.test.tsx b/apps/web/src/components/BreadcrumbNav/index.test.tsx
index 2b433eb0b95..867e602094a 100644
--- a/apps/web/src/components/BreadcrumbNav/index.test.tsx
+++ b/apps/web/src/components/BreadcrumbNav/index.test.tsx
@@ -4,7 +4,7 @@ import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { TokenFromList } from 'state/lists/tokenFromList'
import { act, render, screen } from 'test-utils/render'
import { nativeOnChain } from 'uniswap/src/constants/tokens'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
describe('BreadcrumbNav', () => {
it('renders hover components correctly', async () => {
diff --git a/apps/web/src/components/Button/LoaderButton.tsx b/apps/web/src/components/Button/LoaderButton.tsx
new file mode 100644
index 00000000000..83bec13c5c4
--- /dev/null
+++ b/apps/web/src/components/Button/LoaderButton.tsx
@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react'
+import { Button, ColorTokens, Flex, SpinningLoader, WidthAnimator } from 'ui/src'
+import { ButtonProps } from 'ui/src/components/button/Button'
+import { iconSizes } from 'ui/src/theme'
+
+type LoaderButtonProps = ButtonProps & {
+ buttonKey: string
+ loading: boolean
+ loaderColor?: ColorTokens
+}
+
+export function LoaderButton({
+ buttonKey,
+ loading,
+ size,
+ animation,
+ children,
+ loaderColor,
+ ...rest
+}: PropsWithChildren) {
+ return (
+
+ )
+}
diff --git a/apps/web/src/components/ChainConnectivityWarning.tsx b/apps/web/src/components/ChainConnectivityWarning.tsx
index 9e5460cb77f..a6531da5ac9 100644
--- a/apps/web/src/components/ChainConnectivityWarning.tsx
+++ b/apps/web/src/components/ChainConnectivityWarning.tsx
@@ -1,4 +1,3 @@
-import { AVERAGE_L1_BLOCK_TIME, getChain } from 'constants/chains'
import { useAccount } from 'hooks/useAccount'
import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
import { useIsLandingPage } from 'hooks/useIsLandingPage'
@@ -8,9 +7,11 @@ import styled from 'lib/styled-components'
import { useMemo } from 'react'
import { AlertTriangle } from 'react-feather'
import { ExternalLink } from 'theme/components'
-import { DEFAULT_MS_BEFORE_WARNING, UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
+import { DEFAULT_MS_BEFORE_WARNING, getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+import { AVERAGE_L1_BLOCK_TIME_MS } from 'uniswap/src/features/transactions/swap/hooks/usePollingIntervalByChain'
import { Trans } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
const BodyRow = styled.div`
color: ${({ theme }) => theme.neutral1};
@@ -53,22 +54,22 @@ const Wrapper = styled.div`
export function ChainConnectivityWarning() {
const { chainId } = useAccount()
- const info = getChain({ chainId, withFallback: true })
+ const { defaultChainId } = useEnabledChains()
+ const info = getChainInfo(chainId ?? defaultChainId)
const label = info.label
const isNftPage = useIsNftPage()
const isLandingPage = useIsLandingPage()
const waitMsBeforeWarning = useMemo(
- () => (chainId ? UNIVERSE_CHAIN_INFO[chainId]?.blockWaitMsBeforeWarning : undefined) ?? DEFAULT_MS_BEFORE_WARNING,
+ () => (chainId ? getChainInfo(chainId)?.blockWaitMsBeforeWarning : undefined) ?? DEFAULT_MS_BEFORE_WARNING,
[chainId],
)
- const machineTime = useMachineTimeMs(AVERAGE_L1_BLOCK_TIME)
+ const machineTime = useMachineTimeMs(AVERAGE_L1_BLOCK_TIME_MS)
const blockTime = useCurrentBlockTimestamp(
useMemo(
() => ({
- blocksPerFetch:
- /* 5m / 12s = */ 25 * (chainId ? UNIVERSE_CHAIN_INFO[chainId].blockPerMainnetEpochForChainId : 1),
+ blocksPerFetch: /* 5m / 12s = */ 25 * (chainId ? getChainInfo(chainId).blockPerMainnetEpochForChainId : 1),
}),
[chainId],
),
diff --git a/apps/web/src/components/Charts/ChartHeader.tsx b/apps/web/src/components/Charts/ChartHeader.tsx
index 3206ace161e..6901215a52e 100644
--- a/apps/web/src/components/Charts/ChartHeader.tsx
+++ b/apps/web/src/components/Charts/ChartHeader.tsx
@@ -8,8 +8,6 @@ import { EllipsisTamaguiStyle } from 'theme/components'
import { ThemedText } from 'theme/components/text'
import { Flex, Text, styled } from 'ui/src'
import { PriceSource } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { FeatureFlags } from 'uniswap/src/features/gating/flags'
-import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { NumberType, useFormatter } from 'utils/formatNumbers'
export type ChartHeaderProtocolInfo = { protocol: PriceSource; value?: number }
@@ -22,7 +20,7 @@ const ProtocolLegendWrapper = styled(Flex, {
gap: '$gap12',
pointerEvents: 'none',
variants: {
- isMultichainExploreEnabled: {
+ hover: {
true: {
right: 'unset',
p: '$spacing8',
@@ -41,49 +39,28 @@ const ProtocolLegendWrapper = styled(Flex, {
function ProtocolLegend({ protocolData }: { protocolData?: ChartHeaderProtocolInfo[] }) {
const { formatFiatPrice } = useFormatter()
const theme = useTheme()
- const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
return (
-
+
{protocolData
?.map(({ value, protocol }) => {
- const display = value
- ? formatFiatPrice({ price: value, type: NumberType.ChartFiatValue })
- : isMultichainExploreEnabled
- ? null
- : getProtocolName(protocol)
+ const display = value ? formatFiatPrice({ price: value, type: NumberType.ChartFiatValue }) : null
return (
!!display && (
-
- {isMultichainExploreEnabled ? (
-
- {getProtocolName(protocol)}
-
- ) : (
-
- {display}
-
- )}
+
+
+ {getProtocolName(protocol)}
+
+
- {isMultichainExploreEnabled && (
-
- {display}
-
- )}
+
+ {display}
+
)
)
@@ -141,7 +118,6 @@ export function ChartHeader({
additionalFields,
}: ChartHeaderProps) {
const isHovered = !!time
- const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
return (
- {((isHovered && protocolData) || !isMultichainExploreEnabled) && }
+ {isHovered && protocolData && }
)
}
diff --git a/apps/web/src/components/Charts/ChartModel.tsx b/apps/web/src/components/Charts/ChartModel.tsx
index bfa95bf8cda..d4d4f2fe762 100644
--- a/apps/web/src/components/Charts/ChartModel.tsx
+++ b/apps/web/src/components/Charts/ChartModel.tsx
@@ -2,7 +2,6 @@ import { PROTOCOL_LEGEND_ELEMENT_ID, SeriesDataItemType } from 'components/Chart
import { formatTickMarks } from 'components/Charts/utils'
import { MissingDataBars } from 'components/Table/icons'
import { useScreenSize } from 'hooks/screenSize/useScreenSize'
-import { useActiveLocale } from 'hooks/useActiveLocale'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import { atom } from 'jotai'
import { useUpdateAtom } from 'jotai/utils'
@@ -21,6 +20,7 @@ import {
import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
import { ThemedText } from 'theme/components'
import { Flex, TamaguiElement, assertWebElement, styled } from 'ui/src'
+import { useCurrentLocale } from 'uniswap/src/features/language/hooks'
import { Trans } from 'uniswap/src/i18n'
import { useFormatter } from 'utils/formatNumbers'
import { v4 as uuidv4 } from 'uuid'
@@ -265,7 +265,7 @@ export function Chart, TDataType e
const [crosshairData, setCrosshairData] = useState(undefined)
const format = useFormatter()
const theme = useTheme()
- const locale = useActiveLocale()
+ const locale = useCurrentLocale()
const { md: isLargeScreen } = useScreenSize()
const modelParams = useMemo(
() => ({ ...params, format, theme, locale, isLargeScreen, onCrosshairMove: setCrosshairData }),
diff --git a/apps/web/src/components/Charts/LiquidityChart/index.tsx b/apps/web/src/components/Charts/LiquidityChart/index.tsx
index 8ee96b70ed9..967027e04b8 100644
--- a/apps/web/src/components/Charts/LiquidityChart/index.tsx
+++ b/apps/web/src/components/Charts/LiquidityChart/index.tsx
@@ -12,7 +12,7 @@ import { TickProcessed, usePoolActiveLiquidity } from 'hooks/usePoolTickData'
import JSBI from 'jsbi'
import { ISeriesApi, UTCTimestamp } from 'lightweight-charts'
import { useEffect, useState } from 'react'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { NumberType, useFormatter } from 'utils/formatNumbers'
interface LiquidityBarChartModelParams extends ChartModelParams, LiquidityBarProps {}
diff --git a/apps/web/src/components/Charts/SparklineChart/index.tsx b/apps/web/src/components/Charts/SparklineChart/index.tsx
index b12f22e4c54..15554814d55 100644
--- a/apps/web/src/components/Charts/SparklineChart/index.tsx
+++ b/apps/web/src/components/Charts/SparklineChart/index.tsx
@@ -1,16 +1,16 @@
import { getPriceBounds } from 'components/Charts/PriceChart/utils'
import LineChart from 'components/Charts/SparklineChart/LineChart'
import { LoadingBubble } from 'components/Tokens/loading'
-import { getChainFromChainUrlParam } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { curveCardinal, scaleLinear } from 'd3'
-import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
+import { SparklineMap, TopToken } from 'graphql/data/types'
import { PricePoint } from 'graphql/data/util'
import styled, { useTheme } from 'lib/styled-components'
import { memo } from 'react'
import { TokenStat } from 'state/explore/types'
-import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
+import { getChainIdFromChainUrlParam } from 'utils/chainParams'
const LoadingContainer = styled.div`
height: 100%;
@@ -38,8 +38,8 @@ interface SparklineChartProps {
function _SparklineChart({ width, height, tokenData, pricePercentChange, sparklineMap }: SparklineChartProps) {
const theme = useTheme()
// for sparkline
- const chainId = getChainFromChainUrlParam(tokenData?.chain.toLowerCase())?.id
- const chainInfo = chainId && UNIVERSE_CHAIN_INFO[chainId]
+ const chainId = getChainIdFromChainUrlParam(tokenData?.chain.toLowerCase())
+ const chainInfo = chainId && getChainInfo(chainId)
const isNative = addressesAreEquivalent(tokenData?.address, chainInfo?.wrappedNativeCurrency.address)
const pricePoints = tokenData?.address
? sparklineMap[isNative ? NATIVE_CHAIN_ID : tokenData.address.toLowerCase()]
diff --git a/apps/web/src/components/Charts/StackedLineChart/stacked-area-series/renderer.ts b/apps/web/src/components/Charts/StackedLineChart/stacked-area-series/renderer.ts
index beca9f26631..ef270c9168c 100644
--- a/apps/web/src/components/Charts/StackedLineChart/stacked-area-series/renderer.ts
+++ b/apps/web/src/components/Charts/StackedLineChart/stacked-area-series/renderer.ts
@@ -72,29 +72,28 @@ export class StackedAreaSeriesRenderer implements
}
})
const zeroY = priceToCoordinate(0) ?? 0
+ const colorsCount = options.colors.length
+ const isV4EverywhereEnabled = options.colors.length === 3
const { linesMeshed, hoverInfo } = this._createLinePaths(
bars,
this._data.visibleRange,
renderingScope,
zeroY * renderingScope.verticalPixelRatio,
options.hoveredLogicalIndex,
+ isV4EverywhereEnabled,
)
- const fullLinesMeshed = linesMeshed.slice(0, 3)
- const highlightLinesMeshed = options.hoveredLogicalIndex ? linesMeshed.slice(3) : []
+ const fullLinesMeshed = linesMeshed.slice(0, colorsCount + 1)
+ const highlightLinesMeshed = options.hoveredLogicalIndex ? linesMeshed.slice(colorsCount + 1) : []
const areaPaths = this._createAreas(fullLinesMeshed)
- const colorsCount = options.colors.length
const isHovered = options.hoveredLogicalIndex && options.hoveredLogicalIndex !== -1
- const isMultichainExploreEnabled = !!options.gradients
areaPaths.forEach((areaPath, index) => {
// Modification: determine area fill opacity based on number of lines and hover state
if (areaPaths.length === 1) {
ctx.globalAlpha = 0.12 // single-line charts have low opacity fill
- } else if (!isMultichainExploreEnabled) {
- ctx.globalAlpha = isHovered ? 0.24 : 1
}
const gradient = options.gradients
@@ -109,51 +108,47 @@ export class StackedAreaSeriesRenderer implements
ctx.fill(areaPath)
})
- ctx.lineWidth = options.lineWidth * (isMultichainExploreEnabled ? 1 : renderingScope.verticalPixelRatio)
+ ctx.lineWidth = options.lineWidth
ctx.lineJoin = 'round'
fullLinesMeshed.toReversed().forEach((linePath, index) => {
- const unreversedIndex = fullLinesMeshed.length - index
- const color = options.colors[unreversedIndex % colorsCount]
+ const color = options.colors[colorsCount - (index + 1)]
ctx.strokeStyle = color
ctx.fillStyle = color
- ctx.globalAlpha = isHovered && isMultichainExploreEnabled ? 0.24 : 1
+ ctx.globalAlpha = isHovered ? 0.24 : 1
// Bottom line is just the x-axis, which should not be drawn
if (index !== fullLinesMeshed.length - 1) {
// Line rendering:
ctx.beginPath()
- ctx.strokeStyle = color
ctx.stroke(linePath.path)
- }
-
- // Modification: Draws a glyph where lines intersect with the crosshair
- const hoverY = hoverInfo.points[index - 1]
- // Reset the global alpha to 1 after filling in the area under the graph and before drawing the glyph
- ctx.globalAlpha = 1
-
- // Glyph rendering:
- ctx.globalCompositeOperation = 'destination-out' // This mode allows removing a portion of the drawn line from the canvas
- ctx.beginPath()
- ctx.arc(hoverInfo.x, hoverY, 5 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
- ctx.fill() // Cuts a hole out of the line where part of the glyph should be rendered
+ // Modification: Draws a glyph where lines intersect with the crosshair
+ const hoverY = hoverInfo.points.toReversed()[index]
+ // Reset the global alpha to 1 after filling in the area under the graph and before drawing the glyph
+ ctx.globalAlpha = 1
- ctx.globalCompositeOperation = 'source-over' // Resets to default mode
+ // Glyph rendering:
+ ctx.globalCompositeOperation = 'destination-out' // This mode allows removing a portion of the drawn line from the canvas
+ ctx.beginPath()
+ ctx.arc(hoverInfo.x, hoverY, 5 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
+ ctx.fill() // Cuts a hole out of the line where part of the glyph should be rendered
- ctx.beginPath()
+ ctx.globalCompositeOperation = 'source-over' // Resets to default mode
+ ctx.beginPath()
- ctx.arc(hoverInfo.x, hoverY, 3 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
- ctx.fill() // Draws innermost portion of glyph
+ ctx.arc(hoverInfo.x, hoverY, 3 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
+ ctx.fill() // Draws innermost portion of glyph
- ctx.globalAlpha = 0.2
- ctx.beginPath()
- ctx.arc(hoverInfo.x, hoverY, 8 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
- ctx.fill() // Draws middle portion of glyph
+ ctx.globalAlpha = 0.2
+ ctx.beginPath()
+ ctx.arc(hoverInfo.x, hoverY, 8 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
+ ctx.fill() // Draws middle portion of glyph
- ctx.globalAlpha = 0.3
- ctx.beginPath()
- ctx.arc(hoverInfo.x, hoverY, 12 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
- ctx.fill() // Draws outer portion of glyph
+ ctx.globalAlpha = 0.3
+ ctx.beginPath()
+ ctx.arc(hoverInfo.x, hoverY, 12 * renderingScope.verticalPixelRatio, 0, 2 * Math.PI)
+ ctx.fill() // Draws outer portion of glyph
+ }
ctx.globalAlpha = 1
})
@@ -163,19 +158,14 @@ export class StackedAreaSeriesRenderer implements
ctx.globalAlpha = 1
return
}
- const unreversedIndex = fullLinesMeshed.length - index
- const color = options.colors[unreversedIndex % colorsCount]
+ const color = options.colors[colorsCount - (index + 1)]
ctx.strokeStyle = color
ctx.fillStyle = color
ctx.globalAlpha = 1
- // Bottom line is just the x-axis, which should not be drawn
- if (index !== fullLinesMeshed.length - 1) {
- // Line rendering:
- ctx.beginPath()
- ctx.strokeStyle = color
- ctx.stroke(linePath.path)
- }
+ // Line rendering:
+ ctx.beginPath()
+ ctx.stroke(linePath.path)
})
}
@@ -186,17 +176,22 @@ export class StackedAreaSeriesRenderer implements
renderingScope: BitmapCoordinatesRenderingScope,
zeroY: number,
hoveredIndex?: number | null,
+ isV4EverywhereEnabled?: boolean,
) {
const { horizontalPixelRatio, verticalPixelRatio } = renderingScope
- const oddLines: LinePathData[] = []
- const evenLines: LinePathData[] = []
- const oddHighlightLines: LinePathData[] = []
- const evenHighlightLines: LinePathData[] = []
+ const v2Lines: LinePathData[] = []
+ const v3Lines: LinePathData[] = []
+ const v4Lines: LinePathData[] = []
+ const v2HighlightLines: LinePathData[] = []
+ const v3HighlightLines: LinePathData[] = []
+ const v4HighlightLines: LinePathData[] = []
+
let firstBar = true
// Modification: tracks and returns coordinates of where a glyph should be rendered for each line when a crosshair is drawn
const hoverInfo = { points: new Array(), x: 0 }
+ const numLines = isV4EverywhereEnabled ? 3 : 2
// Modification: updated loop to include one point above and below the visible range to ensure the line is drawn to edges of chart
for (let i = visibleRange.from - 1; i < visibleRange.to + 1; i++) {
if (i >= bars.length || i < 0) {
@@ -206,8 +201,8 @@ export class StackedAreaSeriesRenderer implements
const stack = bars[i]
let lineIndex = 0
stack.ys.forEach((yMedia, index) => {
- if (index % 2 !== 0) {
- return // only doing odd at the moment
+ if (index % numLines !== 0) {
+ return
}
const x = stack.x * horizontalPixelRatio
@@ -219,34 +214,86 @@ export class StackedAreaSeriesRenderer implements
}
if (firstBar) {
- oddLines[lineIndex] = {
+ v2Lines[lineIndex] = {
path: new Path2D(),
first: { x, y },
last: { x, y },
}
- oddLines[lineIndex].path.moveTo(x, y)
+ v2Lines[lineIndex].path.moveTo(x, y)
} else {
- oddLines[lineIndex].path.lineTo(x, y)
- oddLines[lineIndex].last.x = x
- oddLines[lineIndex].last.y = y
+ v2Lines[lineIndex].path.lineTo(x, y)
+ v2Lines[lineIndex].last.x = x
+ v2Lines[lineIndex].last.y = y
}
if (firstBar && hoveredIndex && i <= hoveredIndex) {
- oddHighlightLines[lineIndex] = {
+ v2HighlightLines[lineIndex] = {
+ path: new Path2D(),
+ first: { x, y },
+ last: { x, y },
+ }
+ v2HighlightLines[lineIndex].path.moveTo(x, y)
+ } else if (hoveredIndex && i <= hoveredIndex) {
+ v2HighlightLines[lineIndex].path.lineTo(x, y)
+ v2HighlightLines[lineIndex].last.x = x
+ v2HighlightLines[lineIndex].last.y = y
+ }
+ lineIndex += 1
+ })
+ firstBar = false
+ }
+ firstBar = true
+ // Modification: updated loop to include one point above and below the visible range to ensure the line is drawn to edges of chart
+ for (let i = visibleRange.to + 1; i >= visibleRange.from - 1; i--) {
+ if (i >= bars.length || i < 0) {
+ continue
+ }
+ const stack = bars[i]
+ let lineIndex = 0
+ stack.ys.forEach((yMedia, index) => {
+ if (index % numLines !== 1) {
+ return
+ }
+
+ const x = stack.x * horizontalPixelRatio
+ const y = yMedia * verticalPixelRatio
+
+ if (i === hoveredIndex) {
+ hoverInfo.points[index] = y
+ hoverInfo.x = x
+ }
+
+ if (firstBar) {
+ v3Lines[lineIndex] = {
+ path: new Path2D(),
+ first: { x, y },
+ last: { x, y },
+ }
+ v3Lines[lineIndex].path.moveTo(x, y)
+ } else {
+ v3Lines[lineIndex].path.lineTo(x, y)
+ v3Lines[lineIndex].last.x = x
+ v3Lines[lineIndex].last.y = y
+ }
+
+ if (v3HighlightLines.length <= lineIndex && hoveredIndex && i <= hoveredIndex) {
+ v3HighlightLines[lineIndex] = {
path: new Path2D(),
first: { x, y },
last: { x, y },
}
- oddHighlightLines[lineIndex].path.moveTo(x, y)
+ v3HighlightLines[lineIndex].path.moveTo(x, y)
} else if (hoveredIndex && i <= hoveredIndex) {
- oddHighlightLines[lineIndex].path.lineTo(x, y)
- oddHighlightLines[lineIndex].last.x = x
- oddHighlightLines[lineIndex].last.y = y
+ v3HighlightLines[lineIndex].path.lineTo(x, y)
+ v3HighlightLines[lineIndex].last.x = x
+ v3HighlightLines[lineIndex].last.y = y
}
+
lineIndex += 1
})
firstBar = false
}
firstBar = true
+
// Modification: updated loop to include one point above and below the visible range to ensure the line is drawn to edges of chart
for (let i = visibleRange.to + 1; i >= visibleRange.from - 1; i--) {
if (i >= bars.length || i < 0) {
@@ -255,8 +302,8 @@ export class StackedAreaSeriesRenderer implements
const stack = bars[i]
let lineIndex = 0
stack.ys.forEach((yMedia, index) => {
- if (index % 2 === 0) {
- return // only doing even at the moment
+ if (index % numLines !== 2 || !isV4EverywhereEnabled) {
+ return
}
const x = stack.x * horizontalPixelRatio
@@ -268,29 +315,29 @@ export class StackedAreaSeriesRenderer implements
}
if (firstBar) {
- evenLines[lineIndex] = {
+ v4Lines[lineIndex] = {
path: new Path2D(),
first: { x, y },
last: { x, y },
}
- evenLines[lineIndex].path.moveTo(x, y)
+ v4Lines[lineIndex].path.moveTo(x, y)
} else {
- evenLines[lineIndex].path.lineTo(x, y)
- evenLines[lineIndex].last.x = x
- evenLines[lineIndex].last.y = y
+ v4Lines[lineIndex].path.lineTo(x, y)
+ v4Lines[lineIndex].last.x = x
+ v4Lines[lineIndex].last.y = y
}
- if (evenHighlightLines.length <= lineIndex && hoveredIndex && i <= hoveredIndex) {
- evenHighlightLines[lineIndex] = {
+ if (v4HighlightLines.length <= lineIndex && hoveredIndex && i <= hoveredIndex) {
+ v4HighlightLines[lineIndex] = {
path: new Path2D(),
first: { x, y },
last: { x, y },
}
- evenHighlightLines[lineIndex].path.moveTo(x, y)
+ v4HighlightLines[lineIndex].path.moveTo(x, y)
} else if (hoveredIndex && i <= hoveredIndex) {
- evenHighlightLines[lineIndex].path.lineTo(x, y)
- evenHighlightLines[lineIndex].last.x = x
- evenHighlightLines[lineIndex].last.y = y
+ v4HighlightLines[lineIndex].path.lineTo(x, y)
+ v4HighlightLines[lineIndex].last.x = x
+ v4HighlightLines[lineIndex].last.y = y
}
lineIndex += 1
@@ -300,20 +347,24 @@ export class StackedAreaSeriesRenderer implements
const baseLine = {
path: new Path2D(),
- first: { x: oddLines[0].last.x, y: zeroY },
- last: { x: oddLines[0].first.x, y: zeroY },
+ first: { x: v2Lines[0].last.x, y: zeroY },
+ last: { x: v2Lines[0].first.x, y: zeroY },
}
- baseLine.path.moveTo(oddLines[0].last.x, zeroY)
- baseLine.path.lineTo(oddLines[0].first.x, zeroY)
+ baseLine.path.moveTo(v2Lines[0].last.x, zeroY)
+ baseLine.path.lineTo(v2Lines[0].first.x, zeroY)
const linesMeshed: LinePathData[] = [baseLine]
- for (let i = 0; i < oddLines.length; i++) {
- linesMeshed.push(oddLines[i])
- if (i < evenLines.length) {
- linesMeshed.push(evenLines[i])
+ for (let i = 0; i < v2Lines.length; i++) {
+ linesMeshed.push(v2Lines[i])
+ if (i < v3Lines.length) {
+ linesMeshed.push(v3Lines[i])
+ }
+ if (i < v4Lines.length && isV4EverywhereEnabled) {
+ linesMeshed.push(v4Lines[i])
}
if (hoveredIndex) {
- linesMeshed.push(oddHighlightLines[i])
- linesMeshed.push(evenHighlightLines[i])
+ linesMeshed.push(v2HighlightLines[i])
+ linesMeshed.push(v3HighlightLines[i])
+ isV4EverywhereEnabled && linesMeshed.push(v4HighlightLines[i])
}
}
@@ -324,10 +375,13 @@ export class StackedAreaSeriesRenderer implements
_createAreas(linesMeshed: LinePathData[]): Path2D[] {
const areas: Path2D[] = []
for (let i = 1; i < linesMeshed.length; i++) {
- const areaPath = new Path2D(linesMeshed[i - 1].path)
+ // The first area must reference the base line, aka index 0
+ // All other areas need to reference the first area to fully fill the bottom of the graph
+ const baseReferenceIndex = Math.min(i - 1, 1)
+ const areaPath = new Path2D(linesMeshed[baseReferenceIndex].path)
areaPath.lineTo(linesMeshed[i].first.x, linesMeshed[i].first.y)
areaPath.addPath(linesMeshed[i].path)
- areaPath.lineTo(linesMeshed[i - 1].first.x, linesMeshed[i - 1].first.y)
+ areaPath.lineTo(linesMeshed[baseReferenceIndex].first.x, linesMeshed[baseReferenceIndex].first.y)
areaPath.closePath()
areas.push(areaPath)
}
diff --git a/apps/web/src/components/Charts/VolumeChart/CustomVolumeChartModel.tsx b/apps/web/src/components/Charts/VolumeChart/CustomVolumeChartModel.tsx
index fb1c359563e..df171ed5924 100644
--- a/apps/web/src/components/Charts/VolumeChart/CustomVolumeChartModel.tsx
+++ b/apps/web/src/components/Charts/VolumeChart/CustomVolumeChartModel.tsx
@@ -9,7 +9,6 @@ export type CustomVolumeChartModelParams = {
colors: string[]
headerHeight: number
useThinCrosshair?: boolean
- isMultichainExploreEnabled?: boolean
background?: string
}
@@ -26,7 +25,6 @@ export class CustomVolumeChartModel exten
this.series = this.api.addCustomSeries(
new CustomHistogramSeries({
colors: params.colors,
- isMultichainExploreEnabled: params.isMultichainExploreEnabled,
background: params.background,
}),
)
diff --git a/apps/web/src/components/Charts/VolumeChart/custom-histogram-series.tsx b/apps/web/src/components/Charts/VolumeChart/custom-histogram-series.tsx
index 53e04c96173..9fd4870124d 100644
--- a/apps/web/src/components/Charts/VolumeChart/custom-histogram-series.tsx
+++ b/apps/web/src/components/Charts/VolumeChart/custom-histogram-series.tsx
@@ -23,13 +23,11 @@ export class CustomHistogramSeries
{
_renderer: CustomHistogramSeriesRenderer
_colors: string[]
- _isMultichainExploreEnabled?: boolean
_background?: string
constructor(props: CustomHistogramProps) {
this._renderer = new CustomHistogramSeriesRenderer(props)
this._colors = props.colors
- this._isMultichainExploreEnabled = props.isMultichainExploreEnabled
this._background = props.background
}
diff --git a/apps/web/src/components/Charts/VolumeChart/renderer.tsx b/apps/web/src/components/Charts/VolumeChart/renderer.tsx
index 6c38d88911c..1540dfd57a2 100644
--- a/apps/web/src/components/Charts/VolumeChart/renderer.tsx
+++ b/apps/web/src/components/Charts/VolumeChart/renderer.tsx
@@ -57,7 +57,6 @@ function cumulativeBuildUp(data: StackedHistogramData): number[] {
export interface CustomHistogramProps {
colors: string[]
- isMultichainExploreEnabled?: boolean
background?: string
}
@@ -65,12 +64,10 @@ export class CustomHistogramSeriesRenderer im
_data: PaneRendererCustomData | null = null
_options: CustomHistogramSeriesOptions | null = null
_colors: string[]
- _isMultichainExploreEnabled?: boolean
_background?: string
constructor(props: CustomHistogramProps) {
this._colors = props.colors
- this._isMultichainExploreEnabled = props.isMultichainExploreEnabled
this._background = props.background
}
@@ -134,18 +131,11 @@ export class CustomHistogramSeriesRenderer im
const totalBox = positionsBox(zeroY, stack.ys[stack.ys.length - 1], renderingScope.verticalPixelRatio)
ctx.beginPath()
- const isMultichainExploreEnabled = this._isMultichainExploreEnabled
if (this._background) {
ctx.fillStyle = this._background
}
- ctx.roundRect(
- column.left + margin,
- totalBox.position,
- width - margin,
- totalBox.length,
- isMultichainExploreEnabled ? 4 : 8,
- )
+ ctx.roundRect(column.left + margin, totalBox.position, width - margin, totalBox.length, 4)
ctx.fill()
// Modification: draw the stack's boxes atop the total volume bar, resulting in the top and bottom boxes being rounded
@@ -157,9 +147,9 @@ export class CustomHistogramSeriesRenderer im
const color = this._colors[this._colors.length - 1 - index] // color v2, then v3
const stackBoxPositions = positionsBox(previousY, y, renderingScope.verticalPixelRatio)
ctx.fillStyle = color
- ctx.globalAlpha = isStackedHistogram && !isHovered && isMultichainExploreEnabled ? 0.24 : 1
+ ctx.globalAlpha = isStackedHistogram && !isHovered ? 0.24 : 1
ctx.fillRect(column.left + margin, stackBoxPositions.position, width - margin, stackBoxPositions.length)
- if (isStackedHistogram && isMultichainExploreEnabled && !isHovered) {
+ if (isStackedHistogram && !isHovered) {
ctx.globalAlpha = 1
ctx.fillStyle = color
ctx.fillRect(column.left + margin, stackBoxPositions.position, width - margin, 2)
diff --git a/apps/web/src/components/Charts/hooks.ts b/apps/web/src/components/Charts/hooks.ts
index ac8d67af507..f18df0b3055 100644
--- a/apps/web/src/components/Charts/hooks.ts
+++ b/apps/web/src/components/Charts/hooks.ts
@@ -1,9 +1,9 @@
-import { useActiveLocale } from 'hooks/useActiveLocale'
import { UTCTimestamp } from 'lightweight-charts'
import { useCallback } from 'react'
+import { useCurrentLocale } from 'uniswap/src/features/language/hooks'
export function useHeaderDateFormatter() {
- const locale = useActiveLocale()
+ const locale = useCurrentLocale()
return useCallback(
(time?: UTCTimestamp) => {
if (!time) {
diff --git a/apps/web/src/components/ConfirmSwapModal/Pending.test.tsx b/apps/web/src/components/ConfirmSwapModal/Pending.test.tsx
index 3a86fa4384b..3843bb534c1 100644
--- a/apps/web/src/components/ConfirmSwapModal/Pending.test.tsx
+++ b/apps/web/src/components/ConfirmSwapModal/Pending.test.tsx
@@ -13,7 +13,7 @@ import { mocked } from 'test-utils/mocked'
import { render, screen } from 'test-utils/render'
import { UniswapXOrderStatus } from 'types/uniswapx'
import { TransactionStatus } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
jest.mock('state/transactions/hooks', () => ({
...jest.requireActual('state/transactions/hooks'),
diff --git a/apps/web/src/components/ConfirmSwapModal/Pending.tsx b/apps/web/src/components/ConfirmSwapModal/Pending.tsx
index 596117e17c8..8f41dd424a2 100644
--- a/apps/web/src/components/ConfirmSwapModal/Pending.tsx
+++ b/apps/web/src/components/ConfirmSwapModal/Pending.tsx
@@ -24,8 +24,8 @@ import { ThemedText } from 'theme/components/text'
import { UniswapXOrderStatus } from 'types/uniswapx'
import { uniswapUrls } from 'uniswap/src/constants/urls'
import { TransactionStatus } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { Trans, t } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
import { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking'
const Container = styled(ColumnCenter)`
diff --git a/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
index 6f2f903d893..beda25f7a4f 100644
--- a/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -13,7 +13,6 @@ import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
import Tooltip from 'components/Tooltip'
import { AutoColumn } from 'components/deprecated/Column'
import { RowBetween, RowFixed } from 'components/deprecated/Row'
-import { useIsSupportedChainId } from 'constants/chains'
import { PrefetchBalancesWrapper } from 'graphql/data/apollo/AdaptiveTokenBalancesProvider'
import { useAccount } from 'hooks/useAccount'
import styled, { useTheme } from 'lib/styled-components'
@@ -26,6 +25,7 @@ import { useSwapAndLimitContext } from 'state/swap/useSwapContext'
import { ThemedText } from 'theme/components'
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
import { AnimatePresence, Flex, Text } from 'ui/src'
+import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { Trans } from 'uniswap/src/i18n'
import { CurrencyField } from 'uniswap/src/types/currency'
diff --git a/apps/web/src/components/CurrencyInputPanel/index.tsx b/apps/web/src/components/CurrencyInputPanel/index.tsx
index 6f2f7b090d7..2e53de4b695 100644
--- a/apps/web/src/components/CurrencyInputPanel/index.tsx
+++ b/apps/web/src/components/CurrencyInputPanel/index.tsx
@@ -10,7 +10,6 @@ import { DoubleCurrencyLogo } from 'components/Logo/DoubleLogo'
import { Input as NumericalInput } from 'components/NumericalInput'
import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
import { RowBetween, RowFixed } from 'components/deprecated/Row'
-import { useIsSupportedChainId } from 'constants/chains'
import { PrefetchBalancesWrapper } from 'graphql/data/apollo/AdaptiveTokenBalancesProvider'
import { useAccount } from 'hooks/useAccount'
import styled, { useTheme } from 'lib/styled-components'
@@ -20,6 +19,7 @@ import { useCurrencyBalance } from 'state/connection/hooks'
import { BREAKPOINTS } from 'theme'
import { ThemedText } from 'theme/components'
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
+import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { Trans, useTranslation } from 'uniswap/src/i18n'
import { CurrencyField } from 'uniswap/src/types/currency'
diff --git a/apps/web/src/components/CurrencyInputPanel/utils.test.ts b/apps/web/src/components/CurrencyInputPanel/utils.test.ts
index cf3cdb3f780..710645366c9 100644
--- a/apps/web/src/components/CurrencyInputPanel/utils.test.ts
+++ b/apps/web/src/components/CurrencyInputPanel/utils.test.ts
@@ -1,7 +1,7 @@
import { Token } from '@uniswap/sdk-core'
import { formatCurrencySymbol } from 'components/CurrencyInputPanel/utils'
import { DAI } from 'uniswap/src/constants/tokens'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
describe('formatCurrencySymbol', () => {
it('should return undefined if currency is undefined', () => {
diff --git a/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
index 8f0f71ded6b..01ab0991415 100644
--- a/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
+++ b/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
@@ -9,11 +9,11 @@ import { X } from 'react-feather'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer'
import { BREAKPOINTS } from 'theme'
+import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/features/chains/types'
import { DynamicConfigKeys, DynamicConfigs, QuickRouteChainsConfigKey } from 'uniswap/src/features/gating/configs'
import { FeatureFlags, getFeatureFlagName } from 'uniswap/src/features/gating/flags'
import { useFeatureFlagWithExposureLoggingDisabled } from 'uniswap/src/features/gating/hooks'
import { Statsig } from 'uniswap/src/features/gating/sdk/statsig'
-import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/types/chains'
const Wrapper = styled(Column)`
padding: 20px 16px;
@@ -219,13 +219,11 @@ export default function FeatureFlagModal() {
-
-
-
-
-
-
-
-
,
- supportedChains: COMBINED_CHAIN_IDS,
+ supportedChains: ALL_CHAIN_IDS,
},
[FeeAmount.LOW_200]: {
label: '0.02',
@@ -27,16 +27,16 @@ export const FEE_AMOUNT_DETAIL: Record<
[FeeAmount.LOW]: {
label: '0.05',
description: ,
- supportedChains: COMBINED_CHAIN_IDS,
+ supportedChains: ALL_CHAIN_IDS,
},
[FeeAmount.MEDIUM]: {
label: '0.3',
description: ,
- supportedChains: COMBINED_CHAIN_IDS,
+ supportedChains: ALL_CHAIN_IDS,
},
[FeeAmount.HIGH]: {
label: '1',
description: ,
- supportedChains: COMBINED_CHAIN_IDS,
+ supportedChains: ALL_CHAIN_IDS,
},
}
diff --git a/apps/web/src/components/FiatOnrampModal/index.tsx b/apps/web/src/components/FiatOnrampModal/index.tsx
index 6a273e2c81a..bbc2953da3c 100644
--- a/apps/web/src/components/FiatOnrampModal/index.tsx
+++ b/apps/web/src/components/FiatOnrampModal/index.tsx
@@ -1,9 +1,7 @@
import Circle from 'assets/images/blue-loader.svg'
import { MOONPAY_SUPPORTED_CURRENCY_CODES } from 'components/FiatOnrampModal/constants'
import { getDefaultCurrencyCode, parsePathParts } from 'components/FiatOnrampModal/utils'
-import { getChain, getChainFromChainUrlParam, getChainUrlParam } from 'constants/chains'
import { useAccount } from 'hooks/useAccount'
-import useParsedQueryString from 'hooks/useParsedQueryString'
import styled, { useTheme } from 'lib/styled-components'
import { useCallback, useEffect, useState } from 'react'
import { useHref } from 'react-router-dom'
@@ -12,9 +10,11 @@ import { ApplicationModal } from 'state/application/reducer'
import { CustomLightSpinner, ThemedText } from 'theme/components'
import { useIsDarkMode } from 'theme/components/ThemeToggle'
import { AdaptiveWebModal } from 'ui/src'
+import { useUrlContext } from 'uniswap/src/contexts/UrlContext'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
import { Trans } from 'uniswap/src/i18n'
-
import { logger } from 'utilities/src/logger/logger'
+import { getChainIdFromChainUrlParam } from 'utils/chainParams'
const MOONPAY_DARK_BACKGROUND = '#1c1c1e'
const Wrapper = styled.div<{ isDarkMode: boolean }>`
@@ -77,11 +77,13 @@ export default function FiatOnrampModal() {
const closeModal = useCloseModal()
const fiatOnrampModalOpen = useModalIsOpen(ApplicationModal.FIAT_ONRAMP)
- const { chain, tokenAddress } = parsePathParts(location.pathname)
+ const { chainId, tokenAddress } = parsePathParts(location.pathname)
+ const chainInfo = chainId ? getChainInfo(chainId) : undefined
+ const { useParsedQueryString } = useUrlContext()
const parsedChainName = useParsedQueryString().chain
- const queryChain =
- typeof parsedChainName === 'string' ? getChainFromChainUrlParam(getChainUrlParam(parsedChainName)) : undefined
- const accountChainInfo = getChain({ chainId: account.chainId })
+ const queryChainId = typeof parsedChainName === 'string' ? getChainIdFromChainUrlParam(parsedChainName) : undefined
+ const queryChainInfo = queryChainId ? getChainInfo(queryChainId) : undefined
+ const accountChainInfo = account.chainId ? getChainInfo(account.chainId) : undefined
const [signedIframeUrl, setSignedIframeUrl] = useState(null)
const [error, setError] = useState(null)
@@ -109,7 +111,7 @@ export default function FiatOnrampModal() {
colorCode: theme.accent1,
defaultCurrencyCode: getDefaultCurrencyCode(
tokenAddress,
- chain?.backendChain.chain ?? queryChain?.backendChain.chain ?? accountChainInfo?.backendChain.chain,
+ chainInfo?.backendChain.chain ?? queryChainInfo?.backendChain.chain ?? accountChainInfo?.backendChain.chain,
),
redirectUrl: swapUrl,
walletAddresses: JSON.stringify(
@@ -135,9 +137,9 @@ export default function FiatOnrampModal() {
account.address,
account.isConnected,
accountChainInfo?.backendChain.chain,
- chain?.backendChain.chain,
+ chainInfo?.backendChain.chain,
isDarkMode,
- queryChain?.backendChain.chain,
+ queryChainInfo?.backendChain.chain,
swapUrl,
theme.accent1,
tokenAddress,
diff --git a/apps/web/src/components/FiatOnrampModal/utils.test.ts b/apps/web/src/components/FiatOnrampModal/utils.test.ts
index 015844357be..ead2021ec65 100644
--- a/apps/web/src/components/FiatOnrampModal/utils.test.ts
+++ b/apps/web/src/components/FiatOnrampModal/utils.test.ts
@@ -1,7 +1,6 @@
import { WETH9 } from '@uniswap/sdk-core'
import { getDefaultCurrencyCode, parsePathParts } from 'components/FiatOnrampModal/utils'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
-import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
import {
MATIC_MAINNET,
USDC_ARBITRUM,
@@ -13,7 +12,7 @@ import {
WETH_POLYGON,
} from 'uniswap/src/constants/tokens'
import { Chain } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
describe('getDefaultCurrencyCode', () => {
it('NATIVE/arbitrum should return the correct currency code', () => {
@@ -66,15 +65,15 @@ describe('getDefaultCurrencyCode', () => {
describe('parseLocation', () => {
it('should parse the URL correctly', () => {
expect(parsePathParts('/tokens/ethereum/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599')).toEqual({
- chain: UNIVERSE_CHAIN_INFO[UniverseChainId.Mainnet],
+ chainId: UniverseChainId.Mainnet,
tokenAddress: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',
})
expect(parsePathParts('tokens/ethereum/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599')).toEqual({
- chain: UNIVERSE_CHAIN_INFO[UniverseChainId.Mainnet],
+ chainId: UniverseChainId.Mainnet,
tokenAddress: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',
})
expect(parsePathParts('/swap')).toEqual({
- chain: undefined,
+ chainId: undefined,
tokenAddress: undefined,
})
})
diff --git a/apps/web/src/components/FiatOnrampModal/utils.ts b/apps/web/src/components/FiatOnrampModal/utils.ts
index 21cfd71d1d1..b59a26a70aa 100644
--- a/apps/web/src/components/FiatOnrampModal/utils.ts
+++ b/apps/web/src/components/FiatOnrampModal/utils.ts
@@ -1,6 +1,5 @@
import { WETH9 } from '@uniswap/sdk-core'
import { MoonpaySupportedCurrencyCode } from 'components/FiatOnrampModal/constants'
-import { getChainFromChainUrlParam, getChainUrlParam, InterfaceGqlChain } from 'constants/chains'
import {
MATIC_MAINNET,
USDC_ARBITRUM,
@@ -13,7 +12,8 @@ import {
WETH_POLYGON,
} from 'uniswap/src/constants/tokens'
import { Chain } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { GqlChainId, UniverseChainId } from 'uniswap/src/features/chains/types'
+import { getChainIdFromChainUrlParam } from 'utils/chainParams'
type MoonpaySupportedChain = Chain.Ethereum | Chain.Polygon | Chain.Arbitrum | Chain.Optimism | Chain.Base
const moonPaySupportedChains = [Chain.Ethereum, Chain.Polygon, Chain.Arbitrum, Chain.Optimism, Chain.Base]
@@ -53,7 +53,7 @@ const CURRENCY_CODES: {
},
}
-export function getDefaultCurrencyCode(address?: string, gqlChain?: InterfaceGqlChain): MoonpaySupportedCurrencyCode {
+export function getDefaultCurrencyCode(address?: string, gqlChain?: GqlChainId): MoonpaySupportedCurrencyCode {
if (!gqlChain) {
return 'eth'
}
@@ -74,8 +74,8 @@ export function getDefaultCurrencyCode(address?: string, gqlChain?: InterfaceGql
export function parsePathParts(pathname: string) {
const pathParts = pathname.split('/')
// Matches the /tokens// path.
- const chainSlug = getChainUrlParam(pathParts.length > 2 ? pathParts[pathParts.length - 2] : undefined)
- const chain = getChainFromChainUrlParam(chainSlug)
+ const chainSlug = pathParts.length > 2 ? pathParts[pathParts.length - 2] : undefined
+ const chainId = getChainIdFromChainUrlParam(chainSlug)
const tokenAddress = pathParts.length > 2 ? pathParts[pathParts.length - 1] : undefined
- return { chain, tokenAddress }
+ return { chainId, tokenAddress }
}
diff --git a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityContext.tsx b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityContext.tsx
index 06413cb4cd2..3dae25a9ff9 100644
--- a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityContext.tsx
+++ b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityContext.tsx
@@ -1,5 +1,5 @@
import { useDerivedIncreaseLiquidityInfo } from 'components/IncreaseLiquidity/hooks'
-import { useModalLiquidityPositionInfo } from 'components/Liquidity/hooks'
+import { useModalLiquidityInitialState } from 'components/Liquidity/hooks'
import { DepositInfo, PositionInfo } from 'components/Liquidity/types'
import { Dispatch, PropsWithChildren, SetStateAction, createContext, useContext, useMemo, useState } from 'react'
import { PositionField } from 'types/position'
@@ -19,11 +19,18 @@ const DEFAULT_INCREASE_LIQUIDITY_STATE = {
exactField: PositionField.TOKEN0,
}
+// This increase-specific context needs to recalculate deposit0Disabled and deposit1Disabled,
+// which are derived from price range inputs in the regular create flow.
+export type IncreaseLiquidityDerivedInfo = DepositInfo & {
+ deposit0Disabled?: boolean
+ deposit1Disabled?: boolean
+}
+
interface IncreaseLiquidityContextType {
step: IncreaseLiquidityStep
setStep: Dispatch>
increaseLiquidityState: IncreaseLiquidityState
- derivedIncreaseLiquidityInfo: DepositInfo
+ derivedIncreaseLiquidityInfo: IncreaseLiquidityDerivedInfo
setIncreaseLiquidityState: Dispatch>
}
@@ -40,7 +47,7 @@ export function useIncreaseLiquidityContext() {
}
export function IncreaseLiquidityContextProvider({ children }: PropsWithChildren) {
- const positionInfo = useModalLiquidityPositionInfo()
+ const positionInfo = useModalLiquidityInitialState()
const [step, setStep] = useState(IncreaseLiquidityStep.Input)
diff --git a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityReview.tsx b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityReview.tsx
index d94cdc5ebd5..8c3a3fc653d 100644
--- a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityReview.tsx
+++ b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityReview.tsx
@@ -61,6 +61,12 @@ export function IncreaseLiquidityReview({ onClose }: { onClose: () => void }) {
setCurrentStep(undefined)
}
+ const onSuccess = () => {
+ setSteps([])
+ setCurrentStep(undefined)
+ onClose()
+ }
+
const onIncreaseLiquidity = () => {
const isValidTx = isValidLiquidityTxContext(txInfo)
if (!account || account?.type !== AccountType.SignerMnemonic || !isValidTx) {
@@ -75,7 +81,7 @@ export function IncreaseLiquidityReview({ onClose }: { onClose: () => void }) {
liquidityTxContext: txInfo,
setCurrentStep,
setSteps,
- onSuccess: onClose,
+ onSuccess,
onFailure,
}),
)
diff --git a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityTxContext.tsx b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityTxContext.tsx
index bd49364c03a..2927d96ae92 100644
--- a/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityTxContext.tsx
+++ b/apps/web/src/components/IncreaseLiquidity/IncreaseLiquidityTxContext.tsx
@@ -2,7 +2,7 @@
import { ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
import { useIncreaseLiquidityContext } from 'components/IncreaseLiquidity/IncreaseLiquidityContext'
-import { useModalLiquidityPositionInfo } from 'components/Liquidity/hooks'
+import { useModalLiquidityInitialState } from 'components/Liquidity/hooks'
import { getProtocolItems } from 'components/Liquidity/utils'
import { ZERO_ADDRESS } from 'constants/misc'
import { PropsWithChildren, createContext, useContext, useMemo } from 'react'
@@ -23,7 +23,7 @@ interface IncreasePositionContextType {
const IncreaseLiquidityTxContext = createContext(undefined)
export function IncreaseLiquidityTxContextProvider({ children }: PropsWithChildren): JSX.Element {
- const positionInfo = useModalLiquidityPositionInfo()
+ const positionInfo = useModalLiquidityInitialState()
const { derivedIncreaseLiquidityInfo } = useIncreaseLiquidityContext()
const { currencyAmounts } = derivedIncreaseLiquidityInfo
diff --git a/apps/web/src/components/IncreaseLiquidity/hooks.tsx b/apps/web/src/components/IncreaseLiquidity/hooks.tsx
index 91e9161ff40..613a5f0444a 100644
--- a/apps/web/src/components/IncreaseLiquidity/hooks.tsx
+++ b/apps/web/src/components/IncreaseLiquidity/hooks.tsx
@@ -1,12 +1,14 @@
// eslint-disable-next-line no-restricted-imports
import { ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
-import { IncreaseLiquidityState } from 'components/IncreaseLiquidity/IncreaseLiquidityContext'
-import { DepositInfo } from 'components/Liquidity/types'
+import {
+ IncreaseLiquidityDerivedInfo,
+ IncreaseLiquidityState,
+} from 'components/IncreaseLiquidity/IncreaseLiquidityContext'
import { useAccount } from 'hooks/useAccount'
import { UseDepositInfoProps, useDepositInfo } from 'pages/Pool/Positions/create/hooks'
import { useMemo } from 'react'
-export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState): DepositInfo {
+export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState): IncreaseLiquidityDerivedInfo {
const account = useAccount()
const { position: positionInfo, exactAmount, exactField } = state
@@ -29,6 +31,8 @@ export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState):
token1,
exactField,
exactAmount,
+ deposit0Disabled: false,
+ deposit1Disabled: false,
}
}
@@ -36,6 +40,9 @@ export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState):
const tickLower = tickLowerStr ? parseInt(tickLowerStr) : undefined
const tickUpper = tickUpperStr ? parseInt(tickUpperStr) : undefined
+ const deposit0Disabled = Boolean(tickUpper && positionInfo.pool && positionInfo.pool.tickCurrent >= tickUpper)
+ const deposit1Disabled = Boolean(tickLower && positionInfo.pool && positionInfo.pool.tickCurrent <= tickLower)
+
if (positionInfo.version === ProtocolVersion.V3) {
return {
protocolVersion: ProtocolVersion.V3,
@@ -47,6 +54,8 @@ export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState):
token1,
exactField,
exactAmount,
+ deposit0Disabled,
+ deposit1Disabled,
}
}
@@ -61,6 +70,8 @@ export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState):
token1: currency1,
exactField,
exactAmount,
+ deposit0Disabled,
+ deposit1Disabled,
}
}
@@ -70,5 +81,14 @@ export function useDerivedIncreaseLiquidityInfo(state: IncreaseLiquidityState):
}
}, [account.address, exactAmount, exactField, positionInfo, currency0, currency1, token0, token1])
- return useDepositInfo(depositInfoProps)
+ const depositInfo = useDepositInfo(depositInfoProps)
+
+ return useMemo(
+ () => ({
+ ...depositInfo,
+ deposit0Disabled: depositInfoProps.deposit0Disabled,
+ deposit1Disabled: depositInfoProps.deposit1Disabled,
+ }),
+ [depositInfo, depositInfoProps.deposit0Disabled, depositInfoProps.deposit1Disabled],
+ )
}
diff --git a/apps/web/src/components/Liquidity/FeeTierSearchModal.tsx b/apps/web/src/components/Liquidity/FeeTierSearchModal.tsx
index 92f7b93a004..7d824e47cd2 100644
--- a/apps/web/src/components/Liquidity/FeeTierSearchModal.tsx
+++ b/apps/web/src/components/Liquidity/FeeTierSearchModal.tsx
@@ -10,16 +10,18 @@ import { useEffect, useState } from 'react'
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import styled from 'styled-components'
import { ClickableTamaguiStyle, CloseIcon } from 'theme/components'
-import { Button, Flex, Input, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
import { BackArrow } from 'ui/src/components/icons/BackArrow'
import { CheckCircleFilled } from 'ui/src/components/icons/CheckCircleFilled'
import { Plus } from 'ui/src/components/icons/Plus'
import { Search } from 'ui/src/components/icons/Search'
+import { AmountInput, numericInputRegex } from 'uniswap/src/components/CurrencyInputPanel/AmountInput'
import { Modal } from 'uniswap/src/components/modals/Modal'
+import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { useTranslation } from 'uniswap/src/i18n'
import useResizeObserver from 'use-resize-observer'
-import { NumberType, useFormatter } from 'utils/formatNumbers'
+import { NumberType } from 'utilities/src/format/types'
const FeeTierPercentInput = styled(StyledPercentInput)`
flex-grow: 0;
@@ -30,7 +32,7 @@ const FeeTierPercentInput = styled(StyledPercentInput)`
export function FeeTierSearchModal() {
const { chainId } = useAccount()
const {
- positionState: { fee: selectedFee, protocolVersion },
+ positionState: { fee: selectedFee, protocolVersion, hook },
derivedPositionInfo,
setPositionState,
feeTierSearchModalOpen,
@@ -45,13 +47,21 @@ export function FeeTierSearchModal() {
const [searchValue, setSearchValue] = useState('')
const [createFeeValue, setCreateFeeValue] = useState('')
const [createModeEnabled, setCreateModeEnabled] = useState(false)
- const { formatPercent, formatNumberOrString } = useFormatter()
+ const { formatNumberOrString, formatPercent } = useLocalizationContext()
const [autoDecrementing, setAutoDecrementing] = useState(false)
const [autoIncrementing, setAutoIncrementing] = useState(false)
const [holdDuration, setHoldDuration] = useState(0)
const hiddenObserver = useResizeObserver()
- const feeTierData = useAllFeeTierPoolData({ chainId, protocolVersion, currencies: derivedPositionInfo.currencies })
+ const withDynamicFeeTier = Boolean(hook)
+ const { feeTierData, hasExistingFeeTiers } = useAllFeeTierPoolData({
+ chainId,
+ protocolVersion,
+ currencies: derivedPositionInfo.currencies,
+ withDynamicFeeTier,
+ })
+
+ const showCreateModal = !withDynamicFeeTier && (createModeEnabled || !hasExistingFeeTiers)
useEffect(() => {
let interval: NodeJS.Timeout
@@ -78,11 +88,17 @@ export function FeeTierSearchModal() {
setCreateFeeValue((prev) => {
let newValue = parseFloat(prev)
if (autoDecrementing) {
+ if (!prev || prev === '') {
+ return '0'
+ }
newValue -= 0.01
if (newValue < 0) {
return '0'
}
} else if (autoIncrementing) {
+ if (!prev || prev === '') {
+ return '0.01'
+ }
newValue += 0.01
if (newValue > 100) {
return '100'
@@ -116,13 +132,13 @@ export function FeeTierSearchModal() {
)}
-
- {createModeEnabled ? t('fee.tier.create') : t('fee.tier.select')}
+
+ {showCreateModal ? t('fee.tier.create') : t('fee.tier.select')}
- {createModeEnabled ? (
+ {showCreateModal ? (
{t('fee.tier.create.description')}
@@ -248,24 +264,59 @@ export function FeeTierSearchModal() {
) : (
<>
-
+
- {
- setSearchValue(event.target.value)
+ placeholderTextColor="$neutral3"
+ onChangeText={(value) => {
+ if (value === '.') {
+ setSearchValue('0.')
+ return
+ }
+ // Prevent two decimals
+ if (value.indexOf('.') !== -1 && value.indexOf('.', value.indexOf('.') + 1) !== -1) {
+ return
+ }
+ // Prevent addition of non-numeric characters to the end of the string
+ if (!numericInputRegex.test(value)) {
+ setSearchValue(value.slice(0, -1))
+ return
+ }
+
+ const newValue = parseFloat(value)
+ if (newValue > 100) {
+ setSearchValue('100')
+ return
+ }
+
+ setSearchValue(newValue >= 0 ? value : '')
}}
- value={searchValue}
/>
{Object.values(feeTierData)
- .filter((data) => data.formattedFee.includes(searchValue) || searchValue.includes(data.id))
+ .filter((data) => data.formattedFee.includes(searchValue) || (data.id && searchValue.includes(data.id)))
.map((pool) => (
({
...prevState,
fee: {
- feeAmount: pool.fee,
- tickSpacing: calculateTickSpacingFromFeeAmount(pool.fee),
+ feeAmount: pool.fee.feeAmount,
+ tickSpacing: pool.fee.tickSpacing,
},
}))
onClose()
@@ -291,14 +342,24 @@ export function FeeTierSearchModal() {
{pool.formattedFee}
- {formatNumberOrString({ input: pool.totalLiquidityUsd, type: NumberType.ChartFiatValue })}
+ {pool.totalLiquidityUsd === 0
+ ? '0'
+ : formatNumberOrString({
+ value: pool.totalLiquidityUsd,
+ type: NumberType.FiatTokenStats,
+ })}{' '}
+ {t('common.totalValueLocked')}
- {t('fee.tier.percent.select', { percentage: formatPercent(pool.percentage) })}
+ {pool.created
+ ? t('fee.tier.percent.select', { percentage: formatPercent(pool.percentage.toFixed()) })
+ : t('common.notCreated.label')}
- {pool.fee === selectedFee.feeAmount && }
+ {pool.fee.feeAmount === selectedFee.feeAmount && (
+
+ )}
))}
diff --git a/apps/web/src/components/Liquidity/HookModal.tsx b/apps/web/src/components/Liquidity/HookModal.tsx
new file mode 100644
index 00000000000..a04130e93c9
--- /dev/null
+++ b/apps/web/src/components/Liquidity/HookModal.tsx
@@ -0,0 +1,200 @@
+import { FlagWarning, getFlagsFromContractAddress, getFlagWarning } from 'components/Liquidity/utils'
+import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
+import { useMemo, useState } from 'react'
+import { CopyHelper } from 'theme/components'
+import { Button, Checkbox, Flex, HeightAnimator, Separator, Text, TouchableArea } from 'ui/src'
+import { AlertTriangleFilled } from 'ui/src/components/icons/AlertTriangleFilled'
+import { ContractInteraction } from 'ui/src/components/icons/ContractInteraction'
+import { DocumentList } from 'ui/src/components/icons/DocumentList'
+import { Page } from 'ui/src/components/icons/Page'
+import { RotatableChevron } from 'ui/src/components/icons/RotatableChevron'
+import { Modal } from 'uniswap/src/components/modals/Modal'
+import { LearnMoreLink } from 'uniswap/src/components/text/LearnMoreLink'
+import { uniswapUrls } from 'uniswap/src/constants/urls'
+import { ModalName } from 'uniswap/src/features/telemetry/constants'
+import { useTranslation } from 'uniswap/src/i18n'
+import { shortenAddress } from 'uniswap/src/utils/addresses'
+
+function HookWarnings({ flags, hasDangerous }: { flags: FlagWarning[]; hasDangerous: boolean }) {
+ const { t } = useTranslation()
+
+ const [expandedProperties, setExpandedProperties] = useState(hasDangerous)
+
+ const toggleExpandedProperties = () => {
+ setExpandedProperties((state) => !state)
+ }
+
+ if (!flags.length) {
+ return null
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {t('position.addingHook.viewProperties')}
+
+
+
+
+
+ {expandedProperties && (
+
+ {flags.map(({ Icon, name, info, dangerous }) => (
+
+
+
+
+ {name}
+
+
+
+
+ {info}
+
+
+
+ ))}
+
+ )}
+
+ )
+}
+
+export function HookModal({
+ isOpen,
+ onClose,
+ onClearHook,
+ onContinue,
+ address,
+}: {
+ address: Address
+ isOpen: boolean
+ onClose: () => void
+ onClearHook: () => void
+ onContinue: () => void
+}) {
+ const { t } = useTranslation()
+ const [disclaimerChecked, setDisclaimerChecked] = useState(false)
+
+ const handleClearHook = () => {
+ onClearHook()
+ onClose()
+ }
+
+ const onDisclaimerChecked = () => {
+ setDisclaimerChecked((state) => !state)
+ }
+
+ const { flags, hasDangerous } = useMemo(() => {
+ if (!address) {
+ return {
+ flags: [],
+ hasDangerous: false,
+ }
+ }
+
+ let hasDangerous = false
+ const flagInfos: Record = {}
+ getFlagsFromContractAddress(address).forEach((flag) => {
+ const warning = getFlagWarning(flag, t)
+
+ if (warning?.dangerous) {
+ hasDangerous = true
+ }
+
+ if (warning?.name) {
+ flagInfos[warning.name] = warning
+ }
+ })
+
+ return {
+ flags: Object.values(flagInfos),
+ hasDangerous,
+ }
+ }, [address, t])
+
+ const canContinue = !hasDangerous || (hasDangerous && disclaimerChecked)
+ const handleContinue = () => {
+ if (canContinue) {
+ onContinue()
+ onClose()
+ }
+ }
+
+ if (!address) {
+ return null
+ }
+
+ // TODO(WEB-5289): match entrance/exit animations with the currency selector
+ return (
+
+
+
+
+
+
+ {hasDangerous ? (
+
+ ) : (
+
+ )}
+
+
+ {hasDangerous ? t('position.hook.warningHeader') : t('position.addingHook')}
+
+
+ {hasDangerous ? t('position.hook.warningInfo') : t('position.addingHook.disclaimer')}
+
+
+
+
+
+
+
+
+
+ {t('common.text.contract')}
+
+
+
+
+ {shortenAddress(address)}
+
+
+
+
+
+
+ {hasDangerous && (
+
+
+
+ {t('position.hook.disclaimer')}
+
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionAmountsTile.tsx b/apps/web/src/components/Liquidity/LiquidityPositionAmountsTile.tsx
index 6164863c8d5..fda7b7ac5d4 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionAmountsTile.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionAmountsTile.tsx
@@ -26,21 +26,21 @@ export function LiquidityPositionAmountsTile({
-
+
{currency0Amount.currency.symbol}
-
+
{formatCurrencyAmount({ value: currency0Amount })}
- {fiatValue0 && (
-
+ {fiatValue0?.greaterThan(0) && (
+
({formatCurrencyAmount({ value: fiatValue0, type: NumberType.FiatTokenPrice })})
)}
{totalFiatValue?.greaterThan(0) && fiatValue0 && (
-
+
{formatPercent(new Percent(fiatValue0.quotient, totalFiatValue.quotient).toFixed(6))}
)}
@@ -49,21 +49,21 @@ export function LiquidityPositionAmountsTile({
-
+
{currency1Amount.currency.symbol}
-
+
{formatCurrencyAmount({ value: currency1Amount })}
- {fiatValue1 && (
-
+ {fiatValue1?.greaterThan(0) && (
+
({formatCurrencyAmount({ value: fiatValue1, type: NumberType.FiatTokenPrice })})
)}
{totalFiatValue?.greaterThan(0) && fiatValue1 && (
-
+
{formatPercent(new Percent(fiatValue1.quotient, totalFiatValue.quotient).toFixed(6))}
)}
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionCard.tsx b/apps/web/src/components/Liquidity/LiquidityPositionCard.tsx
index c1aa79e4170..82aa08ac85f 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionCard.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionCard.tsx
@@ -1,4 +1,5 @@
// eslint-disable-next-line no-restricted-imports
+import { PositionStatus } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { LiquidityPositionFeeStats } from 'components/Liquidity/LiquidityPositionFeeStats'
import { LiquidityPositionInfo } from 'components/Liquidity/LiquidityPositionInfo'
import { useV3OrV4PositionDerivedInfo } from 'components/Liquidity/hooks'
@@ -20,7 +21,7 @@ export function LiquidityPositionCard({ liquidityPosition, ...rest }: { liquidit
fiatValue0 && fiatValue1
? formatCurrencyAmount({
value: fiatValue0.add(fiatValue1),
- type: NumberType.FiatTokenPrice,
+ type: NumberType.FiatStandard,
})
: undefined
const v2FormattedUsdValue =
@@ -32,7 +33,8 @@ export function LiquidityPositionCard({ liquidityPosition, ...rest }: { liquidit
fiatFeeValue0 && fiatFeeValue1
? formatCurrencyAmount({
value: fiatFeeValue0.add(fiatFeeValue1),
- type: NumberType.FiatTokenPrice,
+ type:
+ liquidityPosition.status === PositionStatus.CLOSED ? NumberType.FiatStandard : NumberType.FiatTokenPrice,
})
: undefined
@@ -59,6 +61,7 @@ export function LiquidityPositionCard({ liquidityPosition, ...rest }: { liquidit
feeTier={liquidityPosition.feeTier?.toString()}
tickLower={liquidityPosition.tickLower}
tickUpper={liquidityPosition.tickUpper}
+ version={liquidityPosition.version}
// TODO (WEB-4920): add total APR and fee APR
/>
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionFeeStats.tsx b/apps/web/src/components/Liquidity/LiquidityPositionFeeStats.tsx
index f8f719e0cd1..b2c5ada5c40 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionFeeStats.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionFeeStats.tsx
@@ -1,3 +1,5 @@
+// eslint-disable-next-line no-restricted-imports
+import { ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { useGetRangeDisplay } from 'components/Liquidity/hooks'
import { PriceOrdering } from 'components/PositionListItem'
import { MouseoverTooltip } from 'components/Tooltip'
@@ -17,11 +19,12 @@ interface LiquidityPositionFeeStatsProps {
tickLower?: string
tickUpper?: string
showReverseButton?: boolean
+ version: ProtocolVersion
}
const PrimaryText = styled(Text, {
color: '$neutral1',
- variant: 'body1',
+ variant: 'body2',
})
const SecondaryText = styled(Text, {
@@ -36,6 +39,7 @@ export function LiquidityPositionFeeStats({
tickLower,
tickUpper,
feeTier,
+ version,
showReverseButton = true,
}: LiquidityPositionFeeStatsProps) {
const { t } = useTranslation()
@@ -50,7 +54,7 @@ export function LiquidityPositionFeeStats({
})
return (
-
+
{formattedUsdValue ? (
{formattedUsdValue}
@@ -59,16 +63,16 @@ export function LiquidityPositionFeeStats({
-
)}
-
- {t('pool.position')}
-
-
-
- {formattedUsdFees || t('common.unavailable')}
-
- {t('common.fees')}
-
+ {t('pool.position')}
+ {version !== ProtocolVersion.V2 && (
+
+ {formattedUsdFees || t('common.unavailable')}
+
+ {t('common.fees')}
+
+
+ )}
{/* TODO: add APR once its been calculated. */}
{priceOrdering.priceLower && priceOrdering.priceUpper ? (
@@ -78,17 +82,17 @@ export function LiquidityPositionFeeStats({
-
+
{minPrice} {tokenASymbol} / {tokenBSymbol}
-
+
-
+
{maxPrice} {tokenASymbol} / {tokenBSymbol}
-
+
{showReverseButton && (
@@ -103,9 +107,7 @@ export function LiquidityPositionFeeStats({
) : (
-
- {t('common.fullRange')}
-
+ {t('common.fullRange')}
)}
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionInfo.test.tsx b/apps/web/src/components/Liquidity/LiquidityPositionInfo.test.tsx
index 8fd4a9b43dc..df08d21660f 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionInfo.test.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionInfo.test.tsx
@@ -10,6 +10,7 @@ jest.mock('components/Liquidity/utils')
describe('LiquidityPositionInfo', () => {
it('should render in range', () => {
const positionInfo: PositionInfo = {
+ chainId: TEST_TOKEN_1.chainId,
currency0Amount: toCurrencyAmount(TEST_TOKEN_1, 1),
currency1Amount: toCurrencyAmount(TEST_TOKEN_2, 1),
status: PositionStatus.IN_RANGE,
@@ -23,6 +24,7 @@ describe('LiquidityPositionInfo', () => {
it('should render out of range', () => {
const positionInfo: PositionInfo = {
+ chainId: TEST_TOKEN_1.chainId,
currency0Amount: toCurrencyAmount(TEST_TOKEN_1, 1),
currency1Amount: toCurrencyAmount(TEST_TOKEN_2, 1),
status: PositionStatus.OUT_OF_RANGE,
@@ -36,6 +38,7 @@ describe('LiquidityPositionInfo', () => {
it('should render closed', () => {
const positionInfo: PositionInfo = {
+ chainId: TEST_TOKEN_1.chainId,
currency0Amount: toCurrencyAmount(TEST_TOKEN_1, 1),
currency1Amount: toCurrencyAmount(TEST_TOKEN_2, 1),
status: PositionStatus.CLOSED,
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionInfo.tsx b/apps/web/src/components/Liquidity/LiquidityPositionInfo.tsx
index d3f16ed6417..0d9873a0902 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionInfo.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionInfo.tsx
@@ -1,11 +1,9 @@
-import { BadgeData, LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
+import { LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
import { LiquidityPositionStatusIndicator } from 'components/Liquidity/LiquidityPositionStatusIndicator'
import { PositionInfo } from 'components/Liquidity/types'
import { getProtocolVersionLabel } from 'components/Liquidity/utils'
import { DoubleCurrencyAndChainLogo } from 'components/Logo/DoubleLogo'
-import { ZERO_ADDRESS } from 'constants/misc'
import { Flex, Text } from 'ui/src'
-import { DocumentList } from 'ui/src/components/icons/DocumentList'
interface LiquidityPositionInfoProps {
positionInfo: PositionInfo
@@ -23,22 +21,11 @@ export function LiquidityPositionInfo({ positionInfo }: LiquidityPositionInfoPro
/>
-
+
{currency0Amount?.currency.symbol} / {currency1Amount?.currency.symbol}
- }
- : undefined,
- feeTier ? { label: `${Number(feeTier) / 10000}%` } : undefined,
- ].filter(Boolean) as BadgeData[]
- }
- />
+
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.test.tsx b/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.test.tsx
index 178b9c00a05..242b04981bd 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.test.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.test.tsx
@@ -1,22 +1,20 @@
import { LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
import { render } from 'test-utils/render'
-const testBadgeData = [{ label: 'test', copyable: true }, { label: 'test2' }]
-
describe('LiquidityPositionInfoBadges', () => {
it('should render with default size', () => {
- const { getByText } = render()
- expect(getByText('test')).toBeInTheDocument()
+ const { getByText } = render()
+ expect(getByText('2')).toBeInTheDocument()
})
it('should render with small size', () => {
- const { getByText } = render()
- expect(getByText('test')).toBeInTheDocument()
+ const { getByText } = render()
+ expect(getByText('2')).toBeInTheDocument()
})
it('should render with multiple badges', () => {
- const { getByText } = render()
- expect(getByText('test')).toBeInTheDocument()
- expect(getByText('test2')).toBeInTheDocument()
+ const { getByText } = render()
+ expect(getByText('2')).toBeInTheDocument()
+ expect(getByText('0.01%')).toBeInTheDocument()
})
})
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.tsx b/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.tsx
index 1f8258f977c..1b7fc734108 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.tsx
@@ -1,5 +1,11 @@
+import { FeeAmount } from '@uniswap/v3-sdk'
+import { isDynamicFeeTierAmount } from 'components/Liquidity/utils'
+import { ZERO_ADDRESS } from 'constants/misc'
+import { useMemo } from 'react'
import { CopyHelper } from 'theme/components'
import { styled, Text } from 'ui/src'
+import { DocumentList } from 'ui/src/components/icons/DocumentList'
+import { useTranslation } from 'uniswap/src/i18n/useTranslation'
import { isAddress, shortenAddress } from 'utilities/src/addresses'
export const PositionInfoBadge = styled(Text, {
@@ -42,19 +48,39 @@ function getPlacement(index: number, length: number): 'start' | 'middle' | 'end'
return length === 1 ? 'only' : index === 0 ? 'start' : index === length - 1 ? 'end' : 'middle'
}
-export interface BadgeData {
+interface BadgeData {
label: string
copyable?: boolean
icon?: JSX.Element
}
export function LiquidityPositionInfoBadges({
- badges,
+ versionLabel,
+ v4hook,
+ feeTier,
size = 'default',
}: {
- badges: BadgeData[]
+ versionLabel?: string
+ v4hook?: string
+ feeTier?: string | FeeAmount
size: 'small' | 'default'
}): JSX.Element {
+ const { t } = useTranslation()
+
+ const badges = useMemo(() => {
+ return [
+ versionLabel ? { label: versionLabel } : undefined,
+ v4hook && v4hook !== ZERO_ADDRESS
+ ? { label: v4hook, copyable: true, icon: }
+ : undefined,
+ feeTier
+ ? isDynamicFeeTierAmount(feeTier)
+ ? { label: t('common.dynamic') }
+ : { label: `${Number(feeTier) / 10000}%` }
+ : undefined,
+ ].filter(Boolean) as BadgeData[]
+ }, [versionLabel, v4hook, feeTier, t])
+
return (
<>
{badges.map(({ label, copyable, icon }, index) => {
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionPriceRangeTile.tsx b/apps/web/src/components/Liquidity/LiquidityPositionPriceRangeTile.tsx
index 0c76bfd7412..6a0f5cb9e72 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionPriceRangeTile.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionPriceRangeTile.tsx
@@ -1,7 +1,5 @@
// eslint-disable-next-line no-restricted-imports
-import { PositionStatus } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { Currency, Price } from '@uniswap/sdk-core'
-import { LiquidityPositionStatusIndicator } from 'components/Liquidity/LiquidityPositionStatusIndicator'
import { useGetRangeDisplay } from 'components/Liquidity/hooks'
import { PriceOrdering } from 'components/PositionListItem'
import { useMemo, useState } from 'react'
@@ -19,7 +17,6 @@ const InnerTile = styled(Flex, {
})
interface LiquidityPositionPriceRangeTileProps {
- status?: PositionStatus
priceOrdering: PriceOrdering
token0CurrentPrice: Price
token1CurrentPrice: Price
@@ -29,7 +26,6 @@ interface LiquidityPositionPriceRangeTileProps {
}
export function LiquidityPositionPriceRangeTile({
- status,
priceOrdering,
token0CurrentPrice,
token1CurrentPrice,
@@ -77,9 +73,9 @@ export function LiquidityPositionPriceRangeTile({
- {status && }
{
@@ -87,7 +83,7 @@ export function LiquidityPositionPriceRangeTile({
}}
/>
-
+
diff --git a/apps/web/src/components/Liquidity/LiquidityPositionStatusIndicator.tsx b/apps/web/src/components/Liquidity/LiquidityPositionStatusIndicator.tsx
index d132d262fd8..3b98d1762bf 100644
--- a/apps/web/src/components/Liquidity/LiquidityPositionStatusIndicator.tsx
+++ b/apps/web/src/components/Liquidity/LiquidityPositionStatusIndicator.tsx
@@ -26,8 +26,9 @@ export function LiquidityPositionStatusIndicator({ status }: { status: PositionS
if (!config) {
return null
}
+
return (
-
+
diff --git a/apps/web/src/components/Liquidity/constants.ts b/apps/web/src/components/Liquidity/constants.ts
new file mode 100644
index 00000000000..f810b86a374
--- /dev/null
+++ b/apps/web/src/components/Liquidity/constants.ts
@@ -0,0 +1,29 @@
+import { FeeAmount, TICK_SPACINGS } from '@uniswap/v3-sdk'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+
+interface FeeDataWithChain {
+ feeData: {
+ feeAmount: FeeAmount
+ tickSpacing: number
+ }
+ supportedChainIds?: UniverseChainId[]
+}
+
+export const defaultFeeTiers: Record = {
+ [FeeAmount.LOWEST]: { feeData: { feeAmount: FeeAmount.LOWEST, tickSpacing: TICK_SPACINGS[FeeAmount.LOWEST] } },
+ [FeeAmount.LOW_200]: {
+ feeData: { feeAmount: FeeAmount.LOW_200, tickSpacing: TICK_SPACINGS[FeeAmount.LOW_200] },
+ supportedChainIds: [UniverseChainId.Base],
+ },
+ [FeeAmount.LOW_300]: {
+ feeData: { feeAmount: FeeAmount.LOW_300, tickSpacing: TICK_SPACINGS[FeeAmount.LOW_300] },
+ supportedChainIds: [UniverseChainId.Base],
+ },
+ [FeeAmount.LOW_400]: {
+ feeData: { feeAmount: FeeAmount.LOW_400, tickSpacing: TICK_SPACINGS[FeeAmount.LOW_400] },
+ supportedChainIds: [UniverseChainId.Base],
+ },
+ [FeeAmount.LOW]: { feeData: { feeAmount: FeeAmount.LOW, tickSpacing: TICK_SPACINGS[FeeAmount.LOW] } },
+ [FeeAmount.MEDIUM]: { feeData: { feeAmount: FeeAmount.MEDIUM, tickSpacing: TICK_SPACINGS[FeeAmount.MEDIUM] } },
+ [FeeAmount.HIGH]: { feeData: { feeAmount: FeeAmount.HIGH, tickSpacing: TICK_SPACINGS[FeeAmount.HIGH] } },
+} as const
diff --git a/apps/web/src/components/Liquidity/hooks.ts b/apps/web/src/components/Liquidity/hooks.ts
index db2f6db3739..cb6e32a8b43 100644
--- a/apps/web/src/components/Liquidity/hooks.ts
+++ b/apps/web/src/components/Liquidity/hooks.ts
@@ -2,28 +2,27 @@ import { BigNumber } from '@ethersproject/bignumber'
// eslint-disable-next-line no-restricted-imports
import { ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { Currency, CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
-import { PositionInfo } from 'components/Liquidity/types'
-import { calculateInvertedValues, parseV3FeeTier } from 'components/Liquidity/utils'
+import { FeeTierData, PositionInfo } from 'components/Liquidity/types'
+import {
+ calculateInvertedValues,
+ getDefaultFeeTiersForChainWithDynamicFeeTier,
+ mergeFeeTiers,
+ parseV3FeeTier,
+} from 'components/Liquidity/utils'
import { PriceOrdering, getPriceOrderingFromPositionForUI } from 'components/PositionListItem'
import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
import JSBI from 'jsbi'
import { OptionalCurrency } from 'pages/Pool/Positions/create/types'
-import { getCurrencyAddressWithWrap, getSortedCurrenciesTuple } from 'pages/Pool/Positions/create/utils'
+import { getCurrencyAddressForTradingApi, getSortedCurrenciesTupleWithWrap } from 'pages/Pool/Positions/create/utils'
import { useMemo } from 'react'
+import { LiquidityModalInitialState } from 'state/application/reducer'
import { useAppSelector } from 'state/hooks'
import { Bound } from 'state/mint/v3/actions'
import { useGetPoolsByTokens } from 'uniswap/src/data/rest/getPools'
import { useUSDCPrice } from 'uniswap/src/features/transactions/swap/hooks/useUSDCPrice'
+import { useTranslation } from 'uniswap/src/i18n'
import { NumberType, useFormatter } from 'utils/formatNumbers'
-type FeeTierData = {
- id: string
- fee: number
- formattedFee: string
- totalLiquidityUsd: number
- percentage: Percent
-}
-
/**
* @returns map of fee tier (in hundredths of bips) to more data about the Pool
*
@@ -32,24 +31,27 @@ export function useAllFeeTierPoolData({
chainId,
protocolVersion,
currencies,
+ withDynamicFeeTier = false,
}: {
chainId?: number
protocolVersion: ProtocolVersion
currencies: [OptionalCurrency, OptionalCurrency]
-}): Record {
+ withDynamicFeeTier?: boolean
+}): { feeTierData: Record; hasExistingFeeTiers: boolean } {
+ const { t } = useTranslation()
const { formatPercent } = useFormatter()
- const sortedCurrencies = getSortedCurrenciesTuple(currencies[0], currencies[1])
- const token0Address = getCurrencyAddressWithWrap(sortedCurrencies[0], protocolVersion)
- const token1Address = getCurrencyAddressWithWrap(sortedCurrencies[1], protocolVersion)
+ const sortedCurrencies = getSortedCurrenciesTupleWithWrap(currencies[0], currencies[1], protocolVersion)
+
const { data: poolData } = useGetPoolsByTokens(
{
chainId,
protocolVersions: [protocolVersion],
- token0: token0Address,
- token1: token1Address,
+ token0: getCurrencyAddressForTradingApi(sortedCurrencies[0]),
+ token1: getCurrencyAddressForTradingApi(sortedCurrencies[1]),
},
Boolean(chainId && sortedCurrencies?.[0] && sortedCurrencies?.[1]),
)
+
return useMemo(() => {
const liquiditySum = poolData?.pools.reduce(
(sum, pool) => BigNumber.from(pool.totalLiquidityUsd.split('.')?.[0] ?? '0').add(sum),
@@ -70,16 +72,31 @@ export function useAllFeeTierPoolData({
} else {
feeTierData[feeTier] = {
id: pool.poolId,
- fee: pool.fee,
+ fee: {
+ feeAmount: pool.fee,
+ tickSpacing: pool.tickSpacing,
+ },
formattedFee: formatPercent(new Percent(pool.fee, 1000000)),
totalLiquidityUsd: totalLiquidityUsdTruncated,
percentage,
- }
+ created: true,
+ } satisfies FeeTierData
}
}
}
- return feeTierData
- }, [poolData, sortedCurrencies, formatPercent])
+
+ return {
+ feeTierData: mergeFeeTiers(
+ feeTierData,
+ Object.values(
+ getDefaultFeeTiersForChainWithDynamicFeeTier({ chainId, dynamicFeeTierEnabled: withDynamicFeeTier }),
+ ),
+ formatPercent,
+ t('fee.dynamic'),
+ ),
+ hasExistingFeeTiers: Object.values(feeTierData).length > 0,
+ }
+ }, [poolData, sortedCurrencies, chainId, withDynamicFeeTier, formatPercent, t])
}
/**
@@ -239,7 +256,7 @@ export function usePositionCurrentPrice(positionInfo?: PositionInfo) {
/**
* Parses the Positions API object from the modal state and returns the relevant information for the modals.
*/
-export function useModalLiquidityPositionInfo(): PositionInfo | undefined {
+export function useModalLiquidityInitialState(): LiquidityModalInitialState | undefined {
const modalState = useAppSelector((state) => state.application.openModal)
return modalState?.initialState
}
diff --git a/apps/web/src/components/Liquidity/types.ts b/apps/web/src/components/Liquidity/types.ts
index 4e21dd0311a..b68498e93c8 100644
--- a/apps/web/src/components/Liquidity/types.ts
+++ b/apps/web/src/components/Liquidity/types.ts
@@ -1,11 +1,13 @@
// eslint-disable-next-line no-restricted-imports
import { PositionStatus, ProtocolVersion } from '@uniswap/client-pools/dist/pools/v1/types_pb'
-import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
import { Pair } from '@uniswap/v2-sdk'
import { FeeAmount, Pool as V3Pool, Position as V3Position } from '@uniswap/v3-sdk'
import { Pool as V4Pool, Position as V4Position } from '@uniswap/v4-sdk'
+import { FeeData } from 'pages/Pool/Positions/create/types'
import { Dispatch, ReactNode, SetStateAction } from 'react'
import { PositionField } from 'types/position'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
export interface DepositState {
exactField: PositionField
@@ -31,6 +33,7 @@ interface BasePositionInfo {
version: ProtocolVersion
currency0Amount: CurrencyAmount
currency1Amount: CurrencyAmount
+ chainId: UniverseChainId
tokenId?: string
tickLower?: string
tickUpper?: string
@@ -55,6 +58,7 @@ export type V3PositionInfo = BasePositionInfo & {
version: ProtocolVersion.V3
tokenId: string
pool?: V3Pool
+ poolId?: string
feeTier?: FeeAmount
position?: V3Position
v4hook: undefined
@@ -64,9 +68,19 @@ type V4PositionInfo = BasePositionInfo & {
version: ProtocolVersion.V4
tokenId: string
pool?: V4Pool
+ poolId?: string
position?: V4Position
feeTier?: string
v4hook?: string
}
export type PositionInfo = V2PairInfo | V3PositionInfo | V4PositionInfo
+
+export type FeeTierData = {
+ id?: string
+ fee: FeeData
+ formattedFee: string
+ totalLiquidityUsd: number
+ percentage: Percent
+ created: boolean
+}
diff --git a/apps/web/src/components/Liquidity/utils.test.ts b/apps/web/src/components/Liquidity/utils.test.ts
new file mode 100644
index 00000000000..4c1f5817fc8
--- /dev/null
+++ b/apps/web/src/components/Liquidity/utils.test.ts
@@ -0,0 +1,66 @@
+import { HookFlag, getFlagsFromContractAddress } from 'components/Liquidity/utils'
+
+describe('getFlagsFromContractAddress', () => {
+ it('should return an empty array for an address with no flags', () => {
+ const address = '0x1234567890123456789012345678901234560000'
+ expect(getFlagsFromContractAddress(address)).toEqual([])
+ })
+
+ it('should correctly identify a single flag', () => {
+ const address = '0x1234567890123456789012345678901234560200'
+ expect(getFlagsFromContractAddress(address)).toEqual([HookFlag.BeforeRemoveLiquidity])
+ })
+
+ it('should correctly identify multiple flags', () => {
+ const address = '0x1234567890123456789012345678901234567FFF'
+ expect(getFlagsFromContractAddress(address)).toEqual([
+ HookFlag.BeforeRemoveLiquidity,
+ HookFlag.AfterRemoveLiquidity,
+ HookFlag.BeforeAddLiquidity,
+ HookFlag.AfterAddLiquidity,
+ HookFlag.BeforeSwap,
+ HookFlag.AfterSwap,
+ HookFlag.BeforeDonate,
+ HookFlag.AfterDonate,
+ HookFlag.BeforeSwapReturnsDelta,
+ HookFlag.AfterSwapReturnsDelta,
+ HookFlag.AfterAddLiquidityReturnsDelta,
+ HookFlag.AfterRemoveLiquidityReturnsDelta,
+ ])
+ })
+
+ it('should correctly identify a mix of flags (case 1)', () => {
+ const address = '0x123456789012345678901234567890123456789A'
+ expect(getFlagsFromContractAddress(address)).toEqual([
+ HookFlag.BeforeAddLiquidity,
+ HookFlag.BeforeSwap,
+ HookFlag.AfterDonate,
+ HookFlag.BeforeSwapReturnsDelta,
+ HookFlag.AfterAddLiquidityReturnsDelta,
+ ])
+ })
+
+ it('should correctly identify a mix of flags (case 2)', () => {
+ const address = '0x12345678901234567890123456789012345678C0'
+ expect(getFlagsFromContractAddress(address)).toEqual([
+ HookFlag.BeforeAddLiquidity,
+ HookFlag.BeforeSwap,
+ HookFlag.AfterSwap,
+ ])
+ })
+
+ it('should correctly identify a mix of flags (case 3)', () => {
+ const address = '0x123456789012345678901234567890123456780B'
+ expect(getFlagsFromContractAddress(address)).toEqual([
+ HookFlag.BeforeAddLiquidity,
+ HookFlag.BeforeSwapReturnsDelta,
+ HookFlag.AfterAddLiquidityReturnsDelta,
+ HookFlag.AfterRemoveLiquidityReturnsDelta,
+ ])
+ })
+
+ it('should correctly identify a mix of flags (case 4)', () => {
+ const address = '0x0000000000000000000000000000000000002400'
+ expect(getFlagsFromContractAddress(address)).toEqual([HookFlag.AfterAddLiquidity])
+ })
+})
diff --git a/apps/web/src/components/Liquidity/utils.tsx b/apps/web/src/components/Liquidity/utils.tsx
index c861704bc89..7544c9db494 100644
--- a/apps/web/src/components/Liquidity/utils.tsx
+++ b/apps/web/src/components/Liquidity/utils.tsx
@@ -9,15 +9,23 @@ import {
Position as RestPosition,
Token as RestToken,
} from '@uniswap/client-pools/dist/pools/v1/types_pb'
-import { Currency, CurrencyAmount, Price, Token } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Price, Token } from '@uniswap/sdk-core'
import { Pair } from '@uniswap/v2-sdk'
import { FeeAmount, Pool as V3Pool, Position as V3Position } from '@uniswap/v3-sdk'
import { Pool as V4Pool, Position as V4Position } from '@uniswap/v4-sdk'
-import { PositionInfo } from 'components/Liquidity/types'
+import { defaultFeeTiers } from 'components/Liquidity/constants'
+import { FeeTierData, PositionInfo } from 'components/Liquidity/types'
import { ZERO_ADDRESS } from 'constants/misc'
+import { DYNAMIC_FEE_DATA, DynamicFeeData, FeeData } from 'pages/Pool/Positions/create/types'
+import { GeneratedIcon } from 'ui/src'
+import { Flag } from 'ui/src/components/icons/Flag'
+import { Pools } from 'ui/src/components/icons/Pools'
+import { SwapCoin } from 'ui/src/components/icons/SwapCoin'
import { AppTFunction } from 'ui/src/i18n/types'
import { nativeOnChain } from 'uniswap/src/constants/tokens'
import { ProtocolItems } from 'uniswap/src/data/tradingApi/__generated__'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
export function getProtocolVersionLabel(version: ProtocolVersion): string | undefined {
switch (version) {
@@ -68,6 +76,16 @@ export function parseProtocolVersion(version: string | undefined): ProtocolVersi
}
}
+export function getPositionUrl(position: PositionInfo): string {
+ const chainInfo = getChainInfo(position.chainId)
+ if (position.version === ProtocolVersion.V2) {
+ return `/positions/v2/${chainInfo.urlParam}/${position.liquidityToken.address}`
+ } else if (position.version === ProtocolVersion.V3) {
+ return `/positions/v3/${chainInfo.urlParam}/${position.tokenId}`
+ }
+ return `/positions/v4/${chainInfo.urlParam}/${position.tokenId}`
+}
+
export function parseV3FeeTier(feeTier: string | undefined): FeeAmount | undefined {
const parsedFee = parseInt(feeTier || '')
@@ -223,6 +241,7 @@ export function parseRestPosition(position?: RestPosition): PositionInfo | undef
version: ProtocolVersion.V2,
pair,
liquidityToken,
+ chainId: token0.chainId,
currency0Amount: CurrencyAmount.fromRawAmount(token0, v2PairPosition.liquidity0),
currency1Amount: CurrencyAmount.fromRawAmount(token1, v2PairPosition.liquidity1),
totalSupply: CurrencyAmount.fromRawAmount(liquidityToken, v2PairPosition.totalSupply),
@@ -253,7 +272,9 @@ export function parseRestPosition(position?: RestPosition): PositionInfo | undef
status: position.status,
feeTier: parseV3FeeTier(v3Position.feeTier),
version: ProtocolVersion.V3,
+ chainId: token0.chainId,
pool,
+ poolId: position.position.value.poolId,
position: sdkPosition,
tickLower: v3Position.tickLower,
tickUpper: v3Position.tickUpper,
@@ -285,19 +306,22 @@ export function parseRestPosition(position?: RestPosition): PositionInfo | undef
tickUpper: Number(v4Position.tickUpper),
})
: undefined
+ const poolId = V4Pool.getPoolId(token0, token1, Number(v4Position.feeTier), Number(v4Position.tickSpacing), hook)
return {
status: position.status,
- feeTier: v4Position?.feeTier,
+ feeTier: v4Position.feeTier,
version: ProtocolVersion.V4,
position: sdkPosition,
+ chainId: token0.chainId,
pool,
+ poolId,
v4hook: hook,
tokenId: v4Position.tokenId,
- tickLower: v4Position?.tickLower,
- tickUpper: v4Position?.tickUpper,
- tickSpacing: Number(v4Position?.tickSpacing),
- currency0Amount: CurrencyAmount.fromRawAmount(token0, v4Position?.amount0 ?? 0),
- currency1Amount: CurrencyAmount.fromRawAmount(token1, v4Position?.amount1 ?? 0),
+ tickLower: v4Position.tickLower,
+ tickUpper: v4Position.tickUpper,
+ tickSpacing: Number(v4Position.tickSpacing),
+ currency0Amount: CurrencyAmount.fromRawAmount(token0, v4Position.amount0 ?? 0),
+ currency1Amount: CurrencyAmount.fromRawAmount(token1, v4Position.amount1 ?? 0),
token0UncollectedFees: v4Position.token0UncollectedFees,
token1UncollectedFees: v4Position.token1UncollectedFees,
liquidity: v4Position.liquidity,
@@ -352,3 +376,220 @@ export function calculateInvertedPrice({ price, invert }: { price?: Price (parseInt(relevantBits, 2) & bitPosition) !== 0)
+ .map(([flag]) => flag as HookFlag)
+
+ return activeFlags
+}
+
+export interface FlagWarning {
+ Icon: GeneratedIcon
+ name: string
+ info: string
+ dangerous: boolean
+}
+
+export function getFlagWarning(flag: HookFlag, t: AppTFunction): FlagWarning | undefined {
+ switch (flag) {
+ case HookFlag.BeforeSwap:
+ case HookFlag.BeforeSwapReturnsDelta:
+ return {
+ Icon: SwapCoin,
+ name: t('common.swap'),
+ info: t('position.hook.swapWarning'),
+ dangerous: false,
+ }
+ case HookFlag.BeforeAddLiquidity:
+ case HookFlag.AfterAddLiquidity:
+ return {
+ Icon: Pools,
+ name: t('common.addLiquidity'),
+ info: t('position.hook.liquidityWarning'),
+ dangerous: false,
+ }
+ case HookFlag.BeforeRemoveLiquidity:
+ case HookFlag.AfterRemoveLiquidity:
+ return {
+ Icon: Flag,
+ name: t('common.flag'),
+ info: t('position.hook.removeWarning'),
+ dangerous: true,
+ }
+ default:
+ return undefined
+ }
+}
+
+export function mergeFeeTiers(
+ feeTiers: Record,
+ feeData: FeeData[],
+ formatPercent: (percent: Percent | undefined) => string,
+ formattedDynamicFeeTier: string,
+): Record {
+ const result: Record = {}
+ for (const feeTier of feeData) {
+ result[feeTier.feeAmount] = {
+ fee: feeTier,
+ formattedFee: isDynamicFeeTier(feeTier)
+ ? formattedDynamicFeeTier
+ : formatPercent(new Percent(feeTier.feeAmount, 1000000)),
+ totalLiquidityUsd: 0,
+ percentage: new Percent(0, 100),
+ created: false,
+ } satisfies FeeTierData
+ }
+
+ return { ...result, ...feeTiers }
+}
+
+function getDefaultFeeTiersForChain(
+ chainId?: UniverseChainId,
+): Record {
+ const feeData = Object.values(defaultFeeTiers)
+ .filter((feeTier) => !feeTier.supportedChainIds || (chainId && feeTier.supportedChainIds.includes(chainId)))
+ .map((feeTier) => feeTier.feeData)
+
+ return feeData.reduce(
+ (acc, fee) => {
+ acc[fee.feeAmount] = fee
+ return acc
+ },
+ {} as Record,
+ )
+}
+
+export function getDefaultFeeTiersForChainWithDynamicFeeTier({
+ chainId,
+ dynamicFeeTierEnabled,
+}: {
+ chainId?: UniverseChainId
+ dynamicFeeTierEnabled: boolean
+}) {
+ if (!dynamicFeeTierEnabled) {
+ return getDefaultFeeTiersForChain(chainId)
+ }
+
+ return { ...getDefaultFeeTiersForChain(chainId), [DYNAMIC_FEE_DATA.feeAmount]: DYNAMIC_FEE_DATA }
+}
+
+export function getDefaultFeeTiersWithData({
+ chainId,
+ feeTierData,
+ t,
+}: {
+ chainId?: UniverseChainId
+ feeTierData: Record
+ t: AppTFunction
+}) {
+ const defaultFeeTiersForChain = getDefaultFeeTiersForChain(chainId)
+
+ const feeTiers = [
+ {
+ tier: FeeAmount.LOWEST,
+ value: defaultFeeTiersForChain[FeeAmount.LOWEST],
+ title: t(`fee.bestForVeryStable`),
+ selectionPercent: feeTierData[FeeAmount.LOWEST]?.percentage,
+ },
+ {
+ tier: FeeAmount.LOW_200,
+ value: defaultFeeTiersForChain[FeeAmount.LOW_200],
+ title: '',
+ selectionPercent: feeTierData[FeeAmount.LOW_200]?.percentage,
+ },
+ {
+ tier: FeeAmount.LOW_300,
+ value: defaultFeeTiersForChain[FeeAmount.LOW_300],
+ title: '',
+ selectionPercent: feeTierData[FeeAmount.LOW_300]?.percentage,
+ },
+ {
+ tier: FeeAmount.LOW_400,
+ value: defaultFeeTiersForChain[FeeAmount.LOW_400],
+ title: '',
+ selectionPercent: feeTierData[FeeAmount.LOW_400]?.percentage,
+ },
+ {
+ tier: FeeAmount.LOW,
+ value: defaultFeeTiersForChain[FeeAmount.LOW],
+ title: t(`fee.bestForStablePairs`),
+ selectionPercent: feeTierData[FeeAmount.LOW]?.percentage,
+ },
+ {
+ tier: FeeAmount.MEDIUM,
+ value: defaultFeeTiersForChain[FeeAmount.MEDIUM],
+ title: t(`fee.bestForMost`),
+ selectionPercent: feeTierData[FeeAmount.MEDIUM]?.percentage,
+ },
+ {
+ tier: FeeAmount.HIGH,
+ value: defaultFeeTiersForChain[FeeAmount.HIGH],
+ title: t(`fee.bestForExotic`),
+ selectionPercent: feeTierData[FeeAmount.HIGH]?.percentage,
+ },
+ ] as const
+
+ return feeTiers.filter((feeTier) => Object.keys(feeTierData).includes(feeTier.tier.toString()))
+}
+
+export function isDynamicFeeTier(feeData: FeeData): feeData is DynamicFeeData {
+ return feeData.feeAmount === DYNAMIC_FEE_DATA.feeAmount
+}
+
+export function isDynamicFeeTierAmount(
+ feeAmount: string | number | undefined,
+): feeAmount is DynamicFeeData['feeAmount'] {
+ if (!feeAmount) {
+ return false
+ }
+
+ const feeAmountNumber = Number(feeAmount)
+ if (isNaN(feeAmountNumber)) {
+ return false
+ }
+
+ return feeAmountNumber === DYNAMIC_FEE_DATA.feeAmount
+}
diff --git a/apps/web/src/components/LiquidityChartRangeInput/index.tsx b/apps/web/src/components/LiquidityChartRangeInput/index.tsx
index c767386cd05..1ac29ef9ce4 100644
--- a/apps/web/src/components/LiquidityChartRangeInput/index.tsx
+++ b/apps/web/src/components/LiquidityChartRangeInput/index.tsx
@@ -1,7 +1,6 @@
import { Currency, Price } from '@uniswap/sdk-core'
import { FeeAmount } from '@uniswap/v3-sdk'
import { AutoColumn, ColumnCenter } from 'components/deprecated/Column'
-import Loader from 'components/Icons/LoadingSpinner'
import { Chart } from 'components/LiquidityChartRangeInput/Chart'
import { useDensityChartData } from 'components/LiquidityChartRangeInput/hooks'
import { ZoomLevels } from 'components/LiquidityChartRangeInput/types'
@@ -13,6 +12,7 @@ import { BarChart2, CloudOff, Inbox } from 'react-feather'
import { batch } from 'react-redux'
import { Bound } from 'state/mint/v3/actions'
import { ThemedText } from 'theme/components'
+import { Flex, Shine } from 'ui/src'
import { Trans } from 'uniswap/src/i18n'
import { useFormatter } from 'utils/formatNumbers'
@@ -63,6 +63,22 @@ function InfoBox({ message, icon }: { message?: ReactNode; icon: ReactNode }) {
)
}
+function LoadingBar({ height }: { height: string }) {
+ return
+}
+
+function LoadingBars() {
+ return (
+
+
+ {[10, 20, 45, 70, 80, 55, 30, 15].map((h) => (
+
+ ))}
+
+
+ )
+}
+
export default function LiquidityChartRangeInput({
currencyA,
currencyB,
@@ -161,14 +177,14 @@ export default function LiquidityChartRangeInput({
[formatDelta, isSorted, price, ticksAtLimit],
)
- const isUninitialized = !currencyA || !currencyB || (formattedData === undefined && !isLoading)
+ const isUninitialized = !currencyA || !currencyB || (formattedData === undefined && !isLoading && !error)
return (
{isUninitialized ? (
} icon={} />
) : isLoading ? (
- } />
+
) : error ? (
}
diff --git a/apps/web/src/components/Logo/ChainLogo.tsx b/apps/web/src/components/Logo/ChainLogo.tsx
index 1b71c227bb6..e1b34be1cb1 100644
--- a/apps/web/src/components/Logo/ChainLogo.tsx
+++ b/apps/web/src/components/Logo/ChainLogo.tsx
@@ -1,4 +1,3 @@
-import { getChain, useIsSupportedChainId } from 'constants/chains'
import { CSSProperties } from 'react'
import { useIsDarkMode } from 'theme/components/ThemeToggle'
import {
@@ -16,7 +15,9 @@ import {
ZKSYNC_LOGO,
ZORA_LOGO,
} from 'ui/src/assets'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
type ChainUI = { symbol: string; bgColor: string; textColor: string }
@@ -162,7 +163,7 @@ export function ChainLogo({
if (!isSupportedChain) {
return null
}
- const { label } = getChain({ chainId })
+ const { label } = getChainInfo(chainId)
const { symbol } = getChainUI(chainId, darkMode)
const iconSize = fillContainer ? '100%' : size + 'px'
diff --git a/apps/web/src/components/Logo/DoubleLogo.tsx b/apps/web/src/components/Logo/DoubleLogo.tsx
index db542ebecf9..4353f8777e2 100644
--- a/apps/web/src/components/Logo/DoubleLogo.tsx
+++ b/apps/web/src/components/Logo/DoubleLogo.tsx
@@ -5,7 +5,7 @@ import { useCurrencyInfo } from 'hooks/Tokens'
import styled, { css } from 'lib/styled-components'
import { memo, useState } from 'react'
import { useColorSchemeFromSeed } from 'ui/src'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
const MissingImageLogo = styled.div<{ $size?: string; $textColor: string; $backgroundColor: string }>`
--size: ${({ $size }) => $size};
diff --git a/apps/web/src/components/Logo/QueryTokenLogo.tsx b/apps/web/src/components/Logo/QueryTokenLogo.tsx
index e244d129fb0..46c8879f65c 100644
--- a/apps/web/src/components/Logo/QueryTokenLogo.tsx
+++ b/apps/web/src/components/Logo/QueryTokenLogo.tsx
@@ -1,23 +1,22 @@
import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
import { AssetLogoBaseProps } from 'components/Logo/AssetLogo'
-import { getChainFromChainUrlParam } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
import { TokenQueryData } from 'graphql/data/Token'
-import { TopToken } from 'graphql/data/TopTokens'
+import { TopToken } from 'graphql/data/types'
import { gqlToCurrency } from 'graphql/data/util'
import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import { useMemo } from 'react'
import { TokenStat } from 'state/explore/types'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+import { getChainIdFromChainUrlParam } from 'utils/chainParams'
export default function QueryTokenLogo(
props: AssetLogoBaseProps & {
token?: TopToken | TokenQueryData | GqlSearchToken | TokenStat
},
) {
- const chain = getChainFromChainUrlParam(props.token?.chain.toLowerCase())
- const chainId = chain?.id ?? UniverseChainId.Mainnet
+ const chainId = getChainIdFromChainUrlParam(props.token?.chain.toLowerCase()) ?? UniverseChainId.Mainnet
const isNative = props.token?.address === NATIVE_CHAIN_ID
const isTokenStat = !!props.token && 'volume' in props.token
diff --git a/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.test.tsx b/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.test.tsx
index 6b293d814c9..acc6ce0632b 100644
--- a/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.test.tsx
+++ b/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.test.tsx
@@ -1,6 +1,6 @@
import ChainSelectorRow from 'components/NavBar/ChainSelector/ChainSelectorRow'
import { render } from 'test-utils/render'
-import { SUPPORTED_CHAIN_IDS, UniverseChainId } from 'uniswap/src/types/chains'
+import { SUPPORTED_CHAIN_IDS, UniverseChainId } from 'uniswap/src/features/chains/types'
describe('ChainSelectorRow', () => {
SUPPORTED_CHAIN_IDS.forEach((chainId) => {
diff --git a/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.tsx b/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.tsx
index da5c0021d11..fd8778a086d 100644
--- a/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.tsx
+++ b/apps/web/src/components/NavBar/ChainSelector/ChainSelectorRow.tsx
@@ -1,13 +1,14 @@
import Loader from 'components/Icons/LoadingSpinner'
import { ChainLogo } from 'components/Logo/ChainLogo'
-import { getChain, useSupportedChainId } from 'constants/chains'
import styled, { useTheme } from 'lib/styled-components'
import { Check } from 'react-feather'
import { useSwapAndLimitContext } from 'state/swap/useSwapContext'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { useSupportedChainId } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { SectionName } from 'uniswap/src/features/telemetry/constants'
import { Trans } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
const LOGO_SIZE = 20
@@ -63,10 +64,10 @@ interface ChainSelectorRowProps {
export default function ChainSelectorRow({ disabled, targetChain, onSelectChain, isPending }: ChainSelectorRowProps) {
const theme = useTheme()
const { chainId } = useSwapAndLimitContext()
- const supportedChain = useSupportedChainId(targetChain)
+ const supportedChainId = useSupportedChainId(targetChain)
const active = chainId === targetChain
- const chainInfo = getChain({ chainId: supportedChain })
+ const chainInfo = supportedChainId ? getChainInfo(supportedChainId) : undefined
const label = chainInfo?.label
return (
diff --git a/apps/web/src/components/NavBar/ChainSelector/__snapshots__/ChainSelectorRow.test.tsx.snap b/apps/web/src/components/NavBar/ChainSelector/__snapshots__/ChainSelectorRow.test.tsx.snap
index d6427200e1c..fbf6e7ea95b 100644
--- a/apps/web/src/components/NavBar/ChainSelector/__snapshots__/ChainSelectorRow.test.tsx.snap
+++ b/apps/web/src/components/NavBar/ChainSelector/__snapshots__/ChainSelectorRow.test.tsx.snap
@@ -498,6 +498,13 @@ exports[`ChainSelectorRow should match snapshot for chainId 480 1`] = `
}
.c1 {
+ grid-column: 2;
+ grid-row: 1;
+ font-size: 16px;
+ font-weight: 485;
+}
+
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -524,10 +531,23 @@ exports[`ChainSelectorRow should match snapshot for chainId 480 1`] = `
>
diff --git a/apps/web/src/components/NavBar/ChainSelector/index.tsx b/apps/web/src/components/NavBar/ChainSelector/index.tsx
index eb795ac6d92..56834943f29 100644
--- a/apps/web/src/components/NavBar/ChainSelector/index.tsx
+++ b/apps/web/src/components/NavBar/ChainSelector/index.tsx
@@ -1,4 +1,3 @@
-import { CHAIN_IDS_TO_NAMES, useIsSupportedChainIdCallback } from 'constants/chains'
import { useAccount } from 'hooks/useAccount'
import useSelectChain from 'hooks/useSelectChain'
import { useCallback, useRef } from 'react'
@@ -6,8 +5,9 @@ import { useSearchParams } from 'react-router-dom'
import { useSwapAndLimitContext } from 'state/swap/useSwapContext'
import { Flex, Popover } from 'ui/src'
import { NetworkFilter } from 'uniswap/src/components/network/NetworkFilter'
-import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
-import { UniverseChainId } from 'uniswap/src/types/chains'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { useEnabledChains, useIsSupportedChainIdCallback } from 'uniswap/src/features/chains/hooks'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
type ChainSelectorProps = {
hideArrow?: boolean
@@ -34,7 +34,7 @@ export const ChainSelector = ({ hideArrow }: ChainSelectorProps) => {
searchParams.delete('outputCurrency')
searchParams.delete('value')
searchParams.delete('field')
- targetChainId && searchParams.set('chain', CHAIN_IDS_TO_NAMES[targetChainId])
+ targetChainId && searchParams.set('chain', getChainInfo(targetChainId).interfaceName)
setSearchParams(searchParams)
popoverRef.current?.close()
diff --git a/apps/web/src/components/NavBar/PreferencesMenu/Preferences.tsx b/apps/web/src/components/NavBar/PreferencesMenu/Preferences.tsx
index 3d3d4597dca..4eae8e4d40e 100644
--- a/apps/web/src/components/NavBar/PreferencesMenu/Preferences.tsx
+++ b/apps/web/src/components/NavBar/PreferencesMenu/Preferences.tsx
@@ -1,12 +1,11 @@
import { PreferencesHeader } from 'components/NavBar/PreferencesMenu/Header'
import { PreferencesView } from 'components/NavBar/PreferencesMenu/shared'
-import { useActiveLocalCurrency } from 'hooks/useActiveLocalCurrency'
-import { useActiveLanguage } from 'hooks/useActiveLocale'
import styled, { useTheme } from 'lib/styled-components'
import { ChevronRight } from 'react-feather'
import { ThemeSelector } from 'theme/components/ThemeToggle'
import { Text } from 'ui/src'
-import { useLanguageInfo } from 'uniswap/src/features/language/hooks'
+import { useAppFiatCurrency } from 'uniswap/src/features/fiatCurrency/hooks'
+import { useCurrentLanguage, useLanguageInfo } from 'uniswap/src/features/language/hooks'
import { Trans, t } from 'uniswap/src/i18n'
const Pref = styled.div`
@@ -58,8 +57,8 @@ export function PreferenceSettings({
setSettingsView: (view: PreferencesView) => void
showHeader?: boolean
}) {
- const activeLocalCurrency = useActiveLocalCurrency()
- const activeLanguage = useActiveLanguage()
+ const activeLocalCurrency = useAppFiatCurrency()
+ const activeLanguage = useCurrentLanguage()
const languageInfo = useLanguageInfo(activeLanguage)
const items: SettingItem[] = [
diff --git a/apps/web/src/components/NavBar/SearchBar/RecentlySearchedAssets.ts b/apps/web/src/components/NavBar/SearchBar/RecentlySearchedAssets.ts
index 0990d8016f1..f7caf9eef69 100644
--- a/apps/web/src/components/NavBar/SearchBar/RecentlySearchedAssets.ts
+++ b/apps/web/src/components/NavBar/SearchBar/RecentlySearchedAssets.ts
@@ -1,16 +1,16 @@
-import { chainIdToBackendChain } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
import { GenieCollection } from 'nft/types'
import { useMemo } from 'react'
import { useSelector } from 'react-redux'
-import { MAX_RECENT_SEARCH_RESULTS } from 'uniswap/src/components/TokenSelector/hooks'
+import { MAX_RECENT_SEARCH_RESULTS } from 'uniswap/src/components/TokenSelector/constants'
import { nativeOnChain } from 'uniswap/src/constants/tokens'
import {
Chain,
NftCollection,
useRecentlySearchedAssetsQuery,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import { toGraphQLChain } from 'uniswap/src/features/chains/utils'
import {
SearchResult,
isNFTCollectionSearchResult,
@@ -18,7 +18,6 @@ import {
} from 'uniswap/src/features/search/SearchResult'
import { selectSearchHistory } from 'uniswap/src/features/search/selectSearchHistory'
import { isNativeCurrencyAddress } from 'uniswap/src/utils/currencyId'
-import { logger } from 'utilities/src/logger/logger'
export type InterfaceRemoteSearchHistoryItem = GqlSearchToken | GenieCollection
@@ -31,7 +30,7 @@ export function useRecentlySearchedAssets(): { data?: InterfaceRemoteSearchHisto
collectionAddresses: shortenedHistory.filter(isNFTCollectionSearchResult).map((asset) => asset.address),
contracts: shortenedHistory.filter(isTokenSearchResult).map((token) => ({
address: token.address ?? undefined,
- chain: chainIdToBackendChain({ chainId: token.chainId }),
+ chain: toGraphQLChain(token.chainId),
})),
},
skip: shortenedHistory.length === 0,
@@ -101,17 +100,7 @@ function generateInterfaceHistoryItem(
// Handle native assets
if (isNativeCurrencyAddress(asset.chainId, asset.address)) {
// Handles special case where wMATIC data needs to be used for MATIC
- const chain = chainIdToBackendChain({ chainId: asset.chainId })
- if (!chain) {
- logger.error(new Error('Invalid chain retrieved from Search Token/Collection Query'), {
- tags: {
- file: 'RecentlySearchedAssets',
- function: 'useRecentlySearchedAssets',
- },
- extra: { asset },
- })
- return undefined
- }
+ const chain = toGraphQLChain(asset.chainId)
const native = nativeOnChain(asset.chainId)
const queryAddress = asset.address ?? getNativeQueryAddress(chain)
const result = resultsMap[queryAddress]
diff --git a/apps/web/src/components/NavBar/SearchBar/SearchBarDropdown.tsx b/apps/web/src/components/NavBar/SearchBar/SearchBarDropdown.tsx
index a47d32eef28..69b51a03464 100644
--- a/apps/web/src/components/NavBar/SearchBar/SearchBarDropdown.tsx
+++ b/apps/web/src/components/NavBar/SearchBar/SearchBarDropdown.tsx
@@ -9,7 +9,6 @@ import { SkeletonRow, SuggestionRow } from 'components/NavBar/SearchBar/Suggesti
import QuestionHelper from 'components/QuestionHelper'
import { SuspendConditionally } from 'components/Suspense/SuspendConditionally'
import { SuspenseWithPreviousRenderAsFallback } from 'components/Suspense/SuspenseWithPreviousRenderAsFallback'
-import { BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS } from 'constants/chains'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
import useTrendingTokens from 'graphql/data/TrendingTokens'
import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
@@ -23,15 +22,16 @@ import { Clock, TrendingUp } from 'react-feather'
import { useLocation } from 'react-router-dom'
import { ThemedText } from 'theme/components'
import { Flex, Text, useScrollbarStyles } from 'ui/src'
-import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
import {
HistoryDuration,
SafetyLevel,
Token,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
+import { UniverseChainId } from 'uniswap/src/features/chains/types'
+import { isBackendSupportedChainId } from 'uniswap/src/features/chains/utils'
import { InterfaceSearchResultSelectionProperties } from 'uniswap/src/features/telemetry/types'
import { Trans } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
import { useTrace } from 'utilities/src/telemetry/trace/TraceContext'
interface SearchBarDropdownSectionProps {
@@ -122,8 +122,7 @@ interface SearchBarDropdownProps {
export function SearchBarDropdown(props: SearchBarDropdownProps) {
const { isLoading } = props
const account = useAccount()
- const showChainComingSoonBadge =
- account.chainId && BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS.includes(account.chainId) && !isLoading
+ const showChainComingSoonBadge = account.chainId && !isBackendSupportedChainId(account.chainId) && !isLoading
const scrollBarStyles = useScrollbarStyles()
return (
@@ -366,8 +365,6 @@ function SearchBarDropdownContents({
}
function ComingSoonText({ chainId }: { chainId: UniverseChainId }) {
- const chainName = UNIVERSE_CHAIN_INFO[chainId]?.name
- return BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS.includes(chainId) ? (
-
- ) : null
+ const chainName = getChainInfo(chainId).name
+ return !isBackendSupportedChainId(chainId) ? : null
}
diff --git a/apps/web/src/components/NavBar/SearchBar/SuggestionRow.tsx b/apps/web/src/components/NavBar/SearchBar/SuggestionRow.tsx
index c268316741c..198fc067c43 100644
--- a/apps/web/src/components/NavBar/SearchBar/SuggestionRow.tsx
+++ b/apps/web/src/components/NavBar/SearchBar/SuggestionRow.tsx
@@ -7,7 +7,8 @@ import Column from 'components/deprecated/Column'
import { useTokenWarning } from 'constants/deprecatedTokenSafety'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
-import { getTokenDetailsURL, supportedChainIdFromGQLChain } from 'graphql/data/util'
+import { gqlTokenToCurrencyInfo } from 'graphql/data/types'
+import { getTokenDetailsURL } from 'graphql/data/util'
import styled, { css } from 'lib/styled-components'
import { searchGenieCollectionToTokenSearchResult, searchTokenToTokenSearchResult } from 'lib/utils/searchBar'
import { GenieCollection } from 'nft/types'
@@ -17,12 +18,17 @@ import { Link, useNavigate } from 'react-router-dom'
import { EllipsisStyle, ThemedText } from 'theme/components'
import { Flex } from 'ui/src'
import { Verified } from 'ui/src/components/icons/Verified'
-import { TokenStandard } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import WarningIcon from 'uniswap/src/components/warnings/WarningIcon'
+import { Token, TokenStandard } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
+import { FeatureFlags } from 'uniswap/src/features/gating/flags'
+import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { addToSearchHistory } from 'uniswap/src/features/search/searchHistorySlice'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { InterfaceSearchResultSelectionProperties } from 'uniswap/src/features/telemetry/types'
+import { getTokenWarningSeverity } from 'uniswap/src/features/tokens/safetyUtils'
import { Trans, useTranslation } from 'uniswap/src/i18n'
-import { UniverseChainId } from 'uniswap/src/types/chains'
import { shortenAddress } from 'uniswap/src/utils/addresses'
import { NumberType, useFormatter } from 'utils/formatNumbers'
@@ -105,17 +111,23 @@ export function SuggestionRow({
const navigate = useNavigate()
const { formatFiatPrice, formatDelta, formatNumberOrString } = useFormatter()
const [brokenCollectionImage, setBrokenCollectionImage] = useState(false)
+ const { defaultChainId } = useEnabledChains()
+
+ const tokenProtectionEnabled = useFeatureFlag(FeatureFlags.TokenProtection)
const warning = useTokenWarning(
isToken ? suggestion.address : undefined,
- isToken ? supportedChainIdFromGQLChain(suggestion.chain) : UniverseChainId.Mainnet,
+ isToken ? fromGraphQLChain(suggestion.chain) ?? undefined : defaultChainId,
)
+ const tokenWarningSeverity = isToken
+ ? getTokenWarningSeverity(gqlTokenToCurrencyInfo(suggestion as Token)) // casting GqlSearchToken to Token
+ : undefined
const handleClick = useCallback(() => {
const address =
!suggestion.address && suggestion.standard === TokenStandard.Native ? NATIVE_CHAIN_ID : suggestion.address
if (isToken && address) {
- const chainId = supportedChainIdFromGQLChain(suggestion.chain)
+ const chainId = fromGraphQLChain(suggestion.chain)
if (chainId) {
const searchResult = searchTokenToTokenSearchResult({ ...suggestion, address, chainId })
dispatch(addToSearchHistory({ searchResult }))
@@ -180,9 +192,23 @@ export function SuggestionRow({
/>
)}
-
+
{suggestion.name}
- {isToken ? : suggestion.isVerified && }
+ {isToken ? (
+ tokenProtectionEnabled ? (
+
+ ) : (
+
+ )
+ ) : (
+ suggestion.isVerified &&
+ )}
diff --git a/apps/web/src/components/NavBar/Tabs/TabsContent.tsx b/apps/web/src/components/NavBar/Tabs/TabsContent.tsx
index 4f9979e68eb..680c403b417 100644
--- a/apps/web/src/components/NavBar/Tabs/TabsContent.tsx
+++ b/apps/web/src/components/NavBar/Tabs/TabsContent.tsx
@@ -25,7 +25,6 @@ export type TabsItem = MenuItem & {
export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSection[] => {
const { t } = useTranslation()
- const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
const isV4EverywhereEnabled = useFeatureFlag(FeatureFlags.V4Everywhere)
const { pathname } = useLocation()
const theme = useTheme()
@@ -77,7 +76,7 @@ export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSecti
{
label: t('common.transactions'),
quickKey: 'X',
- href: `/explore/transactions${isMultichainExploreEnabled ? '/ethereum' : ''}`,
+ href: '/explore/transactions/ethereum',
internal: true,
},
{ label: t('common.nfts'), quickKey: 'N', href: '/nfts', internal: true },
@@ -85,11 +84,11 @@ export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSecti
},
{
title: t('common.pool'),
- href: '/pool',
+ href: isV4EverywhereEnabled ? '/positions' : '/pool',
isActive: pathname.startsWith('/pool'),
items: [
{
- label: t('nav.tabs.viewPosition'),
+ label: t('nav.tabs.viewPositions'),
quickKey: 'V',
href: isV4EverywhereEnabled ? '/positions' : '/pool',
internal: true,
diff --git a/apps/web/src/components/NavBar/index.tsx b/apps/web/src/components/NavBar/index.tsx
index 7d3396bd814..6d5e28bc2ac 100644
--- a/apps/web/src/components/NavBar/index.tsx
+++ b/apps/web/src/components/NavBar/index.tsx
@@ -23,9 +23,7 @@ import { useProfilePageState } from 'nft/hooks'
import { ProfilePageStateType } from 'nft/types'
import { BREAKPOINTS } from 'theme'
import { Z_INDEX } from 'theme/zIndex'
-import { FeatureFlags } from 'uniswap/src/features/gating/flags'
-import { useFeatureFlagWithLoading } from 'uniswap/src/features/gating/hooks'
-import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
import { INTERFACE_NAV_HEIGHT } from 'uniswap/src/theme/heights'
const Nav = styled.nav`
@@ -78,20 +76,12 @@ function useShouldHideChainSelector() {
const isSwapPage = useIsSwapPage()
const isLimitPage = useIsLimitPage()
const isExplorePage = useIsExplorePage()
- const { value: multichainExploreFlagEnabled, isLoading: isMultichainExploreFlagLoading } = useFeatureFlagWithLoading(
- FeatureFlags.MultichainExplore,
- )
const baseHiddenPages = isNftPage
- const multichainHiddenPages = isLandingPage || isSendPage || isSwapPage || isLimitPage || baseHiddenPages
- const multichainExploreHiddenPages = multichainHiddenPages || isExplorePage
-
- const hideChainSelector =
- multichainExploreFlagEnabled || isMultichainExploreFlagLoading
- ? multichainExploreHiddenPages
- : multichainHiddenPages
+ const multichainHiddenPages =
+ isLandingPage || isSendPage || isSwapPage || isLimitPage || baseHiddenPages || isExplorePage
- return hideChainSelector
+ return multichainHiddenPages
}
export default function Navbar() {
diff --git a/apps/web/src/components/NumericalInput.tsx b/apps/web/src/components/NumericalInput.tsx
index f0465d80899..acb01720f67 100644
--- a/apps/web/src/components/NumericalInput.tsx
+++ b/apps/web/src/components/NumericalInput.tsx
@@ -2,8 +2,8 @@ import { loadingOpacityMixin } from 'components/Loader/styled'
import styled from 'lib/styled-components'
import React, { forwardRef } from 'react'
import { Locale } from 'uniswap/src/features/language/constants'
+import { useCurrentLocale } from 'uniswap/src/features/language/hooks'
import { escapeRegExp } from 'utils/escapeRegExp'
-import { useFormatterLocales } from 'utils/formatNumbers'
export const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; disabled?: boolean }>`
color: ${({ error, theme }) => (error ? theme.critical : theme.neutral1)};
@@ -68,7 +68,7 @@ export function isInputGreaterThanDecimals(value: string, maxDecimals?: number):
const Input = forwardRef(
({ value, onUserInput, placeholder, prependSymbol, maxDecimals, testId, ...rest }: InputProps, ref) => {
- const { formatterLocale } = useFormatterLocales()
+ const locale = useCurrentLocale()
const enforcer = (nextUserInput: string) => {
if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
@@ -81,7 +81,7 @@ const Input = forwardRef(
}
const formatValueWithLocale = (value: string | number) => {
- const [searchValue, replaceValue] = localeUsesComma(formatterLocale) ? [/\./g, ','] : [/,/g, '.']
+ const [searchValue, replaceValue] = localeUsesComma(locale) ? [/\./g, ','] : [/,/g, '.']
return value.toString().replace(searchValue, replaceValue)
}
diff --git a/apps/web/src/components/PercentInput.tsx b/apps/web/src/components/PercentInput.tsx
index 0fcb8716092..52bf95f47fc 100644
--- a/apps/web/src/components/PercentInput.tsx
+++ b/apps/web/src/components/PercentInput.tsx
@@ -3,13 +3,13 @@ import { NumericalInputFontStyle } from 'pages/Swap/common/shared'
import React, { forwardRef } from 'react'
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import styled from 'styled-components'
-import { useFormatterLocales } from 'utils/formatNumbers'
+import { useCurrentLocale } from 'uniswap/src/features/language/hooks'
const inputRegex = RegExp(`^\\d*(\\.\\d{0,2})?$`)
const PercentInput = forwardRef(
({ value, onUserInput, placeholder, testId, ...rest }: InputProps, ref) => {
- const { formatterLocale } = useFormatterLocales()
+ const locale = useCurrentLocale()
const enforcer = (nextUserInput: string) => {
const sanitizedInput = nextUserInput.replace(/,/g, '.') // Normalize the input
@@ -19,7 +19,7 @@ const PercentInput = forwardRef(
}
const formatValueWithLocale = (value: string | number) => {
- const [searchValue, replaceValue] = localeUsesComma(formatterLocale) ? [/\./g, ','] : [/,/g, '.']
+ const [searchValue, replaceValue] = localeUsesComma(locale) ? [/\./g, ','] : [/,/g, '.']
return value.toString().replace(searchValue, replaceValue)
}
diff --git a/apps/web/src/components/PoolProgressIndicator/PoolProgressIndicator.tsx b/apps/web/src/components/PoolProgressIndicator/PoolProgressIndicator.tsx
index 641d3b53b81..35fbc772f68 100644
--- a/apps/web/src/components/PoolProgressIndicator/PoolProgressIndicator.tsx
+++ b/apps/web/src/components/PoolProgressIndicator/PoolProgressIndicator.tsx
@@ -1,9 +1,13 @@
import { Fragment } from 'react'
+import { ClickableTamaguiStyle } from 'theme/components'
import { Flex, FlexProps, Text } from 'ui/src'
import { Trans } from 'uniswap/src/i18n'
import { assert } from 'utilities/src/errors'
-export function PoolProgressIndicator({ steps, ...rest }: { steps: { label: string; active: boolean }[] } & FlexProps) {
+export function PoolProgressIndicator({
+ steps,
+ ...rest
+}: { steps: { label: string; active: boolean; onPress?: () => void }[] } & FlexProps) {
assert(steps.length > 0, 'PoolProgressIndicator: steps must have at least one step')
return (
{steps.map((step, index) => (
-
+
theme.transition.duration.medium};
`
-const Badge = styled(ThemedText.LabelMicro)`
- background: ${({ theme }) => theme.surface2};
- padding: 2px 6px;
- border-radius: 4px;
-`
-
const IconBubble = styled(LoadingBubble)`
width: 32px;
height: 32px;
@@ -68,7 +64,8 @@ interface PoolDetailsBreadcrumbProps {
}
export function PoolDetailsBreadcrumb({ chainId, poolAddress, token0, token1, loading }: PoolDetailsBreadcrumbProps) {
- const chainName = chainIdToBackendChain({ chainId, withFallback: true })
+ const { defaultChainId } = useEnabledChains()
+ const chainName = toGraphQLChain(chainId ?? defaultChainId)
const exploreOrigin = `/explore/${chainName.toLowerCase()}`
const poolsOrigin = `/explore/pools/${chainName.toLowerCase()}`
@@ -122,6 +119,8 @@ const PoolDetailsTitle = ({
toggleReversed: React.DispatchWithoutAction
}) => {
const { formatPercent } = useFormatter()
+ const { defaultChainId } = useEnabledChains()
+ const graphQLChain = toGraphQLChain(chainId ?? defaultChainId)
const feePercent = feeTier && formatPercent(new Percent(feeTier, BIPS_BASE * 100))
return (
@@ -130,7 +129,7 @@ const PoolDetailsTitle = ({
{token0?.symbol}
@@ -139,15 +138,24 @@ const PoolDetailsTitle = ({
{token1?.symbol}
- {protocolVersion === ProtocolVersion.V2 &&