new publish feedback UX

content/pages/publish.json

@@ -1,5 +1,5 @@
 {
-  "title": "Publish Data",
+  "title": "Publish",
   "description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.",
   "form": {
     "title": "Publish",

package-lock.json

@@ -12911,6 +12911,11 @@
       "integrity": "sha512-yfqzAi1GFxK6EoJIZKgxqJyK6j/OjEFEUi2qkNThD/kUhoCFSG1izq31B5xuxzbJBGw9/67uPtkPMYAzWL7L7Q==",
       "dev": true
     },
+    "dom-confetti": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-confetti/-/dom-confetti-0.2.2.tgz",
+      "integrity": "sha512-+UVH9Y85qmpTnbmFURwLWjqLIykyIrsNSRkPX/eFlBuOURz9RDX8JoZHnajZHyFuCV0w/K3+tZK0ztfoTw6ejg=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "decimal.js": "^10.2.1",
+    "dom-confetti": "^0.2.2",
     "dotenv": "^8.2.0",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",

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

@@ -0,0 +1,35 @@
+.feedback {
+  width: 100%;
+  min-height: 40vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.box {
+  composes: box from '../../atoms/Box.module.css';
+  width: 100%;
+}
+
+.feedback h3 {
+  font-size: var(--font-size-large);
+  text-align: center;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.feedback h3 + div {
+  text-align: left;
+}
+
+@media (min-width: 40rem) {
+  .feedback {
+    max-width: 30rem;
+    margin: 0 auto;
+  }
+}
+
+.action {
+  margin-top: calc(var(--spacer) / 1.5);
+}

src/components/pages/Publish/Feedback.tsx

@@ -0,0 +1,45 @@
+import Alert from '../../atoms/Alert'
+import Success from './Success'
+import Button from '../../atoms/Button'
+import Loader from '../../atoms/Loader'
+import React, { ReactElement } from 'react'
+import styles from './Feedback.module.css'
+
+export default function Feedback({
+  error,
+  success,
+  did,
+  publishStepText,
+  setError
+}: {
+  error: string
+  success: string
+  did: string
+  publishStepText: string
+  setError: (error: string) => void
+}): ReactElement {
+  return (
+    <div className={styles.feedback}>
+      <div className={styles.box}>
+        <h3>Publishing Data Set</h3>
+        {error ? (
+          <>
+            <Alert text={error} state="error" />
+            <Button
+              style="primary"
+              size="small"
+              className={styles.action}
+              onClick={() => setError(undefined)}
+            >
+              Try Again
+            </Button>
+          </>
+        ) : success ? (
+          <Success success={success} did={did} />
+        ) : (
+          <Loader message={publishStepText} />
+        )}
+      </div>
+    </div>
+  )
+}

src/components/pages/Publish/Success.module.css

@@ -0,0 +1,3 @@
+.action {
+  margin-top: calc(var(--spacer) / 1.5);
+}

src/components/pages/Publish/Success.tsx

@@ -0,0 +1,56 @@
+import Alert from '../../atoms/Alert'
+import Button from '../../atoms/Button'
+import React, { ReactElement, useEffect } from 'react'
+import { confetti } from 'dom-confetti'
+import styles from './Success.module.css'
+
+const confettiConfig = {
+  angle: 90,
+  spread: 360,
+  startVelocity: 40,
+  elementCount: 70,
+  dragFriction: 0.12,
+  duration: 3000,
+  stagger: 3,
+  width: '10px',
+  height: '10px',
+  perspective: '500px',
+  colors: [
+    'var(--brand-pink)',
+    'var(--brand-purple)',
+    'var(--brand-violet)',
+    'var(--brand-grey-light)',
+    'var(--brand-grey-lighter)'
+  ]
+}
+
+export default function Success({
+  success,
+  did
+}: {
+  success: string
+  did: string
+}): ReactElement {
+  // Have some confetti upon success
+  useEffect(() => {
+    if (!success || typeof window === 'undefined') return
+
+    const startElement: HTMLElement = document.querySelector('a[data-confetti]')
+    confetti(startElement, confettiConfig)
+  }, [success])
+
+  return (
+    <>
+      <Alert text={success} state="success" />
+      <Button
+        style="primary"
+        size="small"
+        href={`/asset/${did}`}
+        className={styles.action}
+        data-confetti
+      >
+        Go to data set →
+      </Button>
+    </>
+  )
+}

src/components/pages/Publish/index.module.css

@@ -15,11 +15,3 @@
     top: calc(var(--spacer) / 2);
   }
 }
-
-.feedback {
-  width: 100%;
-  min-height: 60vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

src/components/pages/Publish/index.tsx

@@ -1,6 +1,4 @@
-import React, { ReactElement } from 'react'
-import { useNavigate } from '@reach/router'
-import { toast } from 'react-toastify'
+import React, { ReactElement, useState } from 'react'
 import { Formik } from 'formik'
 import { usePublish } from '@oceanprotocol/react'
 import styles from './index.module.css'
@@ -13,9 +11,9 @@ import Preview from './Preview'
 import { MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { Logger, Metadata } from '@oceanprotocol/lib'
-import Loader from '../../atoms/Loader'
 import { Persist } from '../../atoms/FormikPersist'
 import Debug from './Debug'
+import Feedback from './Feedback'
 
 const formName = 'ocean-publish-form'
 
@@ -26,7 +24,12 @@ export default function PublishPage({
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { publish, publishError, isLoading, publishStepText } = usePublish()
-  const navigate = useNavigate()
+
+  const [success, setSuccess] = useState<string>()
+  const [error, setError] = useState<string>()
+  const [did, setDid] = useState<string>()
+
+  const hasFeedback = isLoading || error || success
 
   async function handleSubmit(
     values: Partial<MetadataPublishForm>,
@@ -49,18 +52,22 @@ export default function PublishPage({
         price.datatoken
       )
 
+      // Publish failed
       if (publishError) {
-        toast.error(publishError) && console.error(publishError)
-        return null
+        setError(publishError)
+        Logger.error(publishError)
+        return
       }
 
-      // User feedback and redirect to new asset detail page
-      ddo && toast.success('Asset created successfully.') && resetForm()
-      // Go to new asset detail page
-      navigate(`/asset/${ddo.id}`)
+      // Publish succeeded
+      if (ddo) {
+        setDid(ddo.id)
+        setSuccess('🎉 Successfully published your data set. 🎉')
+        resetForm()
+      }
     } catch (error) {
-      console.error(error.message)
-      toast.error(error.message)
+      setError(error.message)
+      Logger.error(error.message)
     }
   }
 
@@ -78,10 +85,14 @@ export default function PublishPage({
         <>
           <Persist name={formName} ignoreFields={['isSubmitting']} />
 
-          {isLoading ? (
-            <div className={styles.feedback}>
-              <Loader message={publishStepText} />
-            </div>
+          {hasFeedback ? (
+            <Feedback
+              error={error}
+              success={success}
+              publishStepText={publishStepText}
+              did={did}
+              setError={setError}
+            />
           ) : (
             <article className={styles.grid}>
               <PublishForm content={content.form} />