prepare NFT creation

src/@utils/nft.ts

@@ -1,15 +1,47 @@
 export interface NftOptions {
   name: string
   symbol: string
-  tokenURI: string
+  description: string
+  image: string
+}
+
+function encodeSvg(svgString: string): string {
+  return svgString
+    .replace(
+      '<svg',
+      ~svgString.indexOf('xmlns')
+        ? '<svg'
+        : '<svg xmlns="http://www.w3.org/2000/svg"'
+    )
+    .replace(/"/g, "'")
+    .replace(/%/g, '%25')
+    .replace(/#/g, '%23')
+    .replace(/{/g, '%7B')
+    .replace(/}/g, '%7D')
+    .replace(/</g, '%3C')
+    .replace(/>/g, '%3E')
+    .replace(/\s+/g, ' ')
 }
 
 export function generateNftOptions(): NftOptions {
+  const image = '<svg></svg>'
   const newNft: NftOptions = {
     name: 'Ocean Asset v4',
     symbol: 'OCEAN-V4',
-    tokenURI: ''
+    description: `This NFT represents an asset in the Ocean Protocol v4 ecosystem.`,
+    image: `data:image/svg+xml,${encodeSvg(image)}` // generated SVG embedded as 'data:image/svg+xml;base64'
   }
 
   return newNft
 }
+
+export function generateNftCreateData(nftOptions: NftOptions): any {
+  const nftCreateData = {
+    name: nftOptions.name,
+    symbol: nftOptions.symbol,
+    templateIndex: 1,
+    tokenURI: Buffer.from(JSON.stringify(nftOptions)).toString('base64') // data:application/json;base64
+  }
+
+  return nftCreateData
+}

src/components/Publish/FormAlgoPublish.tsx

@@ -1,182 +0,0 @@
-import React, {
-  ReactElement,
-  useEffect,
-  useState,
-  FormEvent,
-  ChangeEvent
-} from 'react'
-// import { useStaticQuery, graphql } from 'gatsby'
-// import { useFormikContext, Field, Form, FormikContextType } from 'formik'
-// import Input from '../../atoms/Input'
-// import { FormContent, FormFieldContent } from '../../../@types/Form'
-// import { MetadataPublishFormAlgorithm } from '../../../@types/MetaData'
-// import { initialValues as initialValuesAlgorithm } from '../../../@types/FormAlgoPublish'
-// import AdvancedSettings from '../../molecules/FormFields/AdvancedSettings'
-// import FormTitle from './FormTitle'
-// import FormActions from './FormActions'
-// import styles from './FormPublish.module.css'
-
-// const query = graphql`
-//   query {
-//     content: allFile(
-//       filter: { relativePath: { eq: "pages/publish/form-algorithm.json" } }
-//     ) {
-//       edges {
-//         node {
-//           childPublishJson {
-//             title
-//             data {
-//               name
-//               placeholder
-//               label
-//               help
-//               type
-//               required
-//               sortOptions
-//               options
-//               disclaimer
-//               disclaimerValues
-//               advanced
-//             }
-//             warning
-//           }
-//         }
-//       }
-//     }
-//   }
-// `
-
-// export default function FormPublish(): ReactElement {
-//   const data = useStaticQuery(query)
-//   const content: FormContent = data.content.edges[0].node.childPublishJson
-
-//   const {
-//     status,
-//     setStatus,
-//     isValid,
-//     setErrors,
-//     setTouched,
-//     resetForm,
-//     initialValues,
-//     validateField,
-//     setFieldValue
-//   }: FormikContextType<MetadataPublishFormAlgorithm> = useFormikContext()
-//   const [selectedDockerImage, setSelectedDockerImage] = useState<string>(
-//     initialValues.dockerImage
-//   )
-
-//   const dockerImageOptions = [
-//     {
-//       name: 'node:latest',
-//       title: 'node:latest',
-//       checked: true
-//     },
-//     {
-//       name: 'python:latest',
-//       title: 'python:latest',
-//       checked: false
-//     },
-//     {
-//       name: 'custom image',
-//       title: 'custom image',
-//       checked: false
-//     }
-//   ]
-
-//   // reset form validation on every mount
-//   useEffect(() => {
-//     setErrors({})
-//     setTouched({})
-//   }, [setErrors, setTouched])
-
-//   function handleImageSelectChange(imageSelected: string) {
-//     switch (imageSelected) {
-//       case 'node:latest': {
-//         setFieldValue('image', 'node')
-//         setFieldValue('containerTag', 'latest')
-//         setFieldValue('entrypoint', 'node $ALGO')
-//         break
-//       }
-//       case 'python:latest': {
-//         setFieldValue('image', 'oceanprotocol/algo_dockers')
-//         setFieldValue('containerTag', 'python-panda')
-//         setFieldValue('entrypoint', 'python $ALGO')
-//         break
-//       }
-//       default: {
-//         setFieldValue('image', '')
-//         setFieldValue('containerTag', '')
-//         setFieldValue('entrypoint', '')
-//         break
-//       }
-//     }
-//   }
-
-//   // Manually handle change events instead of using `handleChange` from Formik.
-//   // Workaround for default `validateOnChange` not kicking in
-//   function handleFieldChange(
-//     e: ChangeEvent<HTMLInputElement>,
-//     field: InputProps
-//   ) {
-//     const value =
-//       field.type === 'checkbox' || field.type === 'terms'
-//         ? !JSON.parse(e.target.value)
-//         : e.target.value
-//     if (field.name === 'dockerImage') {
-//       setSelectedDockerImage(e.target.value)
-//       handleImageSelectChange(e.target.value)
-//     }
-//     validateField(field.name)
-//     setFieldValue(field.name, value)
-//   }
-
-//   const resetFormAndClearStorage = (e: FormEvent<Element>) => {
-//     e.preventDefault()
-//     resetForm({
-//       values: initialValuesAlgorithm as MetadataPublishFormAlgorithm,
-//       status: 'empty'
-//     })
-//     setStatus('empty')
-//   }
-
-//   return (
-//     <Form
-//       className={styles.form}
-//       // do we need this?
-//       onChange={() => status === 'empty' && setStatus(null)}
-//     >
-//       <FormTitle title={content.title} />
-
-//       {content.data.map(
-//         (field: InputProps) =>
-//           field.advanced !== true &&
-//           ((field.name !== 'entrypoint' &&
-//             field.name !== 'image' &&
-//             field.name !== 'containerTag') ||
-//             selectedDockerImage === 'custom image') && (
-//             <Field
-//               key={field.name}
-//               {...field}
-//               options={
-//                 field.type === 'boxSelection'
-//                   ? dockerImageOptions
-//                   : field.options
-//               }
-//               component={Input}
-//               onChange={(e: ChangeEvent<HTMLInputElement>) =>
-//                 handleFieldChange(e, field)
-//               }
-//             />
-//           )
-//       )}
-//       <AdvancedSettings
-//         content={content}
-//         handleFieldChange={handleFieldChange}
-//       />
-//       <FormActions
-//         isValid={isValid}
-//         resetFormAndClearStorage={resetFormAndClearStorage}
-//       />
-//     </Form>
-//   )
-// }

src/components/Publish/index.tsx

@@ -15,6 +15,7 @@ import Navigation from './Navigation'
 import { Steps } from './Steps'
 import { FormPublishData } from './_types'
 import { sha256 } from 'js-sha256'
+import { generateNftCreateData } from '@utils/nft'
 
 const formName = 'ocean-publish-form'
 
@@ -32,16 +33,25 @@ export default function PublishPage({
 
   async function handleSubmit(values: FormPublishData) {
     try {
+      // --------------------------------------------------
       // 1. Mint NFT & datatokens & put in pool
-      // const txMint = await createNftWithErc()
+      // --------------------------------------------------
+      // const nftOptions = values.metadata.nft
+      // const nftCreateData = generateNftCreateData(nftOptions)
+      // const ercParams = {}
+      // const txMint = await createNftWithErc(accountId, nftCreateData)
       // const { nftAddress, datatokenAddress } = txMint.logs[0].args
       //
+      // --------------------------------------------------
       // 2. Construct and publish DDO
+      // --------------------------------------------------
       // const did = sha256(`${nftAddress}${chainId}`)
       // const ddo = transformPublishFormToDdo(values, datatokenAddress, nftAddress)
       // const txPublish = await publish(ddo)
       //
+      // --------------------------------------------------
       // 3. Integrity check of DDO before & after publishing
+      // --------------------------------------------------
       // const checksumBefore = sha256(ddo)
       // const ddoFromChain = await getDdoFromChain(ddo.id)
       // const ddoFromChainDecrypted = await decryptDdo(ddoFromChain)