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

refactoring

This commit is contained in:
Matthias Kretschmann 2020-09-19 10:50:28 +00:00
parent a1da02b8e4
commit 053717ac95
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 102 additions and 71 deletions

View File

@ -13,7 +13,10 @@ export interface AdditionalInformationMarket extends AdditionalInformation {
}
export interface MetadataMarket extends Metadata {
additionalInformation: AdditionalInformationMarket
// While required for this market, Aquarius/Plecos will keep this as optional
// allowing external pushes of assets without `additionalInformation`.
// Making it optional here helps safeguarding against those assets.
additionalInformation?: AdditionalInformationMarket
}
export interface MetadataPublishForm {

View File

@ -34,8 +34,7 @@
padding-bottom: calc(var(--spacer) / 3);
}
.tokens,
.fees {
.tokens {
display: grid;
margin-left: -2rem;
@ -49,24 +48,6 @@
}
}
.fees {
margin-top: var(--spacer);
padding: var(--spacer);
padding-top: 0;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
align-items: center;
border-bottom: 1px solid var(--brand-grey-lighter);
}
.fees label {
white-space: nowrap;
}
.fees input {
max-width: 5rem;
}
.summary {
margin-top: var(--spacer);
}

View File

@ -8,9 +8,8 @@ import Alert from '../../../atoms/Alert'
import Coin from './Coin'
import { isCorrectNetwork } from '../../../../utils/wallet'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
import InputElement from '../../../atoms/Input/InputElement'
import Label from '../../../atoms/Input/Label'
import Tooltip from '../../../atoms/Tooltip'
import Fees from './Fees'
export default function Dynamic({
ocean,
@ -39,14 +38,14 @@ export default function Dynamic({
c.toUpperCase()
)
// Check: account, network & insuffciant balance
// Check: account, network & insufficient balance
useEffect(() => {
if (!account) {
setError(`No account connected. Please connect your Web3 wallet.`)
} else if (!correctNetwork) {
setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
} else if (Number(balance.ocean) < Number(ocean)) {
setError(`Insufficiant balance. You need at least ${ocean} OCEAN`)
setError(`Insufficient balance. You need at least ${ocean} OCEAN`)
} else {
setError(undefined)
}
@ -100,50 +99,11 @@ export default function Dynamic({
/>
</div>
<div className={styles.fees}>
<div>
<Label htmlFor="liquidityProviderFee">
Liquidity Provider Fee{' '}
<Tooltip content={content.tooltips.liquidityProviderFee} />
</Label>
<InputElement
type="number"
value={liquidityProviderFee}
name="liquidityProviderFee"
postfix="%"
onChange={onLiquidityProviderFeeChange}
min="0.1"
max="0.9"
step="0.1"
small
/>
</div>
<div>
<Label htmlFor="communityFee">
Community Fee <Tooltip content={content.tooltips.communityFee} />
</Label>
<InputElement
value="0.1"
name="communityFee"
postfix="%"
readOnly
small
/>
</div>
<div>
<Label htmlFor="marketplaceFee">
Marketplace Fee{' '}
<Tooltip content={content.tooltips.marketplaceFee} />
</Label>
<InputElement
value={appConfig.marketFeeAmount}
name="marketplaceFee"
postfix="%"
readOnly
small
/>
</div>
</div>
<Fees
liquidityProviderFee={liquidityProviderFee}
onLiquidityProviderFeeChange={onLiquidityProviderFeeChange}
tooltips={content.tooltips}
/>
<footer className={styles.summary}>
You will get: <br />

View File

@ -0,0 +1,22 @@
.fees {
display: grid;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
margin-left: -2rem;
margin-right: -2rem;
border-bottom: 1px solid var(--brand-grey-lighter);
margin-top: var(--spacer);
padding: var(--spacer);
padding-top: 0;
align-items: center;
border-bottom: 1px solid var(--brand-grey-lighter);
}
.fees label {
white-space: nowrap;
}
.fees input {
max-width: 5rem;
}

View File

@ -0,0 +1,64 @@
import React, { ChangeEvent } from 'react'
import InputElement from '../../../atoms/Input/InputElement'
import Label from '../../../atoms/Input/Label'
import Tooltip from '../../../atoms/Tooltip'
import styles from './Fees.module.css'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
export default function Fees({
liquidityProviderFee,
onLiquidityProviderFeeChange,
tooltips
}: {
liquidityProviderFee: string
onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
tooltips: { [key: string]: string }
}) {
const { appConfig } = useSiteMetadata()
return (
<div className={styles.fees}>
<div>
<Label htmlFor="liquidityProviderFee">
Liquidity Provider Fee{' '}
<Tooltip content={tooltips.liquidityProviderFee} />
</Label>
<InputElement
type="number"
value={liquidityProviderFee}
name="liquidityProviderFee"
postfix="%"
onChange={onLiquidityProviderFeeChange}
min="0.1"
max="0.9"
step="0.1"
small
/>
</div>
<div>
<Label htmlFor="communityFee">
Community Fee <Tooltip content={tooltips.communityFee} />
</Label>
<InputElement
value="0.1"
name="communityFee"
postfix="%"
readOnly
small
/>
</div>
<div>
<Label htmlFor="marketplaceFee">
Marketplace Fee <Tooltip content={tooltips.marketplaceFee} />
</Label>
<InputElement
value={appConfig.marketFeeAmount}
name="marketplaceFee"
postfix="%"
readOnly
small
/>
</div>
</div>
)
}

View File

@ -56,7 +56,6 @@ export default function Price(props: InputProps): ReactElement {
function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
setAmountOcean(event.target.value)
helpers.setValue({ ...field.value, price: event.target.value })
}
// TODO: trigger Yup inline validation
@ -82,7 +81,7 @@ export default function Price(props: InputProps): ReactElement {
const tokensToMint =
Number(amountOcean) * Number(priceOptions.weightOnDataToken)
setTokensToMint(tokensToMint)
helpers.setValue({ ...field.value, tokensToMint })
helpers.setValue({ ...field.value, price: amountOcean, tokensToMint })
}, [amountOcean])
useEffect(() => {

View File

@ -7,6 +7,7 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
name: Yup.string().required('Required'),
author: Yup.string().required('Required'),
price: Yup.object().shape({
price: Yup.number().required('Required'),
tokensToMint: Yup.number().required('Required'),
type: Yup.string()
.matches(/fixed|dynamic/g)
@ -36,6 +37,7 @@ export const initialValues: MetadataPublishForm = {
name: '',
author: '',
price: {
price: 1,
type: 'fixed',
tokensToMint: 1,
weightOnDataToken: '9', // 90% on data token