various integrations

app.config.js

@@ -8,7 +8,7 @@ module.exports = {
   metadataCacheUri:
     process.env.NEXT_PUBLIC_METADATACACHE_URI ||
     'https://v4.aquarius.oceanprotocol.com',
-  calicaUri: 'https://calica.xyz/ocean/contracts',
+  calicaBaseUri: 'https://calica.xyz',
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
   chainIds: [1, 137, 56, 246, 1285],

src/@context/Asset.tsx

@@ -7,7 +7,12 @@ import React, {
   useCallback,
   ReactNode
 } from 'react'
-import { Config, LoggerInstance, Purgatory } from '@oceanprotocol/lib'
+import {
+  Config,
+  Datatoken,
+  LoggerInstance,
+  Purgatory
+} from '@oceanprotocol/lib'
 import { CancelToken } from 'axios'
 import { getAsset } from '@utils/aquarius'
 import { useWeb3 } from './Web3'
@@ -42,7 +47,7 @@ function AssetProvider({
 }): ReactElement {
   const { appConfig } = useMarketMetadata()
 
-  const { chainId, accountId } = useWeb3()
+  const { chainId, accountId, web3 } = useWeb3()
   const [isInPurgatory, setIsInPurgatory] = useState(false)
   const [purgatoryData, setPurgatoryData] = useState<Purgatory>()
   const [asset, setAsset] = useState<AssetExtended>()
@@ -115,6 +120,27 @@ function AssetProvider({
     },
     [did]
   )
+  // -----------------------------------
+  // Helper: Get and set asset payment collector
+  // -----------------------------------
+  useEffect(() => {
+    async function getInitialPaymentCollector() {
+      if (!asset?.datatokens || !asset.datatokens[0]?.address) return
+      try {
+        const datatoken = new Datatoken(web3)
+        const paymentCollector = await datatoken.getPaymentCollector(
+          asset.datatokens[0].address
+        )
+        setAsset((prevState) => ({
+          ...prevState,
+          paymentCollector
+        }))
+      } catch (error) {
+        LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error)
+      }
+    }
+    getInitialPaymentCollector()
+  }, [asset?.datatokens, web3])
 
   // -----------------------------------
   // Helper: Get and set asset access details

src/@types/AssetExtended.d.ts

@@ -6,5 +6,6 @@ declare global {
   interface AssetExtended extends Asset {
     accessDetails?: AccessDetails
     views?: number
+    paymentCollector?: string
   }
 }

src/components/Asset/AssetContent/MetaFull.tsx

@@ -1,29 +1,15 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement, useState } from 'react'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import Publisher from '@shared/Publisher'
 import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
-import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
 
-export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
+export default function MetaFull({
-  const [paymentCollector, setPaymentCollector] = useState<string>()
+  ddo
+}: {
+  ddo: AssetExtended
+}): ReactElement {
   const { isInPurgatory } = useAsset()
-  const { web3 } = useWeb3()
-
-  useEffect(() => {
-    async function getInitialPaymentCollector() {
-      try {
-        const datatoken = new Datatoken(web3)
-        setPaymentCollector(
-          await datatoken.getPaymentCollector(ddo.datatokens[0].address)
-        )
-      } catch (error) {
-        LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error)
-      }
-    }
-    getInitialPaymentCollector()
-  }, [ddo, web3])
 
   function DockerImage() {
     const containerInfo = ddo?.metadata?.algorithm?.container
@@ -40,10 +26,10 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
         title="Owner"
         content={<Publisher account={ddo?.nft?.owner} />}
       />
-      {paymentCollector && paymentCollector !== ddo?.nft?.owner && (
+      {ddo?.paymentCollector && ddo?.paymentCollector !== ddo?.nft?.owner && (
         <MetaItem
           title="Revenue Sent To"
-          content={<Publisher account={paymentCollector} />}
+          content={<Publisher account={ddo?.paymentCollector} />}
         />
       )}
 

src/components/Asset/OwnerActions/calicaUtils.tsx

@@ -0,0 +1,30 @@
+import axios, { AxiosResponse, CancelToken } from 'axios'
+import { calicaBaseUri } from '../../../../app.config'
+function getCalicaChainName(chainId: number): string {
+  switch (chainId) {
+    case 5:
+      return 'goerli'
+    case 80001:
+      return 'maticmum'
+    case 137:
+      return 'matic'
+
+    default:
+      return ''
+  }
+}
+
+export async function checkCalicaContractAddress(
+  address: string,
+  chainId: number,
+  cancelToken?: CancelToken
+): Promise<boolean> {
+  const chainName = getCalicaChainName(chainId)
+  const serviceUrl = `${calicaBaseUri}/api/contract?address=${address}&chain=${chainName}`
+
+  const response: AxiosResponse<any> = await axios.get(serviceUrl, {
+    cancelToken
+  })
+  console.log('calica response ', response, response.status)
+  return true
+}

src/components/Asset/OwnerActions/index.tsx

@@ -1,30 +1,51 @@
 import { useAsset } from '@context/Asset'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useWeb3 } from '@context/Web3'
-import { calicaUri } from '../../../../app.config'
+import { calicaBaseUri } from '../../../../app.config'
 import Button from '@components/@shared/atoms/Button'
 import styles from './index.module.css'
+import { checkCalicaContractAddress } from './calicaUtils'
+import { useCancelToken } from '@hooks/useCancelToken'
 
 export default function OwnerActions() {
   const { asset, isOwner } = useAsset()
   const { accountId } = useWeb3()
-
+  const [calicaUri, setCalicaUri] = useState()
+  const newCancelToken = useCancelToken()
+  useEffect(() => {
+    checkCalicaContractAddress(
+      asset.paymentCollector,
+      asset.chainId,
+      newCancelToken()
+    )
+    console.log(
+      'calicaBaseUri',
+      calicaBaseUri,
+      calicaUri,
+      asset?.paymentCollector
+    )
+  }, [asset?.paymentCollector, calicaUri])
+  // {ddo?.paymentCollector && ddo?.paymentCollector !== ddo?.nft?.owner && (
   return isOwner ? (
     <div className={styles.ownerActions}>
       <Button style="text" size="small" to={`/asset/${asset?.id}/edit`}>
         Edit Asset
       </Button>{' '}
-      |{' '}
+      {calicaUri && (
-      <Button
+        <>
-        style="text"
+          |{' '}
-        size="small"
+          <Button
-        href={`${calicaUri}/${accountId}`}
+            style="text"
-        target="_blank"
+            size="small"
-        rel="noopener noreferrer"
+            href={calicaUri}
-        title="Use Calica for splitting revenue between multiple accounts."
+            target="_blank"
-      >
+            rel="noopener noreferrer"
-        Split Revenue
+            title="Use Calica for splitting revenue between multiple accounts."
-      </Button>
+          >
+            Split Revenue
+          </Button>
+        </>
+      )}
     </div>
   ) : null
 }