rewrite getPaymentCollector()

src/@utils/ocean.ts

@@ -1,5 +1,7 @@
 import { ConfigHelper, Config } from '@oceanprotocol/lib'
-// import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
+import { ethers } from 'ethers'
+
+import abiDatatoken from '@oceanprotocol/contracts/artifacts/contracts/interfaces/IERC20Template.sol/IERC20Template.json'
 
 export function getOceanConfig(network: string | number): Config {
   const config = new ConfigHelper().getConfig(
@@ -28,3 +30,17 @@ 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

@@ -3,24 +3,26 @@ import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import Publisher from '@shared/Publisher'
 import { useAsset } from '@context/Asset'
-import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
+import { Asset, LoggerInstance } from '@oceanprotocol/lib'
-import { useWeb3Legacy } from '@context/Web3Legacy'
+import { getPaymentCollector } from '@utils/ocean'
+import { useProvider } from 'wagmi'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
   const { isInPurgatory, assetState } = useAsset()
-  const { web3 } = useWeb3Legacy()
+  const provider = useProvider()
 
   const [paymentCollector, setPaymentCollector] = useState<string>()
 
   useEffect(() => {
-    if (!ddo || !web3) return
+    if (!ddo || !provider) return
 
     async function getInitialPaymentCollector() {
       try {
-        const datatoken = new Datatoken(web3)
+        const paymentCollector = await getPaymentCollector(
-        setPaymentCollector(
+          ddo.datatokens[0].address,
-          await datatoken.getPaymentCollector(ddo.datatokens[0].address)
+          provider
         )
+        setPaymentCollector(paymentCollector)
       } catch (error) {
         LoggerInstance.error(
           '[MetaFull: getInitialPaymentCollector]',
@@ -29,7 +31,7 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
       }
     }
     getInitialPaymentCollector()
-  }, [ddo, web3])
+  }, [ddo, provider])
 
   function DockerImage() {
     const containerInfo = ddo?.metadata?.algorithm?.container