fix rerender loop, properly populate chainId in form values

src/components/Publish/Steps.tsx

@@ -0,0 +1,22 @@
+import { ReactElement, useEffect } from 'react'
+import { useFormikContext } from 'formik'
+import { wizardSteps } from './_constants'
+import { useWeb3 } from '@context/Web3'
+import { FormPublishData } from './_types'
+
+export function Steps({ step }: { step: number }): ReactElement {
+  const { chainId } = useWeb3()
+  const { setFieldValue } = useFormikContext<FormPublishData>()
+
+  useEffect(() => {
+    if (!chainId) return
+
+    setFieldValue('chainId', chainId)
+  }, [chainId, setFieldValue])
+
+  const { component } = wizardSteps.filter(
+    (stepContent) => stepContent.step === step
+  )[0]
+
+  return component
+}

src/components/Publish/_utils.ts

@@ -33,7 +33,6 @@ export function transformPublishFormToDdo(data: Partial<FormPublishData>): DDO {
   } = data.services[0]
 
   const fileUrl = typeof files !== 'string' && files[0].url
-
   const filesEncrypted = encryptMe(files)
 
   const service: Service = {
@@ -49,6 +48,7 @@ export function transformPublishFormToDdo(data: Partial<FormPublishData>): DDO {
     id: '',
     version: '4.0.0',
     created: currentTime,
+    updated: currentTime,
     chainId: data.chainId,
     metadata: {
       type,

src/components/Publish/index.tsx

@@ -1,12 +1,11 @@
-import React, { ReactElement, useState, useEffect, useRef } from 'react'
+import React, { ReactElement, useState, useRef } from 'react'
 import { Form, Formik, FormikState } from 'formik'
 import { usePublish } from '@hooks/usePublish'
-import { initialValues, validationSchema, wizardSteps } from './_constants'
+import { initialValues, validationSchema } from './_constants'
 import { validateDockerImage } from '@utils/docker'
 import { Logger, Metadata } from '@oceanprotocol/lib'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import { useWeb3 } from '@context/Web3'
-import { FormPublishData } from './_types'
 import { transformPublishFormToDdo } from './_utils'
 import PageHeader from '@shared/Page/PageHeader'
 import Title from './Title'
@@ -14,17 +13,10 @@ import styles from './index.module.css'
 import Actions from './Actions'
 import Debug from './Debug'
 import Navigation from './Navigation'
+import { Steps } from './Steps'
 
 const formName = 'ocean-publish-form'
 
-function Steps({ step }: { step: number }) {
-  const { component } = wizardSteps.filter(
-    (stepContent) => stepContent.step === step
-  )[0]
-
-  return component
-}
-
 export default function PublishPage({
   content
 }: {
@@ -101,9 +93,7 @@ export default function PublishPage({
             // await handleSubmit(values, resetForm)
           }}
         >
-          {({ values, setFieldValue }) => {
+          {({ values }) => {
-            setFieldValue('chainId', chainId)
-
             return (
               <>
                 <Form className={styles.form} ref={scrollToRef}>