refactoring

src/@types/MetaData.d.ts

@@ -13,7 +13,10 @@ export interface AdditionalInformationMarket extends AdditionalInformation {
 }
 
 export interface MetadataMarket extends Metadata {
-  additionalInformation: AdditionalInformationMarket
+  // While required for this market, Aquarius/Plecos will keep this as optional
+  // allowing external pushes of assets without `additionalInformation`.
+  // Making it optional here helps safeguarding against those assets.
+  additionalInformation?: AdditionalInformationMarket
 }
 
 export interface MetadataPublishForm {

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

@@ -34,8 +34,7 @@
   padding-bottom: calc(var(--spacer) / 3);
 }
 
-.tokens,
+.tokens {
-.fees {
   display: grid;
 
   margin-left: -2rem;
@@ -49,24 +48,6 @@
   }
 }
 
-.fees {
-  margin-top: var(--spacer);
-  padding: var(--spacer);
-  padding-top: 0;
-  gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  align-items: center;
-  border-bottom: 1px solid var(--brand-grey-lighter);
-}
-
-.fees label {
-  white-space: nowrap;
-}
-
-.fees input {
-  max-width: 5rem;
-}
-
 .summary {
   margin-top: var(--spacer);
 }

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

@@ -8,9 +8,8 @@ import Alert from '../../../atoms/Alert'
 import Coin from './Coin'
 import { isCorrectNetwork } from '../../../../utils/wallet'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import InputElement from '../../../atoms/Input/InputElement'
-import Label from '../../../atoms/Input/Label'
 import Tooltip from '../../../atoms/Tooltip'
+import Fees from './Fees'
 
 export default function Dynamic({
   ocean,
@@ -39,14 +38,14 @@ export default function Dynamic({
     c.toUpperCase()
   )
 
-  // Check: account, network & insuffciant balance
+  // Check: account, network & insufficient balance
   useEffect(() => {
     if (!account) {
       setError(`No account connected. Please connect your Web3 wallet.`)
     } else if (!correctNetwork) {
       setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
     } else if (Number(balance.ocean) < Number(ocean)) {
-      setError(`Insufficiant balance. You need at least ${ocean} OCEAN`)
+      setError(`Insufficient balance. You need at least ${ocean} OCEAN`)
     } else {
       setError(undefined)
     }
@@ -100,50 +99,11 @@ export default function Dynamic({
         />
       </div>
 
-      <div className={styles.fees}>
+      <Fees
-        <div>
+        liquidityProviderFee={liquidityProviderFee}
-          <Label htmlFor="liquidityProviderFee">
+        onLiquidityProviderFeeChange={onLiquidityProviderFeeChange}
-            Liquidity Provider Fee{' '}
+        tooltips={content.tooltips}
-            <Tooltip content={content.tooltips.liquidityProviderFee} />
-          </Label>
-          <InputElement
-            type="number"
-            value={liquidityProviderFee}
-            name="liquidityProviderFee"
-            postfix="%"
-            onChange={onLiquidityProviderFeeChange}
-            min="0.1"
-            max="0.9"
-            step="0.1"
-            small
       />
-        </div>
-        <div>
-          <Label htmlFor="communityFee">
-            Community Fee <Tooltip content={content.tooltips.communityFee} />
-          </Label>
-          <InputElement
-            value="0.1"
-            name="communityFee"
-            postfix="%"
-            readOnly
-            small
-          />
-        </div>
-        <div>
-          <Label htmlFor="marketplaceFee">
-            Marketplace Fee{' '}
-            <Tooltip content={content.tooltips.marketplaceFee} />
-          </Label>
-          <InputElement
-            value={appConfig.marketFeeAmount}
-            name="marketplaceFee"
-            postfix="%"
-            readOnly
-            small
-          />
-        </div>
-      </div>
 
       <footer className={styles.summary}>
         You will get: <br />

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

@@ -0,0 +1,22 @@
+.fees {
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  margin-left: -2rem;
+  margin-right: -2rem;
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-top: var(--spacer);
+  padding: var(--spacer);
+  padding-top: 0;
+
+  align-items: center;
+  border-bottom: 1px solid var(--brand-grey-lighter);
+}
+
+.fees label {
+  white-space: nowrap;
+}
+
+.fees input {
+  max-width: 5rem;
+}

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

@@ -0,0 +1,64 @@
+import React, { ChangeEvent } from 'react'
+import InputElement from '../../../atoms/Input/InputElement'
+import Label from '../../../atoms/Input/Label'
+import Tooltip from '../../../atoms/Tooltip'
+import styles from './Fees.module.css'
+import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+
+export default function Fees({
+  liquidityProviderFee,
+  onLiquidityProviderFeeChange,
+  tooltips
+}: {
+  liquidityProviderFee: string
+  onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
+  tooltips: { [key: string]: string }
+}) {
+  const { appConfig } = useSiteMetadata()
+
+  return (
+    <div className={styles.fees}>
+      <div>
+        <Label htmlFor="liquidityProviderFee">
+          Liquidity Provider Fee{' '}
+          <Tooltip content={tooltips.liquidityProviderFee} />
+        </Label>
+        <InputElement
+          type="number"
+          value={liquidityProviderFee}
+          name="liquidityProviderFee"
+          postfix="%"
+          onChange={onLiquidityProviderFeeChange}
+          min="0.1"
+          max="0.9"
+          step="0.1"
+          small
+        />
+      </div>
+      <div>
+        <Label htmlFor="communityFee">
+          Community Fee <Tooltip content={tooltips.communityFee} />
+        </Label>
+        <InputElement
+          value="0.1"
+          name="communityFee"
+          postfix="%"
+          readOnly
+          small
+        />
+      </div>
+      <div>
+        <Label htmlFor="marketplaceFee">
+          Marketplace Fee <Tooltip content={tooltips.marketplaceFee} />
+        </Label>
+        <InputElement
+          value={appConfig.marketFeeAmount}
+          name="marketplaceFee"
+          postfix="%"
+          readOnly
+          small
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -56,7 +56,6 @@ export default function Price(props: InputProps): ReactElement {
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setAmountOcean(event.target.value)
-    helpers.setValue({ ...field.value, price: event.target.value })
   }
 
   // TODO: trigger Yup inline validation
@@ -82,7 +81,7 @@ export default function Price(props: InputProps): ReactElement {
     const tokensToMint =
       Number(amountOcean) * Number(priceOptions.weightOnDataToken)
     setTokensToMint(tokensToMint)
-    helpers.setValue({ ...field.value, tokensToMint })
+    helpers.setValue({ ...field.value, price: amountOcean, tokensToMint })
   }, [amountOcean])
 
   useEffect(() => {

src/models/FormPublish.ts

@@ -7,6 +7,7 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
   price: Yup.object().shape({
+    price: Yup.number().required('Required'),
     tokensToMint: Yup.number().required('Required'),
     type: Yup.string()
       .matches(/fixed|dynamic/g)
@@ -36,6 +37,7 @@ export const initialValues: MetadataPublishForm = {
   name: '',
   author: '',
   price: {
+    price: 1,
     type: 'fixed',
     tokensToMint: 1,
     weightOnDataToken: '9', // 90% on data token