diff --git a/src/components/atoms/Alert.module.css b/src/components/atoms/Alert.module.css
index c35f3b2de..f03ba01f0 100644
--- a/src/components/atoms/Alert.module.css
+++ b/src/components/atoms/Alert.module.css
@@ -30,6 +30,10 @@
font-size: var(--font-size-small);
}
+.action {
+ margin-top: calc(var(--spacer) / 2);
+}
+
/* States */
.error {
border-color: var(--rbrand-alert-ed);
@@ -43,7 +47,7 @@
.info {
border-color: var(--brand-alert-yellow);
- color: var(--brand-alert-yellow);
+ color: #9f7e19;
}
.warning {
diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
index c1b7b0a14..1610d6001 100644
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -1,19 +1,32 @@
import React, { ReactElement } from 'react'
import styles from './Alert.module.css'
+import Button from './Button'
export default function Alert({
title,
text,
- state
+ state,
+ action
}: {
title?: string
text: string
state: 'error' | 'warning' | 'info' | 'success'
+ action?: { name: string; handleAction: () => void }
}): ReactElement {
return (
{title &&
{title}
}
{text}
+ {action && (
+
+ )}
)
}
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing.module.css
new file mode 100644
index 000000000..fcfae9601
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.module.css
@@ -0,0 +1,3 @@
+.pricing {
+ margin-bottom: var(--spacer);
+}
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
new file mode 100644
index 000000000..c3232263e
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -0,0 +1,70 @@
+import React, { ReactElement, useState } from 'react'
+import { Field, FieldInputProps, 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'
+
+export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+ const { createPricing } = usePricing(ddo)
+ const [showPricing, setShowPricing] = useState(false)
+
+ async function handleCreatePricing(values: Partial) {
+ const priceOptions = {
+ ...values,
+ // swapFee is tricky: to get 0.1% you need to send 0.001 as value
+ swapFee: `${values.swapFee / 100}`
+ }
+ const tx = await createPricing(priceOptions)
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index 874cc5810..9dd4a3115 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -1,3 +1,7 @@
+.pricing {
+ max-width: 40rem;
+}
+
.grid {
display: grid;
gap: calc(var(--spacer) * 1.5);
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index dc4cfa35f..5ad04f7fc 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -9,6 +9,7 @@ import styles from './index.module.css'
import AssetActions from '../AssetActions'
import { DDO } from '@oceanprotocol/lib'
import { useUserPreferences } from '../../../providers/UserPreferences'
+import Pricing from './Pricing'
export interface AssetContentProps {
metadata: MetadataMarket
@@ -26,6 +27,9 @@ export default function AssetContent({
return (
+ {/* TODO: check for ddo creator */}
+
+