+
diff --git a/src/features/trident/pools/SearchResultPools.tsx b/src/features/trident/pools/SearchResultPools.tsx
index 436c5f175b..3a69630e5b 100644
--- a/src/features/trident/pools/SearchResultPools.tsx
+++ b/src/features/trident/pools/SearchResultPools.tsx
@@ -14,6 +14,7 @@ import React, { FC } from 'react'
// @ts-ignore TYPE NEEDS FIXING
import { useFilters, useFlexLayout, usePagination, useSortBy, useTable } from 'react-table'
+import { AllPoolType } from '../types'
import { SearchCategoryLabel } from './SearchCategoryLabel'
import { useInstantiateTableFeatures } from './useInstantiateTableFeatures'
import { DiscoverPoolsTableColumn, usePoolsTableData } from './usePoolsTableData'
@@ -88,30 +89,45 @@ const SearchResultPools: FC = () => {
prepareRow(row)
return (
-
asset.address),
- fee: row.original.swapFee,
- twap: row.original.twapEnabled,
- },
- }}
- key={i}
- passHref
- >
-
- {/*@ts-ignore TYPE NEEDS FIXING*/}
- {row.cells.map((cell, i) => {
- return (
- |
- {cell.render('Cell')}
- |
- )
- })}
-
-
+ <>
+
asset.address),
+ fee: row.original.swapFee,
+ twap: row.original.twapEnabled,
+ },
+ }
+ }
+ key={i}
+ passHref
+ >
+
+ {/*@ts-ignore TYPE NEEDS FIXING*/}
+ {row.cells.map((cell, i) => {
+ return (
+ |
+ {cell.render('Cell')}
+ |
+ )
+ })}
+
+
+
)
})}
diff --git a/src/features/trident/pools/SearchSidebar.tsx b/src/features/trident/pools/SearchSidebar.tsx
index 35028d9b28..fe8765cb0f 100644
--- a/src/features/trident/pools/SearchSidebar.tsx
+++ b/src/features/trident/pools/SearchSidebar.tsx
@@ -1,10 +1,18 @@
import { Fee } from '@sushiswap/trident-sdk'
import Checkbox from 'app/components/Checkbox'
import Typography from 'app/components/Typography'
-import { selectTridentPools, setPoolsFeeTiers, setPoolsTWAPOnly } from 'app/features/trident/pools/poolsSlice'
+import {
+ selectTridentPools,
+ setPoolsFeeTiers,
+ setPoolsPoolTypes,
+ setPoolsTWAPOnly,
+} from 'app/features/trident/pools/poolsSlice'
import { useAppDispatch, useAppSelector } from 'app/state/hooks'
import React, { FC } from 'react'
+import { POOL_TYPES } from '../constants'
+import { AllPoolType, UsedPoolType } from '../types'
+
const Section: FC<{ title: string }> = ({ children, title }) => {
return (
@@ -24,7 +32,7 @@ interface SelectionProps {
const Selection: FC
= ({ title, checked, setter }) => {
return (
-
+
{title}
@@ -39,6 +47,18 @@ export const removeOrAddFeeTier = (tier: Fee, currentSelection: Fee[], setter: (
}
}
+export const removeOrAddPoolType = (
+ type: AllPoolType,
+ currentSelection: AllPoolType[],
+ setter: (x: AllPoolType[]) => void
+) => {
+ if (currentSelection.includes(type)) {
+ setter(currentSelection.filter((t) => t !== type))
+ } else {
+ setter([...currentSelection, type])
+ }
+}
+
const FeeTiers: FC = () => {
const { feeTiers } = useAppSelector(selectTridentPools)
const dispatch = useAppDispatch()
@@ -59,12 +79,34 @@ const FeeTiers: FC = () => {
)
}
+const PoolTypes: FC = () => {
+ const { poolTypes } = useAppSelector(selectTridentPools)
+ const dispatch = useAppDispatch()
+
+ return (
+
+ {Object.values(UsedPoolType).map((poolType) => {
+ return (
+
+ removeOrAddPoolType(poolType, poolTypes, (poolTypes) => dispatch(setPoolsPoolTypes(poolTypes)))
+ }
+ />
+ )
+ })}
+
+ )
+}
+
export const SearchSidebar: FC = () => {
const { showTWAPOnly } = useAppSelector(selectTridentPools)
const dispatch = useAppDispatch()
return (
-
+
)
}
diff --git a/src/features/trident/pools/poolTableFilters.ts b/src/features/trident/pools/poolTableFilters.ts
index b3a69877db..c84947e9a4 100644
--- a/src/features/trident/pools/poolTableFilters.ts
+++ b/src/features/trident/pools/poolTableFilters.ts
@@ -1,6 +1,8 @@
import { Fee } from '@sushiswap/trident-sdk'
import { TridentPool } from 'app/services/graph/fetchers/pools'
+import { AllPoolType } from '../types'
+
type FilterSymbolsFunc
= (arg0: { original: TridentPool }[], arg1: string[], arg2: T) => any[]
export const filterForSearchQueryAndTWAP: FilterSymbolsFunc<{ searchQuery: string; twapEnabled: boolean }> = (
@@ -25,3 +27,8 @@ export const feeTiersFilter: FilterSymbolsFunc<{ feeTiersSelected: Fee[] }> = (r
rows.filter(
({ original }) => !filterValue.feeTiersSelected.length || filterValue.feeTiersSelected.includes(original.swapFee)
)
+
+export const poolTypesFilter: FilterSymbolsFunc<{ poolTypesSelected: AllPoolType[] }> = (rows, id, filterValue) =>
+ rows.filter(
+ ({ original }) => !filterValue.poolTypesSelected.length || filterValue.poolTypesSelected.includes(original.type)
+ )
diff --git a/src/features/trident/pools/poolsSlice.ts b/src/features/trident/pools/poolsSlice.ts
index fad2440c55..b3752ea59a 100644
--- a/src/features/trident/pools/poolsSlice.ts
+++ b/src/features/trident/pools/poolsSlice.ts
@@ -2,6 +2,8 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Fee } from '@sushiswap/trident-sdk'
import { AppState } from 'app/state'
+import { AllPoolType } from '../types'
+
export enum PoolSortOption {
TVL = 'TVL Highest to Lowest',
VOLUME = 'VOL Highest to Lowest',
@@ -12,6 +14,7 @@ export interface PoolsState {
searchQuery: string
farmsOnly: boolean
showTWAPOnly: boolean
+ poolTypes: AllPoolType[]
feeTiers: Fee[]
sort: PoolSortOption
}
@@ -20,6 +23,7 @@ const initialState: PoolsState = {
searchQuery: '',
farmsOnly: false,
showTWAPOnly: false,
+ poolTypes: [],
feeTiers: [],
sort: PoolSortOption.TVL,
}
@@ -37,6 +41,9 @@ export const poolsSlice = createSlice({
setPoolsTWAPOnly: (state, action: PayloadAction) => {
state.showTWAPOnly = action.payload
},
+ setPoolsPoolTypes: (state, action: PayloadAction) => {
+ state.poolTypes = action.payload
+ },
setPoolsFeeTiers: (state, action: PayloadAction) => {
state.feeTiers = action.payload
},
@@ -46,8 +53,14 @@ export const poolsSlice = createSlice({
},
})
-export const { setPoolsSearchQuery, setPoolsFarmsOnly, setPoolsTWAPOnly, setPoolsFeeTiers, setPoolsSort } =
- poolsSlice.actions
+export const {
+ setPoolsSearchQuery,
+ setPoolsFarmsOnly,
+ setPoolsTWAPOnly,
+ setPoolsPoolTypes,
+ setPoolsFeeTiers,
+ setPoolsSort,
+} = poolsSlice.actions
type selectTridentPools = (state: AppState) => PoolsState
export const selectTridentPools: selectTridentPools = (state: AppState) => state.tridentPools
diff --git a/src/features/trident/pools/useAllPools.ts b/src/features/trident/pools/useAllPools.ts
new file mode 100644
index 0000000000..be98406afc
--- /dev/null
+++ b/src/features/trident/pools/useAllPools.ts
@@ -0,0 +1,76 @@
+import { Token } from '@sushiswap/core-sdk'
+import { Fee } from '@sushiswap/trident-sdk'
+import { getApy } from 'app/functions'
+import { TridentPool, useOneWeekBlock, useSushiPairs } from 'app/services/graph'
+import { useGetAllTridentPools } from 'app/services/graph/hooks/pools'
+import { useMemo, useState } from 'react'
+
+import { AllPoolType } from '../types'
+
+export default function useAllPools({ chainId }: { chainId: number | undefined }) {
+ const [isDataChanged, setDataChanged] = useState(false)
+
+ const {
+ data: tridentPools,
+ error: tridentError,
+ isValidating: tridentIsValidating,
+ } = useGetAllTridentPools({ chainId })
+
+ const { data: block1w } = useOneWeekBlock({ chainId })
+
+ const {
+ data: legacyPools,
+ error: legacyError,
+ isValidating: legacyIsValidating,
+ } = useSushiPairs({ chainId, variables: { first: 1000, orderBy: 'reserveUSD' } })
+
+ const {
+ data: legacyPools1w,
+ error: legacyError1w,
+ isValidating: legacyIsValidating1w,
+ } = useSushiPairs({
+ chainId,
+ variables: { block: block1w, where: { id_in: legacyPools?.map((legacyPool: any) => legacyPool.id) } },
+ })
+
+ const data = useMemo(() => {
+ setDataChanged(true)
+ setTimeout(() => setDataChanged(false), 10)
+
+ return tridentPools && legacyPools
+ ? [
+ ...tridentPools,
+ ...(legacyPools as []).map(
+ (legacyPool: any) =>
+ ({
+ address: legacyPool.id,
+ type: AllPoolType.Legacy,
+ volumeUSD: Number(legacyPool.volumeUSD),
+ liquidityUSD: Number(legacyPool.reserveUSD),
+ transactionCount: Number(legacyPool.txCount),
+ apy: getApy({
+ volume:
+ legacyPool.volumeUSD -
+ legacyPools1w?.find((legacyPool1w: any) => legacyPool.id === legacyPool1w.id)?.volumeUSD ?? 0,
+ liquidity: legacyPool.reserveUSD,
+ days: 7,
+ }),
+ assets: [legacyPool.token0, legacyPool.token1].map(
+ (token: any) => new Token(chainId!, token.id, Number(token.decimals), token.symbol, token.name)
+ ),
+ swapFee: Fee.DEFAULT,
+ twapEnabled: true,
+ legacy: true,
+ } as TridentPool)
+ ),
+ ]
+ : []
+ }, [tridentPools, legacyPools, legacyPools1w, chainId])
+
+ return {
+ data,
+ isDataChanged,
+ error: tridentError || legacyError || legacyError1w,
+ isValidating: tridentIsValidating || legacyIsValidating || legacyIsValidating1w,
+ }
+}
diff --git a/src/features/trident/pools/useInstantiateTableFeatures.tsx b/src/features/trident/pools/useInstantiateTableFeatures.tsx
index 53be465314..4dc2a474cf 100644
--- a/src/features/trident/pools/useInstantiateTableFeatures.tsx
+++ b/src/features/trident/pools/useInstantiateTableFeatures.tsx
@@ -5,9 +5,15 @@ import { useAppSelector } from 'app/state/hooks'
import { useLayoutEffect, useMemo } from 'react'
const useInstantiateFilters = (setFilter: TableInstance['setFilter']) => {
- const { searchQuery, showTWAPOnly, feeTiers: feeTiersSelected } = useAppSelector(selectTridentPools)
+ const {
+ searchQuery,
+ showTWAPOnly,
+ feeTiers: feeTiersSelected,
+ poolTypes: poolTypesSelected,
+ } = useAppSelector(selectTridentPools)
useMemo(() => setFilter('assets', { searchQuery, twapEnabled: showTWAPOnly }), [searchQuery, setFilter, showTWAPOnly])
useMemo(() => setFilter('swapFee', { feeTiersSelected }), [feeTiersSelected, setFilter])
+ useMemo(() => setFilter('type', { poolTypesSelected }), [poolTypesSelected, setFilter])
}
// @ts-ignore TYPE NEEDS FIXING
diff --git a/src/features/trident/pools/usePoolsTableData.tsx b/src/features/trident/pools/usePoolsTableData.tsx
index 88ef0e43ca..c3d848e8cb 100644
--- a/src/features/trident/pools/usePoolsTableData.tsx
+++ b/src/features/trident/pools/usePoolsTableData.tsx
@@ -1,15 +1,16 @@
-import { PoolType } from '@sushiswap/trident-sdk'
import Chip from 'app/components/Chip'
+import Typography from 'app/components/Typography'
import { formatNumber, formatPercent } from 'app/functions/format'
-import { useOneDayBlock } from 'app/services/graph'
import { TridentPool } from 'app/services/graph/fetchers/pools'
-import { useGetAllTridentPools, usePoolKpi } from 'app/services/graph/hooks/pools'
+import { useRollingPoolStats } from 'app/services/graph/hooks/pools'
import { useActiveWeb3React } from 'app/services/web3'
import React, { ReactNode, useMemo } from 'react'
+import { UseFiltersOptions, UsePaginationOptions, UseSortByOptions, UseTableOptions } from 'react-table'
-import { chipPoolColorMapper, poolTypeNameMapper } from '../types'
+import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from '../types'
import { PoolCell } from './PoolCell'
-import { feeTiersFilter, filterForSearchQueryAndTWAP } from './poolTableFilters'
+import { feeTiersFilter, filterForSearchQueryAndTWAP, poolTypesFilter } from './poolTableFilters'
+import useAllPools from './useAllPools'
export interface DiscoverPoolsTableColumn {
Header: string
@@ -19,9 +20,15 @@ export interface DiscoverPoolsTableColumn {
maxWidth?: number
}
-export const usePoolsTableData = () => {
+type usePoolsTableData = () => {
+ config: UseTableOptions & UsePaginationOptions & UseFiltersOptions & UseSortByOptions
+ loading: boolean
+ error: any
+}
+
+export const usePoolsTableData: usePoolsTableData = () => {
const { chainId } = useActiveWeb3React()
- const { data, error, isValidating } = useGetAllTridentPools({ chainId })
+ const { data, error, isValidating, isDataChanged } = useAllPools({ chainId })
const columns: DiscoverPoolsTableColumn[] = useMemo(() => {
return [
@@ -38,13 +45,11 @@ export const usePoolsTableData = () => {
Header: 'Pool Type',
accessor: 'type',
maxWidth: 100,
- Cell: (props: { value: PoolType }) => (
+ Cell: (props: { value: AllPoolType }) => (
),
// @ts-ignore TYPE NEEDS FIXING
- filter: (rows, id, filterValue) =>
- // @ts-ignore TYPE NEEDS FIXING
- rows.filter((row) => !filterValue.length || filterValue.includes(row.values.type)),
+ filter: poolTypesFilter,
},
{
Header: 'Fee Tier',
@@ -74,30 +79,25 @@ export const usePoolsTableData = () => {
accessor: 'apy',
maxWidth: 100,
// @ts-ignore TYPE NEEDS FIXING
- Cell: (props) => {
- const { data: oneDayBlock } = useOneDayBlock({ chainId, shouldFetch: !!chainId })
- const { data: oneDayPoolKpi } = usePoolKpi({
+ Cell: ({ row, value }) => {
+ const { data: stats } = useRollingPoolStats({
chainId,
- variables: { block: oneDayBlock, id: data?.[props.row.id].address },
+ variables: {
+ where: {
+ id_in: data?.filter((el) => el.type !== AllPoolType.Legacy)?.map((el) => el.address.toLowerCase()),
+ },
+ },
+ shouldFetch: !!chainId && !!data,
})
- const percent = // @ts-ignore TYPE NEEDS FIXING
- (Math.max(
- 0,
- // @ts-ignore TYPE NEEDS FIXING
- oneDayPoolKpi
- ? // @ts-ignore TYPE NEEDS FIXING
- data?.[props.row.id]?.volumeUSD - oneDayPoolKpi?.volumeUSD
- : data?.[props.row.id]?.volumeUSD
- ) *
- // @ts-ignore TYPE NEEDS FIXING
- (data?.[props.row.id]?.swapFee / 10000) *
- 365 *
- 100) /
- // @ts-ignore TYPE NEEDS FIXING
- data?.[props.row.id]?.liquidityUSD
+ console.log(stats, stats?.[row.id]?.apy)
+ const apy = row.original.type === AllPoolType.Legacy ? value : stats?.[row.id]?.apy
- return {formatPercent(percent, 'NEW')}
+ return (
+
+ {formatPercent(apy)}
+
+ )
},
},
// {
@@ -117,20 +117,22 @@ export const usePoolsTableData = () => {
return useMemo(
() => ({
config: {
- columns: columns,
- data: data ?? [],
+ columns: columns as any,
+ data: data ? data : [],
initialState: {
pageSize: 15,
sortBy: [
- { id: 'liquidityUSD' as DiscoverPoolsTableColumn['accessor'], desc: true },
- { id: 'volumeUSD' as DiscoverPoolsTableColumn['accessor'], desc: true },
- ],
+ { id: 'liquidityUSD', desc: true },
+ { id: 'volumeUSD', desc: true },
+ ] as { id: DiscoverPoolsTableColumn['accessor']; desc: boolean }[],
},
autoResetFilters: false,
+ autoResetPage: !isDataChanged,
+ autoResetSortBy: false,
},
loading: isValidating,
error,
}),
- [columns, data, error, isValidating]
+ [columns, data, error, isDataChanged, isValidating]
)
}
diff --git a/src/features/trident/types.ts b/src/features/trident/types.ts
index 26c7ff28b5..38f6811082 100644
--- a/src/features/trident/types.ts
+++ b/src/features/trident/types.ts
@@ -6,18 +6,20 @@ import { StablePoolState } from 'app/hooks/useTridentStablePools'
// TODO add last two pool types
export type PoolUnion = ConstantProductPool | HybridPool
-export const poolTypeNameMapper: Record = {
+export const poolTypeNameMapper: Record = {
ConstantProduct: 'Classic',
ConcentratedLiquidity: 'Concentrated',
Hybrid: 'Stable',
Weighted: 'Index',
+ Legacy: 'Legacy',
}
-export const chipPoolColorMapper: Record = {
+export const chipPoolColorMapper: Record = {
ConstantProduct: 'purple',
ConcentratedLiquidity: 'green',
Hybrid: 'yellow',
Weighted: 'blue',
+ Legacy: 'purple',
}
export enum LiquidityMode {
@@ -55,3 +57,14 @@ export enum ActiveModal {
WITHDRAW = 'WITHDRAW',
DEPOSIT = 'DEPOSIT',
}
+
+enum LegacyPool {
+ Legacy = 'Legacy',
+}
+
+// Not a nice solution, but TS doesn't support extending enums yet...
+export const AllPoolType = { ...LegacyPool, ...PoolType }
+export type AllPoolType = typeof AllPoolType[keyof typeof AllPoolType]
+
+export const UsedPoolType = { ...LegacyPool, [PoolType['ConstantProduct']]: PoolType['ConstantProduct'] }
+export type UsedPoolType = typeof UsedPoolType[keyof typeof UsedPoolType]
diff --git a/src/services/graph/fetchers/pools.ts b/src/services/graph/fetchers/pools.ts
index c12e2226b7..aeb9e67a32 100644
--- a/src/services/graph/fetchers/pools.ts
+++ b/src/services/graph/fetchers/pools.ts
@@ -1,6 +1,7 @@
import { getAddress } from '@ethersproject/address'
import { ChainId, Token } from '@sushiswap/core-sdk'
import { Fee, PoolType } from '@sushiswap/trident-sdk'
+import { AllPoolType } from 'app/features/trident/types'
import { GRAPH_HOST, TRIDENT } from 'app/services/graph/constants'
import {
getTransactionsForPoolQuery,
@@ -39,7 +40,7 @@ const gqlPoolTypeMap: Record = {
export interface TridentPool {
address: string
- type: PoolType
+ type: AllPoolType
volumeUSD: number
liquidityUSD: number
transactionCount: number
diff --git a/src/services/graph/fetchers/positions.ts b/src/services/graph/fetchers/positions.ts
index ea7e5b07b2..7166b3caf3 100644
--- a/src/services/graph/fetchers/positions.ts
+++ b/src/services/graph/fetchers/positions.ts
@@ -1,5 +1,6 @@
import { ChainId, Token } from '@sushiswap/core-sdk'
import { PoolType } from '@sushiswap/trident-sdk'
+import { AllPoolType } from 'app/features/trident/types'
import { fetcher, TridentPoolData } from 'app/services/graph'
import { getTridentPositionsQuery } from 'app/services/graph/queries'
@@ -16,12 +17,11 @@ interface TridentPosition {
export interface TridentPositionRow {
id: string
assets: Token[]
- type: PoolType
+ type: AllPoolType
swapFeePercent: number
twapEnabled: boolean
value: number
apy: string
- legacy?: boolean
}
const formatPositions = (chainId: ChainId, { liquidityPositions }: TridentPositionQueryResult) => {
diff --git a/src/services/graph/hooks/pools.ts b/src/services/graph/hooks/pools.ts
index 4d4e667f78..d31ce53d80 100644
--- a/src/services/graph/hooks/pools.ts
+++ b/src/services/graph/hooks/pools.ts
@@ -134,8 +134,9 @@ export function useRollingPoolStats({ chainId, variables, shouldFetch = true, sw
isValidating: poolKpisIsValidating || oneDayPoolKpisIsValidating || twoDayPoolKpisIsValidating,
error: poolKpisError || oneDayPoolKpisError || twoDayPoolKpisError,
data: poolKpis?.map((poolKpi: any) => {
- const oneDayPoolKpi = oneDayPoolKpis?.find((oneDayPoolKpi: any) => oneDayPoolKpi.id === poolKpi.id)
- const twoDayPoolKpi = twoDayPoolKpis?.find((twoDayPoolKpi: any) => twoDayPoolKpi.id === poolKpi.id)
+ const oneDayPoolKpi = oneDayPoolKpis?.find((oneDayPoolKpi: any) => oneDayPoolKpi.id === poolKpi.id) ?? poolKpi
+ const twoDayPoolKpi =
+ twoDayPoolKpis?.find((twoDayPoolKpi: any) => twoDayPoolKpi.id === poolKpi.id) ?? oneDayPoolKpi
const volume = formatNumber(
oneDayPoolKpi?.volumeUSD ? poolKpi.volumeUSD - oneDayPoolKpi.volumeUSD : poolKpi.volumeUSD,