prototype

src/components/molecules/FormFields/Datatoken/index.module.css

@@ -0,0 +1,5 @@
+.datatoken {
+  border: 1px solid var(--brand-grey-lighter);
+  padding: calc(var(--spacer) / 3);
+  border-radius: var(--border-radius);
+}

src/components/pages/Publish/Feedback.tsx

@@ -5,18 +5,21 @@ import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
 import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { DDO } from '@oceanprotocol/lib'
+import Pricing from './Pricing'
 
 export default function Feedback({
   error,
   success,
   ddo,
   publishStepText,
+  isPricing,
   setError
 }: {
   error: string
   success: string
   ddo: DDO
   publishStepText: string
+  isPricing: boolean
   setError: (error: string) => void
 }): ReactElement {
   const SuccessAction = () => (
@@ -46,6 +49,8 @@ export default function Feedback({
               Try Again
             </Button>
           </>
+        ) : isPricing ? (
+          <Pricing ddo={ddo} />
         ) : success ? (
           <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (

src/components/pages/Publish/Pricing.tsx

@@ -1,21 +1,20 @@
 import React, { ReactElement } from 'react'
 import { Field, FieldInputProps, Formik } from 'formik'
 import Input from '../../atoms/Input'
-import { initialValues, validationSchema } from 'models/FormPricing'
+import { initialValues, validationSchema } from '../../../models/FormPricing'
 import { DDO } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
+import ddoFixture from '../../../../tests/unit/__fixtures__/ddo'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddo)
+  const { createPricing } = usePricing(ddoFixture)
 
   async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
     const priceOptions = {
-      price: values.price,
-      tokensToMint: values.tokensToMint,
-      type: values.type,
-      weightOnDataToken: values.weightOnDataToken,
-      swapFee: values.swapFee
+      ...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)
   }

src/components/pages/Publish/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { usePublish } from '@oceanprotocol/react'
+import { usePublish, usePricing } from '@oceanprotocol/react'
 import styles from './index.module.css'
 import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -27,6 +27,7 @@ export default function PublishPage({
 
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
+  const [isPricing, setIsPricing] = useState<boolean>()
   const [ddo, setDdo] = useState<DDO>()
 
   const hasFeedback = isLoading || error || success
@@ -59,12 +60,16 @@ export default function PublishPage({
         return
       }
 
+      if (!ddo) return
+
       // Publish succeeded
-      if (ddo) {
-        setDdo(ddo)
-        setSuccess('🎉 Successfully published your data set. 🎉')
-        resetForm()
-      }
+      setDdo(ddo)
+      resetForm()
+
+      // Create pricing
+      setIsPricing(true)
+
+      // setSuccess('🎉 Successfully published your data set. 🎉')
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -94,6 +99,7 @@ export default function PublishPage({
               success={success}
               publishStepText={publishStepText}
               ddo={ddo}
+              isPricing={isPricing}
               setError={setError}
             />
           ) : (