1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
This commit is contained in:
Matthias Kretschmann 2020-10-20 14:51:20 +02:00
parent de421d3c00
commit 07b086547f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
17 changed files with 56 additions and 49 deletions

View File

@ -1,4 +1,4 @@
import React, { ReactElement } from 'react'
import React, { ReactElement, FormEvent } from 'react'
import styles from './Alert.module.css'
import Button from './Button'
@ -11,7 +11,10 @@ export default function Alert({
title?: string
text: string
state: 'error' | 'warning' | 'info' | 'success'
action?: { name: string; handleAction: () => void }
action?: {
name: string
handleAction: (e: FormEvent<HTMLButtonElement>) => void
}
}): ReactElement {
return (
<div className={`${styles.alert} ${styles[state]}`}>

View File

@ -12,6 +12,7 @@ import styles from './Dynamic.module.css'
import Fees from './Fees'
import stylesIndex from './index.module.css'
import { useFormikContext } from 'formik'
import { PriceOptionsMarket } from '../../../../@types/MetaData'
export default function Dynamic({
datatokenOptions,
@ -22,7 +23,10 @@ export default function Dynamic({
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { account, balance, networkId, refreshBalance } = useOcean()
// Connect with form
const { values } = useFormikContext()
const { price, weightOnDataToken } = values as PriceOptionsMarket
const [error, setError] = useState<string>()
const correctNetwork = isCorrectNetwork(networkId)
@ -36,19 +40,12 @@ export default function Dynamic({
setError(`No account connected. Please connect your Web3 wallet.`)
} else if (!correctNetwork) {
setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
} else if (Number(balance.ocean) < Number(values.price)) {
setError(`Insufficient balance. You need at least ${values.price} OCEAN`)
} else if (Number(balance.ocean) < Number(price)) {
setError(`Insufficient balance. You need at least ${price} OCEAN`)
} else {
setError(undefined)
}
}, [
values.price,
networkId,
account,
balance,
correctNetwork,
desiredNetworkName
])
}, [price, networkId, account, balance, correctNetwork, desiredNetworkName])
// refetch balance periodically
useEffect(() => {
@ -86,12 +83,12 @@ export default function Dynamic({
<Coin
name="price"
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
weight={`${100 - Number(Number(values.weightOnDataToken) * 10)}%`}
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
/>
<Coin
name="dtAmount"
datatokenOptions={datatokenOptions}
weight={`${Number(values.weightOnDataToken) * 10}%`}
weight={`${Number(weightOnDataToken) * 10}%`}
readOnly
/>
</div>

View File

@ -1,7 +1,7 @@
.fees {
display: grid;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
margin-left: -2rem;
margin-right: -2rem;
border-bottom: 1px solid var(--brand-grey-lighter);

View File

@ -38,20 +38,23 @@ const query = graphql`
}
`
export default function Price(): ReactElement {
export default function FormPricing(): ReactElement {
const { debug } = useUserPreferences()
// Get content
const data = useStaticQuery(query)
const content = data.content.edges[0].node.childPagesJson.price
// Connect with form
const { values, setFieldValue } = useFormikContext()
const { price, weightOnDataToken, type } = values as PriceOptionsMarket
// Switch type value upon tab change
function handleTabChange(tabName: string) {
const type = tabName.toLowerCase()
setFieldValue('type', type)
}
// Always update everything when price changes
// Always update everything when price value changes
useEffect(() => {
const dtAmount = Number(price) * Number(weightOnDataToken)
setFieldValue('dtAmount', dtAmount)

View File

@ -1,13 +1,12 @@
import React, { ReactElement, useState } from 'react'
import { Field, FieldInputProps, Formik } from 'formik'
import Input from '../../atoms/Input'
import React, { FormEvent, ReactElement, useState } from 'react'
import { Formik } from 'formik'
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'
import Price from './Price'
import FormPricing from './FormPricing'
export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
const { createPricing } = usePricing(ddo)
@ -24,28 +23,33 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
return (
<div className={styles.pricing}>
{showPricing ? (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting, resetForm }) => {
await handleCreatePricing(values)
setSubmitting(false)
}}
>
{(props) => <Price name="price" {...props} />}
</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)
}}
/>
)}
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => {
await handleCreatePricing(values)
setSubmitting(false)
}}
>
{() =>
showPricing ? (
<FormPricing />
) : (
<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. Onwards!"
action={{
name: 'Create Pricing',
handleAction: (e: FormEvent<HTMLButtonElement>) => {
e.preventDefault()
setShowPricing(true)
}
}}
/>
)
}
</Formik>
</div>
)
}

View File

@ -1,12 +1,12 @@
import React, { ReactElement, useEffect, FormEvent } from 'react'
import styles from './PublishForm.module.css'
import styles from './FormPublish.module.css'
import { useOcean } from '@oceanprotocol/react'
import { useFormikContext, Field } from 'formik'
import Input from '../../atoms/Input'
import Button from '../../atoms/Button'
import { FormContent, FormFieldProps } from '../../../@types/Form'
export default function PublishForm({
export default function FormPublish({
content
}: {
content: FormContent

View File

@ -1,8 +1,8 @@
import React, { ReactElement, useState } from 'react'
import { Formik } from 'formik'
import { usePublish, usePricing } from '@oceanprotocol/react'
import { usePublish } from '@oceanprotocol/react'
import styles from './index.module.css'
import PublishForm from './PublishForm'
import FormPublish from './FormPublish'
import Web3Feedback from '../../molecules/Wallet/Feedback'
import { FormContent } from '../../../@types/Form'
import { initialValues, validationSchema } from '../../../models/FormPublish'
@ -101,7 +101,7 @@ export default function PublishPage({
/>
) : (
<article className={styles.grid}>
<PublishForm content={content.form} />
<FormPublish content={content.form} />
<aside>
<div className={styles.sticky}>
<Preview values={values} />

View File

@ -5,7 +5,7 @@ import {
MetadataMarket,
MetadataPublishForm
} from '../../../src/@types/MetaData'
import PublishForm from '../../../src/components/pages/Publish/PublishForm'
import PublishForm from '../../../src/components/pages/Publish/FormPublish'
import publishFormData from '../__fixtures__/testFormData'
import content from '../../../content/pages/publish.json'