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-left: -2rem;
-  margin-right: -2rem;
+  margin-top: var(--spacer);
 }
 
-.feedback {
-  width: 100%;
-  min-height: 20vh;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
+.pricing [class*='alert'] {
+  margin: var(--spacer);
+  margin-bottom: 0;
 }

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

@@ -104,8 +104,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
           setSubmitting(false)
         }}
       >
-        {() =>
-          hasFeedback ? (
+        {hasFeedback ? (
           <Feedback success={success} pricingStepText={pricingStepText} />
         ) : showPricing ? (
           <FormPricing
@@ -123,8 +122,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
               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,9 +33,10 @@ export default function AssetContent({
 
   return (
     <article className={styles.grid}>
-      <div className={styles.content}>
+      <div>
         {showPricing && <Pricing ddo={ddo} />}
 
+        <div className={styles.content}>
           <aside className={styles.meta}>
             <p>{datePublished && <Time date={datePublished} />}</p>
             {metadata?.additionalInformation?.categories?.length && (
@@ -71,6 +72,8 @@ export default function AssetContent({
             </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()
 })