submit view, success view, form submit

src/components/atoms/SuccessConfetti.tsx

@@ -28,7 +28,7 @@ export default function SuccessConfetti({
   action
 }: {
   success: string
-  action: ReactNode
+  action?: ReactNode
 }): ReactElement {
   // Have some confetti upon success
   useEffect(() => {

src/components/organisms/AssetContent/FormPricing/index.tsx

@@ -52,7 +52,7 @@ export default function FormPricing({
   const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
-  const { values, setFieldValue } = useFormikContext()
+  const { values, setFieldValue, submitForm } = useFormikContext()
   const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
   // Switch type value upon tab change
@@ -87,7 +87,7 @@ export default function FormPricing({
       />
 
       <div className={styles.actions}>
-        <Button style="primary" type="submit">
+        <Button style="primary" onClick={() => submitForm()}>
           Create Pricing
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>

src/components/organisms/AssetContent/Pricing.module.css

@@ -1,3 +1,9 @@
 .pricing {
   margin-bottom: var(--spacer);
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }

src/components/organisms/AssetContent/Pricing.tsx

@@ -1,24 +1,50 @@
 import React, { FormEvent, ReactElement, useState } from 'react'
 import { Formik } from 'formik'
 import { initialValues, validationSchema } from '../../../models/FormPricing'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
 import Alert from '../../atoms/Alert'
 import styles from './Pricing.module.css'
 import FormPricing from './FormPricing'
+import Loader from '../../atoms/Loader'
+import SuccessConfetti from '../../atoms/SuccessConfetti'
+import { toast } from 'react-toastify'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddo)
+  const {
+    createPricing,
+    pricingIsLoading,
+    pricingError,
+    pricingStepText
+  } = usePricing(ddo)
   const [showPricing, setShowPricing] = useState(false)
+  const [success, setSuccess] = useState<string>()
+
+  const hasFeedback = pricingIsLoading || success
 
   async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
+    try {
       const priceOptions = {
         ...values,
         // swapFee is tricky: to get 0.1% you need to send 0.001 as value
         swapFee: `${values.swapFee / 100}`
       }
       const tx = await createPricing(priceOptions)
+
+      // Pricing failed
+      if (!tx || pricingError) {
+        toast.error(pricingError)
+        Logger.error(pricingError)
+        return
+      }
+
+      // Pricing succeeded
+      tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+    } catch (error) {
+      toast.error(error.message)
+      Logger.error(error.message)
+    }
   }
 
   return (
@@ -27,12 +53,22 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={async (values, { setSubmitting }) => {
+          // move user's focus to top of screen
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+
+          // Kick off price creation
           await handleCreatePricing(values)
           setSubmitting(false)
         }}
       >
         {() =>
-          showPricing ? (
+          hasFeedback ? (
+            success ? (
+              <SuccessConfetti success={success} />
+            ) : (
+              <Loader message={pricingStepText} />
+            )
+          ) : showPricing ? (
             <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (
             <Alert

src/components/organisms/AssetContent/index.tsx

@@ -27,7 +27,7 @@ export default function AssetContent({
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
-        {/* TODO: check for ddo creator */}
+        {/* TODO: check for ddo creator & no price */}
         <Pricing ddo={ddo} />
 
         <aside className={styles.meta}>