Provider multichain (#1879)

* prepare for provider multi chain

* use oceanjs pre-release version 2.7.0-next.0

* use oceanjs pre-release version 2.7.0-next.1

* fix isValid provider and isCompatible checks and use oceanjs pre-release version 2.7.0-next.2

* fix build

* fix compute to data environments setting

* fix build

* bump oceanjs lib to 2.7.0

package-lock.json

@@ -15,7 +15,7 @@
         "@coingecko/cryptoformat": "^0.5.4",
         "@loadable/component": "^5.15.2",
         "@oceanprotocol/art": "^3.2.0",
-        "@oceanprotocol/lib": "^2.6.1",
+        "@oceanprotocol/lib": "^2.7.0",
         "@oceanprotocol/typographies": "^0.1.0",
         "@oceanprotocol/use-dark-mode": "^2.4.3",
         "@tippyjs/react": "^4.2.6",
@@ -4731,9 +4731,9 @@
       "integrity": "sha512-I6xoADZpP/8EyN3VWZ+dLYv24DbJj3xzmSDcYv0FolXeAUF3FluzminL5AgQtAaoyUtlHl1D3ij1B++KupWcQQ=="
     },
     "node_modules/@oceanprotocol/lib": {
-      "version": "2.6.1",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-2.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-2.7.0.tgz",
-      "integrity": "sha512-KkebGwOis8pJTqHAI+mDNLyAvcOJ9RIIs5uqyjsc3PGFFheNHeKak2tMYKIIZQSc95pdr+6erJbo6ZCkEL67wQ==",
+      "integrity": "sha512-mSisB8mOVQLg6CJ4Fjp2oa6NAr/zc+yh/2x8fdjSzzZPN23WlmpPkluHeCIKN5rQDqDIGHXCntfyCaVp5hGMnw==",
       "dependencies": {
         "@oceanprotocol/contracts": "^1.1.8",
         "bignumber.js": "^9.1.0",
@@ -50601,9 +50601,9 @@
       "integrity": "sha512-I6xoADZpP/8EyN3VWZ+dLYv24DbJj3xzmSDcYv0FolXeAUF3FluzminL5AgQtAaoyUtlHl1D3ij1B++KupWcQQ=="
     },
     "@oceanprotocol/lib": {
-      "version": "2.6.1",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-2.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-2.7.0.tgz",
-      "integrity": "sha512-KkebGwOis8pJTqHAI+mDNLyAvcOJ9RIIs5uqyjsc3PGFFheNHeKak2tMYKIIZQSc95pdr+6erJbo6ZCkEL67wQ==",
+      "integrity": "sha512-mSisB8mOVQLg6CJ4Fjp2oa6NAr/zc+yh/2x8fdjSzzZPN23WlmpPkluHeCIKN5rQDqDIGHXCntfyCaVp5hGMnw==",
       "requires": {
         "@oceanprotocol/contracts": "^1.1.8",
         "bignumber.js": "^9.1.0",

package.json

@@ -14,6 +14,7 @@
     "jest": "jest -c .jest/jest.config.js",
     "jest:watch": "jest -c .jest/jest.config.js --watch",
     "lint": "eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx .",
+    "lint:fix": "eslint --ignore-path .gitignore --ext .ts,.tsx . --fix",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
@@ -28,7 +29,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^2.6.1",
+    "@oceanprotocol/lib": "^2.7.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@tippyjs/react": "^4.2.6",

src/@utils/compute.ts

@@ -143,8 +143,12 @@ export async function getComputeEnviroment(
     const computeEnvs = await ProviderInstance.getComputeEnvironments(
       asset.services[0].serviceEndpoint
     )
-    if (!computeEnvs[0]) return null
+    const computeEnv = Array.isArray(computeEnvs)
-    return computeEnvs[0]
+      ? computeEnvs[0]
+      : computeEnvs[asset.chainId][0]
+
+    if (!computeEnv) return null
+    return computeEnv
   } catch (e) {
     LoggerInstance.error('[compute] Fetch compute enviroment: ', e.message)
   }

src/@utils/nft.ts

@@ -104,6 +104,7 @@ export async function setNftMetadata(
 ): Promise<TransactionReceipt> {
   const encryptedDdo = await ProviderInstance.encrypt(
     asset,
+    asset.chainId,
     asset.services[0].serviceEndpoint,
     signal
   )
@@ -138,6 +139,7 @@ export async function setNFTMetadataAndTokenURI(
 ): Promise<TransactionReceipt> {
   const encryptedDdo = await ProviderInstance.encrypt(
     asset,
+    asset.chainId,
     asset.services[0].serviceEndpoint,
     signal
   )

src/@utils/order.ts

@@ -66,6 +66,7 @@ export async function order(
 
   const filesEncrypted = await getEncryptedFiles(
     asset.services[0].files,
+    asset.chainId,
     asset.services[0].serviceEndpoint
   )
 

src/@utils/provider.ts

@@ -13,24 +13,12 @@ import {
   ProviderInstance,
   UrlFile
 } from '@oceanprotocol/lib'
+import { chainIds } from 'app.config'
 import { QueryHeader } from '@shared/FormInput/InputElement/Headers'
 import Web3 from 'web3'
 import { AbiItem } from 'web3-utils/types'
 import { getValidUntilTime } from './compute'
 
-export async function getEncryptedFiles(
-  files: any,
-  providerUrl: string
-): Promise<string> {
-  try {
-    // https://github.com/oceanprotocol/provider/blob/v4main/API.md#encrypt-endpoint
-    const response = await ProviderInstance.encrypt(files, providerUrl)
-    return response
-  } catch (error) {
-    console.error('Error parsing json: ' + error.message)
-  }
-}
-
 export async function initializeProviderForCompute(
   dataset: AssetExtended,
   algorithm: AssetExtended,
@@ -55,11 +43,6 @@ export async function initializeProviderForCompute(
   )
 
   try {
-    const filesEncrypted = await getEncryptedFiles(
-      dataset.services[0].files,
-      dataset.services[0].serviceEndpoint
-    )
-
     return await ProviderInstance.initializeCompute(
       [computeAsset],
       computeAlgo,
@@ -74,6 +57,21 @@ export async function initializeProviderForCompute(
   }
 }
 
+// TODO: Why do we have these one line functions ?!?!?!
+export async function getEncryptedFiles(
+  files: any,
+  chainId: number,
+  providerUrl: string
+): Promise<string> {
+  try {
+    // https://github.com/oceanprotocol/provider/blob/v4main/API.md#encrypt-endpoint
+    const response = await ProviderInstance.encrypt(files, chainId, providerUrl)
+    return response
+  } catch (error) {
+    console.error('Error parsing json: ' + error.message)
+  }
+}
+
 export async function getFileDidInfo(
   did: string,
   serviceId: string,

src/components/@shared/FormInput/InputElement/Provider/index.tsx

@@ -40,10 +40,15 @@ export default function CustomProvider(props: InputProps): ReactElement {
       const providerResponse = await axios.get(field.value.url, {
         cancelToken: newCancelToken()
       })
-      const providerChainId = providerResponse?.data?.chainId
       const userChainId = chainId || 1
+      const providerChain =
+        providerResponse?.data?.chainId || providerResponse?.data?.chainIds
 
-      if (providerChainId !== userChainId)
+      const isCompatible =
+        providerChain === userChainId
+          ? true
+          : !!(providerChain.length > 0 && providerChain.includes(userChainId))
+      if (!isCompatible)
         throw Error(
           '✗ This provider is incompatible with the network your wallet is connected to.'
         )

src/components/@shared/FormInput/InputElement/index.module.css

@@ -47,7 +47,8 @@
   display: none;
 }
 
-.codemirror, .textarea {
+.codemirror,
+.textarea {
   composes: input;
   height: auto;
 }

src/components/Asset/Edit/EditMetadata.tsx

@@ -120,6 +120,7 @@ export default function Edit({
 
         const filesEncrypted = await getEncryptedFiles(
           file,
+          asset.chainId,
           asset.services[0].serviceEndpoint
         )
         updatedFiles = filesEncrypted

src/components/Publish/_utils.ts

@@ -148,7 +148,7 @@ export async function transformPublishFormToDdo(
     !isPreview &&
     files?.length &&
     files[0].valid &&
-    (await getEncryptedFiles(file, providerUrl.url))
+    (await getEncryptedFiles(file, chainId, providerUrl.url))
 
   const newService: Service = {
     id: getHash(datatokenAddress + filesEncrypted),

src/components/Publish/index.tsx

@@ -140,6 +140,7 @@ export default function PublishPage({
 
       const ddoEncrypted = await ProviderInstance.encrypt(
         ddo,
+        ddo.chainId,
         values.services[0].providerUrl.url,
         newAbortController()
       )

src/stylesGlobal/styles.css

@@ -131,7 +131,6 @@ ul li {
   color: var(--font-color-heading);
 }
 
-
 form,
 fieldset {
   border: 0;