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

free price tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-11-26 13:05:53 +00:00
parent 5dca006832
commit 7c98659c86
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Publish/Pricing/Price.module.css
View File

@ -2,7 +2,8 @@
position: relative; position: relative;
} }
.form * { .form *,
.form label {
margin-bottom: 0; margin-bottom: 0;
} }
@ -59,3 +60,9 @@
.conversion strong { .conversion strong {
color: var(--color-secondary); color: var(--color-secondary);
} }
.free {
text-align: center;
margin: calc(var(--spacer) / 2) 0;
font-size: var(--font-size-base);
}

50
src/components/Publish/Pricing/Price.tsx
View File

@ -19,31 +19,33 @@ export default function Price({
return ( return (
<div className={styles.price}> <div className={styles.price}>
<div className={styles.grid}> {values.pricing.type === 'free' ? (
<div className={styles.form}> <h4 className={styles.free}>Free</h4>
{field.value === 0 ? ( ) : (
<Input value="0" type="number" prefix="OCEAN" readOnly {...field} /> <>
) : ( <div className={styles.grid}>
<Input type="number" prefix="OCEAN" {...field} /> <div className={styles.form}>
<Input type="number" prefix="OCEAN" {...field} />
<Error meta={meta} />
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dataTokenOptions.symbol}{' '}
<Conversion price={field.value} className={styles.conversion} />
</h4>
</div>
</div>
{firstPrice && (
<aside className={styles.firstPrice}>
Expected first price:{' '}
<PriceUnit
price={Number(firstPrice) > 0 ? firstPrice : '-'}
small
conversion
/>
</aside>
)} )}
<Error meta={meta} /> </>
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dataTokenOptions.symbol}{' '}
<Conversion price={field.value} className={styles.conversion} />
</h4>
</div>
</div>
{firstPrice && (
<aside className={styles.firstPrice}>
Expected first price:{' '}
<PriceUnit
price={Number(firstPrice) > 0 ? firstPrice : '-'}
small
conversion
/>
</aside>
)} )}
</div> </div>
) )

1
src/components/Publish/Pricing/index.tsx
View File

@ -24,7 +24,6 @@ export default function PricingFields(): ReactElement {
const type = tabName.toLowerCase() const type = tabName.toLowerCase()
setFieldValue('pricing.type', type) setFieldValue('pricing.type', type)
type === 'dynamic' && setFieldValue('pricing.amountDataToken', 1000) type === 'dynamic' && setFieldValue('pricing.amountDataToken', 1000)
setFieldValue('pricing.price', type === 'free' ? 0 : 1)
} }
// Always update everything when price value changes // Always update everything when price value changes

9
src/components/Publish/_validation.ts
View File

@ -60,14 +60,7 @@ const validationPricing = {
.required('Required'), .required('Required'),
// https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema // https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
price: Yup.number() price: Yup.number()
.when('type', (type, schema) => .min(1, (param: { min: number }) => `Must be more or equal to ${param.min}`)
type === 'free'
? schema
: schema.min(
1,
(param: { min: number }) => `Must be more or equal to ${param.min}`
)
)
.required('Required'), .required('Required'),
amountDataToken: Yup.number() amountDataToken: Yup.number()
.min(50, (param) => `Must be more or equal to ${param.min}`) .min(50, (param) => `Must be more or equal to ${param.min}`)