output balance & error feedback

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

@@ -1,10 +1,29 @@
 .advanced {
 }
 
-.wallet > button {
-  margin: var(--spacer) auto calc(var(--spacer) / 2) auto;
-  display: block;
+.wallet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.balance {
+  text-align: center;
+  font-size: var(--font-size-small);
+  border: 1px solid var(--brand-grey-lighter);
+  border-right: 0;
+  margin-right: -3px;
+  padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 2);
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  color: var(--color-secondary);
+}
+
+.balance strong {
+  color: var(--brand-grey);
 }
 
 .tokens {
+  margin-bottom: var(--spacer);
 }

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent } from 'react'
+import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
 import { InputProps } from '../../../atoms/Input'
 import InputElement from '../../../atoms/Input/InputElement'
 import stylesIndex from './index.module.css'
@@ -10,6 +10,7 @@ import Conversion from '../../../atoms/Price/Conversion'
 import FormHelp from '../../../atoms/Input/Help'
 import Wallet from '../../Wallet'
 import { useOcean } from '@oceanprotocol/react'
+import Alert from '../../../atoms/Alert'
 
 export default function Advanced(props: InputProps): ReactElement {
   const { price } = props.form.values as MetadataPublishForm
@@ -21,6 +22,14 @@ export default function Advanced(props: InputProps): ReactElement {
   const [ocean, setOcean] = useState('10')
   const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
 
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (balance.ocean < ocean) {
+      setError(`Insufficiant balance. You need at least ${ocean} OCEAN`)
+    }
+  }, [ocean])
+
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setOcean(event.target.value)
   }
@@ -34,6 +43,11 @@ export default function Advanced(props: InputProps): ReactElement {
         </FormHelp>
 
         <aside className={styles.wallet}>
+          {balance && balance.ocean && (
+            <div className={styles.balance}>
+              OCEAN <strong>{balance.ocean}</strong>
+            </div>
+          )}
           <Wallet />
         </aside>
 
@@ -70,7 +84,6 @@ export default function Advanced(props: InputProps): ReactElement {
                   {...props.field}
                   value={tokensToMint.toString()}
                   name="price.tokensToMint"
-                  type="number"
                   readOnly
                 />
               </td>
@@ -78,6 +91,8 @@ export default function Advanced(props: InputProps): ReactElement {
             </tr>
           </tbody>
         </table>
+
+        {error && <Alert text={error} state="error" />}
       </div>
 
       {/* Hidden to fields to actually collect form values for Formik state */}

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

@@ -29,5 +29,7 @@
 
 .help {
   text-align: center;
-  margin-bottom: calc(var(--spacer) / 2);
+  margin-bottom: var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  padding-bottom: var(--spacer);
 }