1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

submit view, success view, form submit

This commit is contained in:
Matthias Kretschmann 2020-10-20 16:59:29 +02:00
parent 484d8b735a
commit fd1b66883a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 54 additions and 12 deletions

View File

@ -28,7 +28,7 @@ export default function SuccessConfetti({
action action
}: { }: {
success: string success: string
action: ReactNode action?: ReactNode
}): ReactElement { }): ReactElement {
// Have some confetti upon success // Have some confetti upon success
useEffect(() => { useEffect(() => {

View File

@ -52,7 +52,7 @@ export default function FormPricing({
const content = data.content.edges[0].node.childContentJson.create const content = data.content.edges[0].node.childContentJson.create
// Connect with form // Connect with form
const { values, setFieldValue } = useFormikContext() const { values, setFieldValue, submitForm } = useFormikContext()
const { price, weightOnDataToken, type } = values as PriceOptionsMarket const { price, weightOnDataToken, type } = values as PriceOptionsMarket
// Switch type value upon tab change // Switch type value upon tab change
@ -87,7 +87,7 @@ export default function FormPricing({
/> />
<div className={styles.actions}> <div className={styles.actions}>
<Button style="primary" type="submit"> <Button style="primary" onClick={() => submitForm()}>
Create Pricing Create Pricing
</Button> </Button>
<Button style="text" size="small" onClick={() => setShowPricing(false)}> <Button style="text" size="small" onClick={() => setShowPricing(false)}>

View File

@ -1,3 +1,9 @@
.pricing { .pricing {
margin-bottom: var(--spacer); margin-bottom: var(--spacer);
width: 100%;
min-height: 20vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
} }

View File

@ -1,24 +1,50 @@
import React, { FormEvent, ReactElement, useState } from 'react' import React, { FormEvent, ReactElement, useState } from 'react'
import { Formik } from 'formik' import { Formik } from 'formik'
import { initialValues, validationSchema } from '../../../models/FormPricing' import { initialValues, validationSchema } from '../../../models/FormPricing'
import { DDO } from '@oceanprotocol/lib' import { DDO, Logger } from '@oceanprotocol/lib'
import { usePricing } from '@oceanprotocol/react' import { usePricing } from '@oceanprotocol/react'
import { PriceOptionsMarket } from '../../../@types/MetaData' import { PriceOptionsMarket } from '../../../@types/MetaData'
import Alert from '../../atoms/Alert' import Alert from '../../atoms/Alert'
import styles from './Pricing.module.css' import styles from './Pricing.module.css'
import FormPricing from './FormPricing' import FormPricing from './FormPricing'
import Loader from '../../atoms/Loader'
import SuccessConfetti from '../../atoms/SuccessConfetti'
import { toast } from 'react-toastify'
export default function Pricing({ ddo }: { ddo: DDO }): ReactElement { export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
const { createPricing } = usePricing(ddo) const {
createPricing,
pricingIsLoading,
pricingError,
pricingStepText
} = usePricing(ddo)
const [showPricing, setShowPricing] = useState(false) const [showPricing, setShowPricing] = useState(false)
const [success, setSuccess] = useState<string>()
const hasFeedback = pricingIsLoading || success
async function handleCreatePricing(values: Partial<PriceOptionsMarket>) { async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
const priceOptions = { try {
...values, const priceOptions = {
// swapFee is tricky: to get 0.1% you need to send 0.001 as value ...values,
swapFee: `${values.swapFee / 100}` // swapFee is tricky: to get 0.1% you need to send 0.001 as value
swapFee: `${values.swapFee / 100}`
}
const tx = await createPricing(priceOptions)
// Pricing failed
if (!tx || pricingError) {
toast.error(pricingError)
Logger.error(pricingError)
return
}
// Pricing succeeded
tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
} catch (error) {
toast.error(error.message)
Logger.error(error.message)
} }
const tx = await createPricing(priceOptions)
} }
return ( return (
@ -27,12 +53,22 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => { onSubmit={async (values, { setSubmitting }) => {
// move user's focus to top of screen
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
// Kick off price creation
await handleCreatePricing(values) await handleCreatePricing(values)
setSubmitting(false) setSubmitting(false)
}} }}
> >
{() => {() =>
showPricing ? ( hasFeedback ? (
success ? (
<SuccessConfetti success={success} />
) : (
<Loader message={pricingStepText} />
)
) : showPricing ? (
<FormPricing ddo={ddo} setShowPricing={setShowPricing} /> <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
) : ( ) : (
<Alert <Alert

View File

@ -27,7 +27,7 @@ export default function AssetContent({
return ( return (
<article className={styles.grid}> <article className={styles.grid}>
<div className={styles.content}> <div className={styles.content}>
{/* TODO: check for ddo creator */} {/* TODO: check for ddo creator & no price */}
<Pricing ddo={ddo} /> <Pricing ddo={ddo} />
<aside className={styles.meta}> <aside className={styles.meta}>