kick out getPaymentCollector completely, use wagmi hooks instead

src/@utils/ocean.ts

@@ -30,17 +30,3 @@ export function getDevelopmentConfig(): Config {
     subgraphUri: 'https://v4.subgraph.goerli.oceanprotocol.com'
   } as Config
 }
-
-/**
- * getPaymentCollector - returns the current paymentCollector
- * @param dtAddress datatoken address
- * @return {Promise<string>}
- */
-export async function getPaymentCollector(
-  dtAddress: string,
-  provider: ethers.providers.Provider
-): Promise<string> {
-  const dtContract = new ethers.Contract(dtAddress, abiDatatoken.abi, provider)
-  const paymentCollector = await dtContract.getPaymentCollector()
-  return paymentCollector
-}

src/components/Asset/AssetContent/MetaFull.tsx

@@ -1,37 +1,28 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import Publisher from '@shared/Publisher'
 import { useAsset } from '@context/Asset'
 import { Asset, LoggerInstance } from '@oceanprotocol/lib'
-import { getPaymentCollector } from '@utils/ocean'
+import { useContractRead } from 'wagmi'
-import { useProvider } from 'wagmi'
+
+import abiDatatoken from '@oceanprotocol/contracts/artifacts/contracts/interfaces/IERC20Template.sol/IERC20Template.json'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
   const { isInPurgatory, assetState } = useAsset()
-  const provider = useProvider()
+  const { data: paymentCollector, error }: { data: string; error: Error } =
+    useContractRead({
+      address: ddo?.datatokens[0].address,
+      abi: abiDatatoken.abi,
+      functionName: 'getPaymentCollector'
+    })
 
-  const [paymentCollector, setPaymentCollector] = useState<string>()
+  if (error) {
-
+    LoggerInstance.error(
-  useEffect(() => {
+      '[MetaFull: getInitialPaymentCollector]',
-    if (!ddo || !provider) return
+      error.message
-
+    )
-    async function getInitialPaymentCollector() {
+  }
-      try {
-        const paymentCollector = await getPaymentCollector(
-          ddo.datatokens[0].address,
-          provider
-        )
-        setPaymentCollector(paymentCollector)
-      } catch (error) {
-        LoggerInstance.error(
-          '[MetaFull: getInitialPaymentCollector]',
-          error.message
-        )
-      }
-    }
-    getInitialPaymentCollector()
-  }, [ddo, provider])
 
   function DockerImage() {
     const containerInfo = ddo?.metadata?.algorithm?.container