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 ( +
+ {showPricing ? ( + { + await handleCreatePricing(values) + setSubmitting(false) + }} + > + {() => ( + <> + + {({ + field, + form + }: { + field: FieldInputProps + form: any + }) => ( + + )} + + + )} + + ) : ( + setShowPricing(true) + }} + /> + )} +
+ ) +} 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 */} + +