mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
move around pricing view
This commit is contained in:
parent
07b6495866
commit
9ce1358fe1
@ -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 {
|
||||
|
@ -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 (
|
||||
<div className={`${styles.alert} ${styles[state]}`}>
|
||||
{title && <h3 className={styles.title}>{title}</h3>}
|
||||
<p className={styles.text}>{text}</p>
|
||||
{action && (
|
||||
<Button
|
||||
className={styles.action}
|
||||
size="small"
|
||||
style="primary"
|
||||
onClick={action.handleAction}
|
||||
>
|
||||
{action.name}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
3
src/components/organisms/AssetContent/Pricing.module.css
Normal file
3
src/components/organisms/AssetContent/Pricing.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.pricing {
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
70
src/components/organisms/AssetContent/Pricing.tsx
Normal file
70
src/components/organisms/AssetContent/Pricing.tsx
Normal file
@ -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<PriceOptionsMarket>) {
|
||||
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 (
|
||||
<div className={styles.pricing}>
|
||||
{showPricing ? (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={async (values, { setSubmitting, resetForm }) => {
|
||||
await handleCreatePricing(values)
|
||||
setSubmitting(false)
|
||||
}}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<Field name="price">
|
||||
{({
|
||||
field,
|
||||
form
|
||||
}: {
|
||||
field: FieldInputProps<PriceOptionsMarket>
|
||||
form: any
|
||||
}) => (
|
||||
<Input
|
||||
type="price"
|
||||
name="price"
|
||||
label="Create Price"
|
||||
field={field}
|
||||
form={form}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
) : (
|
||||
<Alert
|
||||
state="info"
|
||||
title="No Price Created"
|
||||
text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it."
|
||||
action={{
|
||||
name: 'Create Pricing',
|
||||
handleAction: () => setShowPricing(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,3 +1,7 @@
|
||||
.pricing {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: calc(var(--spacer) * 1.5);
|
||||
|
@ -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 (
|
||||
<article className={styles.grid}>
|
||||
<div className={styles.content}>
|
||||
{/* TODO: check for ddo creator */}
|
||||
<Pricing ddo={ddo} />
|
||||
|
||||
<aside className={styles.meta}>
|
||||
<p>{datePublished && <Time date={datePublished} />}</p>
|
||||
{metadata?.additionalInformation?.categories?.length && (
|
||||
|
@ -5,21 +5,18 @@ import React, { ReactElement } from 'react'
|
||||
import styles from './Feedback.module.css'
|
||||
import SuccessConfetti from '../../atoms/SuccessConfetti'
|
||||
import { DDO } from '@oceanprotocol/lib'
|
||||
import Pricing from './Pricing'
|
||||
|
||||
export default function Feedback({
|
||||
error,
|
||||
success,
|
||||
ddo,
|
||||
publishStepText,
|
||||
isPricing,
|
||||
setError
|
||||
}: {
|
||||
error: string
|
||||
success: string
|
||||
ddo: DDO
|
||||
publishStepText: string
|
||||
isPricing: boolean
|
||||
setError: (error: string) => void
|
||||
}): ReactElement {
|
||||
const SuccessAction = () => (
|
||||
@ -49,8 +46,6 @@ export default function Feedback({
|
||||
Try Again
|
||||
</Button>
|
||||
</>
|
||||
) : isPricing ? (
|
||||
<Pricing ddo={ddo} />
|
||||
) : success ? (
|
||||
<SuccessConfetti success={success} action={<SuccessAction />} />
|
||||
) : (
|
||||
|
@ -1,54 +0,0 @@
|
||||
import React, { ReactElement } 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 ddoFixture from '../../../../tests/unit/__fixtures__/ddo'
|
||||
|
||||
export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
|
||||
const { createPricing } = usePricing(ddoFixture)
|
||||
|
||||
async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
|
||||
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 (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={async (values, { setSubmitting, resetForm }) => {
|
||||
await handleCreatePricing(values)
|
||||
setSubmitting(false)
|
||||
}}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
<Field name="price">
|
||||
{({
|
||||
field,
|
||||
form
|
||||
}: {
|
||||
field: FieldInputProps<PriceOptionsMarket>
|
||||
form: any
|
||||
}) => (
|
||||
<Input
|
||||
type="price"
|
||||
name="price"
|
||||
label="Price"
|
||||
field={field}
|
||||
form={form}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
@ -27,7 +27,6 @@ export default function PublishPage({
|
||||
|
||||
const [success, setSuccess] = useState<string>()
|
||||
const [error, setError] = useState<string>()
|
||||
const [isPricing, setIsPricing] = useState<boolean>()
|
||||
const [ddo, setDdo] = useState<DDO>()
|
||||
|
||||
const hasFeedback = isLoading || error || success
|
||||
@ -66,10 +65,9 @@ export default function PublishPage({
|
||||
setDdo(ddo)
|
||||
resetForm()
|
||||
|
||||
// Create pricing
|
||||
setIsPricing(true)
|
||||
|
||||
// setSuccess('🎉 Successfully published your data set. 🎉')
|
||||
setSuccess(
|
||||
'🎉 Successfully published. Now create a price on your data set. 🎉'
|
||||
)
|
||||
} catch (error) {
|
||||
setError(error.message)
|
||||
Logger.error(error.message)
|
||||
@ -99,7 +97,6 @@ export default function PublishPage({
|
||||
success={success}
|
||||
publishStepText={publishStepText}
|
||||
ddo={ddo}
|
||||
isPricing={isPricing}
|
||||
setError={setError}
|
||||
/>
|
||||
) : (
|
||||
|
Loading…
Reference in New Issue
Block a user