setting inital payment collector from EditMetadata

src/components/Asset/Edit/EditMetadata.tsx

@@ -1,11 +1,12 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { Formik } from 'formik'
 import {
   LoggerInstance,
   Metadata,
   FixedRateExchange,
   Asset,
-  Service
+  Service,
+  Datatoken
 } from '@oceanprotocol/lib'
 import { validationSchema } from './_validation'
 import { getInitialValues } from './_constants'
@@ -36,10 +37,30 @@ export default function Edit({
   const { accountId, web3 } = useWeb3()
   const newAbortController = useAbortController()
   const [success, setSuccess] = useState<string>()
+  const [paymentCollector, setPaymentCollector] = useState<string>()
   const [error, setError] = useState<string>()
   const isComputeType = asset?.services[0]?.type === 'compute'
   const hasFeedback = error || success
 
+  useEffect(() => {
+    async function getInitialPaymentCollector() {
+      let paymentCollector
+      try {
+        console.log('owner', asset?.nft.owner)
+        const datatoken = new Datatoken(web3)
+        console.log('datatoken', datatoken)
+        paymentCollector = await datatoken.getPaymentCollector(
+          asset?.datatokens[0].address
+        )
+        console.log('paymentCollector', paymentCollector)
+        setPaymentCollector(paymentCollector)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    getInitialPaymentCollector()
+  }, [asset])
+
   async function updateFixedPrice(newPrice: string) {
     const config = getOceanConfig(asset.chainId)
 
@@ -145,10 +166,10 @@ export default function Edit({
     <Formik
       enableReinitialize
       initialValues={getInitialValues(
-        asset?.nft.owner,
         asset?.metadata,
         asset?.services[0]?.timeout,
-        asset?.accessDetails?.price
+        asset?.accessDetails?.price,
+        paymentCollector
       )}
       validationSchema={validationSchema}
       onSubmit={async (values, { resetForm }) => {

src/components/Asset/Edit/_constants.ts

@@ -1,18 +1,14 @@
-import {
-  Metadata,
-  ServiceComputeOptions,
-  getPaymentCollector
-} from '@oceanprotocol/lib'
+import { Metadata, ServiceComputeOptions, Datatoken } from '@oceanprotocol/lib'
 import { secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
+import Web3 from 'web3'
 
-export async function getInitialValues(
-  owner: string,
+export function getInitialValues(
   metadata: Metadata,
   timeout: number,
-  price: string
-): Promise<Partial<MetadataEditForm>> {
-  const paymentCollector = await getPaymentCollector(owner)
+  price: string,
+  paymentCollector: string
+): Partial<MetadataEditForm> {
   return {
     name: metadata?.name,
     description: metadata?.description,