Dynamically computed step based on Registartion status in Storage

Step.tsx

import { MIN_COMMIT_TIME_S } from 'lib/constants'
import { useRegistration } from 'lib/hooks/storage'
import { RegistrationStatus } from 'lib/types'
import { useSigner, useFeeData, useAccount } from 'wagmi'
import { CommitmentForm } from './CommitmentForm'
import { RegisterStep } from './RegisterStep'
import { Success } from './Success'
import { WaitMinute } from './WaitMinute'

export const Step = ({
  domain,
  name,
}: {
  domain: string,
  name: string
}) => {
  const { data: signer } = useSigner()

  const { data: feeData } = useFeeData()
  const { address } = useAccount()

  const [reg, _] = useRegistration(domain)
  const status = reg?.status
  const shouldWait = status == RegistrationStatus.Commited && reg?.commitTimestamp
    && new Date().getTime() - reg?.commitTimestamp < MIN_COMMIT_TIME_S


  if (!address || !signer) {
    return null
  }

  // show commit form if no registration info or commit tx has not been finished
  if (!status || status === RegistrationStatus.CommitSent) {
    // TODO: pass commit tx hash
    return <CommitmentForm {...{ feeData, domain, name }} accountAddress={address} />
  }

  // show wait if tx commited and wait time has not passed
  if (status === RegistrationStatus.Commited && shouldWait) {
    return <WaitMinute />
  }

  // show register form if commit tx has been finished or register tx has not been finished
  if (status === RegistrationStatus.Commited || status === RegistrationStatus.RegisterSent) {
    // TODO: pass register tx hash
    return <RegisterStep {...{ feeData, address, name }} />
  }

  // show success if register tx has been finished
  if (status === RegistrationStatus.Registered) {
    return <Success {...{ domain, address }} />
  }
}