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

new calculation

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-29 13:58:33 +02:00
parent cbee8a714d
commit 9b6de84a1c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/FormFields/Price/Advanced.module.css
View File

@ -4,5 +4,5 @@
.advanced > div:last-child {
display: grid;
gap: calc(var(--spacer) / 2);
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}

67
src/components/molecules/FormFields/Price/Advanced.tsx
View File

@ -11,12 +11,14 @@ import FormHelp from '../../../atoms/Input/Help'
export default function Advanced(props: InputProps): ReactElement {
const { price } = props.form.values as MetadataPublishForm
const [weight, setWeight] = useState('10')
const liquidity = (price.cost * Number(weight)).toString()
const [ocean, setOcean] = useState('1')
const weight = '90' // in %
const tokensToMint = Number(ocean) * (Number(weight) / 100)
const cost = Number(ocean) / Number(tokensToMint)
function handleWeightChange(event: ChangeEvent<HTMLInputElement>) {
setWeight(event.target.value)
function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
setOcean(event.target.value)
}
return (
@ -29,40 +31,65 @@ export default function Advanced(props: InputProps): ReactElement {
</FormHelp>
<div>
<Cost {...props} />
<div>
<Label htmlFor="ocean">Ocean Tokens</Label>
<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>
<InputElement
value={tokensToMint.toString()}
name="dt"
type="number"
readOnly
/>
</div>
<div>
<Label htmlFor="weight">Weight on Data Token</Label>
<InputElement
value={weight}
value="90"
name="weight"
type="number"
onChange={handleWeightChange}
step="10"
postfix="%"
readOnly
/>
</div>
<div className={styles.liquidity}>
<Label htmlFor="liquidity">Liquidity</Label>
<Label htmlFor="liquidity">Liquidity to Provide</Label>
<InputElement
value={liquidity}
value={cost.toString()}
name="liquidity"
readOnly
prefix="OCEAN"
/>
<Conversion price={liquidity} className={stylesIndex.conversion} />
</div>
<div>
<Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
<InputElement
{...props.field}
value={(price && price.tokensToMint) || 1}
name="price.tokensToMint"
type="number"
disabled
<Conversion
price={cost.toString()}
className={stylesIndex.conversion}
/>
</div>
</div>
</div>
{/* Hidden to fields to actually collect form values for Formik state */}
<input type="hidden" {...props.field} name="price.cost" value={cost} />
<input
type="hidden"
{...props.field}
name="price.tokensToMint"
value={tokensToMint}
/>
</div>
)
}

2
src/components/molecules/FormFields/Price/Cost.tsx
View File

@ -11,7 +11,7 @@ export default function Cost(props: InputProps): ReactElement {
return (
<div>
<Label htmlFor="price.cost">Cost</Label>
<Label htmlFor="price.cost">Ocean Tokens</Label>
<InputElement
{...props.field}

2
src/components/molecules/FormFields/Price/index.module.css
View File

@ -13,7 +13,7 @@
}
.content input {
max-width: 8rem;
max-width: 6rem;
text-align: center;
}