prepare datatoken & NFT display

content/publish/form.json

@@ -2,6 +2,13 @@
   "metadata": {
     "title": "Metadata",
     "fields": [
+      {
+        "name": "nft",
+        "label": "Data NFT",
+        "type": "nft",
+        "help": "All metadata is stored on-chain in a newly deployed ERC-721 contract representing this asset.",
+        "required": true
+      },
       {
         "name": "type",
         "label": "Asset Type",

src/@hooks/usePublish.ts

@@ -9,12 +9,7 @@ import { publishFeedback } from '@utils/feedback'
 import { useOcean } from '@context/Ocean'
 import { useWeb3 } from '@context/Web3'
 import { getOceanConfig } from '@utils/ocean'
-
-export interface DataTokenOptions {
-  cap?: string
-  name?: string
-  symbol?: string
-}
+import { DataTokenOptions } from '@utils/datatokens'
 
 interface UsePublish {
   publish: (

src/@utils/nft.ts

@@ -0,0 +1,15 @@
+export interface NftOptions {
+  name: string
+  symbol: string
+  tokenURI: string
+}
+
+export function generateNftOptions(): NftOptions {
+  const newNft: NftOptions = {
+    name: 'Ocean Asset v4',
+    symbol: 'OCEAN-V4',
+    tokenURI: ''
+  }
+
+  return newNft
+}

src/components/@shared/Form/FormFields/Datatoken/index.module.css

@@ -1,5 +1,27 @@
 .datatoken {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: 3fr 1fr;
+  margin-bottom: var(--spacer);
+  align-items: center;
+}
+
+.token {
   border: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 3);
   border-radius: var(--border-radius);
 }
+
+.image {
+  width: 128px;
+  height: 128px;
+  padding: var(--spacer);
+  background: var(--brand-black);
+  fill: var(--brand-violet);
+  border-radius: 50%;
+}
+
+.image svg {
+  width: 100%;
+  height: 100%;
+}

src/components/@shared/Form/FormFields/Datatoken/index.tsx

@@ -1,15 +1,16 @@
 import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
-import { utils } from '@oceanprotocol/lib'
 import { InputProps } from '@shared/Form/Input'
+import Logo from '@images/logo.svg'
 import RefreshName from './RefreshName'
 import styles from './index.module.css'
+import { generateDatatokenName } from '@utils/datatokens'
 
 export default function Datatoken(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
 
   async function generateName() {
-    const dataTokenOptions = utils.generateDatatokenName()
+    const dataTokenOptions = generateDatatokenName()
     helpers.setValue({ ...dataTokenOptions })
   }
 
@@ -22,9 +23,14 @@ export default function Datatoken(props: InputProps): ReactElement {
 
   return (
     <div className={styles.datatoken}>
-      <strong>{field?.value?.name}</strong> —{' '}
-      <strong>{field?.value?.symbol}</strong>
-      <RefreshName generateName={generateName} />
+      <div className={styles.token}>
+        <strong>{field?.value?.name}</strong> —{' '}
+        <strong>{field?.value?.symbol}</strong>
+        <RefreshName generateName={generateName} />
+      </div>
+      <figure className={styles.image}>
+        <Logo />
+      </figure>
     </div>
   )
 }

src/components/@shared/Form/FormFields/Nft/index.module.css

@@ -0,0 +1,18 @@
+.nft {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: 3fr 1fr;
+  margin-bottom: var(--spacer);
+  align-items: center;
+}
+
+.token {
+  border: 1px solid var(--border-color);
+  padding: calc(var(--spacer) / 3);
+  border-radius: var(--border-radius);
+}
+
+.image {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}

src/components/@shared/Form/FormFields/Nft/index.tsx

@@ -0,0 +1,32 @@
+import { InputProps } from '@shared/Form/Input'
+import { generateNftOptions } from '@utils/nft'
+import { useField } from 'formik'
+import React, { ReactElement, useEffect } from 'react'
+import styles from './index.module.css'
+
+export default function Nft(props: InputProps): ReactElement {
+  const [field, meta, helpers] = useField(props.name)
+
+  // Generate on first mount
+  useEffect(() => {
+    if (field.value?.name !== '') return
+
+    const nftOptions = generateNftOptions()
+    helpers.setValue({ ...nftOptions })
+  }, [field.value?.name])
+
+  return (
+    <div className={styles.nft}>
+      <div className={styles.token}>
+        <strong>{field?.value?.name}</strong> —{' '}
+        <strong>{field?.value?.symbol}</strong>
+      </div>
+      <img
+        src="//placekitten.com/g/128/128"
+        className={styles.image}
+        width="128"
+        height="128"
+      />
+    </div>
+  )
+}

src/components/@shared/Form/Input/InputElement.tsx

@@ -10,6 +10,7 @@ import classNames from 'classnames/bind'
 import AssetSelection, {
   AssetSelectionAsset
 } from '../FormFields/AssetSelection'
+import Nft from '../FormFields/Nft'
 
 const cx = classNames.bind(styles)
 
@@ -132,6 +133,8 @@ export default function InputElement({
       return <FilesInput name={name} {...field} {...props} />
     case 'providerUrl':
       return <CustomProvider name={name} {...field} {...props} />
+    case 'nft':
+      return <Nft name={name} {...field} {...props} />
     case 'datatoken':
       return <Datatoken name={name} {...field} {...props} />
     case 'boxSelection':

src/components/Publish/Metadata/index.tsx

@@ -31,6 +31,11 @@ export default function MetadataFields(): ReactElement {
 
   return (
     <>
+      <Field
+        {...getFieldContent('nft', content.metadata.fields)}
+        component={Input}
+        name="metadata.nft"
+      />
       <Field
         {...getFieldContent('type', content.metadata.fields)}
         component={Input}
@@ -97,15 +102,6 @@ export default function MetadataFields(): ReactElement {
         </>
       )}
 
-      <div>
-        <strong>Fancy NFT display</strong>
-        <p>
-          Place to show that metadata becomes part of a NFT. Plan is to
-          autogenerate some graphic, display it here, and pass that graphic to
-          the publish methods.
-        </p>
-      </div>
-
       <Field
         {...getFieldContent('termsAndConditions', content.metadata.fields)}
         component={Input}

src/components/Publish/Pricing/Coin.tsx

@@ -3,7 +3,7 @@ import styles from './Coin.module.css'
 import InputElement from '@shared/Form/Input/InputElement'
 import Logo from '@images/logo.svg'
 import Conversion from '@shared/Price/Conversion'
-import { DataTokenOptions } from '@hooks/usePublish'
+import { DataTokenOptions } from '@utils/datatokens'
 import { useField } from 'formik'
 import Error from './Error'
 

src/components/Publish/Services/index.tsx

@@ -40,6 +40,11 @@ export default function ServicesFields(): ReactElement {
 
   return (
     <>
+      <Field
+        {...getFieldContent('dataTokenOptions', content.services.fields)}
+        component={Input}
+        name="services[0].dataTokenOptions"
+      />
       {values.metadata.type === 'algorithm' ? (
         <Field
           {...getFieldContent('algorithmPrivacy', content.services.fields)}
@@ -54,11 +59,6 @@ export default function ServicesFields(): ReactElement {
           options={accessTypeOptions}
         />
       )}
-      <Field
-        {...getFieldContent('dataTokenOptions', content.services.fields)}
-        component={Input}
-        name="services[0].dataTokenOptions"
-      />
       <Field
         {...getFieldContent('providerUrl', content.services.fields)}
         component={Input}

src/components/Publish/_constants.tsx

@@ -36,6 +36,7 @@ export const initialValues: FormPublishData = {
   chainId: 1,
   accountId: '',
   metadata: {
+    nft: { name: '', symbol: '', tokenURI: '' },
     type: '',
     name: '',
     author: '',

src/components/Publish/_types.ts

@@ -1,4 +1,5 @@
-import { DataTokenOptions } from '@hooks/usePublish'
+import { DataTokenOptions } from '@utils/datatokens'
+import { NftOptions } from '@utils/nft'
 import { ReactElement } from 'react'
 
 export interface FormPublishService {
@@ -15,6 +16,7 @@ export interface FormPublishData {
   accountId: string
   chainId: number
   metadata: {
+    nft: NftOptions
     type: 'Dataset' | 'Algorithm' | string
     name: string
     description: string