add wallet to advanced price widget, UI tweaks

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

@@ -6,3 +6,8 @@
   gap: calc(var(--spacer) / 2);
   grid-template-columns: 1fr 1fr 1fr;
 }
+
+.wallet > button {
+  margin: calc(var(--spacer) / 2) auto var(--spacer) auto;
+  display: block;
+}

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

@@ -8,14 +8,16 @@ import { MetadataPublishForm } from '../../../../@types/MetaData'
 import Cost from './Cost'
 import Conversion from '../../../atoms/Price/Conversion'
 import FormHelp from '../../../atoms/Input/Help'
+import Wallet from '../../Wallet'
 
 export default function Advanced(props: InputProps): ReactElement {
   const { price } = props.form.values as MetadataPublishForm
 
-  const [ocean, setOcean] = useState('1')
+  const cost = '1'
   const weight = '90' // in %
+
+  const [ocean, setOcean] = useState('1')
   const tokensToMint = Number(ocean) * (Number(weight) / 100)
-  const cost = Number(ocean) / Number(tokensToMint)
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setOcean(event.target.value)
@@ -30,6 +32,10 @@ export default function Advanced(props: InputProps): ReactElement {
           liquidity pool will be created with Balancer.
         </FormHelp>
 
+        <aside className={styles.wallet}>
+          <Wallet />
+        </aside>
+
         <div>
           <div>
             <Label htmlFor="ocean">Ocean Tokens</Label>

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

@@ -7,8 +7,8 @@ import Advanced from './Advanced'
 
 export default function Price(props: InputProps): ReactElement {
   const tabs = [
-    { title: 'Simple', content: <Simple {...props} /> },
-    { title: 'Advanced', content: <Advanced {...props} /> }
+    { title: 'Simple: Fixed', content: <Simple {...props} /> },
+    { title: 'Advanced: Dynamic', content: <Advanced {...props} /> }
   ]
 
   return (

src/components/molecules/Wallet/Account.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { FormEvent } from 'react'
 import styles from './Account.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
@@ -26,8 +26,18 @@ const Account = React.forwardRef((props, ref: any) => {
   const { accountId, status, connect, chainId } = useOcean()
   const hasSuccess = status === 1 && isCorrectNetwork(chainId)
 
+  async function handleActivation(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    await connectWallet(connect)
+  }
+
   return accountId ? (
-    <button className={styles.button} aria-label="Account" ref={ref}>
+    <button
+      className={styles.button}
+      aria-label="Account"
+      ref={ref}
+      onClick={(e) => e.preventDefault()}
+    >
       <Blockies account={accountId} />
       <span className={styles.address} title={accountId}>
         {accountTruncate(accountId)}
@@ -40,7 +50,7 @@ const Account = React.forwardRef((props, ref: any) => {
   ) : (
     <button
       className={styles.button}
-      onClick={async () => await connect()}
+      onClick={(e) => handleActivation(e)}
       // Need the `ref` here although we do not want
       // the Tippy to show in this state.
       ref={ref}