allow multiple runs of handleSubmit

* collect what we need in local state for reuse after method has run
* run each step conditionally

src/components/Publish/Actions/index.tsx

@@ -24,8 +24,7 @@ export default function Actions({
     values,
     errors,
     isValid,
-    isSubmitting,
+    isSubmitting
-    setFieldValue
   }: FormikContextType<FormPublishData> = useFormikContext()
   const { connect, accountId } = useWeb3()
 

src/components/Publish/Submission/index.tsx

@@ -1,12 +1,8 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { FormPublishData } from '../_types'
-import { useFormikContext } from 'formik'
 import { Feedback } from './Feedback'
 
 export default function Submission(): ReactElement {
-  const { values, handleSubmit } = useFormikContext<FormPublishData>()
-
   return (
     <div className={styles.submission}>
       <Feedback />

src/components/Publish/index.tsx

@@ -38,132 +38,139 @@ export default function PublishPage({
   const [feedback, setFeedback] = useState<PublishFeedback>(
     initialPublishFeedback
   )
+  const [erc721Address, setErc721Address] = useState<string>()
+  const [datatokenAddress, setDatatokenAddress] = useState<string>()
+  const [ddo, setDdo] = useState<DDO>()
+  const [ddoEncrypted, setDdoEncrypted] = useState<string>()
   const [did, setDid] = useState<string>()
 
   async function handleSubmit(values: FormPublishData) {
-    let _erc721Address: string,
-      _datatokenAddress: string,
-      _ddo: DDO,
-      _encryptedDdo: string
-
     // reset all feedback state
     setFeedback(initialPublishFeedback)
 
     // --------------------------------------------------
     // 1. Create NFT & datatokens & create pricing schema
+    //    Wrapped in conditional allowing method to run
+    //    multiple times.
     // --------------------------------------------------
-    try {
+    if (!erc721Address && !datatokenAddress) {
-      setFeedback((prevState) => ({
+      try {
-        ...prevState,
+        setFeedback((prevState) => ({
-        '1': {
+          ...prevState,
-          ...prevState['1'],
+          '1': {
-          status: 'active',
+            ...prevState['1'],
-          txCount: values.pricing.type === 'dynamic' ? 2 : 1,
+            status: 'active',
-          description: prevState['1'].description
+            txCount: values.pricing.type === 'dynamic' ? 2 : 1,
+            description: prevState['1'].description
+          }
+        }))
+
+        const config = getOceanConfig(chainId)
+        LoggerInstance.log('[publish] using config: ', config)
+
+        const { erc721Address, datatokenAddress, txHash } =
+          await createTokensAndPricing(
+            values,
+            accountId,
+            config,
+            nftFactory,
+            web3
+          )
+
+        const isSuccess = Boolean(erc721Address && datatokenAddress && txHash)
+        setErc721Address(erc721Address)
+        setDatatokenAddress(datatokenAddress)
+
+        LoggerInstance.log('[publish] createTokensAndPricing tx', txHash)
+        LoggerInstance.log('[publish] erc721Address', erc721Address)
+        LoggerInstance.log('[publish] datatokenAddress', datatokenAddress)
+
+        setFeedback((prevState) => ({
+          ...prevState,
+          '1': {
+            ...prevState['1'],
+            status: isSuccess ? 'success' : 'error',
+            txHash
+          }
+        }))
+      } catch (error) {
+        LoggerInstance.error('[publish] error', error.message)
+        if (error.message.length > 65) {
+          error.message = 'No Token created.'
         }
-      }))
 
-      const config = getOceanConfig(chainId)
+        setFeedback((prevState) => ({
-      LoggerInstance.log('[publish] using config: ', config)
+          ...prevState,
-
+          '1': {
-      const { erc721Address, datatokenAddress, txHash } =
+            ...prevState['1'],
-        await createTokensAndPricing(
+            status: 'error',
-          values,
+            errorMessage: error.message,
-          accountId,
+            description:
-          config,
+              values.pricing.type === 'dynamic'
-          nftFactory,
+                ? prevState['1'].description.replace(
-          web3
+                    'a single transaction',
-        )
+                    'a single transaction, after an initial approve transaction'
-
+                  )
-      const isSuccess = Boolean(erc721Address && datatokenAddress && txHash)
+                : prevState['1'].description
-      _erc721Address = erc721Address
+          }
-      _datatokenAddress = datatokenAddress
+        }))
-
-      LoggerInstance.log('[publish] createTokensAndPricing tx', txHash)
-      LoggerInstance.log('[publish] erc721Address', erc721Address)
-      LoggerInstance.log('[publish] datatokenAddress', datatokenAddress)
-
-      setFeedback((prevState) => ({
-        ...prevState,
-        '1': {
-          ...prevState['1'],
-          status: isSuccess ? 'success' : 'error',
-          txHash
-        }
-      }))
-    } catch (error) {
-      LoggerInstance.error('[publish] error', error.message)
-      if (error.message.length > 65) {
-        error.message = 'No Token created.'
       }
-
-      setFeedback((prevState) => ({
-        ...prevState,
-        '1': {
-          ...prevState['1'],
-          status: 'error',
-          errorMessage: error.message,
-          description:
-            values.pricing.type === 'dynamic'
-              ? prevState['1'].description.replace(
-                  'a single transaction',
-                  'a single transaction, after an initial approve transaction'
-                )
-              : prevState['1'].description
-        }
-      }))
     }
 
     // --------------------------------------------------
     // 2. Construct and encrypt DDO
+    //    Wrapped in conditional allowing method to run
+    //    multiple times.
     // --------------------------------------------------
-    try {
+    if (!ddoEncrypted) {
-      setFeedback((prevState) => ({
+      try {
-        ...prevState,
+        setFeedback((prevState) => ({
-        '2': {
+          ...prevState,
-          ...prevState['2'],
+          '2': {
-          status: 'active'
+            ...prevState['2'],
-        }
+            status: 'active'
-      }))
+          }
+        }))
 
-      if (!_datatokenAddress || !_erc721Address)
+        if (!datatokenAddress || !erc721Address)
-        throw new Error('No NFT or Datatoken received.')
+          throw new Error('No NFT or Datatoken received.')
 
-      const ddo = await transformPublishFormToDdo(
+        const ddo = await transformPublishFormToDdo(
-        values,
+          values,
-        _datatokenAddress,
+          datatokenAddress,
-        _erc721Address
+          erc721Address
-      )
+        )
 
-      _ddo = ddo
+        setDdo(ddo)
-      LoggerInstance.log('[publish] Got new DDO', ddo)
+        LoggerInstance.log('[publish] Got new DDO', ddo)
 
-      const encryptedResponse = await ProviderInstance.encrypt(
+        const encryptedResponse = await ProviderInstance.encrypt(
-        ddo,
+          ddo,
-        values.services[0].providerUrl.url,
+          values.services[0].providerUrl.url,
-        newAbortController()
+          newAbortController()
-      )
+        )
-      const encryptedDdo = encryptedResponse
+        const ddoEncrypted = encryptedResponse
-      _encryptedDdo = encryptedDdo
+        setDdoEncrypted(ddoEncrypted)
-      LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo)
+        LoggerInstance.log('[publish] Got encrypted DDO', ddoEncrypted)
 
-      setFeedback((prevState) => ({
+        setFeedback((prevState) => ({
-        ...prevState,
+          ...prevState,
-        '2': {
+          '2': {
-          ...prevState['2'],
+            ...prevState['2'],
-          status: encryptedDdo ? 'success' : 'error'
+            status: ddoEncrypted ? 'success' : 'error'
-        }
+          }
-      }))
+        }))
-    } catch (error) {
+      } catch (error) {
-      LoggerInstance.error('[publish] error', error.message)
+        LoggerInstance.error('[publish] error', error.message)
-      setFeedback((prevState) => ({
+        setFeedback((prevState) => ({
-        ...prevState,
+          ...prevState,
-        '2': {
+          '2': {
-          ...prevState['2'],
+            ...prevState['2'],
-          status: 'error',
+            status: 'error',
-          errorMessage: error.message
+            errorMessage: error.message
-        }
+          }
-      }))
+        }))
+      }
     }
 
     // --------------------------------------------------
@@ -178,30 +185,32 @@ export default function PublishPage({
         }
       }))
 
-      if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.')
+      if (!ddo || !ddoEncrypted) throw new Error('No DDO received.')
 
       const res = await setNFTMetadataAndTokenURI(
-        _ddo,
+        ddo,
         accountId,
         web3,
         values.metadata.nft,
         newAbortController()
       )
+      if (!res?.transactionHash)
+        throw new Error(
+          'Metadata could not be written into the NFT. Please hit Submit again to retry.'
+        )
 
       LoggerInstance.log('[publish] setMetadata result', res)
 
-      const txHash = res.transactionHash
-
       setFeedback((prevState) => ({
         ...prevState,
         '3': {
           ...prevState['3'],
           status: res ? 'success' : 'error',
-          txHash
+          txHash: res?.transactionHash
         }
       }))
 
-      setDid(_ddo.id)
+      setDid(ddo.id)
     } catch (error) {
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({