free price tweaks

src/components/Publish/Pricing/Price.module.css

@@ -2,7 +2,8 @@
   position: relative;
 }
 
-.form * {
+.form *,
+.form label {
   margin-bottom: 0;
 }
 
@@ -59,3 +60,9 @@
 .conversion strong {
   color: var(--color-secondary);
 }
+
+.free {
+  text-align: center;
+  margin: calc(var(--spacer) / 2) 0;
+  font-size: var(--font-size-base);
+}

src/components/Publish/Pricing/Price.tsx

@@ -19,13 +19,13 @@ export default function Price({
 
   return (
     <div className={styles.price}>
+      {values.pricing.type === 'free' ? (
+        <h4 className={styles.free}>Free</h4>
+      ) : (
+        <>
           <div className={styles.grid}>
             <div className={styles.form}>
-          {field.value === 0 ? (
-            <Input value="0" type="number" prefix="OCEAN" readOnly {...field} />
-          ) : (
               <Input type="number" prefix="OCEAN" {...field} />
-          )}
               <Error meta={meta} />
             </div>
             <div className={styles.datatoken}>
@@ -45,6 +45,8 @@ export default function Price({
               />
             </aside>
           )}
+        </>
+      )}
     </div>
   )
 }

src/components/Publish/Pricing/index.tsx

@@ -24,7 +24,6 @@ export default function PricingFields(): ReactElement {
     const type = tabName.toLowerCase()
     setFieldValue('pricing.type', type)
     type === 'dynamic' && setFieldValue('pricing.amountDataToken', 1000)
-    setFieldValue('pricing.price', type === 'free' ? 0 : 1)
   }
 
   // Always update everything when price value changes

src/components/Publish/_validation.ts

@@ -60,14 +60,7 @@ const validationPricing = {
     .required('Required'),
   // https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
   price: Yup.number()
-    .when('type', (type, schema) =>
+    .min(1, (param: { min: number }) => `Must be more or equal to ${param.min}`)
-      type === 'free'
-        ? schema
-        : schema.min(
-            1,
-            (param: { min: number }) => `Must be more or equal to ${param.min}`
-          )
-    )
     .required('Required'),
   amountDataToken: Yup.number()
     .min(50, (param) => `Must be more or equal to ${param.min}`)