data structure change

src/@utils/oceanWaves.ts

@@ -10,7 +10,6 @@ export function renderStaticWaves(): string {
   const svg = d3.create('svg')
   const width = 1000
   const height = 250
-  console.log(height)
   const x = d3.scaleLinear().range([0, width])
   const angles = d3.range(Math.random(), 4 * Math.PI, Math.PI / 20)
 

src/components/Publish/Actions/index.tsx

@@ -21,21 +21,23 @@ export default function Actions({
 
   function handleNext(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('stepCurrent', values.stepCurrent + 1)
+    setFieldValue('stepCurrent', values.user.stepCurrent + 1)
     scrollToRef.current.scrollIntoView()
   }
 
   function handlePrevious(e: FormEvent) {
     e.preventDefault()
-    setFieldValue('stepCurrent', values.stepCurrent - 1)
+    setFieldValue('stepCurrent', values.user.stepCurrent - 1)
     scrollToRef.current.scrollIntoView()
   }
 
   return (
     <footer className={styles.actions}>
-      {values.stepCurrent > 1 && <Button onClick={handlePrevious}>Back</Button>}
+      {values.user.stepCurrent > 1 && (
+        <Button onClick={handlePrevious}>Back</Button>
+      )}
 
-      {values.stepCurrent < wizardSteps.length ? (
+      {values.user.stepCurrent < wizardSteps.length ? (
         <Button style="primary" onClick={handleNext}>
           Continue
         </Button>

src/components/Publish/Navigation/index.tsx

@@ -20,7 +20,9 @@ export default function Navigation(): ReactElement {
             key={step.title}
             onClick={() => handleStepClick(step.step)}
             // TODO: add success class
-            className={values.stepCurrent === step.step ? styles.current : null}
+            className={
+              values.user.stepCurrent === step.step ? styles.current : null
+            }
           >
             {step.title}
           </li>

src/components/Publish/Steps.tsx

@@ -11,12 +11,12 @@ export function Steps(): ReactElement {
   useEffect(() => {
     if (!chainId || !accountId) return
 
-    setFieldValue('chainId', chainId)
-    setFieldValue('accountId', accountId)
+    setFieldValue('user.chainId', chainId)
+    setFieldValue('user.accountId', accountId)
   }, [chainId, accountId, setFieldValue])
 
   const { component } = wizardSteps.filter(
-    (stepContent) => stepContent.step === values.stepCurrent
+    (stepContent) => stepContent.step === values.user.stepCurrent
   )[0]
 
   return component

src/components/Publish/_constants.tsx

@@ -32,9 +32,11 @@ export const wizardSteps: StepContent[] = [
 ]
 
 export const initialValues: FormPublishData = {
-  stepCurrent: 1,
-  chainId: 1,
-  accountId: '',
+  user: {
+    stepCurrent: 1,
+    chainId: 1,
+    accountId: ''
+  },
   metadata: {
     nft: { name: '', symbol: '', description: '', image: '' },
     type: 'dataset',

src/components/Publish/_types.ts

@@ -12,9 +12,11 @@ export interface FormPublishService {
 }
 
 export interface FormPublishData {
-  stepCurrent: number
-  accountId: string
-  chainId: number
+  user: {
+    stepCurrent: number
+    accountId: string
+    chainId: number
+  }
   metadata: {
     nft: NftOptions
     type: 'Dataset' | 'Algorithm' | string

src/components/Publish/_utils.ts

@@ -30,7 +30,8 @@ export async function transformPublishFormToDdo(
   datatokenAddress: string,
   nftAddress: string
 ): Promise<DDO> {
-  const { chainId, accountId, metadata, services } = values
+  const { metadata, services } = values
+  const { chainId, accountId } = values.user
   const did = sha256(`${nftAddress}${chainId}`)
   const currentTime = dateToStringNoMS(new Date())
   const {