working feedback state switching

src/@utils/nft.ts

@@ -61,9 +61,11 @@ export function generateNftCreateData(nftMetadata: NftMetadata): any {
     name: nftMetadata.name,
     symbol: nftMetadata.symbol,
     templateIndex: 1,
+    // Gas estimation fails if we add our huge tokenURI
+    tokenURI: ''
     // TODO: figure out if Buffer.from method is working in browser in final build
     // as BTOA is deprecated.
-    tokenURI: window?.btoa(JSON.stringify(nftMetadata))
+    // tokenURI: window?.btoa(JSON.stringify(nftMetadata))
     // tokenURI: Buffer.from(JSON.stringify(nftMetadata)).toString('base64') // should end up as data:application/json;base64
   }
 

src/components/Publish/Submission/index.tsx

@@ -10,9 +10,7 @@ export default function Submission(): ReactElement {
   return (
     <div className={styles.submission}>
       <h3>Submission</h3>
-      Place to teach about what happens next, output all the steps in background
-      in some list, after submission continously update this list with the
-      status of the submission.
+
       <Feedback />
     </div>
   )

src/components/Publish/_utils.ts

@@ -15,6 +15,7 @@ import {
   ZERO_ADDRESS
 } from '@oceanprotocol/lib'
 import { mapTimeoutStringToSeconds } from '@utils/ddo'
+import { generateNftCreateData } from '@utils/nft'
 import { getEncryptedFiles } from '@utils/provider'
 import slugify from 'slugify'
 import Web3 from 'web3'
@@ -130,7 +131,6 @@ export async function transformPublishFormToDdo(
         }
       })
   }
