collect cost & tokensToMint in form state

content/pages/publish.json

@@ -35,11 +35,10 @@
         "required": true
       },
       {
-        "name": "cost",
+        "name": "price",
         "label": "Price",
         "help": "Set your price for accessing this data set in Ocean Tokens.",
         "type": "price",
-        "min": 1,
         "required": true
       },
       {

src/@types/MetaData.d.ts

@@ -24,7 +24,10 @@ export interface MetadataPublishForm {
   files: string | File[]
   author: string
   license: string
+  price: {
     cost: string
+    tokensToMint: string
+  }
   access: 'Download' | 'Compute' | string
   termsAndConditions: boolean
   // ---- optional fields ----

src/components/atoms/Input/InputElement.tsx

@@ -68,7 +68,6 @@ export default function InputElement(props: InputProps): ReactElement {
           className={styles.input}
           name={name}
           {...props}
-          value={value || ''}
           type={type || 'text'}
         />
       )

src/components/molecules/FormFields/Price/index.tsx

@@ -3,17 +3,31 @@ import { InputProps } from '../../../atoms/Input'
 import InputElement from '../../../atoms/Input/InputElement'
 import styles from './index.module.css'
 import Label from '../../../atoms/Input/Label'
+import { useFormikContext } from 'formik'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
 
 export default function Price(props: InputProps): ReactElement {
+  const { values } = useFormikContext()
+
   return (
     <div className={styles.price}>
       <div>
-        <Label htmlFor="cost">Cost</Label>
+        <Label htmlFor="price.cost">Cost</Label>
-        <InputElement {...props} type="number" />
+        <InputElement
+          {...props.field}
+          value={(values as MetadataPublishForm).price.cost}
+          name="price.cost"
+          type="number"
+        />
       </div>
       <div>
-        <Label htmlFor="tokensToMint">Tokens to Mint</Label>
+        <Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
-        <InputElement name="tokensToMint" type="number" min="1" />
+        <InputElement
+          {...props.field}
+          value={(values as MetadataPublishForm).price.tokensToMint}
+          name="price.tokensToMint"
+          type="number"
+        />
       </div>
     </div>
   )

src/components/pages/Publish/Preview.tsx

@@ -38,6 +38,7 @@ export default function Preview({
                 key.includes('tags') ||
                 key.includes('files') ||
                 key.includes('termsAndConditions') ||
+                key.includes('price') ||
                 value === undefined ||
                 value === ''
               )

src/components/pages/Publish/index.tsx

@@ -8,7 +8,7 @@ import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from './validation'
-import { MetadataPublishForm } from '../../../@types/Metadata'
+import { MetadataPublishForm, MetadataMarket } from '../../../@types/Metadata'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
 
@@ -28,20 +28,20 @@ export default function PublishPage({
     `)
 
     const metadata = transformPublishFormToMetadata(values)
-    const tokensToMint = '4' // how to know this?
+    const { cost, tokensToMint } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
     console.log(`
       Transformed metadata values:
       ----------------------
       ${JSON.stringify(metadata, null, 2)}
-      Cost: 1
+      Cost: ${cost}
       Tokens to mint: ${tokensToMint}
     `)
 
     try {
       const ddo = await publish(metadata as any, tokensToMint, [
-        { serviceType, cost: '1' }
+        { serviceType, cost }
       ])
 
       if (publishError) {

src/components/pages/Publish/validation.ts

@@ -6,7 +6,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   // ---- required fields ----
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
+  price: Yup.object().shape({
     cost: Yup.string().required('Required'),
+    tokensToMint: Yup.string().required('Required')
+  }),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),
   license: Yup.string().required('Required'),
@@ -24,7 +27,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 export const initialValues: MetadataPublishForm = {
   name: '',
   author: '',
+  price: {
     cost: '',
+    tokensToMint: ''
+  },
   files: '',
   description: '',
   license: '',

src/pages/publish.tsx

@@ -32,7 +32,6 @@ export const contentQuery = graphql`
                 type
                 required
                 options
-                min
               }
               success
             }