add conversion, tweak default values

src/components/atoms/Price/Conversion.module.css

@@ -1,6 +1,6 @@
 .conversion {
   display: inline-block;
-  font-size: var(--font-size-mini);
+  font-size: var(--font-size-small);
   margin-left: calc(var(--spacer) / 6);
   color: var(--color-secondary);
 }

src/components/molecules/FormFields/Price/index.module.css

@@ -25,6 +25,7 @@
 .simpleInput {
   display: flex;
   justify-content: center;
+  align-items: center;
   margin-bottom: calc(var(--spacer) / 2);
 }
 
@@ -35,6 +36,7 @@
 
 .prefix {
   border: 1px solid var(--brand-grey-lighter);
+  min-height: 43px;
   display: flex;
   align-items: center;
   padding-left: calc(var(--spacer) / 2);

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

@@ -7,6 +7,7 @@ import { useFormikContext } from 'formik'
 import { MetadataPublishForm } from '../../../../@types/MetaData'
 import Tabs from '../../../atoms/Tabs'
 import FormHelp from '../../../atoms/Input/Help'
+import Conversion from '../../../atoms/Price/Conversion'
 
 export default function Price(props: InputProps): ReactElement {
   const { values } = useFormikContext()
@@ -21,11 +22,14 @@ export default function Price(props: InputProps): ReactElement {
           value={
             ((values as MetadataPublishForm).price &&
               (values as MetadataPublishForm).price.cost) ||
-            ''
+            0
           }
           name="price.cost"
           type="number"
         />
+        <Conversion
+          price={(values as MetadataPublishForm).price.cost.toString()}
+        />
       </div>
       <FormHelp>{props.help}</FormHelp>
     </div>
@@ -38,9 +42,8 @@ export default function Price(props: InputProps): ReactElement {
         <InputElement
           {...props.field}
           value={
-            ((values as MetadataPublishForm).price &&
+            (values as MetadataPublishForm).price &&
-              (values as MetadataPublishForm).price.cost) ||
+            ((values as MetadataPublishForm).price.cost || 1)
-            ''
           }
           name="price.cost"
           type="number"
@@ -51,9 +54,8 @@ export default function Price(props: InputProps): ReactElement {
         <InputElement
           {...props.field}
           value={
-            ((values as MetadataPublishForm).price &&
+            (values as MetadataPublishForm).price &&
-              (values as MetadataPublishForm).price.tokensToMint) ||
+            ((values as MetadataPublishForm).price.tokensToMint || 1)
-            ''
           }
           name="price.tokensToMint"
           type="number"

src/components/pages/Publish/validation.ts

@@ -28,7 +28,7 @@ export const initialValues: MetadataPublishForm = {
   name: '',
   author: '',
   price: {
-    cost: 0,
+    cost: 1,
     tokensToMint: null
   },
   files: '',