more styling, button disabling, hack in isContinueDisabled

* closes #978

content/publish/feedback.json

@@ -0,0 +1,20 @@
+{
+  "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",
+    "txCount": 1
+  },
+  "2": {
+    "name": "Construct & Encrypt DDO",
+    "description": "Entered metadata is transformed into a structured document (DDO) where the file URLs, and the whole DDO itself are encrypted.",
+    "status": "pending",
+    "txCount": 0
+  },
+  "3": {
+    "name": "Publish DDO",
+    "description": "The encrypted DDO is stored on-chain as part of the Data NFT. Indexers like Aquarius can decrypt the DDO for displaying purposes, but the file URLs can only be decrypted by exchanging the respective datatokens for this asset.",
+    "status": "pending",
+    "txCount": 1
+  }
+}

src/components/Publish/Actions/index.tsx

@@ -10,8 +10,13 @@ export default function Actions({
 }: {
   scrollToRef: RefObject<any>
 }): ReactElement {
-  const { values, isValid, setFieldValue }: FormikContextType<FormPublishData> =
+  const {
-    useFormikContext()
+    values,
+    errors,
+    isValid,
+    isSubmitting,
+    setFieldValue
+  }: FormikContextType<FormPublishData> = useFormikContext()
 
   function handleNext(e: FormEvent) {
     e.preventDefault()
@@ -25,21 +30,32 @@ export default function Actions({
     scrollToRef.current.scrollIntoView()
   }
 
+  const isContinueDisabled =
+    (values.user.stepCurrent === 1 && errors.metadata !== undefined) ||
+    (values.user.stepCurrent === 2 && errors.services !== undefined) ||
+    (values.user.stepCurrent === 3 && errors.pricing !== undefined)
+
   return (
     <footer className={styles.actions}>
       {values.user.stepCurrent > 1 && (
-        <Button onClick={handlePrevious}>Back</Button>
+        <Button onClick={handlePrevious} disabled={isSubmitting}>
+          Back
+        </Button>
       )}
 
       {values.user.stepCurrent < wizardSteps.length ? (
-        <Button style="primary" onClick={handleNext}>
+        <Button
+          style="primary"
+          onClick={handleNext}
+          disabled={isContinueDisabled}
+        >
           Continue
         </Button>
       ) : (
         <Button
           type="submit"
           style="primary"
-          disabled={values.user.accountId === ''}
+          disabled={values.user.accountId === '' || !isValid || isSubmitting}
         >
           Submit
         </Button>

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

@@ -2,6 +2,7 @@
   padding: 0;
   margin: 0 auto;
   max-width: 40rem;
+  padding-top: var(--spacer);
 }
 
 .feedback li {
@@ -13,7 +14,7 @@
 }
 
 .feedback li:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
 /* inject the numbers */
@@ -23,8 +24,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.4rem;
+  width: 1.5rem;
-  height: 1.4rem;
+  height: 1.5rem;
   border-radius: 50%;
   border: 2px solid var(--border-color);
   margin-right: calc(var(--spacer) / 4);

src/components/Publish/Submission/index.tsx

@@ -9,8 +9,6 @@ export default function Submission(): ReactElement {
 
   return (
     <div className={styles.submission}>
-      <h3>Submission</h3>
-
       <Feedback />
     </div>
   )

src/components/Publish/_constants.tsx

@@ -8,6 +8,7 @@ import ServicesFields from './Services'
 import Preview from './Preview'
 import Submission from './Submission'
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
+import contentFeedback from '../../../content/publish/feedback.json'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -121,26 +122,4 @@ export const algorithmContainerPresets: MetadataAlgorithmContainer[] = [
   }
 ]
 
-export const initialPublishFeedback: PublishFeedback = {
+export const initialPublishFeedback: PublishFeedback = contentFeedback
-  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',
-    txCount: 1
-  },
-  2: {
-    name: 'Construct & Encrypt DDO',
-    description:
-      'The file URLs are encrypted, and the whole DDO is encrypted too.',
-    status: 'pending',
-    txCount: 0
-  },
-  3: {
-    name: 'Publish DDO',
-    description:
-      'The encrypted DDO is stored on-chain as part of the Data NFT. Indexers like Aquarius can decrypt the DDO for displaying purposes, but the file URLs can only be decrypted by exchanging the respective datatokens for this asset.',
-    status: 'pending',
-    txCount: 1
-  }
-}

src/components/Publish/_types.ts

@@ -53,10 +53,10 @@ export interface StepContent {
 }
 
 export interface PublishFeedback {
-  [key: number]: {
+  [key: string]: {
     name: string
     description: string
-    status: 'success' | 'error' | 'pending' | 'active'
+    status: 'success' | 'error' | 'pending' | 'active' | string
     txCount: number
     message?: string
     txHash?: string

src/components/Publish/index.tsx

@@ -62,8 +62,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
+        '1': {
-          ...prevState[1],
+          ...prevState['1'],
           status: 'active',
           txCount: values.pricing.type === 'dynamic' ? 2 : 1
         }
@@ -92,8 +92,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
+        '1': {
-          ...prevState[1],
+          ...prevState['1'],
           status: isSuccess ? 'success' : 'error',
           txHash
         }
@@ -102,8 +102,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
+        '1': {
-          ...prevState[1],
+          ...prevState['1'],
           status: 'error',
           message: error.message
         }
@@ -116,8 +116,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
+        '2': {
-          ...prevState[2],
+          ...prevState['2'],
           status: _datatokenAddress && _erc721Address ? 'active' : 'error'
         }
       }))
@@ -152,8 +152,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
+        '2': {
-          ...prevState[2],
+          ...prevState['2'],
           status: encryptedDdo ? 'success' : 'error'
         }
       }))
@@ -161,8 +161,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
+        '2': {
-          ...prevState[2],
+          ...prevState['2'],
           status: 'error',
           message: error.message
         }
@@ -175,8 +175,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
+        '3': {
-          ...prevState[3],
+          ...prevState['3'],
           status: _ddo && _encryptedDdo ? 'active' : 'error'
         }
       }))
@@ -208,8 +208,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
+        '3': {
-          ...prevState[3],
+          ...prevState['3'],
           status: res ? 'success' : 'error',
           txHash
         }
@@ -218,8 +218,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
+        '3': {
-          ...prevState[3],
+          ...prevState['3'],
           status: 'error',
           message: error.message
         }