mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 05:41:41 +02:00
more visual UI for advanced pricing
This commit is contained in:
parent
b36edb2414
commit
818404c5ef
GPG Key ID:
606EEEF3C479A91F
|
|
@ -24,6 +24,21 @@
|
|||
color: var(--brand-grey);
|
||||
}
|
||||
|
||||
.tokens {
|
||||
margin-bottom: var(--spacer);
|
||||
.title {
|
||||
font-size: var(--font-size-base);
|
||||
margin-top: var(--spacer);
|
||||
margin-bottom: 0;
|
||||
color: var(--color-secondary);
|
||||
text-align: center;
|
||||
border: 1px solid var(--brand-grey-lighter);
|
||||
border-bottom: 0;
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
padding: calc(var(--spacer) / 3);
|
||||
}
|
||||
|
||||
.tokens {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import FormHelp from '../../../atoms/Input/Help'
|
|||
import Wallet from '../../Wallet'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import Alert from '../../../atoms/Alert'
|
||||
import Coin from './Coin'
|
||||
|
||||
export default function Advanced(props: InputProps): ReactElement {
|
||||
const { price } = props.form.values as MetadataPublishForm
|
||||
|
|
@ -27,6 +28,8 @@ export default function Advanced(props: InputProps): ReactElement {
|
|||
useEffect(() => {
|
||||
if (balance.ocean < ocean) {
|
||||
setError(`Insufficiant balance. You need at least ${ocean} OCEAN`)
|
||||
} else {
|
||||
setError(undefined)
|
||||
}
|
||||
}, [ocean])
|
||||
|
||||
|
|
@ -51,46 +54,25 @@ export default function Advanced(props: InputProps): ReactElement {
|
|||
<Wallet />
|
||||
</aside>
|
||||
|
||||
<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"
|
||||
onChange={handleOceanChange}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Conversion price={ocean} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OCEAN-CAVIAR</td>
|
||||
<td>{`${weightOnDataToken}%`}</td>
|
||||
<td>
|
||||
<InputElement
|
||||
{...props.field}
|
||||
value={tokensToMint.toString()}
|
||||
name="price.tokensToMint"
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4 className={styles.title}>Data Token Liquidity Pool</h4>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<Coin
|
||||
name="ocean"
|
||||
symbol="OCEAN"
|
||||
value={ocean}
|
||||
weight={`${100 - Number(weightOnDataToken)}%`}
|
||||
onChange={handleOceanChange}
|
||||
/>
|
||||
<Coin
|
||||
name="price.tokensToMint"
|
||||
symbol="OCEAN-CAV"
|
||||
value={tokensToMint.toString()}
|
||||
weight={`${weightOnDataToken}%`}
|
||||
readOnly
|
||||
field={props.field}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <Alert text={error} state="error" />}
|
||||
</div>
|
||||
|
|
|
|||
67
src/components/molecules/FormFields/Price/Coin.module.css
Normal file
67
src/components/molecules/FormFields/Price/Coin.module.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.coin {
|
||||
border: 1px solid var(--brand-grey-lighter);
|
||||
border-radius: var(--border-radius);
|
||||
padding: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.coin:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.coin:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
composes: box from '../../../atoms/Box.module.css';
|
||||
padding: calc(var(--spacer) / 1.5);
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--brand-grey-lighter);
|
||||
border-radius: 50%;
|
||||
background-color: var(--brand-white);
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.coin:last-child .icon path {
|
||||
fill: var(--brand-grey-dimmed);
|
||||
stroke: var(--brand-black);
|
||||
stroke-width: 5px;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
.data {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weight {
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacer) / 2);
|
||||
padding-top: calc(var(--spacer) / 2);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-secondary);
|
||||
border-top: 1px solid var(--brand-grey-lighter);
|
||||
}
|
||||
|
||||
.weight strong {
|
||||
color: var(--brand-grey);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
48
src/components/molecules/FormFields/Price/Coin.tsx
Normal file
48
src/components/molecules/FormFields/Price/Coin.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import React, { ReactElement, ChangeEvent } from 'react'
|
||||
import stylesIndex from './index.module.css'
|
||||
import styles from './Coin.module.css'
|
||||
import InputElement from '../../../atoms/Input/InputElement'
|
||||
import { ReactComponent as Logo } from '../../../../images/logo.svg'
|
||||
import Conversion from '../../../atoms/Price/Conversion'
|
||||
import Label from '../../../atoms/Input/Label'
|
||||
|
||||
export default function Coin({
|
||||
symbol,
|
||||
name,
|
||||
value,
|
||||
weight,
|
||||
onChange,
|
||||
readOnly
|
||||
}: {
|
||||
symbol: string
|
||||
name: string
|
||||
value: string
|
||||
weight: string
|
||||
onChange?: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
readOnly?: boolean
|
||||
field?: any
|
||||
}): ReactElement {
|
||||
return (
|
||||
<div className={styles.coin}>
|
||||
<figure className={styles.icon}>
|
||||
<Logo />
|
||||
</figure>
|
||||
|
||||
<div className={styles.data}>
|
||||
<InputElement
|
||||
value={value}
|
||||
name={name}
|
||||
type="number"
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
prefix={symbol}
|
||||
/>
|
||||
<Conversion price={value} className={stylesIndex.conversion} />
|
||||
|
||||
<div className={styles.weight}>
|
||||
Weight <strong>{weight}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -23,13 +23,11 @@
|
|||
|
||||
.conversion {
|
||||
display: block;
|
||||
padding-left: 5rem;
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacer) / 6);
|
||||
}
|
||||
|
||||
.help {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacer);
|
||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||
padding-bottom: var(--spacer);
|
||||
margin-bottom: calc(var(--spacer) / 1.5);
|
||||
}
|
||||
|
|
|
|||
26
src/images/logo.svg
Normal file
26
src/images/logo.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<svg width="394" height="399" viewBox="0 0 394 399" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M196.742 57.2631C212.525 57.2631 225.33 44.4482 225.33 28.6321C225.33 12.82 212.525 0 196.742 0C180.944 0 168.139 12.82 168.139 28.6321C168.139 44.4482 180.944 57.2631 196.742 57.2631Z" fill="#141414"/>
|
||||
<path d="M29.167 213.019C40.8609 213.019 50.3274 203.527 50.3274 191.826C50.3274 180.125 40.8609 170.644 29.167 170.644C17.4833 170.644 8.00663 180.125 8.00663 191.826C8.00663 203.527 17.4833 213.019 29.167 213.019Z" fill="#141414"/>
|
||||
<path d="M365.451 213.019C377.129 213.019 386.606 203.527 386.606 191.826C386.606 180.125 377.129 170.644 365.451 170.644C353.762 170.644 344.285 180.125 344.285 191.826C344.285 203.527 353.762 213.019 365.451 213.019Z" fill="#141414"/>
|
||||
<path d="M218.467 275.433C218.467 287.132 208.991 296.623 197.309 296.623C185.622 296.623 176.146 287.132 176.146 275.433C176.146 263.733 185.622 254.248 197.309 254.248C208.991 254.248 218.467 263.733 218.467 275.433Z" fill="#141414"/>
|
||||
<path d="M112.662 255.393C124.355 255.393 133.825 245.902 133.825 234.206C133.825 222.5 124.355 213.019 112.662 213.019C100.975 213.019 91.5044 222.5 91.5044 234.206C91.5044 245.902 100.975 255.393 112.662 255.393Z" fill="#141414"/>
|
||||
<path d="M301.965 234.206C301.965 245.902 292.489 255.393 280.807 255.393C269.114 255.393 259.644 245.902 259.644 234.206C259.644 222.5 269.114 213.019 280.807 213.019C292.489 213.019 301.965 222.5 301.965 234.206Z" fill="#141414"/>
|
||||
<path d="M29.1748 270.282C37.0689 270.282 43.4646 263.864 43.4646 255.971C43.4646 248.058 37.0689 241.65 29.1748 241.65C21.2703 241.65 14.8695 248.058 14.8695 255.971C14.8695 263.864 21.2703 270.282 29.1748 270.282Z" fill="#141414"/>
|
||||
<path d="M379.743 255.971C379.743 263.864 373.338 270.282 365.446 270.282C357.548 270.282 351.148 263.864 351.148 255.971C351.148 248.058 357.548 241.65 365.446 241.65C373.338 241.65 379.743 248.058 379.743 255.971Z" fill="#141414"/>
|
||||
<path d="M197.312 355.031C205.196 355.031 211.604 348.613 211.604 340.705C211.604 332.802 205.196 326.4 197.312 326.4C189.422 326.4 183.009 332.802 183.009 340.705C183.009 348.613 189.422 355.031 197.312 355.031Z" fill="#141414"/>
|
||||
<path d="M126.962 298.346C126.962 306.251 120.563 312.656 112.67 312.656C104.772 312.656 98.3672 306.251 98.3672 298.346C98.3672 290.435 104.772 284.025 112.67 284.025C120.563 284.025 126.962 290.435 126.962 298.346Z" fill="#141414"/>
|
||||
<path d="M280.812 312.656C288.693 312.656 295.102 306.251 295.102 298.346C295.102 290.435 288.693 284.025 280.812 284.025C272.91 284.025 266.507 290.435 266.507 298.346C266.507 306.251 272.91 312.656 280.812 312.656Z" fill="#141414"/>
|
||||
<path d="M36.6018 306.35C36.6018 310.469 33.2752 313.802 29.1697 313.802C25.0588 313.802 21.7323 310.469 21.7323 306.35C21.7323 302.241 25.0588 298.913 29.1697 298.913C33.2752 298.913 36.6018 302.241 36.6018 306.35Z" fill="#141414"/>
|
||||
<path d="M365.448 313.802C369.546 313.802 372.88 310.469 372.88 306.35C372.88 302.241 369.546 298.913 365.448 298.913C361.335 298.913 358.011 302.241 358.011 306.35C358.011 310.469 361.335 313.802 365.448 313.802Z" fill="#141414"/>
|
||||
<path d="M204.741 391.102C204.741 395.214 201.407 398.551 197.309 398.551C193.201 398.551 189.872 395.214 189.872 391.102C189.872 386.989 193.201 383.663 197.309 383.663C201.407 383.663 204.741 386.989 204.741 391.102Z" fill="#141414"/>
|
||||
<path d="M112.662 356.176C116.768 356.176 120.1 352.839 120.1 348.732C120.1 344.615 116.768 341.288 112.662 341.288C108.562 341.288 105.23 344.615 105.23 348.732C105.23 352.839 108.562 356.176 112.662 356.176Z" fill="#141414"/>
|
||||
<path d="M288.239 348.732C288.239 352.839 284.905 356.176 280.807 356.176C276.688 356.176 273.369 352.839 273.369 348.732C273.369 344.615 276.688 341.288 280.807 341.288C284.905 341.288 288.239 344.615 288.239 348.732Z" fill="#141414"/>
|
||||
<path d="M225.33 113.381C225.33 129.195 212.525 142.012 196.742 142.012C180.944 142.012 168.139 129.195 168.139 113.381C168.139 97.572 180.944 84.7494 196.742 84.7494C212.525 84.7494 225.33 97.572 225.33 113.381Z" fill="#141414"/>
|
||||
<path d="M196.742 225.617C212.525 225.617 225.33 212.797 225.33 196.99C225.33 181.173 212.525 168.353 196.742 168.353C180.944 168.353 168.139 181.173 168.139 196.99C168.139 212.797 180.944 225.617 196.742 225.617Z" fill="#141414"/>
|
||||
<path d="M393.469 113.381C393.469 129.195 380.667 142.012 364.876 142.012C349.081 142.012 336.279 129.195 336.279 113.381C336.279 97.572 349.081 84.7494 364.876 84.7494C380.667 84.7494 393.469 97.572 393.469 113.381Z" fill="#141414"/>
|
||||
<path d="M28.5977 142.012C44.3907 142.012 57.1903 129.195 57.1903 113.381C57.1903 97.572 44.3907 84.7494 28.5977 84.7494C12.8046 84.7494 0 97.572 0 113.381C0 129.195 12.8046 142.012 28.5977 142.012Z" fill="#141414"/>
|
||||
<path d="M141.832 71.0062C141.832 86.818 129.031 99.6378 113.237 99.6378C97.4422 99.6378 84.6416 86.818 84.6416 71.0062C84.6416 55.1842 97.4422 42.3747 113.237 42.3747C129.031 42.3747 141.832 55.1842 141.832 71.0062Z" fill="#141414"/>
|
||||
<path d="M113.237 183.242C129.031 183.242 141.832 170.421 141.832 154.608C141.832 138.8 129.031 125.979 113.237 125.979C97.4422 125.979 84.6416 138.8 84.6416 154.608C84.6416 170.421 97.4422 183.242 113.237 183.242Z" fill="#141414"/>
|
||||
<path d="M309.971 71.0062C309.971 86.818 297.167 99.6378 281.373 99.6378C265.58 99.6378 252.781 86.818 252.781 71.0062C252.781 55.1842 265.58 42.3747 281.373 42.3747C297.167 42.3747 309.971 55.1842 309.971 71.0062Z" fill="#141414"/>
|
||||
<path d="M281.373 183.242C297.167 183.242 309.971 170.421 309.971 154.608C309.971 138.8 297.167 125.979 281.373 125.979C265.58 125.979 252.781 138.8 252.781 154.608C252.781 170.421 265.58 183.242 281.373 183.242Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in New Issue
Block a user