From 865c4d7b9d38f80d052297982111deeda0bf9c3c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 16 Sep 2020 11:57:02 +0200
Subject: [PATCH 01/15] make liquidityProviderFee editable

---
 src/components/atoms/Input/index.tsx          |  1 +
 .../molecules/FormFields/Price/Dynamic.tsx    |  8 +++++++-
 .../molecules/FormFields/Price/index.tsx      | 19 +++++++++++++++++--
 src/models/FormPublish.ts                     |  4 ++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 7ff57eb36..9b6002df2 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -30,6 +30,7 @@ export interface InputProps {
   multiple?: boolean
   pattern?: string
   min?: string
+  max?: string
   disabled?: boolean
   readOnly?: boolean
   field?: any
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index a53c01994..bfa7d1054 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -17,6 +17,7 @@ export default function Dynamic({
   priceOptions,
   datatokenOptions,
   onOceanChange,
+  onLiquidityProviderFeeChange,
   generateName,
   content
 }: {
@@ -24,6 +25,7 @@ export default function Dynamic({
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
   generateName: () => void
   content: any
 }): ReactElement {
@@ -104,10 +106,14 @@ export default function Dynamic({
           <Tooltip content={content.tooltips.liquidityProviderFee} />
         </Label>
         <InputElement
+          type="number"
           value={liquidityProviderFee}
           name="liquidityProviderFee"
-          readOnly
           postfix="%"
+          onChange={onLiquidityProviderFeeChange}
+          min="0.1"
+          max="0.9"
+          step="0.1"
         />
       </footer>
 
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index 89cafa62b..86b3b7cbb 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -48,12 +48,22 @@ export default function Price(props: InputProps): ReactElement {
   const [amountOcean, setAmountOcean] = useState('1')
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
+  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>(
+    priceOptions.liquidityProviderFee
+  )
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setAmountOcean(event.target.value)
     helpers.setValue({ ...field.value, price: event.target.value })
   }
 
+  // TODO: trigger Yup inline validation
+  function handleLiquidityProviderFeeChange(
+    event: ChangeEvent<HTMLInputElement>
+  ) {
+    setLiquidityProviderFee(event.target.value)
+  }
+
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     helpers.setValue({ ...field.value, type })
@@ -73,6 +83,10 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, tokensToMint })
   }, [amountOcean])
 
+  useEffect(() => {
+    helpers.setValue({ ...field.value, liquidityProviderFee })
+  }, [liquidityProviderFee])
+
   // Generate new DT name & symbol
   useEffect(() => {
     generateName()
@@ -96,9 +110,10 @@ export default function Price(props: InputProps): ReactElement {
       content: (
         <Dynamic
           ocean={amountOcean}
-          priceOptions={{ ...priceOptions, tokensToMint }}
+          priceOptions={{ ...priceOptions, tokensToMint, liquidityProviderFee }}
           datatokenOptions={datatokenOptions}
           onOceanChange={handleOceanChange}
+          onLiquidityProviderFeeChange={handleLiquidityProviderFeeChange}
           generateName={generateName}
           content={content.dynamic}
         />
@@ -111,7 +126,7 @@ export default function Price(props: InputProps): ReactElement {
       <Tabs items={tabs} handleTabChange={handleTabChange} />
       {debug === true && (
         <pre>
-          <code>{JSON.stringify(field.value)}</code>
+          <code>{JSON.stringify(field.value, null, 2)}</code>
         </pre>
       )}
     </div>
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 66bba0bb0..c31432443 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -13,6 +13,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
       .required('Required'),
     weightOnDataToken: Yup.string().required('Required'),
     liquidityProviderFee: Yup.string()
+      .length(3)
+      .min(0.1)
+      .max(0.9)
+      .required('Required')
   }),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),

From a1da02b8e42481baadd938450cf494c3c38a10e4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 16 Sep 2020 15:55:40 +0200
Subject: [PATCH 02/15] output fees in dynamic price UI

---
 content/pages/publish.json                    |  6 +-
 .../atoms/Input/InputElement.module.css       |  6 ++
 src/components/atoms/Input/InputElement.tsx   | 32 ++++++++--
 .../FormFields/Price/Dynamic.module.css       | 22 +++++--
 .../molecules/FormFields/Price/Dynamic.tsx    | 61 ++++++++++++++-----
 .../molecules/FormFields/Price/index.tsx      |  2 +
 6 files changed, 104 insertions(+), 25 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index 11300e99d..9825b0a1d 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -106,8 +106,10 @@
       "title": "Dynamic",
       "info": "Let's create a decentralized, automated market for your data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
       "tooltips": {
-        "poolInfo": "Help me",
-        "liquidityProviderFee": "Help me"
+        "poolInfo": "Explain what is going on here...",
+        "liquidityProviderFee": "Explain liquidity provider fee...",
+        "communityFee": "Explain community fee...",
+        "marketplaceFee": "Explain marketplace fee..."
       }
     }
   }
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 132db0897..37045d189 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -207,6 +207,12 @@
   font-size: var(--font-size-small);
 }
 
+.prefix.small,
+.postfix.small {
+  min-height: 34px;
+  font-size: var(--font-size-mini);
+}
+
 .selectSmall {
   composes: small;
   height: 34px;
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index eeb986242..6a4e4487b 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -7,7 +7,11 @@ import Terms from '../../molecules/FormFields/Terms'
 import Price from '../../molecules/FormFields/Price'
 
 const DefaultInput = (props: InputProps) => (
-  <input className={styles.input} id={props.name} {...props} />
+  <input
+    className={`${styles.input} ${props.small ? styles.small : null}`}
+    id={props.name}
+    {...props}
+  />
 )
 
 export default function InputElement({
@@ -75,12 +79,30 @@ export default function InputElement({
     default:
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
-          {prefix && <div className={styles.prefix}>{prefix}</div>}
-          <DefaultInput name={name} type={type || 'text'} {...props} />
-          {postfix && <div className={styles.postfix}>{postfix}</div>}
+          {prefix && (
+            <div className={`${styles.prefix} ${small ? styles.small : ''}`}>
+              {prefix}
+            </div>
+          )}
+          <DefaultInput
+            name={name}
+            type={type || 'text'}
+            small={small}
+            {...props}
+          />
+          {postfix && (
+            <div className={`${styles.postfix} ${small ? styles.small : ''}`}>
+              {postfix}
+            </div>
+          )}
         </div>
       ) : (
-        <DefaultInput name={name} type={type || 'text'} {...props} />
+        <DefaultInput
+          name={name}
+          type={type || 'text'}
+          small={small}
+          {...props}
+        />
       )
   }
 }
diff --git a/src/components/molecules/FormFields/Price/Dynamic.module.css b/src/components/molecules/FormFields/Price/Dynamic.module.css
index bc493ef6b..4c530312f 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.module.css
+++ b/src/components/molecules/FormFields/Price/Dynamic.module.css
@@ -34,7 +34,8 @@
   padding-bottom: calc(var(--spacer) / 3);
 }
 
-.tokens {
+.tokens,
+.fees {
   display: grid;
 
   margin-left: -2rem;
@@ -48,15 +49,28 @@
   }
 }
 
-.summary {
-  text-align: center;
+.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);
 }
 
-.summary input {
+.fees label {
+  white-space: nowrap;
+}
+
+.fees input {
   max-width: 5rem;
 }
 
+.summary {
+  margin-top: var(--spacer);
+}
+
 .alertArea {
   margin-left: -2rem;
   margin-right: -2rem;
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index bfa7d1054..bf3e4d9c5 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -100,21 +100,54 @@ export default function Dynamic({
         />
       </div>
 
+      <div className={styles.fees}>
+        <div>
+          <Label htmlFor="liquidityProviderFee">
+            Liquidity Provider Fee{' '}
+            <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}>
-        <Label htmlFor="liquidityProviderFee">
-          Liquidity Provider Fee{' '}
-          <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"
-        />
+        You will get: <br />
+        100% share of pool
       </footer>
 
       {error && (
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index 86b3b7cbb..dff92356f 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -26,6 +26,8 @@ const query = graphql`
                 tooltips {
                   poolInfo
                   liquidityProviderFee
+                  communityFee
+                  marketplaceFee
                 }
               }
             }

From 053717ac9513688415f35518095628ba270437b9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 19 Sep 2020 10:50:28 +0000
Subject: [PATCH 03/15] refactoring

---
 src/@types/MetaData.d.ts                      |  5 +-
 .../FormFields/Price/Dynamic.module.css       | 21 +-----
 .../molecules/FormFields/Price/Dynamic.tsx    | 56 +++-------------
 .../FormFields/Price/Fees.module.css          | 22 +++++++
 .../molecules/FormFields/Price/Fees.tsx       | 64 +++++++++++++++++++
 .../molecules/FormFields/Price/index.tsx      |  3 +-
 src/models/FormPublish.ts                     |  2 +
 7 files changed, 102 insertions(+), 71 deletions(-)
 create mode 100644 src/components/molecules/FormFields/Price/Fees.module.css
 create mode 100644 src/components/molecules/FormFields/Price/Fees.tsx

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index df787238c..023101e30 100644
--- a/src/@types/MetaData.d.ts
+++ b/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 {
diff --git a/src/components/molecules/FormFields/Price/Dynamic.module.css b/src/components/molecules/FormFields/Price/Dynamic.module.css
index 4c530312f..9eb4d843b 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.module.css
+++ b/src/components/molecules/FormFields/Price/Dynamic.module.css
@@ -34,8 +34,7 @@
   padding-bottom: calc(var(--spacer) / 3);
 }
 
-.tokens,
-.fees {
+.tokens {
   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);
 }
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index bf3e4d9c5..c82030e97 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/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}>
-        <div>
-          <Label htmlFor="liquidityProviderFee">
-            Liquidity Provider Fee{' '}
-            <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>
+      <Fees
+        liquidityProviderFee={liquidityProviderFee}
+        onLiquidityProviderFeeChange={onLiquidityProviderFeeChange}
+        tooltips={content.tooltips}
+      />
 
       <footer className={styles.summary}>
         You will get: <br />
diff --git a/src/components/molecules/FormFields/Price/Fees.module.css b/src/components/molecules/FormFields/Price/Fees.module.css
new file mode 100644
index 000000000..2105e187a
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/molecules/FormFields/Price/Fees.tsx
new file mode 100644
index 000000000..293d24b53
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index dff92356f..e94c723d7 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/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(() => {
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index c31432443..0579a90c6 100644
--- a/src/models/FormPublish.ts
+++ b/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

From 041dfcee0859cdf276966a215150c248c57f56be Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 13:09:21 +0200
Subject: [PATCH 04/15] =?UTF-8?q?Data=20Token=20=E2=86=92=20Datatoken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/pages/publish.json                           | 4 ++--
 src/components/organisms/AssetActions/Pool/index.tsx | 2 +-
 src/components/organisms/AssetContent/MetaFull.tsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index 9825b0a1d..3099b6ed3 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -100,11 +100,11 @@
   "price": {
     "fixed": {
       "title": "Fixed",
-      "info": "Set your price for accessing this data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created."
+      "info": "Set your price for accessing this data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created."
     },
     "dynamic": {
       "title": "Dynamic",
-      "info": "Let's create a decentralized, automated market for your data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
+      "info": "Let's create a decentralized, automated market for your data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Datatoken/OCEAN liquidity pool with Balancer.",
       "tooltips": {
         "poolInfo": "Explain what is going on here...",
         "liquidityProviderFee": "Explain liquidity provider fee...",
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 02197a1d9..f668e0786 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -144,7 +144,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                 Pool
               </EtherscanLink>
               <EtherscanLink network="rinkeby" path={`token/${ddo.dataToken}`}>
-                Data Token
+                Datatoken
               </EtherscanLink>
             </div>
           </div>
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index c6cb7c1fb..707f3eeca 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -56,7 +56,7 @@ export default function MetaFull({
       />
 
       <MetaItem
-        title="Data Token"
+        title="Datatoken"
         content={
           <EtherscanLink network="rinkeby" path={`token/${dataToken}`}>
             {dtName ? `${dtName} - ${dtSymbol}` : <code>{dataToken}</code>}

From 2a13a760bda7a9952bbb3c4d7d4cd8b482a23521 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 14:23:04 +0200
Subject: [PATCH 05/15] refactor to make live validation work

---
 src/components/atoms/Input/index.tsx          |  7 +-
 .../molecules/FormFields/Price/Coin.tsx       | 13 ++--
 .../molecules/FormFields/Price/Dynamic.tsx    | 22 ++----
 .../molecules/FormFields/Price/Fees.tsx       | 74 +++++++++++--------
 .../molecules/FormFields/Price/Fixed.tsx      | 25 +++----
 .../molecules/FormFields/Price/index.tsx      | 35 ++-------
 src/models/FormPublish.ts                     | 24 +++---
 7 files changed, 86 insertions(+), 114 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 9b6002df2..5e5ad85b6 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -10,7 +10,7 @@ const cx = classNames.bind(styles)
 
 export interface InputProps {
   name: string
-  label?: string
+  label?: string | ReactNode
   placeholder?: string
   required?: boolean
   help?: string
@@ -54,8 +54,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
   } = props
 
   const hasError =
-    props.form?.touched[field.name] &&
-    typeof props.form.errors[field.name] === 'string'
+    props.form?.touched[field.name] && props.form?.errors[field.name]
 
   const styleClasses = cx({
     field: true,
@@ -72,7 +71,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       </Label>
       <InputElement small={small} {...field} {...props} />
 
-      {field && (
+      {field && field.name !== 'price' && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 65c420ccb..97731b479 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -6,24 +6,23 @@ import { ReactComponent as Logo } from '../../../../images/logo.svg'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import RefreshName from './RefreshName'
+import { useField } from 'formik'
 
 export default function Coin({
   datatokenOptions,
   name,
-  value,
   weight,
-  onOceanChange,
   generateName,
   readOnly
 }: {
   datatokenOptions: DataTokenOptions
   name: string
-  value: string
   weight: string
-  onOceanChange?: (event: ChangeEvent<HTMLInputElement>) => void
   generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
+  const [field, meta, helpers] = useField(name)
+
   return (
     <div className={styles.coin}>
       <figure className={styles.icon}>
@@ -43,15 +42,15 @@ export default function Coin({
 
       <div className={styles.data}>
         <InputElement
-          value={value}
+          value={field.value}
           name={name}
           type="number"
-          onChange={onOceanChange}
           readOnly={readOnly}
           prefix={datatokenOptions?.symbol || 'DT'}
+          {...field}
         />
         {datatokenOptions?.symbol === 'OCEAN' && (
-          <Conversion price={value} className={stylesIndex.conversion} />
+          <Conversion price={field.value} className={stylesIndex.conversion} />
         )}
       </div>
     </div>
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index c82030e97..84d11c4c5 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -15,22 +15,18 @@ export default function Dynamic({
   ocean,
   priceOptions,
   datatokenOptions,
-  onOceanChange,
-  onLiquidityProviderFeeChange,
   generateName,
   content
 }: {
   ocean: string
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
-  onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
-  onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
   generateName: () => void
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
-  const { weightOnDataToken, tokensToMint, liquidityProviderFee } = priceOptions
+  const { weightOnDataToken } = priceOptions
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(chainId)
@@ -77,33 +73,25 @@ export default function Dynamic({
       </aside>
 
       <h4 className={styles.title}>
-        Data Token Liquidity Pool{' '}
-        <Tooltip content={content.tooltips.poolInfo} />
+        Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />
       </h4>
 
       <div className={styles.tokens}>
         <Coin
-          name="ocean"
+          name="price.price"
           datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-          value={ocean}
           weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
-          onOceanChange={onOceanChange}
         />
         <Coin
-          name="tokensToMint"
+          name="price.tokensToMint"
           datatokenOptions={datatokenOptions}
-          value={tokensToMint.toString()}
           weight={`${Number(weightOnDataToken) * 10}%`}
           generateName={generateName}
           readOnly
         />
       </div>
 
-      <Fees
-        liquidityProviderFee={liquidityProviderFee}
-        onLiquidityProviderFeeChange={onLiquidityProviderFeeChange}
-        tooltips={content.tooltips}
-      />
+      <Fees tooltips={content.tooltips} />
 
       <footer className={styles.summary}>
         You will get: <br />
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/molecules/FormFields/Price/Fees.tsx
index 293d24b53..a66d45799 100644
--- a/src/components/molecules/FormFields/Price/Fees.tsx
+++ b/src/components/molecules/FormFields/Price/Fees.tsx
@@ -1,57 +1,68 @@
-import React, { ChangeEvent } from 'react'
-import InputElement from '../../../atoms/Input/InputElement'
-import Label from '../../../atoms/Input/Label'
+import React, { ChangeEvent, ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import { useField } from 'formik'
+import Input from '../../../atoms/Input'
 
 export default function Fees({
-  liquidityProviderFee,
-  onLiquidityProviderFeeChange,
   tooltips
 }: {
-  liquidityProviderFee: string
-  onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
   tooltips: { [key: string]: string }
-}) {
+}): ReactElement {
   const { appConfig } = useSiteMetadata()
+  const [field, meta, helpers] = useField('price.liquidityProviderFee')
+
+  // TODO: trigger Yup inline validation
+  function handleLiquidityProviderFeeChange(
+    event: ChangeEvent<HTMLInputElement>
+  ) {
+    helpers.setValue(event.target.value)
+  }
 
   return (
-    <div className={styles.fees}>
-      <div>
-        <Label htmlFor="liquidityProviderFee">
-          Liquidity Provider Fee{' '}
-          <Tooltip content={tooltips.liquidityProviderFee} />
-        </Label>
-        <InputElement
+    <>
+      <div className={styles.fees}>
+        <Input
+          label={
+            <>
+              Liquidity Provider Fee
+              <Tooltip content={tooltips.liquidityProviderFee} />
+            </>
+          }
           type="number"
-          value={liquidityProviderFee}
-          name="liquidityProviderFee"
+          value={field.value}
+          name="price.liquidityProviderFee"
           postfix="%"
-          onChange={onLiquidityProviderFeeChange}
+          onChange={handleLiquidityProviderFeeChange}
           min="0.1"
           max="0.9"
           step="0.1"
           small
+          {...field}
         />
-      </div>
-      <div>
-        <Label htmlFor="communityFee">
-          Community Fee <Tooltip content={tooltips.communityFee} />
-        </Label>
-        <InputElement
+
+        <Input
+          label={
+            <>
+              Community Fee
+              <Tooltip content={tooltips.communityFee} />
+            </>
+          }
           value="0.1"
           name="communityFee"
           postfix="%"
           readOnly
           small
         />
-      </div>
-      <div>
-        <Label htmlFor="marketplaceFee">
-          Marketplace Fee <Tooltip content={tooltips.marketplaceFee} />
-        </Label>
-        <InputElement
+
+        <Input
+          label={
+            <>
+              Marketplace Fee
+              <Tooltip content={tooltips.marketplaceFee} />
+            </>
+          }
           value={appConfig.marketFeeAmount}
           name="marketplaceFee"
           postfix="%"
@@ -59,6 +70,7 @@ export default function Fees({
           small
         />
       </div>
-    </div>
+      {meta.error && meta.touched && <div>{meta.error}</div>}
+    </>
   )
 }
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index bfffa4112..75f056b1a 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -1,42 +1,41 @@
-import React, { ReactElement, ChangeEvent } from 'react'
+import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
 import FormHelp from '../../../atoms/Input/Help'
-import Label from '../../../atoms/Input/Label'
-import InputElement from '../../../atoms/Input/InputElement'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import RefreshName from './RefreshName'
+import { useField } from 'formik'
+import Input from '../../../atoms/Input'
 
 export default function Fixed({
-  ocean,
   datatokenOptions,
-  onChange,
   generateName,
   content
 }: {
-  ocean: string
   datatokenOptions: DataTokenOptions
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void
   generateName: () => void
   content: any
 }): ReactElement {
+  const [field, meta, helpers] = useField('price.price')
+
   return (
     <div className={styles.fixed}>
       <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
       <div className={styles.grid}>
         <div className={styles.form}>
-          <Label htmlFor="ocean">Ocean Token</Label>
-          <InputElement
-            value={ocean}
-            name="ocean"
+          <Input
+            label="Ocean Token"
+            value={field.value}
+            name="price.price"
             type="number"
             prefix="OCEAN"
-            onChange={onChange}
+            {...field}
           />
-          <Conversion price={ocean} className={stylesIndex.conversion} />
+          <Conversion price={field.value} className={stylesIndex.conversion} />
         </div>
+        {meta.error && meta.touched && <div>{meta.error}</div>}
         {datatokenOptions && (
           <div className={styles.datatoken}>
             <h4>
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index e94c723d7..f278f4032 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -44,26 +44,11 @@ export default function Price(props: InputProps): ReactElement {
   const content = data.content.edges[0].node.childPagesJson.price
   const { ocean } = useOcean()
 
-  const [field, meta, helpers] = useField(props)
+  const [field, meta, helpers] = useField(props.name)
   const priceOptions: PriceOptions = field.value
 
-  const [amountOcean, setAmountOcean] = useState('1')
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
-  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>(
-    priceOptions.liquidityProviderFee
-  )
-
-  function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
-    setAmountOcean(event.target.value)
-  }
-
-  // TODO: trigger Yup inline validation
-  function handleLiquidityProviderFeeChange(
-    event: ChangeEvent<HTMLInputElement>
-  ) {
-    setLiquidityProviderFee(event.target.value)
-  }
 
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
@@ -79,14 +64,10 @@ export default function Price(props: InputProps): ReactElement {
   // Always update everything when amountOcean changes
   useEffect(() => {
     const tokensToMint =
-      Number(amountOcean) * Number(priceOptions.weightOnDataToken)
+      Number(field.value.price) * Number(priceOptions.weightOnDataToken)
     setTokensToMint(tokensToMint)
-    helpers.setValue({ ...field.value, price: amountOcean, tokensToMint })
-  }, [amountOcean])
-
-  useEffect(() => {
-    helpers.setValue({ ...field.value, liquidityProviderFee })
-  }, [liquidityProviderFee])
+    helpers.setValue({ ...field.value, tokensToMint })
+  }, [field.value.price])
 
   // Generate new DT name & symbol
   useEffect(() => {
@@ -98,9 +79,7 @@ export default function Price(props: InputProps): ReactElement {
       title: content.fixed.title,
       content: (
         <Fixed
-          ocean={amountOcean}
           datatokenOptions={datatokenOptions}
-          onChange={handleOceanChange}
           generateName={generateName}
           content={content.fixed}
         />
@@ -110,11 +89,9 @@ export default function Price(props: InputProps): ReactElement {
       title: content.dynamic.title,
       content: (
         <Dynamic
-          ocean={amountOcean}
-          priceOptions={{ ...priceOptions, tokensToMint, liquidityProviderFee }}
+          ocean={field.value.price}
+          priceOptions={{ ...priceOptions, tokensToMint }}
           datatokenOptions={datatokenOptions}
-          onOceanChange={handleOceanChange}
-          onLiquidityProviderFeeChange={handleLiquidityProviderFeeChange}
           generateName={generateName}
           content={content.dynamic}
         />
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 0579a90c6..e6d37878e 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -6,19 +6,17 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   // ---- required fields ----
   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)
-      .required('Required'),
-    weightOnDataToken: Yup.string().required('Required'),
-    liquidityProviderFee: Yup.string()
-      .length(3)
-      .min(0.1)
-      .max(0.9)
-      .required('Required')
-  }),
+  price: Yup.object()
+    .shape({
+      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
+      tokensToMint: Yup.number().required('Required'),
+      type: Yup.string()
+        .matches(/fixed|dynamic/g)
+        .required('Required'),
+      weightOnDataToken: Yup.string().required('Required'),
+      liquidityProviderFee: Yup.string().min(0.1).max(0.9).required('Required')
+    })
+    .required('Required'),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),
   license: Yup.string().required('Required'),

From 9008ad2018eb4699aed8120b8930a5861ebe1dff Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 14:41:38 +0200
Subject: [PATCH 06/15] validation fixes

---
 .../molecules/FormFields/Price/Coin.tsx        |  6 ++----
 .../molecules/FormFields/Price/Dynamic.tsx     |  2 +-
 .../molecules/FormFields/Price/Fees.tsx        | 18 +++++-------------
 .../molecules/FormFields/Price/Fixed.tsx       |  2 +-
 .../molecules/FormFields/Price/index.tsx       | 13 ++++++-------
 src/models/FormPublish.ts                      | 11 ++++++++---
 6 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 97731b479..10d055b3a 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ChangeEvent } from 'react'
+import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
 import InputElement from '../../../atoms/Input/InputElement'
@@ -21,7 +21,7 @@ export default function Coin({
   generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
-  const [field, meta, helpers] = useField(name)
+  const [field] = useField(name)
 
   return (
     <div className={styles.coin}>
@@ -42,8 +42,6 @@ export default function Coin({
 
       <div className={styles.data}>
         <InputElement
-          value={field.value}
-          name={name}
           type="number"
           readOnly={readOnly}
           prefix={datatokenOptions?.symbol || 'DT'}
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index 84d11c4c5..a89a45ece 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -18,7 +18,7 @@ export default function Dynamic({
   generateName,
   content
 }: {
-  ocean: string
+  ocean: number
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
   generateName: () => void
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/molecules/FormFields/Price/Fees.tsx
index a66d45799..063cb3fb9 100644
--- a/src/components/molecules/FormFields/Price/Fees.tsx
+++ b/src/components/molecules/FormFields/Price/Fees.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
@@ -11,14 +11,7 @@ export default function Fees({
   tooltips: { [key: string]: string }
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const [field, meta, helpers] = useField('price.liquidityProviderFee')
-
-  // TODO: trigger Yup inline validation
-  function handleLiquidityProviderFeeChange(
-    event: ChangeEvent<HTMLInputElement>
-  ) {
-    helpers.setValue(event.target.value)
-  }
+  const [field, meta] = useField('price.liquidityProviderFee')
 
   return (
     <>
@@ -31,15 +24,15 @@ export default function Fees({
             </>
           }
           type="number"
-          value={field.value}
-          name="price.liquidityProviderFee"
           postfix="%"
-          onChange={handleLiquidityProviderFeeChange}
           min="0.1"
           max="0.9"
           step="0.1"
           small
           {...field}
+          additionalComponent={
+            meta.error && meta.touched && <div>{meta.error}</div>
+          }
         />
 
         <Input
@@ -70,7 +63,6 @@ export default function Fees({
           small
         />
       </div>
-      {meta.error && meta.touched && <div>{meta.error}</div>}
     </>
   )
 }
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index 75f056b1a..979333340 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -17,7 +17,7 @@ export default function Fixed({
   generateName: () => void
   content: any
 }): ReactElement {
-  const [field, meta, helpers] = useField('price.price')
+  const [field, meta] = useField('price.price')
 
   return (
     <div className={styles.fixed}>
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index f278f4032..e1b51fe33 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import { InputProps } from '../../../atoms/Input'
 import styles from './index.module.css'
@@ -45,7 +45,7 @@ export default function Price(props: InputProps): ReactElement {
   const { ocean } = useOcean()
 
   const [field, meta, helpers] = useField(props.name)
-  const priceOptions: PriceOptions = field.value
+  const { price }: PriceOptions = field.value
 
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
@@ -63,11 +63,10 @@ export default function Price(props: InputProps): ReactElement {
 
   // Always update everything when amountOcean changes
   useEffect(() => {
-    const tokensToMint =
-      Number(field.value.price) * Number(priceOptions.weightOnDataToken)
+    const tokensToMint = Number(price) * Number(field.value.weightOnDataToken)
     setTokensToMint(tokensToMint)
     helpers.setValue({ ...field.value, tokensToMint })
-  }, [field.value.price])
+  }, [price])
 
   // Generate new DT name & symbol
   useEffect(() => {
@@ -89,8 +88,8 @@ export default function Price(props: InputProps): ReactElement {
       title: content.dynamic.title,
       content: (
         <Dynamic
-          ocean={field.value.price}
-          priceOptions={{ ...priceOptions, tokensToMint }}
+          ocean={price}
+          priceOptions={{ ...field.value, tokensToMint }}
           datatokenOptions={datatokenOptions}
           generateName={generateName}
           content={content.dynamic}
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index e6d37878e..a3b8afb8a 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -8,13 +8,18 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   author: Yup.string().required('Required'),
   price: Yup.object()
     .shape({
-      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-      tokensToMint: Yup.number().required('Required'),
+      price: Yup.number()
+        .min(1, 'Must be greater than 0')
+        .positive()
+        .required('Required'),
+      tokensToMint: Yup.number().positive().required('Required'),
       type: Yup.string()
         .matches(/fixed|dynamic/g)
         .required('Required'),
       weightOnDataToken: Yup.string().required('Required'),
-      liquidityProviderFee: Yup.string().min(0.1).max(0.9).required('Required')
+      liquidityProviderFee: Yup.string()
+        .matches(/0.[0-9]/, 'Only values between 0.1 - 0.9 are allowed')
+        .required('Required')
     })
     .required('Required'),
   files: Yup.array<FileMetadata>().required('Required').nullable(),

From 83d791cf1b2d421609512ca3d344d2e07e056aa9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 15:28:13 +0200
Subject: [PATCH 07/15] price validation ui fixes

---
 src/@types/MetaData.d.ts                            |  6 +++++-
 src/components/atoms/Input/InputElement.module.css  |  9 +++++++++
 src/components/molecules/FormFields/Price/Coin.tsx  |  6 +++++-
 .../molecules/FormFields/Price/Dynamic.tsx          |  7 ++++---
 .../molecules/FormFields/Price/Fees.module.css      |  1 -
 src/components/molecules/FormFields/Price/Fees.tsx  |  6 +++++-
 .../molecules/FormFields/Price/Fixed.module.css     |  4 ++++
 src/components/molecules/FormFields/Price/Fixed.tsx | 13 +++++++++++--
 .../molecules/FormFields/Price/index.module.css     |  5 +++++
 src/components/molecules/FormFields/Price/index.tsx |  3 ++-
 src/models/FormPublish.ts                           | 13 +++++--------
 11 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 023101e30..ee7f94ae9 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -19,6 +19,10 @@ export interface MetadataMarket extends Metadata {
   additionalInformation?: AdditionalInformationMarket
 }
 
+export interface PriceOptionsMarket extends PriceOptions {
+  liquidityProviderFee: number
+}
+
 export interface MetadataPublishForm {
   // ---- required fields ----
   name: string
@@ -26,7 +30,7 @@ export interface MetadataPublishForm {
   files: string | File[]
   author: string
   license: string
-  price: PriceOptions
+  price: PriceOptionsMarket
   access: 'Download' | 'Compute' | string
   termsAndConditions: boolean
   // ---- optional fields ----
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 37045d189..902d55ef7 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -38,6 +38,15 @@
   color: var(--brand-grey-light);
   cursor: not-allowed;
   pointer-events: none;
+  /* for hiding spin buttons in Firefox */
+  -moz-appearance: textfield;
+}
+
+.input[readonly]::-webkit-inner-spin-button,
+.input[disabled]::-webkit-inner-spin-button,
+.input[readonly]::-webkit-outer-spin-button,
+.input[disabled]::-webkit-outer-spin-button {
+  display: none;
 }
 
 .select {
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 10d055b3a..f5bff2d2d 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
+import stylesInput from '../../../atoms/Input/index.module.css'
 import InputElement from '../../../atoms/Input/InputElement'
 import { ReactComponent as Logo } from '../../../../images/logo.svg'
 import Conversion from '../../../atoms/Price/Conversion'
@@ -21,7 +22,7 @@ export default function Coin({
   generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
-  const [field] = useField(name)
+  const [field, meta] = useField(name)
 
   return (
     <div className={styles.coin}>
@@ -50,6 +51,9 @@ export default function Coin({
         {datatokenOptions?.symbol === 'OCEAN' && (
           <Conversion price={field.value} className={stylesIndex.conversion} />
         )}
+        {meta.error && meta.touched && (
+          <div className={stylesInput.error}>{meta.error}</div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index a89a45ece..fc5b52d89 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -1,15 +1,16 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Dynamic.module.css'
 import FormHelp from '../../../atoms/Input/Help'
 import Wallet from '../../Wallet'
-import { DataTokenOptions, PriceOptions, useOcean } from '@oceanprotocol/react'
+import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
 import Alert from '../../../atoms/Alert'
 import Coin from './Coin'
 import { isCorrectNetwork } from '../../../../utils/wallet'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import Tooltip from '../../../atoms/Tooltip'
 import Fees from './Fees'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 export default function Dynamic({
   ocean,
@@ -19,7 +20,7 @@ export default function Dynamic({
   content
 }: {
   ocean: number
-  priceOptions: PriceOptions
+  priceOptions: PriceOptionsMarket
   datatokenOptions: DataTokenOptions
   generateName: () => void
   content: any
diff --git a/src/components/molecules/FormFields/Price/Fees.module.css b/src/components/molecules/FormFields/Price/Fees.module.css
index 2105e187a..9bfaf2ba7 100644
--- a/src/components/molecules/FormFields/Price/Fees.module.css
+++ b/src/components/molecules/FormFields/Price/Fees.module.css
@@ -9,7 +9,6 @@
   padding: var(--spacer);
   padding-top: 0;
 
-  align-items: center;
   border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/molecules/FormFields/Price/Fees.tsx
index 063cb3fb9..256f89872 100644
--- a/src/components/molecules/FormFields/Price/Fees.tsx
+++ b/src/components/molecules/FormFields/Price/Fees.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
+import stylesInput from '../../../atoms/Input/index.module.css'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
@@ -31,7 +32,10 @@ export default function Fees({
           small
           {...field}
           additionalComponent={
-            meta.error && meta.touched && <div>{meta.error}</div>
+            meta.error &&
+            meta.touched && (
+              <div className={stylesInput.error}>{meta.error}</div>
+            )
           }
         />
 
diff --git a/src/components/molecules/FormFields/Price/Fixed.module.css b/src/components/molecules/FormFields/Price/Fixed.module.css
index 4eef6bea7..9d7ca5a15 100644
--- a/src/components/molecules/FormFields/Price/Fixed.module.css
+++ b/src/components/molecules/FormFields/Price/Fixed.module.css
@@ -2,6 +2,10 @@
   composes: content from './index.module.css';
 }
 
+.form {
+  position: relative;
+}
+
 @media (min-width: 55rem) {
   .form {
     max-width: 12rem;
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index 979333340..ffd3aef71 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
+import stylesInput from '../../../atoms/Input/index.module.css'
 import FormHelp from '../../../atoms/Input/Help'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
@@ -32,10 +33,18 @@ export default function Fixed({
             type="number"
             prefix="OCEAN"
             {...field}
+            additionalComponent={
+              <Conversion
+                price={field.value}
+                className={stylesIndex.conversion}
+              />
+            }
           />
-          <Conversion price={field.value} className={stylesIndex.conversion} />
+          {meta.error && meta.touched && (
+            <div className={stylesInput.error}>{meta.error}</div>
+          )}
         </div>
-        {meta.error && meta.touched && <div>{meta.error}</div>}
+
         {datatokenOptions && (
           <div className={styles.datatoken}>
             <h4>
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css
index 7655b3bbc..22182cdad 100644
--- a/src/components/molecules/FormFields/Price/index.module.css
+++ b/src/components/molecules/FormFields/Price/index.module.css
@@ -20,6 +20,11 @@
   margin-bottom: 0;
 }
 
+.content [class*='error'] {
+  text-align: left;
+  top: 100%;
+}
+
 .conversion {
   width: 100%;
   display: block;
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index e1b51fe33..6e0e7395a 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -8,6 +8,7 @@ import Dynamic from './Dynamic'
 import { useField } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import { DataTokenOptions, PriceOptions, useOcean } from '@oceanprotocol/react'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 const query = graphql`
   query PriceFieldQuery {
@@ -45,7 +46,7 @@ export default function Price(props: InputProps): ReactElement {
   const { ocean } = useOcean()
 
   const [field, meta, helpers] = useField(props.name)
-  const { price }: PriceOptions = field.value
+  const { price }: PriceOptionsMarket = field.value
 
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index a3b8afb8a..b6fb6796a 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -8,17 +8,15 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   author: Yup.string().required('Required'),
   price: Yup.object()
     .shape({
-      price: Yup.number()
-        .min(1, 'Must be greater than 0')
-        .positive()
-        .required('Required'),
+      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
       tokensToMint: Yup.number().positive().required('Required'),
       type: Yup.string()
         .matches(/fixed|dynamic/g)
         .required('Required'),
       weightOnDataToken: Yup.string().required('Required'),
-      liquidityProviderFee: Yup.string()
-        .matches(/0.[0-9]/, 'Only values between 0.1 - 0.9 are allowed')
+      liquidityProviderFee: Yup.number()
+        .min(0.1, 'Must be more or equal to 0.1')
+        .max(0.9, 'Must be less or equal to 0.9')
         .required('Required')
     })
     .required('Required'),
@@ -44,8 +42,7 @@ export const initialValues: MetadataPublishForm = {
     type: 'fixed',
     tokensToMint: 1,
     weightOnDataToken: '9', // 90% on data token
-    liquidityProviderFee: '0.1', // in %
-    price: 1
+    liquidityProviderFee: 0.1 // in %
   },
   files: '',
   description: '',

From eb8221d104837ef9d96be61215e695b3e67444a0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 17:50:45 +0000
Subject: [PATCH 08/15] more fixes

---
 src/components/molecules/FormFields/Price/Coin.tsx  |  6 ++----
 src/components/molecules/FormFields/Price/Error.tsx | 13 +++++++++++++
 src/components/molecules/FormFields/Price/Fees.tsx  |  9 ++-------
 src/components/molecules/FormFields/Price/Fixed.tsx |  6 ++----
 src/components/molecules/FormFields/Price/index.tsx |  2 +-
 src/models/FormPublish.ts                           |  4 +++-
 6 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 src/components/molecules/FormFields/Price/Error.tsx

diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index f5bff2d2d..9e92b9f80 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
-import stylesInput from '../../../atoms/Input/index.module.css'
 import InputElement from '../../../atoms/Input/InputElement'
 import { ReactComponent as Logo } from '../../../../images/logo.svg'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import RefreshName from './RefreshName'
 import { useField } from 'formik'
+import Error from './Error'
 
 export default function Coin({
   datatokenOptions,
@@ -51,9 +51,7 @@ export default function Coin({
         {datatokenOptions?.symbol === 'OCEAN' && (
           <Conversion price={field.value} className={stylesIndex.conversion} />
         )}
-        {meta.error && meta.touched && (
-          <div className={stylesInput.error}>{meta.error}</div>
-        )}
+        <Error meta={meta} />
       </div>
     </div>
   )
diff --git a/src/components/molecules/FormFields/Price/Error.tsx b/src/components/molecules/FormFields/Price/Error.tsx
new file mode 100644
index 000000000..2d25d0816
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/Error.tsx
@@ -0,0 +1,13 @@
+import { FieldMetaProps } from 'formik'
+import React, { ReactElement } from 'react'
+import stylesInput from '../../../atoms/Input/index.module.css'
+
+export default function Error({
+  meta
+}: {
+  meta: FieldMetaProps<any>
+}): ReactElement {
+  return meta.error ? (
+    <div className={stylesInput.error}>{meta.error}</div>
+  ) : null
+}
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/molecules/FormFields/Price/Fees.tsx
index 256f89872..2e19db493 100644
--- a/src/components/molecules/FormFields/Price/Fees.tsx
+++ b/src/components/molecules/FormFields/Price/Fees.tsx
@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
-import stylesInput from '../../../atoms/Input/index.module.css'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
+import Error from './Error'
 
 export default function Fees({
   tooltips
@@ -31,12 +31,7 @@ export default function Fees({
           step="0.1"
           small
           {...field}
-          additionalComponent={
-            meta.error &&
-            meta.touched && (
-              <div className={stylesInput.error}>{meta.error}</div>
-            )
-          }
+          additionalComponent={<Error meta={meta} />}
         />
 
         <Input
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index ffd3aef71..5288c36e1 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
-import stylesInput from '../../../atoms/Input/index.module.css'
 import FormHelp from '../../../atoms/Input/Help'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import RefreshName from './RefreshName'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
+import Error from './Error'
 
 export default function Fixed({
   datatokenOptions,
@@ -40,9 +40,7 @@ export default function Fixed({
               />
             }
           />
-          {meta.error && meta.touched && (
-            <div className={stylesInput.error}>{meta.error}</div>
-          )}
+          <Error meta={meta} />
         </div>
 
         {datatokenOptions && (
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index 6e0e7395a..c5c938004 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -7,7 +7,7 @@ import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useField } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { DataTokenOptions, PriceOptions, useOcean } from '@oceanprotocol/react'
+import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 const query = graphql`
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index b6fb6796a..7bc78a9f4 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -9,7 +9,9 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   price: Yup.object()
     .shape({
       price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-      tokensToMint: Yup.number().positive().required('Required'),
+      tokensToMint: Yup.number()
+        .min(1, 'Must be greater than 0')
+        .required('Required'),
       type: Yup.string()
         .matches(/fixed|dynamic/g)
         .required('Required'),

From fbef95a644437d17e94b067f20c7713f1b5f2f3d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 18:18:24 +0000
Subject: [PATCH 09/15] fix empty optional fields

---
 .../molecules/FormFields/FilesInput/index.tsx         |  8 ++------
 src/models/FormPublish.ts                             | 11 ++++-------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/FormFields/FilesInput/index.tsx b/src/components/molecules/FormFields/FilesInput/index.tsx
index cb0a7259a..9c07727ba 100644
--- a/src/components/molecules/FormFields/FilesInput/index.tsx
+++ b/src/components/molecules/FormFields/FilesInput/index.tsx
@@ -6,12 +6,8 @@ import FileInput from './Input'
 import { getFileInfo } from '../../../../utils'
 import { InputProps } from '../../../atoms/Input'
 
-interface Values {
-  url: string
-}
-
 export default function FilesInput(props: InputProps): ReactElement {
-  const [field, meta, helpers] = useField(props)
+  const [field, meta, helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {
@@ -36,7 +32,7 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   return (
     <>
-      {field && typeof field.value === 'object' ? (
+      {field?.value && field.value[0] && typeof field.value === 'object' ? (
         <FileInfo file={field.value[0]} removeItem={removeItem} />
       ) : (
         <FileInput
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 7bc78a9f4..ec3f8c2ab 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -31,12 +31,12 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   termsAndConditions: Yup.boolean().required('Required'),
 
   // ---- optional fields ----
-  copyrightHolder: Yup.string(),
-  tags: Yup.string(),
+  copyrightHolder: Yup.string().nullable(),
+  tags: Yup.string().nullable(),
   links: Yup.object<FileMetadata[]>().nullable()
 })
 
-export const initialValues: MetadataPublishForm = {
+export const initialValues: Partial<MetadataPublishForm> = {
   name: '',
   author: '',
   price: {
@@ -50,8 +50,5 @@ export const initialValues: MetadataPublishForm = {
   description: '',
   license: '',
   access: '',
-  termsAndConditions: false,
-  copyrightHolder: '',
-  tags: '',
-  links: ''
+  termsAndConditions: false
 }

From 66f9dace6f768c71decedd1dae7d0f942779a158 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 18:35:07 +0000
Subject: [PATCH 10/15] input fixes: filter out non-HTML props

---
 src/components/atoms/Input/InputElement.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 6a4e4487b..8e106d005 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -6,9 +6,9 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Price from '../../molecules/FormFields/Price'
 
-const DefaultInput = (props: InputProps) => (
+const DefaultInput = ({ small, ...props }: InputProps) => (
   <input
-    className={`${styles.input} ${props.small ? styles.small : null}`}
+    className={`${styles.input} ${small ? styles.small : null}`}
     id={props.name}
     {...props}
   />
@@ -22,6 +22,10 @@ export default function InputElement({
   postfix,
   small,
   field,
+  label,
+  help,
+  form,
+  additionalComponent,
   ...props
 }: InputProps): ReactElement {
   switch (type) {

From d1e1c75f86b510a66cc6aa4d9bcd9119ae5aa09e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 18:52:04 +0000
Subject: [PATCH 11/15] typing fixes

---
 src/components/pages/Publish/Preview.tsx |  2 +-
 src/components/pages/Publish/index.tsx   | 16 +++++++++-------
 src/components/pages/Publish/utils.ts    |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index 4b34b1de3..fd5edaacf 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -11,7 +11,7 @@ import Button from '../../atoms/Button'
 export default function Preview({
   values
 }: {
-  values: MetadataPublishForm
+  values: Partial<MetadataPublishForm>
 }): ReactElement {
   return (
     <div className={styles.preview}>
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 35a9bc9ba..12e91687d 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -11,7 +11,6 @@ import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
 import { MetadataPublishForm } from '../../../@types/MetaData'
-// import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { Logger } from '@oceanprotocol/lib'
 
@@ -20,17 +19,17 @@ export default function PublishPage({
 }: {
   content: { form: FormContent }
 }): ReactElement {
-  // TODO: implement marketFee
-  // const { marketFeeAddress, marketFeeAmount } = useSiteMetadata()
   const { debug } = useUserPreferences()
   const { publish, publishError, isLoading, publishStepText } = usePublish()
   const navigate = useNavigate()
 
   async function handleSubmit(
-    values: MetadataPublishForm,
+    values: Partial<MetadataPublishForm>,
     resetForm: () => void
   ): Promise<void> {
-    const metadata = transformPublishFormToMetadata(values)
+    const metadata = transformPublishFormToMetadata(
+      values as MetadataPublishForm
+    )
     const priceOptions = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
     let datatokenOptions: DataTokenOptions
@@ -40,7 +39,10 @@ export default function PublishPage({
 
       const ddo = await publish(
         metadata as any,
-        priceOptions,
+        {
+          ...priceOptions,
+          liquidityProviderFee: `${priceOptions.liquidityProviderFee}`
+        },
         serviceType,
         datatokenOptions
       )
@@ -55,7 +57,7 @@ export default function PublishPage({
       ddo && toast.success('Asset created successfully.')
 
       // reset form state
-      // TODO: verify persistant form in localStorage is cleared with it too
+      // TODO: verify persistent form in localStorage is cleared with it too
       resetForm()
 
       // Go to new asset detail page
diff --git a/src/components/pages/Publish/utils.ts b/src/components/pages/Publish/utils.ts
index d2928aa3a..f30fe86b4 100644
--- a/src/components/pages/Publish/utils.ts
+++ b/src/components/pages/Publish/utils.ts
@@ -3,7 +3,7 @@ import { toStringNoMS } from '../../../utils'
 import AssetModel from '../../../models/Asset'
 
 export function transformPublishFormToMetadata(
-  data: MetadataPublishForm
+  data: Partial<MetadataPublishForm>
 ): MetadataMarket {
   const currentTime = toStringNoMS(new Date())
 

From d85f6c07772dd4f42dfc3dff22ab0ae6e9ae8fa7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 19:16:33 +0000
Subject: [PATCH 12/15] fix passing generated datatoken options

---
 src/@types/MetaData.d.ts                      |  3 ++-
 .../molecules/FormFields/Price/index.tsx      | 11 ++++----
 src/components/pages/Publish/index.tsx        | 27 +++++++------------
 tests/unit/__fixtures__/testFormData.ts       |  7 ++---
 4 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index ee7f94ae9..67704e5ea 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -4,7 +4,7 @@ import {
   AdditionalInformation,
   ServiceMetadata
 } from '@oceanprotocol/lib'
-import { PriceOptions } from '@oceanprotocol/react'
+import { PriceOptions, DataTokenOptions } from '@oceanprotocol/react'
 
 export interface AdditionalInformationMarket extends AdditionalInformation {
   links?: File[]
@@ -21,6 +21,7 @@ export interface MetadataMarket extends Metadata {
 
 export interface PriceOptionsMarket extends PriceOptions {
   liquidityProviderFee: number
+  datatoken?: DataTokenOptions
 }
 
 export interface MetadataPublishForm {
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index c5c938004..e4116fc86 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -7,7 +7,7 @@ import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useField } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
+import { useOcean } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 const query = graphql`
@@ -49,7 +49,6 @@ export default function Price(props: InputProps): ReactElement {
   const { price }: PriceOptionsMarket = field.value
 
   const [tokensToMint, setTokensToMint] = useState<number>()
-  const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
 
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
@@ -58,8 +57,8 @@ export default function Price(props: InputProps): ReactElement {
 
   function generateName() {
     if (!ocean) return
-    const newDatatokenOptions = ocean.datatokens.generateDtName()
-    setDatatokenOptions(newDatatokenOptions)
+    const datatoken = ocean.datatokens.generateDtName()
+    helpers.setValue({ ...field.value, datatoken })
   }
 
   // Always update everything when amountOcean changes
@@ -79,7 +78,7 @@ export default function Price(props: InputProps): ReactElement {
       title: content.fixed.title,
       content: (
         <Fixed
-          datatokenOptions={datatokenOptions}
+          datatokenOptions={field.value.datatoken}
           generateName={generateName}
           content={content.fixed}
         />
@@ -91,7 +90,7 @@ export default function Price(props: InputProps): ReactElement {
         <Dynamic
           ocean={price}
           priceOptions={{ ...field.value, tokensToMint }}
-          datatokenOptions={datatokenOptions}
+          datatokenOptions={field.value.datatoken}
           generateName={generateName}
           content={content.dynamic}
         />
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 12e91687d..5a7774768 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
 import { toast } from 'react-toastify'
 import { Formik } from 'formik'
-import { usePublish, DataTokenOptions } from '@oceanprotocol/react'
+import { usePublish } from '@oceanprotocol/react'
 import styles from './index.module.css'
 import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -27,39 +27,30 @@ export default function PublishPage({
     values: Partial<MetadataPublishForm>,
     resetForm: () => void
   ): Promise<void> {
-    const metadata = transformPublishFormToMetadata(
-      values as MetadataPublishForm
-    )
-    const priceOptions = values.price
+    const metadata = transformPublishFormToMetadata(values)
+    const { price } = values
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
-    let datatokenOptions: DataTokenOptions
 
     try {
-      Logger.log('Publish with ', priceOptions, serviceType, datatokenOptions)
+      Logger.log('Publish with ', price, serviceType, price.datatoken)
 
       const ddo = await publish(
         metadata as any,
         {
-          ...priceOptions,
-          liquidityProviderFee: `${priceOptions.liquidityProviderFee}`
+          ...price,
+          liquidityProviderFee: `${price.liquidityProviderFee}`
         },
         serviceType,
-        datatokenOptions
+        price.datatoken
       )
 
       if (publishError) {
-        toast.error(publishError)
-        console.error(publishError)
+        toast.error(publishError) && console.error(publishError)
         return null
       }
 
       // User feedback and redirect to new asset detail page
-      ddo && toast.success('Asset created successfully.')
-
-      // reset form state
-      // TODO: verify persistent form in localStorage is cleared with it too
-      resetForm()
-
+      ddo && toast.success('Asset created successfully.') && resetForm()
       // Go to new asset detail page
       navigate(`/asset/${ddo.id}`)
     } catch (error) {
diff --git a/tests/unit/__fixtures__/testFormData.ts b/tests/unit/__fixtures__/testFormData.ts
index c5b68cffb..b826ce98b 100644
--- a/tests/unit/__fixtures__/testFormData.ts
+++ b/tests/unit/__fixtures__/testFormData.ts
@@ -5,10 +5,11 @@ const testFormData: MetadataPublishForm = {
   files: [],
   license: '',
   price: {
-    tokensToMint: 1,
-    type: 'simple',
+    price: 1,
+    tokensToMint: 9,
+    type: 'fixed',
     weightOnDataToken: '1',
-    liquidityProviderFee: '0.1'
+    liquidityProviderFee: 0.1
   },
   name: '',
   description: 'description',

From 0c3afad2cdc3da4ae87ccc0ea233c0f9c2274335 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Sep 2020 21:26:07 +0000
Subject: [PATCH 13/15] datatoken info as part of validation schema

---
 src/components/organisms/AssetContent/MetaSecondary.tsx | 1 -
 src/models/FormPublish.ts                               | 8 +++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/AssetContent/MetaSecondary.tsx b/src/components/organisms/AssetContent/MetaSecondary.tsx
index cf4619628..152333fa0 100644
--- a/src/components/organisms/AssetContent/MetaSecondary.tsx
+++ b/src/components/organisms/AssetContent/MetaSecondary.tsx
@@ -10,7 +10,6 @@ export default function MetaSecondary({
 }: {
   metadata: MetadataMarket
 }): ReactElement {
-  console.log(metadata)
   return (
     <aside className={styles.metaSecondary}>
       {metadata?.additionalInformation?.tags?.length > 0 && (
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index ec3f8c2ab..ad34bfa90 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -19,7 +19,13 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
       liquidityProviderFee: Yup.number()
         .min(0.1, 'Must be more or equal to 0.1')
         .max(0.9, 'Must be less or equal to 0.9')
-        .required('Required')
+        .required('Required'),
+      datatoken: Yup.object()
+        .shape({
+          name: Yup.string(),
+          symbol: Yup.string()
+        })
+        .nullable()
     })
     .required('Required'),
   files: Yup.array<FileMetadata>().required('Required').nullable(),

From 711dd38a9f05d1f9e88dad78fe8c3024d9b0f8a0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 22 Sep 2020 09:50:18 +0000
Subject: [PATCH 14/15] output liquidity provider fee for given pool

---
 .../organisms/AssetActions/Pool/Add.tsx           | 15 ++++-----------
 .../organisms/AssetActions/Pool/index.tsx         | 13 +++++++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index abdec6aab..cfe9e1bea 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -16,17 +16,18 @@ export default function Add({
   setShowAdd,
   poolAddress,
   totalPoolTokens,
-  totalBalance
+  totalBalance,
+  liquidityProviderFee
 }: {
   setShowAdd: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
   totalBalance: Balance
+  liquidityProviderFee: string
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState('')
-  const [swapFee, setSwapFee] = useState<string>()
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
 
@@ -38,14 +39,6 @@ export default function Add({
     totalBalance &&
     ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
 
-  useEffect(() => {
-    async function getFee() {
-      const swapFee = await ocean.pool.getSwapFee(accountId, poolAddress)
-      setSwapFee(swapFee)
-    }
-    getFee()
-  }, [])
-
   async function handleAddLiquidity() {
     setIsLoading(true)
 
@@ -96,7 +89,7 @@ export default function Add({
         </div>
         <div>
           <p>You will earn</p>
-          <Token symbol="%" balance={swapFee} />
+          <Token symbol="%" balance={liquidityProviderFee} />
           of each pool transaction
         </div>
       </div>
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index f668e0786..57b753ac7 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -33,6 +33,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [totalBalance, setTotalBalance] = useState<Balance>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
+  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
   const [showRemove, setShowRemove] = useState(false)
@@ -103,6 +104,13 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         }
 
         setUserBalance(userBalance)
+
+        // Get liquidity provider fee
+        const liquidityProviderFee = await ocean.pool.getSwapFee(
+          accountId,
+          price.address
+        )
+        setLiquidityProviderFee(liquidityProviderFee)
       } catch (error) {
         console.error(error.message)
       } finally {
@@ -122,6 +130,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           poolAddress={price.address}
           totalPoolTokens={totalPoolTokens}
           totalBalance={totalBalance}
+          liquidityProviderFee={liquidityProviderFee}
         />
       ) : showRemove ? (
         <Remove
@@ -168,6 +177,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               {debug === true && (
                 <Token symbol="BPT" balance={totalPoolTokens} />
               )}
+              <Token
+                symbol="% liquidity provider fee"
+                balance={liquidityProviderFee}
+              />
             </div>
           </div>
 

From a1ff86083c7a5c3f5230908917d3e141efb7ba81 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 22 Sep 2020 11:04:28 +0000
Subject: [PATCH 15/15] input tweaks

---
 content/pages/publish.json                                | 2 +-
 src/@types/MetaData.d.ts                                  | 2 ++
 src/components/molecules/FormFields/Price/Coin.tsx        | 1 +
 src/components/molecules/FormFields/Price/Fees.module.css | 5 +++--
 src/components/molecules/FormFields/Price/Fixed.tsx       | 1 +
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index 3099b6ed3..1f397cd7a 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -104,7 +104,7 @@
     },
     "dynamic": {
       "title": "Dynamic",
-      "info": "Let's create a decentralized, automated market for your data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Datatoken/OCEAN liquidity pool with Balancer.",
+      "info": "Let's create a decentralized, automated market for your data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a OCEAN/Datatoken liquidity pool with Balancer.",
       "tooltips": {
         "poolInfo": "Explain what is going on here...",
         "liquidityProviderFee": "Explain liquidity provider fee...",
diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 67704e5ea..8edf13e62 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -20,7 +20,9 @@ export interface MetadataMarket extends Metadata {
 }
 
 export interface PriceOptionsMarket extends PriceOptions {
+  // easier to keep this as number for Yup input validation
   liquidityProviderFee: number
+  // collect datatoken info for publishing
   datatoken?: DataTokenOptions
 }
 
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 9e92b9f80..0f1f299c2 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -46,6 +46,7 @@ export default function Coin({
           type="number"
           readOnly={readOnly}
           prefix={datatokenOptions?.symbol || 'DT'}
+          min="1"
           {...field}
         />
         {datatokenOptions?.symbol === 'OCEAN' && (
diff --git a/src/components/molecules/FormFields/Price/Fees.module.css b/src/components/molecules/FormFields/Price/Fees.module.css
index 9bfaf2ba7..5564da7ca 100644
--- a/src/components/molecules/FormFields/Price/Fees.module.css
+++ b/src/components/molecules/FormFields/Price/Fees.module.css
@@ -6,9 +6,10 @@
   margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);
   margin-top: var(--spacer);
-  padding: var(--spacer);
-  padding-top: 0;
+  padding: 0 var(--spacer) calc(var(--spacer) / 2) var(--spacer);
 
+  justify-content: center;
+  text-align: center;
   border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index 5288c36e1..4ae9454cc 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -32,6 +32,7 @@ export default function Fixed({
             name="price.price"
             type="number"
             prefix="OCEAN"
+            min="1"
             {...field}
             additionalComponent={
               <Conversion