Highest liquidity correct assets order (#736)

* ordered subgraph did array before return

* updated aqua querry offset to fit multi network

* fixed typo and removed logs

* sort assets by oceanReserve

* added TVL label and rename Pool Creator Liquidity to Pool Creator Statistics

* remove obsolete comments

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

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);

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 && '≈ '}
       <strong dangerouslySetInnerHTML={{ __html: priceConverted }} />{' '}
       {!isFiat && currency}

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 (
     <div className={`${styles.tokenlist} ${highlight ? styles.highlight : ''}`}>
@@ -33,6 +35,7 @@ export default function TokenList({
             <Conversion
               price={`${conversion}`}
               className={styles.totalLiquidity}
+              showTVLLabel={showTVLLabel}
             />
           )}
         </div>

src/components/organisms/AssetActions/Pool/index.tsx

@@ -288,7 +288,7 @@ export default function Pool(): ReactElement {
           </TokenList>
 
           <TokenList
-            title="Pool Creator Liquidity"
+            title="Pool Creator Statistics"
             ocean={`${creatorLiquidity?.ocean}`}
             dt={`${creatorLiquidity?.datatoken}`}
             dtSymbol={dtSymbol}
@@ -318,6 +318,7 @@ export default function Pool(): ReactElement {
             dtSymbol={dtSymbol}
             poolShares={totalPoolTokens}
             conversion={totalLiquidityInOcean}
+            showTVLLabel
           >
             <Token symbol="% swap fee" balance={swapFee} noIcon />
           </TokenList>

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

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<string> {
   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<HighestLiquidityGraphAssets, any> =
+      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, ' ')