next UI iteration for advanced price

src/components/atoms/Table/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import DataTable from 'react-data-table-component'
 
 export declare type AssetTablePagination = {

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

@@ -1,13 +1,10 @@
 .advanced {
 }
 
-.advanced > div:last-child {
-  display: grid;
-  gap: calc(var(--spacer) / 2);
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
 .wallet > button {
-  margin: calc(var(--spacer) / 2) auto var(--spacer) auto;
+  margin: var(--spacer) auto calc(var(--spacer) / 2) auto;
   display: block;
 }
+
+.tokens {
+}

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

@@ -9,15 +9,17 @@ import Cost from './Cost'
 import Conversion from '../../../atoms/Price/Conversion'
 import FormHelp from '../../../atoms/Input/Help'
 import Wallet from '../../Wallet'
+import { useOcean } from '@oceanprotocol/react'
 
 export default function Advanced(props: InputProps): ReactElement {
   const { price } = props.form.values as MetadataPublishForm
+  const { balance } = useOcean()
 
   const cost = '1'
-  const weight = '90' // in %
+  const weightOnDataToken = '90' // in %
 
-  const [ocean, setOcean] = useState('1')
-  const tokensToMint = Number(ocean) * (Number(weight) / 100)
+  const [ocean, setOcean] = useState('10')
+  const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setOcean(event.target.value)
@@ -35,56 +37,47 @@ export default function Advanced(props: InputProps): ReactElement {
           <Wallet />
         </aside>
 
-        <div>
-          <div>
-            <Label htmlFor="ocean">Ocean Tokens</Label>
-
+        <table className={styles.tokens}>
+          <thead>
+            <tr>
+              <th>Asset</th>
+              <th>Weight</th>
+              <th>Amount</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>OCEAN</td>
+              <td>{`${100 - Number(weightOnDataToken)}%`}</td>
+              <td>
                 <InputElement
                   value={ocean}
                   name="ocean"
                   type="number"
-              prefix="OCEAN"
                   onChange={handleOceanChange}
                 />
-
-            <Conversion price={ocean} className={stylesIndex.conversion} />
-          </div>
-
-          <div>
-            <Label htmlFor="dt">Data Tokens</Label>
+              </td>
+              <td>
+                <Conversion price={ocean} />
+              </td>
+            </tr>
+            <tr>
+              <td>OCEAN-CAVIAR</td>
+              <td>{`${weightOnDataToken}%`}</td>
+              <td>
                 <InputElement
+                  {...props.field}
                   value={tokensToMint.toString()}
-              name="dt"
+                  name="price.tokensToMint"
                   type="number"
                   readOnly
                 />
-          </div>
-
-          <div>
-            <Label htmlFor="weight">Weight on Data Token</Label>
-            <InputElement
-              value="90"
-              name="weight"
-              step="10"
-              postfix="%"
-              readOnly
-            />
-          </div>
-
-          <div className={styles.liquidity}>
-            <Label htmlFor="liquidity">Liquidity to Provide</Label>
-            <InputElement
-              value={cost.toString()}
-              name="liquidity"
-              readOnly
-              prefix="OCEAN"
-            />
-            <Conversion
-              price={cost.toString()}
-              className={stylesIndex.conversion}
-            />
-          </div>
-        </div>
+              </td>
+              <td />
+            </tr>
+          </tbody>
+        </table>
       </div>
 
       {/* Hidden to fields to actually collect form values for Formik state */}

src/global/styles.css

@@ -132,6 +132,28 @@ fieldset {
   margin: 0;
 }
 
+table {
+  width: 100%;
+  border-collapse: collapse;
+  display: block;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+table th,
+table td {
+  border: 0;
+  margin: 0;
+  padding: calc(var(--spacer) / 2);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  text-align: left;
+  font-size: 90%;
+}
+
+table th {
+  font-weight: var(--font-weight-bold);
+}
+
 @import '_code.css';
 @import '_toast.css';
 @import '_web3modal.css';