style & layout tweaks

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

@@ -0,0 +1,8 @@
+.feedback {
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -1,4 +1,4 @@
-import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
+import { useOcean, usePricing } from '@oceanprotocol/react'
 import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../../atoms/Tooltip'
 import styles from './Fees.module.css'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import Input from '../../../../atoms/Input'
 import Error from './Error'
 

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

@@ -1,8 +1,3 @@
-.price {
-  margin-top: -2rem;
-  margin-bottom: 0;
-}
-
 .content {
   padding: 0;
 }

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

@@ -48,7 +48,7 @@ export default function FormPricing({
   ]
 
   return (
-    <div className={styles.price}>
+    <>
       <Tabs
         items={tabs}
         handleTabChange={handleTabChange}
@@ -69,6 +69,6 @@ export default function FormPricing({
           <code>{JSON.stringify(values, null, 2)}</code>
         </pre>
       )}
-    </div>
+    </>
   )
 }

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

@@ -1,16 +1,11 @@
 .pricing {
-  margin-bottom: var(--spacer);
+  composes: box from '../../../atoms/Box.module.css';
+  padding: 0;
   padding-bottom: var(--spacer);
-  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-top: var(--spacer);
-  margin-left: -2rem;
-  margin-right: -2rem;
 }
 
-.feedback {
+.pricing [class*='alert'] {
-  width: 100%;
+  margin: var(--spacer);
-  min-height: 20vh;
+  margin-bottom: 0;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
 }

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

@@ -104,27 +104,25 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
           setSubmitting(false)
         }}
       >
-        {() =>
+        {hasFeedback ? (
-          hasFeedback ? (
+          <Feedback success={success} pricingStepText={pricingStepText} />
-            <Feedback success={success} pricingStepText={pricingStepText} />
+        ) : showPricing ? (
-          ) : showPricing ? (
+          <FormPricing
-            <FormPricing
+            ddo={ddo}
-              ddo={ddo}
+            setShowPricing={setShowPricing}
-              setShowPricing={setShowPricing}
+            content={content}
-              content={content}
+          />
-            />
+        ) : (
-          ) : (
+          <Alert
-            <Alert
+            state="info"
-              state="info"
+            title={content.empty.title}
-              title={content.empty.title}
+            text={content.empty.info}
-              text={content.empty.info}
+            action={{
-              action={{
+              name: content.empty.action,
-                name: content.empty.action,
+              handleAction: handleShowPricingForm
-                handleAction: handleShowPricingForm
+            }}
-              }}
+          />
-            />
+        )}
-          )
-        }
       </Formik>
     </div>
   )

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

@@ -1,7 +1,3 @@
-.pricing {
-  max-width: 40rem;
-}
-
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);
@@ -9,6 +5,10 @@
   margin-top: -1.5rem;
 }
 
+.grid > div {
+  overflow: hidden;
+}
+
 .content {
   composes: box from '../../atoms/Box.module.css';
   margin-top: var(--spacer);
@@ -16,7 +16,7 @@
 
 @media (min-width: 60rem) {
   .grid {
-    grid-template-columns: 1.5fr minmax(0, 1fr);
+    grid-template-columns: 1.5fr 1fr;
   }
 
   .sticky {

src/components/organisms/AssetContent/index.tsx

@@ -33,44 +33,47 @@ export default function AssetContent({
 
   return (
     <article className={styles.grid}>
-      <div className={styles.content}>
+      <div>
         {showPricing && <Pricing ddo={ddo} />}
 
-        <aside className={styles.meta}>
+        <div className={styles.content}>
-          <p>{datePublished && <Time date={datePublished} />}</p>
+          <aside className={styles.meta}>
-          {metadata?.additionalInformation?.categories?.length && (
+            <p>{datePublished && <Time date={datePublished} />}</p>
-            <p>
+            {metadata?.additionalInformation?.categories?.length && (
-              <Link
+              <p>
-                to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
+                <Link
-              >
+                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
-                {metadata?.additionalInformation?.categories[0]}
+                >
-              </Link>
+                  {metadata?.additionalInformation?.categories[0]}
-            </p>
+                </Link>
-          )}
+              </p>
-        </aside>
+            )}
+          </aside>
 
-        <Markdown text={metadata?.additionalInformation?.description || ''} />
+          <Markdown text={metadata?.additionalInformation?.description || ''} />
 
-        <MetaSecondary metadata={metadata} />
+          <MetaSecondary metadata={metadata} />
 
-        <MetaFull ddo={ddo} metadata={metadata} />
+          <MetaFull ddo={ddo} metadata={metadata} />
 
-        <div className={styles.buttonGroup}>
+          <div className={styles.buttonGroup}>
-          {/* <EditAction
+            {/* <EditAction
               ddo={ddo}
               ocean={ocean}
               account={account}
               refetchMetadata={refetchMetadata}
             /> */}
-          {/* <DeleteAction ddo={ddo} /> */}
+            {/* <DeleteAction ddo={ddo} /> */}
-        </div>
+          </div>
 
-        {debug === true && (
+          {debug === true && (
-          <pre>
+            <pre>
-            <code>{JSON.stringify(ddo, null, 2)}</code>
+              <code>{JSON.stringify(ddo, null, 2)}</code>
-          </pre>
+            </pre>
-        )}
+          )}
+        </div>
       </div>
+
       <div>
         <div className={styles.sticky}>
           <AssetActions ddo={ddo} />

src/models/FormPricing.ts

@@ -10,7 +10,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
   weightOnDataToken: Yup.string().required('Required'),
   swapFee: Yup.number()
     .min(0.1, 'Must be more or equal to 0.1')
-    .max(0.9, 'Must be less or equal to 0.9')
+    .max(10, 'Maximum is 10%')
     .required('Required')
     .nullable()
 })