mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
styling & copy
This commit is contained in:
parent
bc6b9ec8b1
commit
09e68d44cd
GPG Key ID:
606EEEF3C479A91F
@ -100,11 +100,11 @@
|
||||
"price": {
|
||||
"fixed": {
|
||||
"title": "Fixed",
|
||||
"info": "Set your price for accessing this data set. A Data Token contract for this data set, worth the entered amount of OCEAN will be created."
|
||||
"info": "Set your price for accessing this data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created."
|
||||
},
|
||||
"dynamic": {
|
||||
"title": "Dynamic",
|
||||
"info": "Let's create a decentralized, automated market for your data set. A Data Token contract for this data set worth the entered amount of OCEAN will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
|
||||
"info": "Let's create a decentralized, automated market for your data set. A Data Token for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
|
||||
"tooltips": {
|
||||
"poolInfo": "Help me",
|
||||
"liquidityProviderFee": "Help me"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.advanced {
|
||||
.dynamic {
|
||||
composes: content from './index.module.css';
|
||||
}
|
||||
|
||||
.wallet {
|
||||
@ -36,8 +37,8 @@
|
||||
.tokens {
|
||||
display: grid;
|
||||
|
||||
margin-left: -3rem;
|
||||
margin-right: -3rem;
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||
}
|
||||
|
||||
@ -50,7 +51,6 @@
|
||||
.summary {
|
||||
text-align: center;
|
||||
margin-top: var(--spacer);
|
||||
margin-bottom: -2rem;
|
||||
}
|
||||
|
||||
.summary input {
|
||||
@ -58,8 +58,8 @@
|
||||
}
|
||||
|
||||
.alertArea {
|
||||
margin-left: -3rem;
|
||||
margin-right: -3rem;
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
padding: var(--spacer) calc(var(--spacer) / 2);
|
||||
padding-bottom: 0;
|
||||
margin-top: var(--spacer);
|
||||
|
||||
@ -61,60 +61,58 @@ export default function Dynamic({
|
||||
}, [ocean, chainId, account])
|
||||
|
||||
return (
|
||||
<div className={stylesIndex.content}>
|
||||
<div className={styles.advanced}>
|
||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||
<div className={styles.dynamic}>
|
||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||
|
||||
<aside className={styles.wallet}>
|
||||
{balance?.ocean && (
|
||||
<div className={styles.balance}>
|
||||
OCEAN <strong>{balance.ocean}</strong>
|
||||
</div>
|
||||
)}
|
||||
<Wallet />
|
||||
</aside>
|
||||
|
||||
<h4 className={styles.title}>
|
||||
Data Token Liquidity Pool{' '}
|
||||
<Tooltip content={content.tooltips.poolInfo} />
|
||||
</h4>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<Coin
|
||||
name="ocean"
|
||||
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
|
||||
value={ocean}
|
||||
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
|
||||
onOceanChange={onOceanChange}
|
||||
/>
|
||||
<Coin
|
||||
name="tokensToMint"
|
||||
datatokenOptions={datatokenOptions}
|
||||
value={tokensToMint.toString()}
|
||||
weight={`${Number(weightOnDataToken) * 10}%`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer className={styles.summary}>
|
||||
<Label htmlFor="liquidityProviderFee">
|
||||
Liquidity Provider Fee{' '}
|
||||
<Tooltip content={content.tooltips.liquidityProviderFee} />
|
||||
</Label>
|
||||
<InputElement
|
||||
value={liquidityProviderFee}
|
||||
name="liquidityProviderFee"
|
||||
readOnly
|
||||
postfix="%"
|
||||
/>
|
||||
</footer>
|
||||
|
||||
{error && (
|
||||
<div className={styles.alertArea}>
|
||||
<Alert text={error} state="error" />
|
||||
<aside className={styles.wallet}>
|
||||
{balance?.ocean && (
|
||||
<div className={styles.balance}>
|
||||
OCEAN <strong>{balance.ocean}</strong>
|
||||
</div>
|
||||
)}
|
||||
<Wallet />
|
||||
</aside>
|
||||
|
||||
<h4 className={styles.title}>
|
||||
Data Token Liquidity Pool{' '}
|
||||
<Tooltip content={content.tooltips.poolInfo} />
|
||||
</h4>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<Coin
|
||||
name="ocean"
|
||||
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
|
||||
value={ocean}
|
||||
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
|
||||
onOceanChange={onOceanChange}
|
||||
/>
|
||||
<Coin
|
||||
name="tokensToMint"
|
||||
datatokenOptions={datatokenOptions}
|
||||
value={tokensToMint.toString()}
|
||||
weight={`${Number(weightOnDataToken) * 10}%`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer className={styles.summary}>
|
||||
<Label htmlFor="liquidityProviderFee">
|
||||
Liquidity Provider Fee{' '}
|
||||
<Tooltip content={content.tooltips.liquidityProviderFee} />
|
||||
</Label>
|
||||
<InputElement
|
||||
value={liquidityProviderFee}
|
||||
name="liquidityProviderFee"
|
||||
readOnly
|
||||
postfix="%"
|
||||
/>
|
||||
</footer>
|
||||
|
||||
{error && (
|
||||
<div className={styles.alertArea}>
|
||||
<Alert text={error} state="error" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,19 @@
|
||||
.fixed {
|
||||
composes: content from './index.module.css';
|
||||
}
|
||||
|
||||
.form {
|
||||
max-width: 12rem;
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-top: var(--spacer);
|
||||
display: grid;
|
||||
gap: var(--spacer);
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fixed label {
|
||||
@ -9,8 +22,11 @@
|
||||
|
||||
.datatoken {
|
||||
color: var(--color-secondary);
|
||||
margin-top: calc(var(--spacer) / 4);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.datatoken strong {
|
||||
color: var(--brand-grey);
|
||||
}
|
||||
|
||||
@ -19,12 +19,12 @@ export default function Fixed({
|
||||
content: any
|
||||
}): ReactElement {
|
||||
return (
|
||||
<div className={stylesIndex.content}>
|
||||
<div className={styles.fixed}>
|
||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||
<div className={styles.fixed}>
|
||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<div className={styles.form}>
|
||||
<Label htmlFor="ocean">Ocean Tokens</Label>
|
||||
<Label htmlFor="ocean">Ocean Token</Label>
|
||||
<InputElement
|
||||
value={ocean}
|
||||
name="ocean"
|
||||
@ -36,7 +36,9 @@ export default function Fixed({
|
||||
</div>
|
||||
{datatokenOptions && (
|
||||
<div className={styles.datatoken}>
|
||||
{datatokenOptions?.symbol} | {datatokenOptions?.name}
|
||||
<strong>Data Token</strong>
|
||||
<br />
|
||||
{datatokenOptions?.name} | {datatokenOptions?.symbol}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 calc(var(--spacer) / 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content label {
|
||||
|
||||
@ -2,12 +2,7 @@ import React, { ReactElement } from 'react'
|
||||
import { useNavigate } from '@reach/router'
|
||||
import { toast } from 'react-toastify'
|
||||
import { Formik } from 'formik'
|
||||
import {
|
||||
usePublish,
|
||||
useOcean,
|
||||
PriceOptions,
|
||||
DataTokenOptions
|
||||
} from '@oceanprotocol/react'
|
||||
import { usePublish, DataTokenOptions } from '@oceanprotocol/react'
|
||||
import styles from './index.module.css'
|
||||
import PublishForm from './PublishForm'
|
||||
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
||||
@ -16,7 +11,7 @@ import { initialValues, validationSchema } from '../../../models/FormPublish'
|
||||
import { transformPublishFormToMetadata } from './utils'
|
||||
import Preview from './Preview'
|
||||
import { MetadataPublishForm } from '../../../@types/MetaData'
|
||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||
// import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||
|
||||
export default function PublishPage({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user