Merge pull request #93 from oceanprotocol/feature/publish-feedback

Publish flow changes

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/atoms/Tabs.tsx

@@ -10,14 +10,19 @@ interface TabsItem {
 export default function Tabs({
   items,
   className,
-  handleTabChange
+  handleTabChange,
+  defaultIndex
 }: {
   items: TabsItem[]
   className?: string
   handleTabChange?: (tabName: string) => void
+  defaultIndex?: number
 }): ReactElement {
   return (
-    <ReactTabs className={`${className && className}`}>
+    <ReactTabs
+      className={`${className && className}`}
+      defaultIndex={defaultIndex}
+    >
       <TabList className={styles.tabList}>
         {items.map((item) => (
           <Tab

src/components/molecules/FormFields/Price/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import { useOcean } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
@@ -68,8 +68,9 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, tokensToMint })
   }, [price])
 
-  // Generate new DT name & symbol
+  // Generate new DT name & symbol, but only once automatically
   useEffect(() => {
+    if (!ocean || typeof field?.value?.datatoken?.name !== 'undefined') return
     generateName()
   }, [ocean])
 
@@ -100,7 +101,11 @@ export default function Price(props: InputProps): ReactElement {
 
   return (
     <div className={styles.price}>
-      <Tabs items={tabs} handleTabChange={handleTabChange} />
+      <Tabs
+        items={tabs}
+        handleTabChange={handleTabChange}
+        defaultIndex={field?.value?.type === 'fixed' ? 0 : 1}
+      />
       {debug === true && (
         <pre>
           <code>{JSON.stringify(field.value, null, 2)}</code>

src/components/pages/Publish/Debug.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react'
+import { MetadataPublishForm } from '../../../@types/MetaData'
+import styles from './index.module.css'
+import { transformPublishFormToMetadata } from './utils'
+
+export default function Debug({
+  values
+}: {
+  values: Partial<MetadataPublishForm>
+}): ReactElement {
+  return (
+    <div className={styles.grid}>
+      <div>
+        <h5>Collected Form Values</h5>
+        <pre>
+          <code>{JSON.stringify(values, null, 2)}</code>
+        </pre>
+      </div>
+
+      <div>
+        <h5>Transformed Values</h5>
+        <pre>
+          <code>
+            {JSON.stringify(transformPublishFormToMetadata(values), null, 2)}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,40 @@
+.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;
+  }
+}
+
+.feedback [class*='loaderWrap'] {
+  justify-content: center;
+  text-align: center;
+}
+
+.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/PublishForm.tsx

@@ -5,17 +5,11 @@ import { useFormikContext, Form, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
-import Loader from '../../atoms/Loader'
-import { Persist } from '../../atoms/FormikPersist'
 
 export default function PublishForm({
-  content,
-  publishStepText,
-  isLoading
+  content
 }: {
   content: FormContent
-  publishStepText?: string
-  isLoading: boolean
 }): ReactElement {
   const { ocean, account } = useOcean()
   const {
@@ -27,7 +21,6 @@ export default function PublishForm({
     resetForm,
     initialValues
   } = useFormikContext()
-  const formName = 'ocean-publish-form'
 
   // reset form validation on every mount
   useEffect(() => {
@@ -52,30 +45,22 @@ export default function PublishForm({
       {content.data.map((field: FormFieldProps) => (
         <Field key={field.name} {...field} component={Input} />
       ))}
-      {isLoading ? (
-        <Loader message={publishStepText} />
-      ) : (
-        <footer className={styles.actions}>
-          <Button
-            style="primary"
-            type="submit"
-            disabled={!ocean || !account || !isValid || status === 'empty'}
-          >
-            Submit
-          </Button>
 
-          {status !== 'empty' && (
-            <Button
-              style="text"
-              size="small"
-              onClick={resetFormAndClearStorage}
-            >
-              Reset Form
-            </Button>
-          )}
-        </footer>
-      )}
-      <Persist name={formName} ignoreFields={['isSubmitting']} />
+      <footer className={styles.actions}>
+        <Button
+          style="primary"
+          type="submit"
+          disabled={!ocean || !account || !isValid || status === 'empty'}
+        >
+          Submit
+        </Button>
+
+        {status !== 'empty' && (
+          <Button style="text" size="small" onClick={resetFormAndClearStorage}>
+            Reset Form
+          </Button>
+        )}
+      </footer>
     </Form>
   )
 }

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.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'
@@ -10,9 +8,14 @@ import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
-import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
+import { MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { Logger, Metadata } from '@oceanprotocol/lib'
+import { Persist } from '../../atoms/FormikPersist'
+import Debug from './Debug'
+import Feedback from './Feedback'
+
+const formName = 'ocean-publish-form'
 
 export default function PublishPage({
   content
@@ -21,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>,
@@ -36,80 +44,70 @@ export default function PublishPage({
 
       const ddo = await publish(
         (metadata as unknown) as Metadata,
-        {
-          ...price,
-          swapFee: `${price.swapFee}`
-        },
+        { ...price, swapFee: `${price.swapFee}` },
         serviceType,
         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)
     }
   }
 
   return (
-    <article className={styles.grid}>
-      <Formik
-        initialValues={initialValues}
-        initialStatus="empty"
-        validationSchema={validationSchema}
-        onSubmit={async (values, { setSubmitting, resetForm }) => {
-          await handleSubmit(values, resetForm)
-          setSubmitting(false)
-        }}
-      >
-        {({ values }) => (
-          <>
-            <PublishForm
-              content={content.form}
-              isLoading={isLoading}
+    <Formik
+      initialValues={initialValues}
+      initialStatus="empty"
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting, resetForm }) => {
+        // move user's focus to top of screen
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+        // kick off publishing
+        await handleSubmit(values, resetForm)
+        setSubmitting(false)
+      }}
+    >
+      {({ values }) => (
+        <>
+          <Persist name={formName} ignoreFields={['isSubmitting']} />
+
+          {hasFeedback ? (
+            <Feedback
+              error={error}
+              success={success}
               publishStepText={publishStepText}
+              did={did}
+              setError={setError}
             />
-            <aside>
-              <div className={styles.sticky}>
-                <Preview values={values} />
-                <Web3Feedback />
-              </div>
-            </aside>
-
-            {debug === true && (
-              <>
-                <div>
-                  <h5>Collected Form Values</h5>
-                  <pre>
-                    <code>{JSON.stringify(values, null, 2)}</code>
-                  </pre>
+          ) : (
+            <article className={styles.grid}>
+              <PublishForm content={content.form} />
+              <aside>
+                <div className={styles.sticky}>
+                  <Preview values={values} />
+                  <Web3Feedback />
                 </div>
+              </aside>
+            </article>
+          )}
 
-                <div>
-                  <h5>Transformed Values</h5>
-                  <pre>
-                    <code>
-                      {JSON.stringify(
-                        transformPublishFormToMetadata(values),
-                        null,
-                        2
-                      )}
-                    </code>
-                  </pre>
-                </div>
-              </>
-            )}
-          </>
-        )}
-      </Formik>
-    </article>
+          {debug === true && <Debug values={values} />}
+        </>
+      )}
+    </Formik>
   )
 }

tests/unit/components/PublishForm.test.tsx

@@ -11,9 +11,7 @@ import content from '../../../content/pages/publish.json'
 
 describe('PublishForm', () => {
   it('renders without crashing', async () => {
-    const { container } = render(
-      <PublishForm content={content.form} isLoading={null} />
-    )
+    const { container } = render(<PublishForm content={content.form} />)
     expect(container.firstChild).toBeInTheDocument()
   })