pull from origin main

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

@@ -54,7 +54,7 @@ export default function Compute({
   dtBalance: string
   file: FileMetadata
 }): ReactElement {
-  const { marketFeeAddress } = useSiteMetadata()
+  const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { ocean, account, config } = useOcean()
   const { price, type, ddo } = useAsset()
@@ -296,7 +296,7 @@ export default function Compute({
             ddo.id,
             computeService.index,
             computeAlgorithm,
-            marketFeeAddress,
+            appConfig.marketFeeAddress,
             undefined,
             false
           )
@@ -316,7 +316,7 @@ export default function Compute({
             serviceAlgo.type,
             accountId,
             serviceAlgo.index,
-            marketFeeAddress,
+            appConfig.marketFeeAddress,
             undefined,
             false
           )

src/components/organisms/AssetActions/Consume.tsx

@@ -44,7 +44,7 @@ export default function Consume({
 }): ReactElement {
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
-  const { marketFeeAddress } = useSiteMetadata()
+  const { appConfig } = useSiteMetadata()
   const [hasPreviousOrder, setHasPreviousOrder] = useState(false)
   const [previousOrderId, setPreviousOrderId] = useState<string>()
   const { isInPurgatory, price, type } = useAsset()
@@ -131,7 +131,7 @@ export default function Consume({
       ddo.id,
       ddo.dataToken,
       'access',
-      marketFeeAddress,
+      appConfig.marketFeeAddress,
       previousOrderId
     )
     setHasPreviousOrder(true)

src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx

@@ -90,7 +90,7 @@ export default function FormAdd({
     amountMax,
     coin,
     poolAddress,
-    ocean.pool,
+    ocean?.pool,
     setNewPoolTokens,
     setNewPoolShare
   ])

src/components/organisms/AssetActions/Trade/FormTrade.tsx

@@ -64,7 +64,7 @@ export default function FormTrade({
         .required('Required')
         .nullable(),
       datatoken: Yup.number()
-        .max(maxDt, `Must be less or equal than ${maximumDt}`)
+        .max(maximumDt, (param) => `Must be less or equal than ${param.max}`)
         .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
         .required('Required')
         .nullable(),

src/components/pages/Home.tsx

@@ -13,18 +13,10 @@ import Bookmarks from '../molecules/Bookmarks'
 import axios from 'axios'
 import { queryMetadata } from '../../utils/aquarius'
 import Permission from '../organisms/Permission'
-import { useWeb3 } from '../../providers/Web3'
+import { getHighestLiquidityDIDs } from '../../utils/subgraph'
+import { DDO, Logger } from '@oceanprotocol/lib'
 
-const queryHighest = {
-  page: 1,
-  offset: 9,
-  query: {
-    query_string: {
-      query: `(price.type:pool) -isInPurgatory:true`
-    }
-  },
-  sort: { 'price.ocean': -1 }
-}
+import { useWeb3 } from '../../providers/Web3'
 
 const queryLatest = {
   page: 1,
@@ -37,48 +29,99 @@ const queryLatest = {
   sort: { created: -1 }
 }
 
+function sortElements(items: DDO[], sorted: string[]) {
+  items.sort(function (a, b) {
+    return sorted.indexOf(a.dataToken) - sorted.indexOf(b.dataToken)
+  })
+  return items
+}
+
 function SectionQueryResult({
   title,
   query,
-  action
+  action,
+  queryData
 }: {
   title: ReactElement | string
   query: SearchQuery
   action?: ReactElement
+  queryData?: string
 }) {
   const { config } = useOcean()
   const [result, setResult] = useState<QueryResult>()
-  const { web3Loading } = useWeb3()
+  const [loading, setLoading] = useState<boolean>()
 
   useEffect(() => {
-    if (!config?.metadataCacheUri || web3Loading) return
+    if (!config?.metadataCacheUri) return
     const source = axios.CancelToken.source()
 
     async function init() {
-      const result = await queryMetadata(
-        query,
-        config.metadataCacheUri,
-        source.token
-      )
-      setResult(result)
+      try {
+        setLoading(true)
+        const result = await queryMetadata(
+          query,
+          config.metadataCacheUri,
+          source.token
+        )
+        if (result.totalResults <= 15) {
+          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
+        }
+        if (result.results.length === 0) return
+        setResult(result)
+        setLoading(false)
+      } catch (error) {
+        Logger.log(error.message)
+      }
     }
     init()
 
     return () => {
       source.cancel()
     }
-  }, [config?.metadataCacheUri, query, web3Loading])
+  }, [query, config?.metadataCacheUri])
 
   return (
     <section className={styles.section}>
       <h3>{title}</h3>
-      <AssetList assets={result?.results} showPagination={false} />
+      <AssetList
+        assets={result?.results}
+        showPagination={false}
+        isLoading={loading}
+      />
       {action && action}
     </section>
   )
 }
 
 export default function HomePage(): ReactElement {
+  const { config, loading } = useOcean()
+  const [queryAndDids, setQueryAndDids] = useState<[SearchQuery, string]>()
+  const { web3Loading, web3Provider } = useWeb3()
+
+  useEffect(() => {
+    if (loading || (web3Loading && web3Provider)) return
+    getHighestLiquidityDIDs().then((results) => {
+      const queryHighest = {
+        page: 1,
+        offset: 15,
+        query: {
+          query_string: {
+            query: `(${results}) AND -isInPurgatory:true AND price.isConsumable:true`,
+            fields: ['dataToken']
+          }
+        }
+      }
+      setQueryAndDids([queryHighest, results])
+    })
+  }, [config.subgraphUri, loading, web3Loading])
+
   return (
     <Permission eventType="browse">
       <>
@@ -91,18 +134,13 @@ export default function HomePage(): ReactElement {
           <Bookmarks />
         </section>
 
-        <SectionQueryResult
-          title="Highest Liquidity"
-          query={queryHighest}
-          action={
-            <Button
-              style="text"
-              to="/search?priceType=pool&sort=liquidity&sortOrder=desc"
-            >
-              Data sets and algorithms with pool →
-            </Button>
-          }
-        />
+        {queryAndDids && (
+          <SectionQueryResult
+            title="Highest Liquidity"
+            query={queryAndDids[0]}
+            queryData={queryAndDids[1]}
+          />
+        )}
 
         <SectionQueryResult
           title="Recently Published"

src/hooks/useSiteMetadata.ts

@@ -1,5 +1,35 @@
 import { useStaticQuery, graphql } from 'gatsby'
 
+interface UseSiteMetadata {
+  siteTitle: string
+  siteTagline: string
+  siteUrl: string
+  siteIcon: string
+  siteImage: { childImageSharp: { original: { src: string } } }
+  copyright: string
+  menu: {
+    name: string
+    link: string
+  }[]
+  warning: {
+    main: string
+    polygonPublish: string
+  }
+  announcement: {
+    main: string
+    polygon: string
+  }
+  appConfig: {
+    infuraProjectId: string
+    network: string
+    marketFeeAddress: string
+    currencies: string[]
+    portisId: string
+    allowFixedPricing: string
+    allowDynamicPricing: string
+  }
+}
+
 const query = graphql`
   query {
     site {
@@ -53,10 +83,10 @@ const query = graphql`
   }
 `
 
-export function useSiteMetadata() {
+export function useSiteMetadata(): UseSiteMetadata {
   const data = useStaticQuery(query)
 
-  const siteMeta = {
+  const siteMeta: UseSiteMetadata = {
     ...data.siteImage.edges[0].node.childContentJson.site,
     ...data.site.siteMetadata
   }

src/providers/Ocean.tsx

@@ -30,6 +30,7 @@ interface OceanProviderValue {
   config: ConfigHelperConfig
   account: Account
   balance: UserBalance
+  loading: boolean
   connect: (config?: Config) => Promise<void>
   refreshBalance: () => Promise<void>
 }
@@ -53,27 +54,29 @@ function OceanProvider({
   const [config, setConfig] = useState<ConfigHelperConfig | Config>(
     initialConfig
   )
+  const [loading, setLoading] = useState<boolean>()
 
   // -----------------------------------
   // Create Ocean instance
   // -----------------------------------
   const connect = useCallback(
     async (newConfig?: ConfigHelperConfig | Config) => {
+      setLoading(true)
       try {
         const usedConfig = newConfig || config
         Logger.log('[ocean] Connecting Ocean...', usedConfig)
-
         usedConfig.web3Provider = web3 || initialConfig.web3Provider
 
         if (newConfig) {
-          setConfig(usedConfig)
+          await setConfig(usedConfig)
         }
 
         if (usedConfig.web3Provider) {
           const newOcean = await Ocean.getInstance(usedConfig)
-          setOcean(newOcean)
+          await setOcean(newOcean)
           Logger.log('[ocean] Ocean instance created.', newOcean)
         }
+        setLoading(false)
       } catch (error) {
         Logger.error('[ocean] Error: ', error.message)
       }
@@ -136,7 +139,9 @@ function OceanProvider({
       }
 
       try {
+        setLoading(true)
         await connect(newConfig)
+        setLoading(false)
       } catch (error) {
         Logger.error('[ocean] Error: ', error.message)
       }
@@ -152,6 +157,7 @@ function OceanProvider({
           account,
           balance,
           config,
+          loading,
           connect,
           refreshBalance
         } as OceanProviderValue

src/utils/subgraph.ts

@@ -10,7 +10,7 @@ import {
   AssetsFrePrice_fixedRateExchanges as AssetsFrePriceFixedRateExchanges
 } from '../@types/apollo/AssetsFrePrice'
 import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder'
-import BigNumber from 'bignumber.js'
+import web3 from 'web3'
 
 export interface PriceList {
   [key: string]: string
@@ -86,6 +86,20 @@ const PreviousOrderQuery = gql`
     }
   }
 `
+const HighestLiquidityAssets = gql`
+  query HighestLiquidiyAssets {
+    pools(orderBy: valueLocked, orderDirection: desc, first: 15) {
+      id
+      consumePrice
+      spotPrice
+      tx
+      symbol
+      name
+      datatokenAddress
+      valueLocked
+    }
+  }
+`
 
 async function fetchData(
   query: DocumentNode,
@@ -298,3 +312,22 @@ export async function getAssetsBestPrices(
 
   return assetsWithPrice
 }
+
+export async function getHighestLiquidityDIDs(): Promise<string> {
+  const didList: string[] = []
+  const fetchedPools = await fetchData(HighestLiquidityAssets, null)
+  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)
+  }
+  const searchDids = JSON.stringify(didList)
+    .replace(/,/g, ' ')
+    .replace(/"/g, '')
+    .replace(/(\[|\])/g, '')
+    .replace(/(did:op:)/g, '0x')
+  return searchDids
+}