price refactor

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

@@ -12,6 +12,8 @@ import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
 import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
+import Fixed from './Fixed'
+import Price from './Price'
 
 export default function Dynamic({
   ddo,
@@ -68,6 +70,12 @@ export default function Dynamic({
         <Wallet />
       </aside>
 
+      <h4 className={styles.title}>
+        Price <Tooltip content={content.tooltips.poolInfo} />
+      </h4>
+
+      <Price ddo={ddo} />
+
       <h4 className={styles.title}>
         Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />
       </h4>

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

@@ -1,48 +1,3 @@
 .fixed {
   composes: content from './index.module.css';
 }
-
-.form {
-  position: relative;
-}
-
-@media (min-width: 55rem) {
-  .form {
-    max-width: 12rem;
-    margin-left: auto;
-  }
-}
-
-.grid {
-  margin-left: -2rem;
-  margin-right: -2rem;
-  padding-top: var(--spacer);
-  display: grid;
-  gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  justify-content: center;
-  background: var(--brand-grey-dimmed);
-  border-top: 1px solid var(--brand-grey-lighter);
-  border-bottom: 1px solid var(--brand-grey-lighter);
-}
-
-.fixed label {
-  display: none;
-}
-
-.datatoken {
-  margin-top: calc(var(--spacer) / 2);
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-}
-
-.datatoken h4 {
-  font-size: var(--font-size-base);
-  color: var(--color-secondary);
-  margin: 0;
-}
-
-.datatoken strong {
-  color: var(--brand-grey-dark);
-}

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

@@ -2,12 +2,8 @@ import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
 import FormHelp from '../../../../atoms/Input/Help'
-import Conversion from '../../../../atoms/Price/Conversion'
-import { useField } from 'formik'
-import Input from '../../../../atoms/Input'
-import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
-import { usePricing } from '@oceanprotocol/react'
+import Price from './Price'
 
 export default function Fixed({
   ddo,
@@ -16,38 +12,10 @@ export default function Fixed({
   ddo: DDO
   content: any
 }): ReactElement {
-  const [field, meta] = useField('price')
-  const { dtName, dtSymbol } = usePricing(ddo)
-
   return (
     <div className={styles.fixed}>
       <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-
+      <Price ddo={ddo} />
-      <div className={styles.grid}>
-        <div className={styles.form}>
-          <Input
-            label="Ocean Token"
-            value={field.value}
-            name="price"
-            type="number"
-            prefix="OCEAN"
-            min="1"
-            {...field}
-            additionalComponent={
-              <Conversion
-                price={field.value}
-                className={stylesIndex.conversion}
-              />
-            }
-          />
-          <Error meta={meta} />
-        </div>
-        <div className={styles.datatoken}>
-          <h4>
-            = <strong>1</strong> {dtName} — {dtSymbol}
-          </h4>
-        </div>
-      </div>
     </div>
   )
 }

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

@@ -0,0 +1,44 @@
+.form {
+  position: relative;
+}
+
+@media (min-width: 55rem) {
+  .form {
+    max-width: 12rem;
+    margin-left: auto;
+  }
+}
+
+.grid {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-top: var(--spacer);
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  justify-content: center;
+  background: var(--brand-grey-dimmed);
+  border-top: 1px solid var(--brand-grey-lighter);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+}
+
+.fixed label {
+  display: none;
+}
+
+.datatoken {
+  margin-top: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+}
+
+.datatoken h4 {
+  font-size: var(--font-size-base);
+  color: var(--color-secondary);
+  margin: 0;
+}
+
+.datatoken strong {
+  color: var(--brand-grey-dark);
+}

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

@@ -0,0 +1,37 @@
+import { usePricing } from '@oceanprotocol/react'
+import Conversion from '../../../../atoms/Price/Conversion'
+import { useField } from 'formik'
+import React, { ReactElement } from 'react'
+import Input from '../../../../atoms/Input'
+import styles from './Price.module.css'
+import Error from './Error'
+import { DDO } from '@oceanprotocol/lib'
+
+export default function Price({ ddo }: { ddo: DDO }): ReactElement {
+  const [field, meta] = useField('price')
+  const { dtName, dtSymbol } = usePricing(ddo)
+
+  return (
+    <div className={styles.grid}>
+      <div className={styles.form}>
+        <Input
+          value={field.value}
+          name="price"
+          type="number"
+          prefix="OCEAN"
+          min="1"
+          {...field}
+          additionalComponent={
+            <Conversion price={field.value} className={styles.conversion} />
+          }
+        />
+        <Error meta={meta} />
+      </div>
+      <div className={styles.datatoken}>
+        <h4>
+          = <strong>1</strong> {dtName} — {dtSymbol}
+        </h4>
+      </div>
+    </div>
+  )
+}

src/components/organisms/AssetContent/index.tsx

@@ -30,7 +30,8 @@ export default function AssetContent({
 
   const isOwner = accountId === ddo.publicKey[0].owner
   const hasNoPrice = ddo.price.type === ''
-  const showPricing = isOwner && hasNoPrice
+  // TODO: JUST FOR DEBUGGING
+  const showPricing = true || (isOwner && hasNoPrice)
 
   return (
     <article className={styles.grid}>