From 94147026c03e761f4e3fe76f17289f70871ff847 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 15 Nov 2021 15:02:13 +0000
Subject: [PATCH] prepare datatoken & NFT display

---
 content/publish/form.json                     |  7 ++++
 src/@hooks/usePublish.ts                      |  7 +---
 src/@utils/nft.ts                             | 15 +++++++++
 .../FormFields/Datatoken/index.module.css     | 22 +++++++++++++
 .../Form/FormFields/Datatoken/index.tsx       | 16 +++++++---
 .../Form/FormFields/Nft/index.module.css      | 18 +++++++++++
 .../@shared/Form/FormFields/Nft/index.tsx     | 32 +++++++++++++++++++
 .../@shared/Form/Input/InputElement.tsx       |  3 ++
 src/components/Publish/Metadata/index.tsx     | 14 +++-----
 src/components/Publish/Pricing/Coin.tsx       |  2 +-
 src/components/Publish/Services/index.tsx     | 10 +++---
 src/components/Publish/_constants.tsx         |  1 +
 src/components/Publish/_types.ts              |  4 ++-
 13 files changed, 124 insertions(+), 27 deletions(-)
 create mode 100644 src/@utils/nft.ts
 create mode 100644 src/components/@shared/Form/FormFields/Nft/index.module.css
 create mode 100644 src/components/@shared/Form/FormFields/Nft/index.tsx

diff --git a/content/publish/form.json b/content/publish/form.json
index a612b9d11..ae15c64cb 100644
--- a/content/publish/form.json
+++ b/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",
diff --git a/src/@hooks/usePublish.ts b/src/@hooks/usePublish.ts
index 3461a5487..56665be8f 100644
--- a/src/@hooks/usePublish.ts
+++ b/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: (
diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts
new file mode 100644
index 000000000..487da3a22
--- /dev/null
+++ b/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
+}
diff --git a/src/components/@shared/Form/FormFields/Datatoken/index.module.css b/src/components/@shared/Form/FormFields/Datatoken/index.module.css
index a2e87d61b..65ccb2414 100644
--- a/src/components/@shared/Form/FormFields/Datatoken/index.module.css
+++ b/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%;
+}
diff --git a/src/components/@shared/Form/FormFields/Datatoken/index.tsx b/src/components/@shared/Form/FormFields/Datatoken/index.tsx
index 470ac71bf..e3355db90 100644
--- a/src/components/@shared/Form/FormFields/Datatoken/index.tsx
+++ b/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>
   )
 }
diff --git a/src/components/@shared/Form/FormFields/Nft/index.module.css b/src/components/@shared/Form/FormFields/Nft/index.module.css
new file mode 100644
index 000000000..ea4eb0fcd
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/@shared/Form/FormFields/Nft/index.tsx b/src/components/@shared/Form/FormFields/Nft/index.tsx
new file mode 100644
index 000000000..97841e6e4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/@shared/Form/Input/InputElement.tsx b/src/components/@shared/Form/Input/InputElement.tsx
index a07744deb..e9415f5d8 100644
--- a/src/components/@shared/Form/Input/InputElement.tsx
+++ b/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':
diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx
index b092f9143..5c012dfc7 100644
--- a/src/components/Publish/Metadata/index.tsx
+++ b/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}
diff --git a/src/components/Publish/Pricing/Coin.tsx b/src/components/Publish/Pricing/Coin.tsx
index 605febf19..2999c8c28 100644
--- a/src/components/Publish/Pricing/Coin.tsx
+++ b/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'
 
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index ec2eb4956..d43cec7e3 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/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}
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 76229e446..1d2aaca78 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -36,6 +36,7 @@ export const initialValues: FormPublishData = {
   chainId: 1,
   accountId: '',
   metadata: {
+    nft: { name: '', symbol: '', tokenURI: '' },
     type: '',
     name: '',
     author: '',
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index e2556613e..79370d295 100644
--- a/src/components/Publish/_types.ts
+++ b/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