diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
index bedc0be8f..88a4ec6f3 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
+++ b/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({
+
+ Price
+
+
+
+
Datatoken Liquidity Pool
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
index 9cfadcde8..c96e35d5a 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
+++ b/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);
-}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
index 2fcf55ad1..33d6c2e71 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
+++ b/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 (
{content.info}
-
-
-
-
- }
- />
-
-
-
-
- = 1 {dtName} — {dtSymbol}
-
-
-
+
)
}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
new file mode 100644
index 000000000..a93ba553f
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx
new file mode 100644
index 000000000..96ee2eb7c
--- /dev/null
+++ b/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 (
+
+
+
+ }
+ />
+
+
+
+
+ = 1 {dtName} — {dtSymbol}
+
+
+
+ )
+}
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 3d3419c12..a9c3f2dc5 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/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 (