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,
-    setFieldValue
+    isSubmitting
   }: 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,20 +38,22 @@ 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.
     // --------------------------------------------------
+    if (!erc721Address && !datatokenAddress) {
       try {
         setFeedback((prevState) => ({
           ...prevState,
@@ -76,8 +78,8 @@ export default function PublishPage({
           )
 
         const isSuccess = Boolean(erc721Address && datatokenAddress && txHash)
-      _erc721Address = erc721Address
-      _datatokenAddress = datatokenAddress
+        setErc721Address(erc721Address)
+        setDatatokenAddress(datatokenAddress)
 
         LoggerInstance.log('[publish] createTokensAndPricing tx', txHash)
         LoggerInstance.log('[publish] erc721Address', erc721Address)
@@ -113,10 +115,14 @@ export default function PublishPage({
           }
         }))
       }
+    }
 
     // --------------------------------------------------
     // 2. Construct and encrypt DDO
+    //    Wrapped in conditional allowing method to run
+    //    multiple times.
     // --------------------------------------------------
+    if (!ddoEncrypted) {
       try {
         setFeedback((prevState) => ({
           ...prevState,
@@ -126,16 +132,16 @@ export default function PublishPage({
           }
         }))
 
-      if (!_datatokenAddress || !_erc721Address)
+        if (!datatokenAddress || !erc721Address)
           throw new Error('No NFT or Datatoken received.')
 
         const ddo = await transformPublishFormToDdo(
           values,
-        _datatokenAddress,
-        _erc721Address
+          datatokenAddress,
+          erc721Address
         )
 
-      _ddo = ddo
+        setDdo(ddo)
         LoggerInstance.log('[publish] Got new DDO', ddo)
 
         const encryptedResponse = await ProviderInstance.encrypt(
@@ -143,15 +149,15 @@ export default function PublishPage({
           values.services[0].providerUrl.url,
           newAbortController()
         )
-      const encryptedDdo = encryptedResponse
-      _encryptedDdo = encryptedDdo
-      LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo)
+        const ddoEncrypted = encryptedResponse
+        setDdoEncrypted(ddoEncrypted)
+        LoggerInstance.log('[publish] Got encrypted DDO', ddoEncrypted)
 
         setFeedback((prevState) => ({
           ...prevState,
           '2': {
             ...prevState['2'],
-          status: encryptedDdo ? 'success' : 'error'
+            status: ddoEncrypted ? 'success' : 'error'
           }
         }))
       } catch (error) {
@@ -165,6 +171,7 @@ export default function PublishPage({
           }
         }))
       }
+    }
 
     // --------------------------------------------------
     // 3. Write DDO into NFT metadata
@@ -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) => ({