bump ocean.js, support more networks (#701)

* bump ocean.js

* fix frontpage empty views

* package-lock fix

* hook dependencies are fun

* bump ocean.js

* network tweaks

* add more chains to user preferences

.env.example

@@ -1,5 +1,6 @@
 # Default network, possible values: 
-# "development", "ropsten", "rinkeby", "mainnet", "polygon", "moonbeamalpha"
+# "development", "ropsten", "rinkeby", "mainnet", "polygon", "moonbeamalpha", 
+# "gaiaxtestnet", "mumbai", "bsc"
 GATSBY_NETWORK="rinkeby"
 
 #GATSBY_INFURA_PROJECT_ID="xxx"

package.json

@@ -27,7 +27,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.15.1",
+    "@oceanprotocol/lib": "^0.16.1",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.4",
     "@sindresorhus/slugify": "^2.1.0",

src/components/molecules/UserPreferences/Chain.tsx

@@ -34,6 +34,12 @@ export default function Chain(): ReactElement {
       title: 'Polygon/Matic',
       text: 'Mainnet'
     },
+    {
+      name: 'bsc',
+      checked: isNetworkSelected('bsc'),
+      title: 'BSC',
+      text: 'Mainnet'
+    },
     {
       name: 'moonbeamalpha',
       checked: isNetworkSelected('moonbeamalpha'),

src/components/pages/Home.tsx

@@ -63,7 +63,7 @@ function SectionQueryResult({
           config.metadataCacheUri,
           source.token
         )
-        if (result.totalResults <= 15) {
+        if (queryData && result.totalResults > 0 && 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
@@ -73,7 +73,6 @@ function SectionQueryResult({
           sortedAssets.splice(sortedAssets.length - overflow, overflow)
           result.results = sortedAssets
         }
-        if (result.results.length === 0) return
         setResult(result)
         setLoading(false)
       } catch (error) {
@@ -120,7 +119,7 @@ export default function HomePage(): ReactElement {
       }
       setQueryAndDids([queryHighest, results])
     })
-  }, [config.subgraphUri, loading, web3Loading])
+  }, [config.subgraphUri, loading, web3Loading, web3Provider])
 
   return (
     <Permission eventType="browse">

src/utils/ocean.ts

@@ -3,23 +3,21 @@ import {
   Logger,
   Ocean,
   ConfigHelper,
-  ConfigHelperConfig,
-  ConfigHelperNetworkId,
-  ConfigHelperNetworkName
+  ConfigHelperConfig
 } from '@oceanprotocol/lib'
 import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
 
 import { UserBalance } from '../@types/TokenBalance'
 
-export function getOceanConfig(
-  network: ConfigHelperNetworkName | ConfigHelperNetworkId
-): ConfigHelperConfig {
+export function getOceanConfig(network: string | number): ConfigHelperConfig {
   return new ConfigHelper().getConfig(
     network,
-    network === 'polygon' ||
-      network === 137 ||
-      network === 'moonbeamalpha' ||
-      network === 1287
+    network === 'moonbeamalpha' ||
+      network === 1287 ||
+      network === 'bsc' ||
+      network === 56 ||
+      network === 'gaiaxtestnet' ||
+      network === 2021000
       ? undefined
       : process.env.GATSBY_INFURA_PROJECT_ID
   ) as ConfigHelperConfig

src/utils/web3.ts

@@ -32,6 +32,8 @@ export function getNetworkDisplayName(
 ): string {
   const displayName = data
     ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}`
+    : networkId === 2021000
+    ? 'GAIA-X'
     : networkId === 8996
     ? 'Development'
     : 'Unknown'