-  console.log('new meta', newMetadata)
 
   // this is the default format hardcoded
   const file = [
@@ -193,14 +193,11 @@ export async function createTokensAndPricing(
   nftFactory: NftFactory,
   web3: Web3
 ) {
-  // image not included here for gas fees reasons. It is also an issue to reaserch how we add the image in the nft
-  const nftCreateData: NftCreateData = {
-    name: values.metadata.nft.name,
-    symbol: values.metadata.nft.symbol,
-    // tokenURI: values.metadata.nft.image_data,
-    tokenURI: '',
-    templateIndex: 1
-  }
+  const nftCreateData: NftCreateData = generateNftCreateData(
+    values.metadata.nft
+  )
+
+  LoggerInstance.log('[publish] NFT metadata', nftCreateData)
 
   // TODO: cap is hardcoded for now to 1000, this needs to be discussed at some point
   // fee is default 0 for now
@@ -250,7 +247,7 @@ export async function createTokensAndPricing(
         '200',
         false
       )
-      console.log('aprove', txApp)
+      LoggerInstance.log('[publish] approve', txApp)
       const result = await nftFactory.createNftErcWithPool(
         accountId,
         nftCreateData,

src/components/Publish/index.tsx

@@ -14,7 +14,13 @@ import { Steps } from './Steps'
 import { FormPublishData, PublishFeedback } from './_types'
 import { useUserPreferences } from '@context/UserPreferences'
 import useNftFactory from '@hooks/contracts/useNftFactory'
-import { Nft, getHash, ProviderInstance } from '@oceanprotocol/lib'
+import {
+  Nft,
+  getHash,
+  ProviderInstance,
+  LoggerInstance,
+  DDO
+} from '@oceanprotocol/lib'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import axios, { Method } from 'axios'
 import { useCancelToken } from '@hooks/useCancelToken'
@@ -42,22 +48,28 @@ export default function PublishPage({
   )
 
   async function handleSubmit(values: FormPublishData) {
-    let _erc721Address, _datatokenAddress, _ddo, _encryptedDdo
+    let _erc721Address: string,
+      _datatokenAddress: string,
+      _ddo: DDO,
+      _encryptedDdo: string
+
+    // reset all feedback state
+    setFeedback(initialPublishFeedback)
 
     // --------------------------------------------------
     // 1. Create NFT & datatokens & create pricing schema
     // --------------------------------------------------
     try {
-      setFeedback({
-        ...feedback,
+      setFeedback((prevState) => ({
+        ...prevState,
         1: {
-          ...feedback[1],
+          ...prevState[1],
           status: 'active'
         }
-      })
+      }))
 
       const config = getOceanConfig(chainId)
-      console.log('config', config)
+      LoggerInstance.log('[publish] using config: ', config)
 
       const { erc721Address, datatokenAddress } = await createTokensAndPricing(
         values,
@@ -68,40 +80,46 @@ export default function PublishPage({
         web3
       )
 
-      const isSuccess = erc721Address && datatokenAddress
+      const isSuccess = Boolean(erc721Address && datatokenAddress)
       _erc721Address = erc721Address
       _datatokenAddress = datatokenAddress
 
-      setFeedback({
-        ...feedback,
+      LoggerInstance.log('[publish] erc721Address', erc721Address)
+      LoggerInstance.log('[publish] datatokenAddress', datatokenAddress)
+
+      setFeedback((prevState) => ({
+        ...prevState,
         1: {
-          ...feedback[1],
+          ...prevState[1],
           status: isSuccess ? 'success' : 'error'
         }
-      })
+      }))
     } catch (error) {
-      console.error('error', error.message)
-      setFeedback({
-        ...feedback,
+      LoggerInstance.error('[publish] error', error.message)
+      setFeedback((prevState) => ({
+        ...prevState,
         1: {
-          ...feedback[1],
+          ...prevState[1],
           status: 'error',
           message: error.message
         }
-      })
+      }))
     }
 
     // --------------------------------------------------
-    // 2. Construct and encypt DDO
+    // 2. Construct and encrypt DDO
     // --------------------------------------------------
     try {
-      setFeedback({
-        ...feedback,
+      setFeedback((prevState) => ({
+        ...prevState,
         2: {
-          ...feedback[2],
-          status: 'active'
+          ...prevState[2],
+          status: _datatokenAddress && _erc721Address ? 'active' : 'error'
         }
-      })
+      }))
+
+      if (!_datatokenAddress || !_erc721Address)
+        throw new Error('No NFT or Datatoken received.')
 
       const ddo = await transformPublishFormToDdo(
         values,
@@ -110,6 +128,7 @@ export default function PublishPage({
       )
 
       _ddo = ddo
+      LoggerInstance.log('[publish] Got new DDO', JSON.stringify(ddo))
 
       const encryptedResponse = await ProviderInstance.encrypt(
         ddo,
@@ -124,41 +143,41 @@ export default function PublishPage({
         }
       )
       const encryptedDdo = encryptedResponse.data
-
       _encryptedDdo = encryptedDdo
+      LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo)
 
-      console.log('ddo', JSON.stringify(ddo))
-
-      setFeedback({
-        ...feedback,
+      setFeedback((prevState) => ({
+        ...prevState,
         2: {
-          ...feedback[2],
+          ...prevState[2],
           status: encryptedDdo ? 'success' : 'error'
         }
-      })
+      }))
     } catch (error) {
-      console.error('error', error.message)
-      setFeedback({
-        ...feedback,
+      LoggerInstance.error('[publish] error', error.message)
+      setFeedback((prevState) => ({
+        ...prevState,
         2: {
-          ...feedback[2],
+          ...prevState[2],
           status: 'error',
           message: error.message
         }
-      })
+      }))
     }
 
     // --------------------------------------------------
-    // 3. Publish DDO
+    // 3. Write DDO into NFT metadata
     // --------------------------------------------------
     try {
-      setFeedback({
-        ...feedback,
+      setFeedback((prevState) => ({
+        ...prevState,
         3: {
-          ...feedback[3],
-          status: 'active'
+          ...prevState[3],
+          status: _ddo && _encryptedDdo ? 'active' : 'error'
         }
-      })
+      }))
+
+      if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.')
 
       // TODO: this whole setMetadata needs to go in a function ,too many hardcoded/calculated params
       // TODO: hash generation : this needs to be moved in a function (probably on ocean.js) after we figure out what is going on in provider, leave it here for now
@@ -179,25 +198,25 @@ export default function PublishPage({
         '0x' + metadataHash
       )
 
-      console.log('result', res)
+      LoggerInstance.log('[publish] setMetadata result', res)
 
-      setFeedback({
-        ...feedback,
+      setFeedback((prevState) => ({
+        ...prevState,
         3: {
-          ...feedback[3],
+          ...prevState[3],
           status: res ? 'success' : 'error'
         }
-      })
+      }))
     } catch (error) {
-      console.error('error', error.message)
-      setFeedback({
-        ...feedback,
+      LoggerInstance.error('[publish] error', error.message)
+      setFeedback((prevState) => ({
+        ...prevState,
         3: {
-          ...feedback[3],
+          ...prevState[3],
           status: 'error',
           message: error.message
         }
-      })
+      }))
     }
 
     // --------------------------------------------------