src/components/Publish/Steps.tsx
import { ReactElement, useEffect } from 'react'
import { useFormikContext } from 'formik'
import { wizardSteps, initialPublishFeedback } from './_constants'
import { FormPublishData, PublishFeedback } from './_types'
import { getOceanConfig } from '@utils/ocean'
import { useAccount, useNetwork } from 'wagmi'
import { useMarketMetadata } from '@context/MarketMetadata'
export function Steps({
feedback
}: {
feedback: PublishFeedback
}): ReactElement {
const { address: accountId } = useAccount()
const { chain } = useNetwork()
const { approvedBaseTokens } = useMarketMetadata()
const { values, setFieldValue, touched, setTouched } =
useFormikContext<FormPublishData>()
const isCustomProviderUrl = values?.services?.[0]?.providerUrl.custom
// auto-sync user chain?.id & account into form data values
useEffect(() => {
if (!chain?.id || !accountId) return
setFieldValue('user.chainId', chain?.id)
setFieldValue('user.accountId', accountId)
}, [chain?.id, accountId, setFieldValue])
useEffect(() => {
if (!approvedBaseTokens?.length) return
const defaultBaseToken =
approvedBaseTokens?.find((token) =>
token.name.toLowerCase().includes('ocean')
) || approvedBaseTokens?.[0]
const isBaseTokenSet = !!approvedBaseTokens?.find(
(token) => token?.address === values?.pricing?.baseToken?.address
)
if (isBaseTokenSet) return
setFieldValue('pricing.baseToken', defaultBaseToken)
}, [approvedBaseTokens, values?.pricing?.baseToken?.address])
// 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: 1,
description: initialPublishFeedback['1'].description
}
})
}, [values.pricing.type, feedback, setFieldValue])
// Auto-change default providerUrl on user network change
useEffect(() => {
if (!values?.user?.chainId || isCustomProviderUrl === 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, isCustomProviderUrl, setFieldValue, setTouched])
const { component } = wizardSteps.filter((stepContent) => {
return stepContent.step === values.user.stepCurrent
})[0]
return component
}