more UI elements and copy

src/components/Publish/Submission/Feedback.module.css

@@ -0,0 +1,54 @@
+.feedback {
+}
+
+.feedback li {
+  display: inline-block;
+  margin-bottom: var(--spacer);
+  counter-increment: list-number;
+}
+
+/* inject the numbers */
+.feedback li:before {
+  content: counter(list-number);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+  margin-right: calc(var(--spacer) / 4);
+  font-weight: var(--font-weight-bold);
+}
+
+/* TODO: needs to have some spinner showing activity */
+.feedback .active:before {
+  color: var(--background-content);
+  background: var(--font-color-heading);
+  border-color: transparent;
+}
+
+.feedback .success:before {
+  content: '✓';
+  color: var(--brand-white);
+  background: var(--brand-alert-green);
+  border-color: transparent;
+}
+
+.feedback .error:before {
+  content: '✕';
+  color: var(--brand-white);
+  background: var(--brand-alert-red);
+  border-color: transparent;
+}
+
+.title {
+  font-size: var(--font-size-large);
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.description {
+  margin-left: calc(var(--spacer) * 1.3);
+  color: var(--color-secondary);
+}

src/components/Publish/Submission/Feedback.tsx

@@ -1,18 +1,17 @@
-import { ListItem } from '@shared/atoms/Lists'
 import { useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import { FormPublishData } from '../_types'
+import styles from './Feedback.module.css'
 
 export function Feedback(): ReactElement {
   const { values } = useFormikContext<FormPublishData>()
 
-  const items = Object.entries(values.feedback).map(([key, value], index) => {
-    return (
-      <ListItem ol key={index}>
-        {value.name}
-      </ListItem>
-    )
-  })
+  const items = Object.entries(values.feedback).map(([key, value], index) => (
+    <li key={index} className={styles[value.status]}>
+      <h3 className={styles.title}>{value.name}</h3>
+      <p className={styles.description}>{value.description}</p>
+    </li>
+  ))
 
-  return <ol>{items}</ol>
+  return <ol className={styles.feedback}>{items}</ol>
 }

src/components/Publish/_constants.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { allowDynamicPricing, allowFixedPricing } from '../../../app.config.js'
-import { FormPublishData, StepContent } from './_types'
+import { FormPublishData, PublishFeedback, StepContent } from './_types'
 import content from '../../../content/publish/form.json'
 import PricingFields from './Pricing'
 import MetadataFields from './Metadata'
@@ -120,3 +120,24 @@ export const algorithmContainerPresets: MetadataAlgorithmContainer[] = [
     checksum: ''
   }
 ]
+
+export const initialPublishFeedback: PublishFeedback = {
+  1: {
+    name: 'Create Tokens & Pricing',
+    description:
+      'The Data NFT representing your asset, the Datatokens defining access to it, and the pricing schema are all created in one transaction.',
+    status: 'pending'
+  },
+  2: {
+    name: 'Construct & Encrypt DDO',
+    description:
+      'The entered metadata and services are made into a DDO, where the file URLs are encrypted, and afterwards the whole DDO will be encrypted for storage on-chain. Indexers like Aquarius can decrypt the DDO for displaying purposes, the file URLs can only be decrypted by a user exchanging datatokens.',
+    status: 'pending'
+  },
+  3: {
+    name: 'Publish DDO',
+    description:
+      'The encrypted DDO is stored on-chain as part of the Data NFT.',
+    status: 'pending'
+  }
+}

src/components/Publish/_types.ts

@@ -55,7 +55,8 @@ export interface StepContent {
 export interface PublishFeedback {
   [key: number]: {
     name: string
-    status: 'success' | 'error' | 'pending'
+    description: string
+    status: 'success' | 'error' | 'pending' | 'active'
     message?: string
   }
 }

src/components/Publish/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState, useRef } from 'react'
 import { Form, Formik } from 'formik'
-import { initialValues } from './_constants'
+import { initialPublishFeedback, initialValues } from './_constants'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import { useWeb3 } from '@context/Web3'
 import { createTokensAndPricing, transformPublishFormToDdo } from './_utils'
@@ -37,20 +37,9 @@ export default function PublishPage({
   const nftFactory = useNftFactory()
   const newCancelToken = useCancelToken()
 
-  const [feedback, setFeedback] = useState<PublishFeedback>({
-    1: {
-      name: 'Create Tokens & Pricing',
-      status: 'pending'
-    },
-    2: {
-      name: 'Encrypt DDO',
-      status: 'pending'
-    },
-    3: {
-      name: 'Publish DDO',
-      status: 'pending'
-    }
-  })
+  const [feedback, setFeedback] = useState<PublishFeedback>(
+    initialPublishFeedback
+  )
 
   async function handleSubmit(values: FormPublishData) {
     let _erc721Address, _datatokenAddress, _ddo, _encryptedDdo
@@ -59,6 +48,14 @@ export default function PublishPage({
     // 1. Create NFT & datatokens & create pricing schema
     // --------------------------------------------------
     try {
+      setFeedback({
+        ...feedback,
+        1: {
+          ...feedback[1],
+          status: 'active'
+        }
+      })
+
       const config = getOceanConfig(chainId)
       console.log('config', config)
 
@@ -98,6 +95,14 @@ export default function PublishPage({
     // 2. Construct and encypt DDO
     // --------------------------------------------------
     try {
+      setFeedback({
+        ...feedback,
+        2: {
+          ...feedback[2],
+          status: 'active'
+        }
+      })
+
       const ddo = await transformPublishFormToDdo(
         values,
         _datatokenAddress,
@@ -147,6 +152,14 @@ export default function PublishPage({
     // 3. Publish DDO
     // --------------------------------------------------
     try {
+      setFeedback({
+        ...feedback,
+        3: {
+          ...feedback[3],
+          status: 'active'
+        }
+      })
+
       // 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
       const metadataHash = getHash(JSON.stringify(_ddo))