1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

next UI iteration for advanced price

This commit is contained in:
Matthias Kretschmann 2020-07-29 20:36:32 +02:00
parent 8e295034d3
commit ef2e5ffad6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 73 additions and 61 deletions

View File

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

View File

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

View File

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

View File

@ -132,6 +132,28 @@ fieldset {
margin: 0; 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 '_code.css';
@import '_toast.css'; @import '_toast.css';
@import '_web3modal.css'; @import '_web3modal.css';