added step route to publish

src/components/Publish/Steps.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, useEffect } from 'react'
+import { useRouter } from 'next/router'
 import { useFormikContext } from 'formik'
 import { wizardSteps, initialPublishFeedback } from './_constants'
 import { useWeb3 } from '@context/Web3'
@@ -11,6 +12,7 @@ export function Steps({
 }): ReactElement {
   const { chainId, accountId } = useWeb3()
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
+  const router = useRouter()
 
   // auto-sync user chainId & account into form data values
   useEffect(() => {
@@ -43,9 +45,20 @@ export function Steps({
     })
   }, [values.pricing.type, setFieldValue])
 
-  const { component } = wizardSteps.filter(
-    (stepContent) => stepContent.step === values.user.stepCurrent
-  )[0]
+  useEffect(() => {
+    // Change route to include steps
+    router.push(
+      `${router.pathname}/?step=${values.user.stepCurrent}`,
+      undefined,
+      {
+        shallow: true
+      }
+    )
+  }, [values.user.stepCurrent])
+
+  const { component } = wizardSteps.filter((stepContent) => {
+    return stepContent.step === values.user.stepCurrent
+  })[0]
 
   return component
 }