From 4c0b316bcafa72ccfd57a17c8e6030a49082ac76 Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 10:19:30 +0000 Subject: [PATCH 1/5] feat: legacy pools on trident pool page --- .../AssetBalances/liquidityPositions/hooks.ts | 7 +- .../useTridentLPTableConfig.tsx | 20 ++--- src/features/trident/constants.ts | 18 ++++- src/features/trident/create/createSlice.ts | 9 ++- src/features/trident/pools/MobileFilter.tsx | 47 ++++++++++-- .../trident/pools/SearchResultPools.tsx | 64 ++++++++++------ src/features/trident/pools/SearchSidebar.tsx | 49 +++++++++++- .../trident/pools/poolTableFilters.ts | 7 ++ src/features/trident/pools/poolsSlice.ts | 17 ++++- src/features/trident/pools/useAllPools.ts | 76 +++++++++++++++++++ .../pools/useInstantiateTableFeatures.tsx | 8 +- .../trident/pools/usePoolsTableData.tsx | 52 ++++++------- src/features/trident/types.ts | 17 ++++- src/services/graph/fetchers/pools.ts | 3 +- src/services/graph/fetchers/positions.ts | 4 +- src/services/graph/hooks/pools.ts | 5 +- 16 files changed, 306 insertions(+), 97 deletions(-) create mode 100644 src/features/trident/pools/useAllPools.ts diff --git a/src/features/account/AssetBalances/liquidityPositions/hooks.ts b/src/features/account/AssetBalances/liquidityPositions/hooks.ts index f7e83b69ea..88f79a3404 100644 --- a/src/features/account/AssetBalances/liquidityPositions/hooks.ts +++ b/src/features/account/AssetBalances/liquidityPositions/hooks.ts @@ -1,5 +1,5 @@ import { Token } from '@sushiswap/core-sdk' -import { PoolType } from '@sushiswap/trident-sdk' +import { AllPoolType } from 'app/features/trident/types' import { getApy } from 'app/functions' import { TridentPositionRow, @@ -52,19 +52,16 @@ export function useLegacyLiquidityPositionsBalances({ account, chainId }: Positi const pair = pairs.find((pair: any) => pair.id === position.pair.id) const pair1w = pairs1w?.find((pair: any) => pair.id === position.pair.id) ?? pair - console.log(pair.volumeUSD - pair1w.volumeUSD, pairs1w, pair.reserveUSD) - return { id: position.id, assets: [pair.token0, pair.token1].map( (token: any) => new Token(chainId!, token.id, Number(token.decimals), token.symbol, token.name) ), - type: PoolType.ConstantProduct, + type: AllPoolType.Legacy, swapFeePercent: 0.3, twapEnabled: true, value: (position.liquidityTokenBalance / pair.totalSupply) * pair.reserveUSD, apy: getApy(pair.volumeUSD - pair1w.volumeUSD, pair.reserveUSD), - legacy: true, } }) : undefined, diff --git a/src/features/portfolio/AssetBalances/liquidityPositions/useTridentLPTableConfig.tsx b/src/features/portfolio/AssetBalances/liquidityPositions/useTridentLPTableConfig.tsx index 4a845fb36e..a557eaf167 100644 --- a/src/features/portfolio/AssetBalances/liquidityPositions/useTridentLPTableConfig.tsx +++ b/src/features/portfolio/AssetBalances/liquidityPositions/useTridentLPTableConfig.tsx @@ -1,10 +1,9 @@ -import { PoolType } from '@sushiswap/trident-sdk' import Button from 'app/components/Button' import Chip from 'app/components/Chip' import Typography from 'app/components/Typography' import { PoolCell } from 'app/features/trident/pools/PoolCell' import { feeTiersFilter, filterForSearchQueryAndTWAP } from 'app/features/trident/pools/poolTableFilters' -import { chipPoolColorMapper, poolTypeNameMapper } from 'app/features/trident/types' +import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from 'app/features/trident/types' import { formatPercent } from 'app/functions' import { TridentPositionRow } from 'app/services/graph' import { useRollingPoolStats } from 'app/services/graph/hooks/pools' @@ -34,13 +33,8 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo accessor: 'type', maxWidth: 100, className: 'text-left hidden lg:flex', - Cell: (props: { value: PoolType; row: any }) => { - return ( - - ) + Cell: (props: { value: AllPoolType }) => { + return }, // @ts-ignore TYPE NEEDS FIXING filter: (rows, id, filterValue) => @@ -84,9 +78,11 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo shouldFetch: !!chainId && !!positions, }) + const apy = row.type === AllPoolType.Legacy ? value : stats?.[row.id]?.apy + return ( - {formatPercent(value ?? stats?.[row.id]?.apy)} + {formatPercent(apy)} ) }, @@ -99,8 +95,8 @@ export const useTridentLPTableConfig = ({ positions, chainId }: TridentLPTableCo className: 'text-right flex justify-end', cellClassName: 'justify-end', // @ts-ignore TYPE NEEDS FIXING - Cell: ({ row: { original } }) => { - if (original.legacy) { + Cell: ({ row: { original } }: { row: { original: TridentPositionRow } }) => { + if (original.type === AllPoolType.Legacy) { return ( ) => { state.currentStep = action.payload }, - setCreateSelectedPoolType: (state, action: PayloadAction) => { + setCreateSelectedPoolType: (state, action: PayloadAction) => { state.selectedPoolType = action.payload }, setCreateSelectedFeeTier: (state, action: PayloadAction) => { diff --git a/src/features/trident/pools/MobileFilter.tsx b/src/features/trident/pools/MobileFilter.tsx index 9a0ebacc93..d833946a5f 100644 --- a/src/features/trident/pools/MobileFilter.tsx +++ b/src/features/trident/pools/MobileFilter.tsx @@ -9,12 +9,15 @@ import { selectTridentPools, setPoolsFarmsOnly, setPoolsFeeTiers, + setPoolsPoolTypes, setPoolsTWAPOnly, } from 'app/features/trident/pools/poolsSlice' import { useAppDispatch, useAppSelector } from 'app/state/hooks' import { FC, useState } from 'react' -import { removeOrAddFeeTier } from './SearchSidebar' +import { POOL_TYPES } from '../constants' +import { UsedPoolType } from '../types' +import { removeOrAddFeeTier, removeOrAddPoolType } from './SearchSidebar' const YieldFarmFilter: FC = () => { const { farmsOnly } = useAppSelector(selectTridentPools) @@ -26,7 +29,7 @@ const YieldFarmFilter: FC = () => { Yield Farms: -
dispatch(setPoolsFarmsOnly(!farmsOnly))}> +
dispatch(setPoolsFarmsOnly(!farmsOnly))}> Show farms only
@@ -45,7 +48,7 @@ const TwapOnlyFilter: FC = () => { TWAP Oracles:
-
dispatch(setPoolsTWAPOnly(!showTWAPOnly))}> +
dispatch(setPoolsTWAPOnly(!showTWAPOnly))}> Show oracle pairs only
@@ -67,7 +70,7 @@ const FeeTierFilter: FC = () => { {[Fee.HIGH, Fee.DEFAULT, Fee.MEDIUM, Fee.LOW].map((fee) => (
removeOrAddFeeTier(fee, feeTiers, (feeTiers) => dispatch(setPoolsFeeTiers(feeTiers)))} > @@ -78,6 +81,33 @@ const FeeTierFilter: FC = () => { ) } +const PoolTypeFilter: FC = () => { + const { poolTypes } = useAppSelector(selectTridentPools) + const dispatch = useAppDispatch() + + return ( +
+
+ + By Pool Type: + +
+ {Object.values(UsedPoolType).map((poolType) => ( +
+ removeOrAddPoolType(poolType, poolTypes, (poolTypes) => dispatch(setPoolsPoolTypes(poolTypes))) + } + > + + {POOL_TYPES[poolType].label} +
+ ))} +
+ ) +} + export const MobileFilter: FC = () => { const { i18n } = useLingui() const [open, setOpen] = useState(false) @@ -104,14 +134,17 @@ export const MobileFilter: FC = () => { } > -
+
{/* To Be Built */} {/**/} -
+
-
+
+
+ +
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..e314d3c1b6 --- /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 } from 'react' + +import { AllPoolType } from '../types' + +export default function useAllPools({ chainId }: { chainId: number | undefined }) { + 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) } }, + }) + + return useMemo( + () => ({ + data: [ + ...(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( + legacyPool.volumeUSD - + legacyPools1w?.find((legacyPool1w: any) => legacyPool.id === legacyPool1w.id)?.volumeUSD ?? 0, + legacyPool.reserveUSD + ), + 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) + ), + ], + error: tridentError || legacyError || legacyError1w, + isValidating: tridentIsValidating || legacyIsValidating || legacyIsValidating1w, + }), + [ + tridentPools, + legacyPools, + tridentError, + legacyError, + legacyError1w, + tridentIsValidating, + legacyIsValidating, + legacyIsValidating1w, + legacyPools1w, + chainId, + ] + ) +} 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..23992fa3f6 100644 --- a/src/features/trident/pools/usePoolsTableData.tsx +++ b/src/features/trident/pools/usePoolsTableData.tsx @@ -1,15 +1,15 @@ -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 { 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 @@ -21,7 +21,7 @@ export interface DiscoverPoolsTableColumn { export const usePoolsTableData = () => { const { chainId } = useActiveWeb3React() - const { data, error, isValidating } = useGetAllTridentPools({ chainId }) + const { data, error, isValidating } = useAllPools({ chainId }) const columns: DiscoverPoolsTableColumn[] = useMemo(() => { return [ @@ -38,13 +38,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 +72,24 @@ 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 + const apy = row.original.type === AllPoolType.Legacy ? value : stats?.[row.id]?.apy - return {formatPercent(percent, 'NEW')} + return ( + + {formatPercent(apy)} + + ) }, }, // { 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, From ff3cddc25400fcbc08c9e0d668a34e8a2283086d Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 10:53:30 +0000 Subject: [PATCH 2/5] fix: getApy days --- .../AssetBalances/liquidityPositions/hooks.ts | 2 +- src/features/analytics/pools/PairList.tsx | 14 ++++---------- src/features/analytics/pools/useTableConfig.tsx | 2 +- src/features/trident/pools/useAllPools.ts | 12 +++++++----- src/functions/apy.ts | 10 ++++++++-- 5 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/features/account/AssetBalances/liquidityPositions/hooks.ts b/src/features/account/AssetBalances/liquidityPositions/hooks.ts index 88f79a3404..9c38a16561 100644 --- a/src/features/account/AssetBalances/liquidityPositions/hooks.ts +++ b/src/features/account/AssetBalances/liquidityPositions/hooks.ts @@ -61,7 +61,7 @@ export function useLegacyLiquidityPositionsBalances({ account, chainId }: Positi swapFeePercent: 0.3, twapEnabled: true, value: (position.liquidityTokenBalance / pair.totalSupply) * pair.reserveUSD, - apy: getApy(pair.volumeUSD - pair1w.volumeUSD, pair.reserveUSD), + apy: getApy({ volume: pair.volumeUSD - pair1w.volumeUSD, liquidity: pair.reserveUSD, days: 7 }), } }) : undefined, diff --git a/src/features/analytics/pools/PairList.tsx b/src/features/analytics/pools/PairList.tsx index 1daf83a883..3219f74d47 100644 --- a/src/features/analytics/pools/PairList.tsx +++ b/src/features/analytics/pools/PairList.tsx @@ -3,8 +3,7 @@ import { Token } from '@sushiswap/core-sdk' import DoubleCurrencyLogo from 'app/components/DoubleLogo' import Table from 'app/components/Table' import ColoredNumber from 'app/features/analytics/ColoredNumber' -import { formatNumber, formatNumberScale, formatPercent } from 'app/functions' -import { aprToApy } from 'app/functions/convert/apyApr' +import { formatNumber, formatNumberScale, formatPercent, getApy } from 'app/functions' import { useRouter } from 'next/router' import React from 'react' @@ -84,13 +83,6 @@ function PairListName({ pair }: PairListNameProps): JSX.Element { ) } -// @ts-ignore TYPE NEEDS FIXING -export const getApy = (volume, liquidity) => { - const apy = aprToApy((((volume / 7) * 365 * 0.0025) / liquidity) * 100, 3650) - if (apy > 1000) return '>10,000%' - return formatPercent(apy) -} - const allColumns = [ { Header: 'Pair', @@ -109,7 +101,9 @@ const allColumns = [ { Header: 'Annual APY', // @ts-ignore TYPE NEEDS FIXING - accessor: (row) =>
{getApy(row.volume1w, row.liquidity)}
, + accessor: (row) => ( +
{getApy({ volume: row.volume1w, liquidity: row.liquidity, days: 7 })}
+ ), align: 'right', // @ts-ignore TYPE NEEDS FIXING sortType: (a, b) => a.original.volume1w / a.original.liquidity - b.original.volume1w / b.original.liquidity, diff --git a/src/features/analytics/pools/useTableConfig.tsx b/src/features/analytics/pools/useTableConfig.tsx index e1c083e45f..619ae98f92 100644 --- a/src/features/analytics/pools/useTableConfig.tsx +++ b/src/features/analytics/pools/useTableConfig.tsx @@ -55,7 +55,7 @@ export const useTableConfig = (chainId: number) => { const tx2d = pair1d.txCount - pair2d.txCount const tx1dChange = (tx1d / tx2d) * 100 - 100 - const apy = getApy(volume1d, liquidity) + const apy = getApy({ volume: volume1d, liquidity, days: 1 }) return { pair: { diff --git a/src/features/trident/pools/useAllPools.ts b/src/features/trident/pools/useAllPools.ts index e314d3c1b6..26ea5fb73b 100644 --- a/src/features/trident/pools/useAllPools.ts +++ b/src/features/trident/pools/useAllPools.ts @@ -43,11 +43,13 @@ export default function useAllPools({ chainId }: { chainId: number | undefined } volumeUSD: Number(legacyPool.volumeUSD), liquidityUSD: Number(legacyPool.reserveUSD), transactionCount: Number(legacyPool.txCount), - apy: getApy( - legacyPool.volumeUSD - - legacyPools1w?.find((legacyPool1w: any) => legacyPool.id === legacyPool1w.id)?.volumeUSD ?? 0, - legacyPool.reserveUSD - ), + 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) ), diff --git a/src/functions/apy.ts b/src/functions/apy.ts index b6c967cb32..37ac17460e 100644 --- a/src/functions/apy.ts +++ b/src/functions/apy.ts @@ -1,8 +1,14 @@ import { aprToApy } from './convert' import { formatPercent } from './format' -export const getApy = (volume: number, liquidity: number) => { - const apy = aprToApy((((volume / 7) * 365 * 0.0025) / liquidity) * 100, 3650) +interface getApy { + volume: number + liquidity: number + days: number +} + +export const getApy = ({ volume, liquidity, days }: getApy) => { + const apy = aprToApy((((volume / days) * 365 * 0.0025) / liquidity) * 100, 3650) if (apy > 1000) return '>10,000%' return formatPercent(apy) } From cf1d63da79819e745eb8af454c35d70278c6103c Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 12:34:49 +0000 Subject: [PATCH 3/5] fix: don't reset on new data --- src/features/trident/pools/useAllPools.ts | 88 +++++++++---------- .../trident/pools/usePoolsTableData.tsx | 25 ++++-- 2 files changed, 60 insertions(+), 53 deletions(-) diff --git a/src/features/trident/pools/useAllPools.ts b/src/features/trident/pools/useAllPools.ts index 26ea5fb73b..be98406afc 100644 --- a/src/features/trident/pools/useAllPools.ts +++ b/src/features/trident/pools/useAllPools.ts @@ -3,11 +3,13 @@ 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 } from 'react' +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, @@ -31,48 +33,44 @@ export default function useAllPools({ chainId }: { chainId: number | undefined } variables: { block: block1w, where: { id_in: legacyPools?.map((legacyPool: any) => legacyPool.id) } }, }) - return useMemo( - () => ({ - data: [ - ...(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) - ), - ], - error: tridentError || legacyError || legacyError1w, - isValidating: tridentIsValidating || legacyIsValidating || legacyIsValidating1w, - }), - [ - tridentPools, - legacyPools, - tridentError, - legacyError, - legacyError1w, - tridentIsValidating, - legacyIsValidating, - legacyIsValidating1w, - legacyPools1w, - chainId, - ] - ) + 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/usePoolsTableData.tsx b/src/features/trident/pools/usePoolsTableData.tsx index 23992fa3f6..20ab58cb4f 100644 --- a/src/features/trident/pools/usePoolsTableData.tsx +++ b/src/features/trident/pools/usePoolsTableData.tsx @@ -5,6 +5,7 @@ import { TridentPool } from 'app/services/graph/fetchers/pools' import { useRollingPoolStats } from 'app/services/graph/hooks/pools' import { useActiveWeb3React } from 'app/services/web3' import React, { ReactNode, useMemo } from 'react' +import { UseFiltersOptions, UsePaginationOptions, UseTableOptions } from 'react-table' import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from '../types' import { PoolCell } from './PoolCell' @@ -19,9 +20,15 @@ export interface DiscoverPoolsTableColumn { maxWidth?: number } -export const usePoolsTableData = () => { +type usePoolsTableData = () => { + config: UseTableOptions & UsePaginationOptions & UseFiltersOptions + loading: boolean + error: any +} + +export const usePoolsTableData: usePoolsTableData = () => { const { chainId } = useActiveWeb3React() - const { data, error, isValidating } = useAllPools({ chainId }) + const { data, error, isValidating, isDataChanged } = useAllPools({ chainId }) const columns: DiscoverPoolsTableColumn[] = useMemo(() => { return [ @@ -109,20 +116,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 }[], }, + getRowId: (original) => original.address, autoResetFilters: false, + autoResetPage: !isDataChanged, }, loading: isValidating, error, }), - [columns, data, error, isValidating] + [columns, data, error, isDataChanged, isValidating] ) } From b767ce175cb581277e9e67850efbb42ecbf01bbd Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 13:03:10 +0000 Subject: [PATCH 4/5] fix: sort reset on data change --- src/features/trident/pools/usePoolsTableData.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/trident/pools/usePoolsTableData.tsx b/src/features/trident/pools/usePoolsTableData.tsx index 20ab58cb4f..196da1068e 100644 --- a/src/features/trident/pools/usePoolsTableData.tsx +++ b/src/features/trident/pools/usePoolsTableData.tsx @@ -5,7 +5,7 @@ import { TridentPool } from 'app/services/graph/fetchers/pools' import { useRollingPoolStats } from 'app/services/graph/hooks/pools' import { useActiveWeb3React } from 'app/services/web3' import React, { ReactNode, useMemo } from 'react' -import { UseFiltersOptions, UsePaginationOptions, UseTableOptions } from 'react-table' +import { UseFiltersOptions, UsePaginationOptions, UseSortByOptions, UseTableOptions } from 'react-table' import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from '../types' import { PoolCell } from './PoolCell' @@ -21,7 +21,7 @@ export interface DiscoverPoolsTableColumn { } type usePoolsTableData = () => { - config: UseTableOptions & UsePaginationOptions & UseFiltersOptions + config: UseTableOptions & UsePaginationOptions & UseFiltersOptions & UseSortByOptions loading: boolean error: any } @@ -128,6 +128,7 @@ export const usePoolsTableData: usePoolsTableData = () => { getRowId: (original) => original.address, autoResetFilters: false, autoResetPage: !isDataChanged, + autoResetSortBy: false, }, loading: isValidating, error, From 922c808d30a630d1f9316a6b6a46ce2fd2c95210 Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 13:07:27 +0000 Subject: [PATCH 5/5] fix: apy on pools table --- src/features/trident/pools/usePoolsTableData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/trident/pools/usePoolsTableData.tsx b/src/features/trident/pools/usePoolsTableData.tsx index 196da1068e..c3d848e8cb 100644 --- a/src/features/trident/pools/usePoolsTableData.tsx +++ b/src/features/trident/pools/usePoolsTableData.tsx @@ -90,6 +90,7 @@ export const usePoolsTableData: usePoolsTableData = () => { shouldFetch: !!chainId && !!data, }) + console.log(stats, stats?.[row.id]?.apy) const apy = row.original.type === AllPoolType.Legacy ? value : stats?.[row.id]?.apy return ( @@ -125,7 +126,6 @@ export const usePoolsTableData: usePoolsTableData = () => { { id: 'volumeUSD', desc: true }, ] as { id: DiscoverPoolsTableColumn['accessor']; desc: boolean }[], }, - getRowId: (original) => original.address, autoResetFilters: false, autoResetPage: !isDataChanged, autoResetSortBy: false,