diff --git a/apps/web/src/components/Pools/PoolTable/PoolTable.test.tsx b/apps/web/src/components/Pools/PoolTable/PoolTable.test.tsx
index 5e63dd478a8..1b4c34ad143 100644
--- a/apps/web/src/components/Pools/PoolTable/PoolTable.test.tsx
+++ b/apps/web/src/components/Pools/PoolTable/PoolTable.test.tsx
@@ -1,16 +1,15 @@
import 'test-utils/tokens/mocks'
-import { ApolloError } from '@apollo/client'
import { Percent } from '@uniswap/sdk-core'
import { TopPoolTable } from 'components/Pools/PoolTable/PoolTable'
-import { useTopPools } from 'graphql/data/pools/useTopPools'
import Router from 'react-router-dom'
+import { useTopPools } from 'state/explore/topPools'
import { mocked } from 'test-utils/mocked'
-import { validBEPoolToken0, validBEPoolToken1, validParams } from 'test-utils/pools/fixtures'
+import { validParams, validRestPoolToken0, validRestPoolToken1 } from 'test-utils/pools/fixtures'
import { render, screen } from 'test-utils/render'
import { ProtocolVersion } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-jest.mock('graphql/data/pools/useTopPools')
+jest.mock('state/explore/topPools')
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: jest.fn(),
@@ -23,9 +22,8 @@ describe('PoolTable', () => {
it('renders loading state', () => {
mocked(useTopPools).mockReturnValue({
- loading: true,
- errorV3: undefined,
- errorV2: undefined,
+ isLoading: true,
+ isError: false,
topPools: [],
})
@@ -36,9 +34,8 @@ describe('PoolTable', () => {
it('renders error state', () => {
mocked(useTopPools).mockReturnValue({
- loading: false,
- errorV3: new ApolloError({ errorMessage: 'error fetching data' }),
- errorV2: new ApolloError({ errorMessage: 'error fetching data' }),
+ isLoading: false,
+ isError: true,
topPools: [],
})
@@ -50,8 +47,10 @@ describe('PoolTable', () => {
it('renders data filled state', () => {
const mockData = [
{
- token0: validBEPoolToken0,
- token1: validBEPoolToken1,
+ id: '1',
+ chain: 'mainnet',
+ token0: validRestPoolToken0,
+ token1: validRestPoolToken1,
feeTier: 10000,
hash: '0x123',
txCount: 200,
@@ -65,9 +64,8 @@ describe('PoolTable', () => {
]
mocked(useTopPools).mockReturnValue({
topPools: mockData,
- loading: false,
- errorV3: undefined,
- errorV2: undefined,
+ isLoading: false,
+ isError: false,
})
const { asFragment } = render(
)
diff --git a/apps/web/src/components/Pools/PoolTable/PoolTable.tsx b/apps/web/src/components/Pools/PoolTable/PoolTable.tsx
index e71193e25f6..c16079098d2 100644
--- a/apps/web/src/components/Pools/PoolTable/PoolTable.tsx
+++ b/apps/web/src/components/Pools/PoolTable/PoolTable.tsx
@@ -12,16 +12,9 @@ import { EllipsisText } from 'components/Tokens/TokenTable'
import { MAX_WIDTH_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
import { exploreSearchStringAtom } from 'components/Tokens/state'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
-import { chainIdToBackendChain, useChainFromUrlParam } from 'constants/chains'
-import { useUpdateManualOutage } from 'featureFlags/flags/outageBanner'
-import { PoolSortFields, TablePool, useTopPools } from 'graphql/data/pools/useTopPools'
-import {
- OrderDirection,
- getSupportedGraphQlChain,
- gqlToCurrency,
- supportedChainIdFromGQLChain,
- unwrapToken,
-} from 'graphql/data/util'
+import { chainIdToBackendChain } from 'constants/chains'
+import { PoolSortFields, TablePool } from 'graphql/data/pools/useTopPools'
+import { OrderDirection, gqlToCurrency, supportedChainIdFromGQLChain, unwrapToken } from 'graphql/data/util'
import { useCurrencyInfo } from 'hooks/Tokens'
import useSimplePagination from 'hooks/useSimplePagination'
import { useAtom } from 'jotai'
@@ -33,8 +26,6 @@ import { PoolStat } from 'state/explore/types'
import { Flex, Text, styled } from 'ui/src'
import { BIPS_BASE } from 'uniswap/src/constants/misc'
import { Chain, ProtocolVersion, Token } 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 { Trans } from 'uniswap/src/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { NumberType, useFormatter } from 'utils/formatNumbers'
@@ -52,13 +43,23 @@ const TableWrapper = styled(Flex, {
maxWidth: MAX_WIDTH_MEDIA_BREAKPOINT,
})
-const Badge = styled(Text, {
+export const PoolDetailsBadge = styled(Text, {
py: 2,
px: 6,
backgroundColor: '$surface2',
- borderRadius: '$rounded6',
- variant: 'body4',
color: '$neutral2',
+ variants: {
+ $position: {
+ right: {
+ borderTopRightRadius: 4,
+ borderBottomRightRadius: 4,
+ },
+ left: {
+ borderTopLeftRadius: 4,
+ borderBottomLeftRadius: 4,
+ },
+ },
+ },
})
interface PoolTableValues {
@@ -93,24 +94,31 @@ function PoolDescription({
chainId: UniverseChainId
protocolVersion?: ProtocolVersion | string
}) {
- const isRestExploreEnabled = useFeatureFlag(FeatureFlags.RestExplore)
+ const isRestPool = token0 && !('id' in token0)
const currencies = [token0 ? gqlToCurrency(token0) : undefined, token1 ? gqlToCurrency(token1) : undefined]
- // skip is isRestExploreEnabled
const currencyLogos = [
- useCurrencyInfo(currencies?.[0], chainId, isRestExploreEnabled)?.logoUrl,
- useCurrencyInfo(currencies?.[1], chainId, isRestExploreEnabled)?.logoUrl,
+ useCurrencyInfo(currencies?.[0], chainId, isRestPool)?.logoUrl,
+ useCurrencyInfo(currencies?.[1], chainId, isRestPool)?.logoUrl,
]
- const images = isRestExploreEnabled
- ? [getRestTokenLogo(token0, currencyLogos[0]), getRestTokenLogo(token1, currencyLogos[1])]
- : undefined
+ const images = [getRestTokenLogo(token0, currencyLogos[0]), getRestTokenLogo(token1, currencyLogos[1])]
+
return (
{token0?.symbol}/{token1?.symbol}
- {protocolVersion === ProtocolVersion.V2 && {protocolVersion.toLowerCase()}}
- {feeTier && {feeTier / BIPS_BASE}%}
+
+
+ {protocolVersion.toLowerCase()}
+
+ {/* TODO(WEB-5364): add hook badge when data available, it should have a hover state and link out to the explorer */}
+ {feeTier && (
+
+ {feeTier / BIPS_BASE}%
+
+ )}
+
)
}
@@ -168,7 +176,6 @@ function PoolTableHeader({
}
export const TopPoolTable = memo(function TopPoolTable() {
- const chain = getSupportedGraphQlChain(useChainFromUrlParam(), { fallbackToEthereum: true })
const sortMethod = useAtomValue(sortMethodAtom)
const sortAscending = useAtomValue(sortAscendingAtom)
@@ -179,38 +186,22 @@ export const TopPoolTable = memo(function TopPoolTable() {
resetSortAscending()
}, [resetSortAscending, resetSortMethod])
- const {
- topPools: gqlTopPools,
- loading: gqlLoading,
- errorV3,
- errorV2,
- } = useTopPools(
- { sortBy: sortMethod, sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc },
- chain.id,
- )
- const combinedError =
- errorV2 && errorV3
- ? new ApolloError({ errorMessage: `Could not retrieve V2 and V3 Top Pools on chain: ${chain.id}` })
- : undefined
- const allDataStillLoading = gqlLoading && !gqlTopPools.length
- useUpdateManualOutage({ chainId: chain.id, errorV3, errorV2 })
-
- const {
- topPools: restTopPools,
- isLoading: restIsLoading,
- isError: restIsError,
- } = useRestTopPools({ sortBy: sortMethod, sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc })
+ const { topPools, isLoading, isError } = useRestTopPools({
+ sortBy: sortMethod,
+ sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc,
+ })
const { page, loadMore } = useSimplePagination()
- const isRestExploreEnabled = useFeatureFlag(FeatureFlags.RestExplore)
- const { topPools, loading, error } = isRestExploreEnabled
- ? { topPools: restTopPools?.slice(0, page * TABLE_PAGE_SIZE), loading: restIsLoading, error: restIsError }
- : { topPools: gqlTopPools, loading: allDataStillLoading, error: combinedError }
-
return (
-
+
)
})
diff --git a/apps/web/src/components/Pools/PoolTable/__snapshots__/PoolTable.test.tsx.snap b/apps/web/src/components/Pools/PoolTable/__snapshots__/PoolTable.test.tsx.snap
index 4bb1bc3b514..cd6098987b8 100644
--- a/apps/web/src/components/Pools/PoolTable/__snapshots__/PoolTable.test.tsx.snap
+++ b/apps/web/src/components/Pools/PoolTable/__snapshots__/PoolTable.test.tsx.snap
@@ -332,12 +332,22 @@ exports[`PoolTable renders data filled state 1`] = `
>
USDC/ETH
-
- 1%
-
+
+ v3
+
+
+ 1%
+
+