diff --git a/src/components/atoms/Price/Conversion.module.css b/src/components/atoms/Price/Conversion.module.css index e7df076f4..0d1849ae8 100644 --- a/src/components/atoms/Price/Conversion.module.css +++ b/src/components/atoms/Price/Conversion.module.css @@ -6,6 +6,9 @@ font-weight: var(--font-weight-base); } +.removeTvlPadding { + padding-left: 0 !important; +} /* fiat currency symbol */ .conversion strong span { font-weight: var(--font-weight-base); diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 558d9d073..7dfe22761 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -10,11 +10,13 @@ const cx = classNames.bind(styles) export default function Conversion({ price, className, - hideApproximateSymbol + hideApproximateSymbol, + showTVLLabel }: { price: string // expects price in OCEAN, not wei className?: string hideApproximateSymbol?: boolean + showTVLLabel?: boolean }): ReactElement { const { prices } = usePrices() const { currency, locale } = useUserPreferences() @@ -27,6 +29,7 @@ export default function Conversion({ const styleClasses = cx({ conversion: true, + removeTvlPadding: showTVLLabel, [className]: className }) @@ -61,6 +64,7 @@ export default function Conversion({ className={styleClasses} title="Approximation based on current OCEAN spot price on Coingecko" > + {showTVLLabel && 'TVL'} {!hideApproximateSymbol && '≈ '} {' '} {!isFiat && currency} diff --git a/src/components/organisms/AssetActions/Pool/TokenList.tsx b/src/components/organisms/AssetActions/Pool/TokenList.tsx index a04fcc790..50cafa339 100644 --- a/src/components/organisms/AssetActions/Pool/TokenList.tsx +++ b/src/components/organisms/AssetActions/Pool/TokenList.tsx @@ -11,7 +11,8 @@ export default function TokenList({ dtSymbol, poolShares, conversion, - highlight + highlight, + showTVLLabel }: { title: string | ReactNode children: ReactNode @@ -21,6 +22,7 @@ export default function TokenList({ poolShares: string conversion: number highlight?: boolean + showTVLLabel?: boolean }): ReactElement { return (
@@ -33,6 +35,7 @@ export default function TokenList({ )}
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index c06fbe4d4..a413beed8 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/src/components/organisms/AssetActions/Pool/index.tsx @@ -288,7 +288,7 @@ export default function Pool(): ReactElement { diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 401b1eae8..2b3019a62 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -24,11 +24,9 @@ async function getQueryHighest( chainIds: number[] ): Promise<[SearchQuery, string]> { const dids = await getHighestLiquidityDIDs(chainIds) - - // TODO: this query needs to adapt to chainIds const queryHighest = { page: 1, - offset: 9, + offset: dids.length, query: { query_string: { query: `(${dids}) AND (${transformChainIdsListToQuery( @@ -43,7 +41,6 @@ async function getQueryHighest( } function getQueryLatest(chainIds: number[]): SearchQuery { - // TODO: this query needs to adapt to chainIds return { page: 1, offset: 9, @@ -89,12 +86,9 @@ function SectionQueryResult({ try { setLoading(true) const result = await queryMetadata(query, source.token) - if (queryData && result.totalResults > 0 && result.totalResults <= 15) { + if (queryData && result.totalResults > 0) { const searchDIDs = queryData.split(' ') const sortedAssets = sortElements(result.results, searchDIDs) - // We take more assets than we need from the subgraph (to make sure - // all the 9 assets with highest liquidity we need are in OceanDB) - // so we need to get rid of the surplus const overflow = sortedAssets.length - 9 sortedAssets.splice(sortedAssets.length - overflow, overflow) result.results = sortedAssets diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts index 5c68dc685..dbafc0b34 100644 --- a/src/utils/subgraph.ts +++ b/src/utils/subgraph.ts @@ -16,6 +16,10 @@ import { AssetsFreePrice_dispensers as AssetFreePriceDispenser } from '../@types/apollo/AssetsFreePrice' import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder' +import { + HighestLiquidityAssets_pools as HighestLiquidityAssetsPools, + HighestLiquidityAssets as HighestLiquidityGraphAssets +} from '../@types/apollo/HighestLiquidityAssets' export interface PriceList { [key: string]: string @@ -122,16 +126,17 @@ const PreviousOrderQuery = gql` } ` const HighestLiquidityAssets = gql` - query HighestLiquidiyAssets { + query HighestLiquidityAssets { pools( where: { datatokenReserve_gte: 1 } - orderBy: valueLocked + orderBy: oceanReserve orderDirection: desc first: 15 ) { id datatokenAddress valueLocked + oceanReserve } } ` @@ -426,6 +431,7 @@ export async function getHighestLiquidityDIDs( chainIds: number[] ): Promise { const didList: string[] = [] + let highestLiquidiyAssets: HighestLiquidityAssetsPools[] = [] for (const chain of chainIds) { const queryContext: OperationContext = { url: `${getSubgrahUri( @@ -433,19 +439,21 @@ export async function getHighestLiquidityDIDs( )}/subgraphs/name/oceanprotocol/ocean-subgraph`, requestPolicy: 'network-only' } - const fetchedPools = await fetchData( - HighestLiquidityAssets, - null, - queryContext + const fetchedPools: OperationResult = + await fetchData(HighestLiquidityAssets, null, queryContext) + highestLiquidiyAssets = highestLiquidiyAssets.concat( + fetchedPools.data.pools ) - if (fetchedPools.data?.pools?.length === 0) return null - for (let i = 0; i < fetchedPools.data.pools.length; i++) { - if (!fetchedPools.data.pools[i].datatokenAddress) continue - const did = web3.utils - .toChecksumAddress(fetchedPools.data.pools[i].datatokenAddress) - .replace('0x', 'did:op:') - didList.push(did) - } + } + highestLiquidiyAssets + .sort((a, b) => a.oceanReserve - b.oceanReserve) + .reverse() + for (let i = 0; i < highestLiquidiyAssets.length; i++) { + if (!highestLiquidiyAssets[i].datatokenAddress) continue + const did = web3.utils + .toChecksumAddress(highestLiquidiyAssets[i].datatokenAddress) + .replace('0x', 'did:op:') + didList.push(did) } const searchDids = JSON.stringify(didList) .replace(/,/g, ' ')