oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-30 22:01:44 +02:00
Code Releases Activity

price refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-10-26 15:15:01 +01:00
parent c2a247b605
commit d0c65a6935
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 93 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
View File

@ -12,6 +12,8 @@ import stylesIndex from './index.module.css'
import { useFormikContext } from 'formik'
import { PriceOptionsMarket } from '../../../../../@types/MetaData'
import { DDO } from '@oceanprotocol/lib'
import Fixed from './Fixed'
import Price from './Price'
export default function Dynamic({
ddo,
@ -68,6 +70,12 @@ export default function Dynamic({
<Wallet />
</aside>
<h4 className={styles.title}>
Price <Tooltip content={content.tooltips.poolInfo} />
</h4>
<Price ddo={ddo} />
<h4 className={styles.title}>
Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />
</h4>

45
src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
View File

@ -1,48 +1,3 @@
.fixed {
composes: content from './index.module.css';
}
.form {
position: relative;
}
@media (min-width: 55rem) {
.form {
max-width: 12rem;
margin-left: auto;
}
}
.grid {
margin-left: -2rem;
margin-right: -2rem;
padding-top: var(--spacer);
display: grid;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
justify-content: center;
background: var(--brand-grey-dimmed);
border-top: 1px solid var(--brand-grey-lighter);
border-bottom: 1px solid var(--brand-grey-lighter);
}
.fixed label {
display: none;
}
.datatoken {
margin-top: calc(var(--spacer) / 2);
color: var(--color-secondary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
}
.datatoken h4 {
font-size: var(--font-size-base);
color: var(--color-secondary);
margin: 0;
}
.datatoken strong {
color: var(--brand-grey-dark);
}

36
src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
View File

@ -2,12 +2,8 @@ import React, { ReactElement } from 'react'
import stylesIndex from './index.module.css'
import styles from './Fixed.module.css'
import FormHelp from '../../../../atoms/Input/Help'
import Conversion from '../../../../atoms/Price/Conversion'
import { useField } from 'formik'
import Input from '../../../../atoms/Input'
import Error from './Error'
import { DDO } from '@oceanprotocol/lib'
import { usePricing } from '@oceanprotocol/react'
import Price from './Price'
export default function Fixed({
ddo,
@ -16,38 +12,10 @@ export default function Fixed({
ddo: DDO
content: any
}): ReactElement {
const [field, meta] = useField('price')
const { dtName, dtSymbol } = usePricing(ddo)
return (
<div className={styles.fixed}>
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
<div className={styles.grid}>
<div className={styles.form}>
<Input
label="Ocean Token"
value={field.value}
name="price"
type="number"
prefix="OCEAN"
min="1"
{...field}
additionalComponent={
<Conversion
price={field.value}
className={stylesIndex.conversion}
/>
}
/>
<Error meta={meta} />
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dtName} — {dtSymbol}
</h4>
</div>
</div>
<Price ddo={ddo} />
</div>
)
}

44
src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css Normal file
View File

@ -0,0 +1,44 @@
.form {
position: relative;
}
@media (min-width: 55rem) {
.form {
max-width: 12rem;
margin-left: auto;
}
}
.grid {
margin-left: -2rem;
margin-right: -2rem;
padding-top: var(--spacer);
display: grid;
gap: var(--spacer);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
justify-content: center;
background: var(--brand-grey-dimmed);
border-top: 1px solid var(--brand-grey-lighter);
border-bottom: 1px solid var(--brand-grey-lighter);
}
.fixed label {
display: none;
}
.datatoken {
margin-top: calc(var(--spacer) / 2);
color: var(--color-secondary);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
}
.datatoken h4 {
font-size: var(--font-size-base);
color: var(--color-secondary);
margin: 0;
}
.datatoken strong {
color: var(--brand-grey-dark);
}

37
src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx Normal file
View File

@ -0,0 +1,37 @@
import { usePricing } from '@oceanprotocol/react'
import Conversion from '../../../../atoms/Price/Conversion'
import { useField } from 'formik'
import React, { ReactElement } from 'react'
import Input from '../../../../atoms/Input'
import styles from './Price.module.css'
import Error from './Error'
import { DDO } from '@oceanprotocol/lib'
export default function Price({ ddo }: { ddo: DDO }): ReactElement {
const [field, meta] = useField('price')
const { dtName, dtSymbol } = usePricing(ddo)
return (
<div className={styles.grid}>
<div className={styles.form}>
<Input
value={field.value}
name="price"
type="number"
prefix="OCEAN"
min="1"
{...field}
additionalComponent={
<Conversion price={field.value} className={styles.conversion} />
}
/>
<Error meta={meta} />
</div>
<div className={styles.datatoken}>
<h4>
= <strong>1</strong> {dtName} — {dtSymbol}
</h4>
</div>
</div>
)
}

3
src/components/organisms/AssetContent/index.tsx
View File

@ -30,7 +30,8 @@ export default function AssetContent({
const isOwner = accountId === ddo.publicKey[0].owner
const hasNoPrice = ddo.price.type === ''
const showPricing = isOwner && hasNoPrice
// TODO: JUST FOR DEBUGGING
const showPricing = true || (isOwner && hasNoPrice)
return (
<article className={styles.grid}>