diff --git a/content/pages/publish.json b/content/pages/publish.json
index bfee73d99..bc1b6ebc2 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -37,7 +37,6 @@
{
"name": "price",
"label": "Price",
- "help": "Set your price for accessing this data set in Ocean Tokens.",
"type": "price",
"required": true
},
diff --git a/src/components/atoms/Input/Help.tsx b/src/components/atoms/Input/Help.tsx
index 99d98ea90..9152b1fd0 100644
--- a/src/components/atoms/Input/Help.tsx
+++ b/src/components/atoms/Input/Help.tsx
@@ -1,9 +1,23 @@
import React, { ReactElement } from 'react'
import styles from './Help.module.css'
import Markdown from '../Markdown'
+import classNames from 'classnames/bind'
-const FormHelp = ({ children }: { children: string }): ReactElement => (
-
-)
+const cx = classNames.bind(styles)
+
+const FormHelp = ({
+ children,
+ className
+}: {
+ children: string
+ className?: string
+}): ReactElement => {
+ const styleClasses = cx({
+ help: true,
+ [className]: className
+ })
+
+ return
+}
export default FormHelp
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index d468b5dc9..2f9ef0936 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -33,7 +33,8 @@
.input[readonly],
.input[disabled] {
- background-color: var(--brand-grey-lighter);
+ background-color: var(--brand-grey-dimmed);
+ color: var(--brand-grey-light);
cursor: not-allowed;
pointer-events: none;
}
@@ -84,6 +85,56 @@
padding-left: 0.5rem;
}
+.prefixGroup,
+.postfixGroup {
+ display: flex;
+ align-items: center;
+}
+
+.prefixGroup input,
+.postfixGroup input {
+ width: auto;
+}
+
+.prefixGroup input {
+ border-left: 0;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.postfixGroup input {
+ border-right: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.prefix,
+.postfix {
+ border: 1px solid var(--brand-grey-lighter);
+ min-height: 43px;
+ display: flex;
+ align-items: center;
+ padding-left: calc(var(--spacer) / 2);
+ padding-right: calc(var(--spacer) / 2);
+ color: var(--color-secondary);
+ font-size: var(--font-size-small);
+ transition: border 0.2s ease-out;
+}
+
+.prefix {
+ border-top-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+}
+
+.postfix {
+ border-top-right-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+}
+
+.input:focus + .postfix {
+ border-color: var(--brand-grey);
+}
+
/* Size modifiers */
.small {
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 80d5c869d..3e2645f21 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -7,7 +7,7 @@ import Terms from '../../molecules/FormFields/Terms'
import Price from '../../molecules/FormFields/Price'
export default function InputElement(props: InputProps): ReactElement {
- const { type, options, rows, name, value } = props
+ const { type, options, rows, name, prefix, postfix } = props
switch (type) {
case 'select':
@@ -62,7 +62,19 @@ export default function InputElement(props: InputProps): ReactElement {
case 'terms':
return
default:
- return (
+ return prefix || postfix ? (
+
+ {prefix &&
{prefix}
}
+
+ {postfix &&
{postfix}
}
+
+ ) : (
): ReactElement {
diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx
index 66a0e9267..345ef1247 100644
--- a/src/components/atoms/Price/Conversion.tsx
+++ b/src/components/atoms/Price/Conversion.tsx
@@ -2,19 +2,29 @@ import React, { useEffect, useState, ReactElement } from 'react'
import useSWR from 'swr'
import { fetchData, isBrowser } from '../../../utils'
import styles from './Conversion.module.css'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
const currencies = 'EUR' // comma-separated list
const url = `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true`
export default function Conversion({
price,
- update = true
+ update = true,
+ className
}: {
price: string // expects price in OCEAN, not wei
update?: boolean
+ className?: string
}): ReactElement {
const [priceEur, setPriceEur] = useState('0.00')
+ const styleClasses = cx({
+ conversion: true,
+ [className]: className
+ })
+
const onSuccess = async (data: { 'ocean-protocol': { eur: number } }) => {
if (!data) return
if (!price || price === '' || price === '0') {
@@ -45,5 +55,5 @@ export default function Conversion({
})
}
- return ≈ EUR {priceEur}
+ return ≈ EUR {priceEur}
}
diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css
index 30d90102e..d307d5b07 100644
--- a/src/components/molecules/FormFields/Price/Advanced.module.css
+++ b/src/components/molecules/FormFields/Price/Advanced.module.css
@@ -1,9 +1,8 @@
-.advancedInput {
- display: flex;
- gap: calc(var(--spacer) / 2);
- justify-content: center;
- flex-wrap: wrap;
+.advanced {
}
-.advancedInput label {
+.advanced > div:last-child {
+ display: grid;
+ gap: calc(var(--spacer) / 2);
+ grid-template-columns: 1fr 1fr;
}
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
index 0120df47d..e3eaabbe9 100644
--- a/src/components/molecules/FormFields/Price/Advanced.tsx
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, ChangeEvent } from 'react'
import { InputProps } from '../../../atoms/Input'
import InputElement from '../../../atoms/Input/InputElement'
import stylesIndex from './index.module.css'
@@ -6,21 +6,62 @@ import styles from './Advanced.module.css'
import Label from '../../../atoms/Input/Label'
import { MetadataPublishForm } from '../../../../@types/MetaData'
import Cost from './Cost'
+import Conversion from '../../../atoms/Price/Conversion'
+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()
+
+ function handleWeightChange(event: ChangeEvent) {
+ setWeight(event.target.value)
+ }
return (
-
-
-
-
Tokens to Mint
-
+
+
+
+ Set your price for accessing this data set. A Data Token for this data
+ set worth the entered amount of OCEAN, and a Data Token/OCEAN
+ liquidity pool will be created with Balancer.
+
+
+
+
+
+ Weight on Data Token
+
+
+
+ Liquidity
+
+
+
+
+ Tokens to Mint
+
+
+
)
diff --git a/src/components/molecules/FormFields/Price/Cost.module.css b/src/components/molecules/FormFields/Price/Cost.module.css
deleted file mode 100644
index 3d0131835..000000000
--- a/src/components/molecules/FormFields/Price/Cost.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.cost {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
-}
-
-.cost label {
- width: 100%;
-}
-
-.cost input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-}
-
-.prefix {
- border: 1px solid var(--brand-grey-lighter);
- min-height: 43px;
- display: flex;
- align-items: center;
- padding-left: calc(var(--spacer) / 2);
- padding-right: calc(var(--spacer) / 2);
- color: var(--color-secondary);
- font-size: var(--font-size-small);
- margin-right: -2px;
- border-top-left-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
-}
diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx
index c23b82785..1363ba379 100644
--- a/src/components/molecules/FormFields/Price/Cost.tsx
+++ b/src/components/molecules/FormFields/Price/Cost.tsx
@@ -1,26 +1,30 @@
import React, { ReactElement } from 'react'
import InputElement from '../../../atoms/Input/InputElement'
-import styles from './Cost.module.css'
import { MetadataPublishForm } from '../../../../@types/MetaData'
import Conversion from '../../../atoms/Price/Conversion'
import { InputProps } from '../../../atoms/Input'
import Label from '../../../atoms/Input/Label'
+import stylesIndex from './index.module.css'
export default function Cost(props: InputProps): ReactElement {
const { price } = props.form.values as MetadataPublishForm
return (
-
+
)
}
diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css
index 200a835cf..47f9feabc 100644
--- a/src/components/molecules/FormFields/Price/Simple.module.css
+++ b/src/components/molecules/FormFields/Price/Simple.module.css
@@ -1,10 +1,9 @@
.simple {
- margin-bottom: calc(var(--spacer) / 2);
- text-align: center;
}
-.simple > div {
- justify-content: center;
+.simple > div:last-child {
+ max-width: 13.25rem;
+ margin: 0 auto;
}
.simple label {
diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx
index 8be0f36f4..cb57d00c6 100644
--- a/src/components/molecules/FormFields/Price/Simple.tsx
+++ b/src/components/molecules/FormFields/Price/Simple.tsx
@@ -9,9 +9,12 @@ export default function Simple(props: InputProps): ReactElement {
return (
+
+ Set your price for accessing this data set. A Data Token for this data
+ set worth the entered amount of OCEAN will be created.
+
- {props.help &&
{props.help} }
)
}
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css
index 90024ce6a..d636d4643 100644
--- a/src/components/molecules/FormFields/Price/index.module.css
+++ b/src/components/molecules/FormFields/Price/index.module.css
@@ -20,3 +20,14 @@
.content p {
margin-bottom: 0;
}
+
+.conversion {
+ display: block;
+ padding-left: 5rem;
+ margin-top: calc(var(--spacer) / 6);
+}
+
+.help {
+ text-align: center;
+ margin-bottom: calc(var(--spacer) / 2);
+}