79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { ReactElement, useEffect } from 'react'
|
|
import { useFormikContext } from 'formik'
|
|
import { wizardSteps, initialPublishFeedback } from './_constants'
|
|
import { useWeb3 } from '@context/Web3'
|
|
import { FormPublishData, PublishFeedback } from './_types'
|
|
import { getOceanConfig } from '@utils/ocean'
|
|
|
|
export function Steps({
|
|
feedback
|
|
}: {
|
|
feedback: PublishFeedback
|
|
}): ReactElement {
|
|
const { chainId, accountId } = useWeb3()
|
|
const { values, setFieldValue, touched, setTouched } =
|
|
useFormikContext<FormPublishData>()
|
|
|
|
// auto-sync user chainId & account into form data values
|
|
useEffect(() => {
|
|
if (!chainId || !accountId) return
|
|
|
|
setFieldValue('user.chainId', chainId)
|
|
setFieldValue('user.accountId', accountId)
|
|
}, [chainId, accountId, setFieldValue])
|
|
|
|
// auto-sync publish feedback into form data values
|
|
useEffect(() => {
|
|
setFieldValue('feedback', feedback)
|
|
}, [feedback, setFieldValue])
|
|
|
|
// auto-switch some feedback content based on pricing type
|
|
useEffect(() => {
|
|
setFieldValue('feedback', {
|
|
...feedback,
|
|
'1': {
|
|
...feedback['1'],
|
|
txCount: values.pricing.type === 'dynamic' ? 2 : 1,
|
|
description:
|
|
values.pricing.type === 'dynamic'
|
|
? feedback['1'].description.replace(
|
|
'a single transaction',
|
|
'a single transaction, after an initial approve transaction'
|
|
)
|
|
: initialPublishFeedback['1'].description
|
|
}
|
|
})
|
|
}, [values.pricing.type, feedback, setFieldValue])
|
|
|
|
// Auto-change default providerUrl on user network change
|
|
useEffect(() => {
|
|
if (
|
|
!values?.user?.chainId ||
|
|
values?.services[0]?.providerUrl.custom === true
|
|
)
|
|
return
|
|
|
|
const config = getOceanConfig(values.user.chainId)
|
|
if (config) {
|
|
setFieldValue('services[0].providerUrl', {
|
|
url: config.providerUri,
|
|
valid: true,
|
|
custom: false
|
|
})
|
|
}
|
|
|
|
setTouched({ ...touched, services: [{ providerUrl: { url: true } }] })
|
|
}, [
|
|
values?.user?.chainId,
|
|
values?.services[0]?.providerUrl.custom,
|
|
setFieldValue,
|
|
setTouched
|
|
])
|
|
|
|
const { component } = wizardSteps.filter((stepContent) => {
|
|
return stepContent.step === values.user.stepCurrent
|
|
})[0]
|
|
|
|
return component
|
|
}
|