From 51891f9b9ff7bf20d0ba309a211dd24b8093a5d1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 11 Nov 2021 08:46:52 +0000
Subject: [PATCH] fix rerender loop, properly populate chainId in form values

---
 src/components/Publish/Steps.tsx | 22 ++++++++++++++++++++++
 src/components/Publish/_utils.ts |  2 +-
 src/components/Publish/index.tsx | 18 ++++--------------
 3 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Publish/Steps.tsx

diff --git a/src/components/Publish/Steps.tsx b/src/components/Publish/Steps.tsx
new file mode 100644
index 000000000..732e39ee4
--- /dev/null
+++ b/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
+}
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index d87200764..4647eb0b8 100644
--- a/src/components/Publish/_utils.ts
+++ b/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,
diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx
index 48e063de4..5f08cd617 100644
--- a/src/components/Publish/index.tsx
+++ b/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 }) => {
-            setFieldValue('chainId', chainId)
-
+          {({ values }) => {
             return (
               <>
                 <Form className={styles.form} ref={scrollToRef}>