refactor

src/components/atoms/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, FormEvent } from 'react'
 import styles from './Alert.module.css'
 import Button from './Button'
 
@@ -11,7 +11,10 @@ export default function Alert({
   title?: string
   text: string
   state: 'error' | 'warning' | 'info' | 'success'
-  action?: { name: string; handleAction: () => void }
+  action?: {
+    name: string
+    handleAction: (e: FormEvent<HTMLButtonElement>) => void
+  }
 }): ReactElement {
   return (
     <div className={`${styles.alert} ${styles[state]}`}>

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

@@ -12,6 +12,7 @@ import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 export default function Dynamic({
   datatokenOptions,
@@ -22,7 +23,10 @@ export default function Dynamic({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
+
+  // Connect with form
   const { values } = useFormikContext()
+  const { price, weightOnDataToken } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(networkId)
@@ -36,19 +40,12 @@ export default function Dynamic({
       setError(`No account connected. Please connect your Web3 wallet.`)
     } else if (!correctNetwork) {
       setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
-    } else if (Number(balance.ocean) < Number(values.price)) {
+    } else if (Number(balance.ocean) < Number(price)) {
-      setError(`Insufficient balance. You need at least ${values.price} OCEAN`)
+      setError(`Insufficient balance. You need at least ${price} OCEAN`)
     } else {
       setError(undefined)
     }
-  }, [
+  }, [price, networkId, account, balance, correctNetwork, desiredNetworkName])
-    values.price,
-    networkId,
-    account,
-    balance,
-    correctNetwork,
-    desiredNetworkName
-  ])
 
   // refetch balance periodically
   useEffect(() => {
@@ -86,12 +83,12 @@ export default function Dynamic({
         <Coin
           name="price"
           datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-          weight={`${100 - Number(Number(values.weightOnDataToken) * 10)}%`}
+          weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
         />
         <Coin
           name="dtAmount"
           datatokenOptions={datatokenOptions}
-          weight={`${Number(values.weightOnDataToken) * 10}%`}
+          weight={`${Number(weightOnDataToken) * 10}%`}
           readOnly
         />
       </div>

src/components/organisms/AssetContent/FormPricing/Fees.module.css

@@ -1,7 +1,7 @@
 .fees {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   margin-left: -2rem;
   margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);

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

@@ -38,20 +38,23 @@ const query = graphql`
   }
 `
 
-export default function Price(): ReactElement {
+export default function FormPricing(): ReactElement {
   const { debug } = useUserPreferences()
+  // Get content
   const data = useStaticQuery(query)
   const content = data.content.edges[0].node.childPagesJson.price
 
+  // Connect with form
   const { values, setFieldValue } = useFormikContext()
   const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
+  // Switch type value upon tab change
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     setFieldValue('type', type)
   }
 
-  // Always update everything when price changes
+  // Always update everything when price value changes
   useEffect(() => {
     const dtAmount = Number(price) * Number(weightOnDataToken)
     setFieldValue('dtAmount', dtAmount)

src/components/organisms/AssetContent/Pricing.tsx

@@ -1,13 +1,12 @@
-import React, { ReactElement, useState } from 'react'
+import React, { FormEvent, ReactElement, useState } from 'react'
-import { Field, FieldInputProps, Formik } from 'formik'
+import { Formik } from 'formik'
-import Input from '../../atoms/Input'
 import { initialValues, validationSchema } from '../../../models/FormPricing'
 import { DDO } 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 Price from './Price'
+import FormPricing from './FormPricing'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const { createPricing } = usePricing(ddo)
@@ -24,28 +23,33 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <div className={styles.pricing}>
-      {showPricing ? (
+      <Formik
-        <Formik
+        initialValues={initialValues}
-          initialValues={initialValues}
+        validationSchema={validationSchema}
-          validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting }) => {
-          onSubmit={async (values, { setSubmitting, resetForm }) => {
+          await handleCreatePricing(values)
-            await handleCreatePricing(values)
+          setSubmitting(false)
-            setSubmitting(false)
+        }}
-          }}
+      >
-        >
+        {() =>
-          {(props) => <Price name="price" {...props} />}
+          showPricing ? (
-        </Formik>
+            <FormPricing />
-      ) : (
+          ) : (
-        <Alert
+            <Alert
-          state="info"
+              state="info"
-          title="No Price Created"
+              title="No Price Created"
-          text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it."
+              text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!"
-          action={{
+              action={{
-            name: 'Create Pricing',
+                name: 'Create Pricing',
-            handleAction: () => setShowPricing(true)
+                handleAction: (e: FormEvent<HTMLButtonElement>) => {
-          }}
+                  e.preventDefault()
-        />
+                  setShowPricing(true)
-      )}
+                }
+              }}
+            />
+          )
+        }
+      </Formik>
     </div>
   )
 }

src/components/pages/Publish/FormPublish.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement, useEffect, FormEvent } from 'react'
-import styles from './PublishForm.module.css'
+import styles from './FormPublish.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import { useFormikContext, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 
-export default function PublishForm({
+export default function FormPublish({
   content
 }: {
   content: FormContent

src/components/pages/Publish/index.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { usePublish, usePricing } from '@oceanprotocol/react'
+import { usePublish } from '@oceanprotocol/react'
 import styles from './index.module.css'
-import PublishForm from './PublishForm'
+import FormPublish from './FormPublish'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
@@ -101,7 +101,7 @@ export default function PublishPage({
             />
           ) : (
             <article className={styles.grid}>
-              <PublishForm content={content.form} />
+              <FormPublish content={content.form} />
               <aside>
                 <div className={styles.sticky}>
                   <Preview values={values} />

tests/unit/components/PublishForm.test.tsx

@@ -5,7 +5,7 @@ import {
   MetadataMarket,
   MetadataPublishForm
 } from '../../../src/@types/MetaData'
-import PublishForm from '../../../src/components/pages/Publish/PublishForm'
+import PublishForm from '../../../src/components/pages/Publish/FormPublish'
 import publishFormData from '../__fixtures__/testFormData'
 import content from '../../../content/pages/publish.json'