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

styling, content, datatoken info

This commit is contained in:
Matthias Kretschmann 2020-10-20 15:38:26 +02:00
parent 07b086547f
commit a058af65f6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
12 changed files with 75 additions and 68 deletions

View File

@ -96,21 +96,5 @@
} }
], ],
"success": "Asset Created!" "success": "Asset Created!"
},
"price": {
"fixed": {
"title": "Fixed",
"info": "Set your price for accessing this data set. A Datatoken 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 Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a OCEAN/Datatoken liquidity pool with Balancer.",
"tooltips": {
"poolInfo": "Explain what is going on here...",
"swapFee": "Explain liquidity provider fee...",
"communityFee": "Explain community fee...",
"marketplaceFee": "Explain marketplace fee..."
}
}
} }
} }

View File

@ -1,4 +1,20 @@
{ {
"create": {
"fixed": {
"title": "Fixed",
"info": "Set your price for accessing this data set. The datatoken for this data set will be worth the entered amount of OCEAN."
},
"dynamic": {
"title": "Dynamic",
"info": "Let's create a decentralized, automated market for your data set. The datatoken for this data set will be worth the entered amount of OCEAN. Additionally, you will provide liquidity into a Datatoken/OCEAN liquidity pool with Balancer.",
"tooltips": {
"poolInfo": "Explain what is going on here...",
"swapFee": "Explain liquidity provider fee...",
"communityFee": "Explain community fee...",
"marketplaceFee": "Explain marketplace fee..."
}
}
},
"pool": { "pool": {
"tooltips": { "tooltips": {
"price": "Explain how this price is determined...", "price": "Explain how this price is determined...",

View File

@ -1,5 +1,5 @@
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import { useOcean, useMetadata } from '@oceanprotocol/react' import { useOcean, useMetadata, usePricing } from '@oceanprotocol/react'
import { DDO, Logger } from '@oceanprotocol/lib' import { DDO, Logger } from '@oceanprotocol/lib'
import styles from './index.module.css' import styles from './index.module.css'
import stylesActions from './Actions.module.css' import stylesActions from './Actions.module.css'
@ -45,10 +45,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
const { ocean, accountId } = useOcean() const { ocean, accountId } = useOcean()
const { price } = useMetadata(ddo) const { price } = useMetadata(ddo)
const { dtSymbol } = usePricing(ddo)
const [poolTokens, setPoolTokens] = useState<string>() const [poolTokens, setPoolTokens] = useState<string>()
const [totalPoolTokens, setTotalPoolTokens] = useState<string>() const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
const [dtSymbol, setDtSymbol] = useState<string>()
const [userLiquidity, setUserLiquidity] = useState<Balance>() const [userLiquidity, setUserLiquidity] = useState<Balance>()
const [swapFee, setSwapFee] = useState<string>() const [swapFee, setSwapFee] = useState<string>()
@ -79,12 +79,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
setIsLoading(true) setIsLoading(true)
try { try {
//
// Get data token symbol
//
const dtSymbol = await ocean.datatokens.getSymbol(ddo.dataToken)
setDtSymbol(dtSymbol)
// //
// Get everything which is in the pool // Get everything which is in the pool
// //

View File

@ -20,7 +20,6 @@ export default function Coin({
readOnly?: boolean readOnly?: boolean
}): ReactElement { }): ReactElement {
const [field, meta] = useField(name) const [field, meta] = useField(name)
console.log(field)
return ( return (
<div className={styles.coin}> <div className={styles.coin}>

View File

@ -40,6 +40,7 @@
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--brand-grey-lighter);
background: var(--brand-grey-dimmed);
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {

View File

@ -1,4 +1,4 @@
import { DataTokenOptions, useOcean } from '@oceanprotocol/react' import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
import PriceUnit from '../../../atoms/Price/PriceUnit' import PriceUnit from '../../../atoms/Price/PriceUnit'
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
@ -13,16 +13,18 @@ import Fees from './Fees'
import stylesIndex from './index.module.css' import stylesIndex from './index.module.css'
import { useFormikContext } from 'formik' import { useFormikContext } from 'formik'
import { PriceOptionsMarket } from '../../../../@types/MetaData' import { PriceOptionsMarket } from '../../../../@types/MetaData'
import { DDO } from '@oceanprotocol/lib'
export default function Dynamic({ export default function Dynamic({
datatokenOptions, ddo,
content content
}: { }: {
datatokenOptions: DataTokenOptions ddo: DDO
content: any content: any
}): ReactElement { }): ReactElement {
const { appConfig } = useSiteMetadata() const { appConfig } = useSiteMetadata()
const { account, balance, networkId, refreshBalance } = useOcean() const { account, balance, networkId, refreshBalance } = useOcean()
const { dtSymbol, dtName } = usePricing(ddo)
// Connect with form // Connect with form
const { values } = useFormikContext() const { values } = useFormikContext()
@ -87,7 +89,7 @@ export default function Dynamic({
/> />
<Coin <Coin
name="dtAmount" name="dtAmount"
datatokenOptions={datatokenOptions} datatokenOptions={{ symbol: dtSymbol, name: dtName }}
weight={`${Number(weightOnDataToken) * 10}%`} weight={`${Number(weightOnDataToken) * 10}%`}
readOnly readOnly
/> />

View File

@ -5,12 +5,12 @@
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--brand-grey-lighter);
margin-top: var(--spacer); padding: var(--spacer) var(--spacer) calc(var(--spacer) / 2) var(--spacer);
padding: 0 var(--spacer) calc(var(--spacer) / 2) var(--spacer);
justify-content: center; justify-content: center;
text-align: center; text-align: center;
border-bottom: 1px solid var(--brand-grey-lighter); border-bottom: 1px solid var(--brand-grey-lighter);
background: var(--brand-grey-dimmed);
} }
.fees label { .fees label {

View File

@ -6,8 +6,15 @@ import Conversion from '../../../atoms/Price/Conversion'
import { useField } from 'formik' import { useField } from 'formik'
import Input from '../../../atoms/Input' import Input from '../../../atoms/Input'
import Error from './Error' import Error from './Error'
import { DDO } from '@oceanprotocol/lib'
export default function Fixed({ content }: { content: any }): ReactElement { export default function Fixed({
ddo,
content
}: {
ddo: DDO
content: any
}): ReactElement {
const [field, meta] = useField('price') const [field, meta] = useField('price')
return ( return (

View File

@ -1,7 +1,6 @@
.price { .price {
border: 1px solid var(--brand-grey-lighter); margin: -2rem;
background: var(--brand-grey-dimmed); margin-bottom: 0;
border-radius: var(--border-radius);
} }
.content { .content {
@ -36,3 +35,12 @@
text-align: center; text-align: center;
margin-bottom: calc(var(--spacer) / 1.5); margin-bottom: calc(var(--spacer) / 1.5);
} }
.actions {
text-align: center;
}
.actions button {
margin-left: calc(var(--spacer) / 2);
margin-right: calc(var(--spacer) / 2);
}

View File

@ -6,16 +6,17 @@ import Fixed from './Fixed'
import Dynamic from './Dynamic' import Dynamic from './Dynamic'
import { useFormikContext } from 'formik' import { useFormikContext } from 'formik'
import { useUserPreferences } from '../../../../providers/UserPreferences' import { useUserPreferences } from '../../../../providers/UserPreferences'
import ddo from '../../../../../tests/unit/__fixtures__/ddo'
import { PriceOptionsMarket } from '../../../../@types/MetaData' import { PriceOptionsMarket } from '../../../../@types/MetaData'
import Button from '../../../atoms/Button'
import { DDO } from '@oceanprotocol/lib'
const query = graphql` const query = graphql`
query PriceFieldQuery { query PriceFieldQuery {
content: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) { content: allFile(filter: { relativePath: { eq: "price.json" } }) {
edges { edges {
node { node {
childPagesJson { childContentJson {
price { create {
fixed { fixed {
title title
info info
@ -38,11 +39,17 @@ const query = graphql`
} }
` `
export default function FormPricing(): ReactElement { export default function FormPricing({
ddo,
setShowPricing
}: {
ddo: DDO
setShowPricing: (value: boolean) => void
}): ReactElement {
const { debug } = useUserPreferences() const { debug } = useUserPreferences()
// Get content // Get content
const data = useStaticQuery(query) const data = useStaticQuery(query)
const content = data.content.edges[0].node.childPagesJson.price const content = data.content.edges[0].node.childContentJson.create
// Connect with form // Connect with form
const { values, setFieldValue } = useFormikContext() const { values, setFieldValue } = useFormikContext()
@ -63,16 +70,11 @@ export default function FormPricing(): ReactElement {
const tabs = [ const tabs = [
{ {
title: content.fixed.title, title: content.fixed.title,
content: <Fixed content={content.fixed} /> content: <Fixed content={content.fixed} ddo={ddo} />
}, },
{ {
title: content.dynamic.title, title: content.dynamic.title,
content: ( content: <Dynamic content={content.dynamic} ddo={ddo} />
<Dynamic
datatokenOptions={ddo.dataTokenInfo}
content={content.dynamic}
/>
)
} }
] ]
@ -83,6 +85,16 @@ export default function FormPricing(): ReactElement {
handleTabChange={handleTabChange} handleTabChange={handleTabChange}
defaultIndex={type === 'fixed' ? 0 : 1} defaultIndex={type === 'fixed' ? 0 : 1}
/> />
<div className={styles.actions}>
<Button style="primary" type="submit">
Create Pricing
</Button>
<Button style="text" size="small" onClick={() => setShowPricing(false)}>
Cancel
</Button>
</div>
{debug === true && ( {debug === true && (
<pre> <pre>
<code>{JSON.stringify(values, null, 2)}</code> <code>{JSON.stringify(values, null, 2)}</code>

View File

@ -1,12 +1,11 @@
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement } from 'react'
import Time from '../../atoms/Time' import Time from '../../atoms/Time'
import MetaItem from './MetaItem' import MetaItem from './MetaItem'
import styles from './MetaFull.module.css' import styles from './MetaFull.module.css'
import { MetadataMarket } from '../../../@types/MetaData' import { MetadataMarket } from '../../../@types/MetaData'
import { DDO } from '@oceanprotocol/lib' import { DDO } from '@oceanprotocol/lib'
import EtherscanLink from '../../atoms/EtherscanLink' import EtherscanLink from '../../atoms/EtherscanLink'
import { usePricing } from '@oceanprotocol/react'
import { useOcean } from '@oceanprotocol/react'
export default function MetaFull({ export default function MetaFull({
ddo, ddo,
@ -15,24 +14,9 @@ export default function MetaFull({
ddo: DDO ddo: DDO
metadata: MetadataMarket metadata: MetadataMarket
}): ReactElement { }): ReactElement {
const { ocean } = useOcean()
const { id, dataToken } = ddo const { id, dataToken } = ddo
const { dateCreated, datePublished, author, license } = metadata.main const { dateCreated, datePublished, author, license } = metadata.main
const { dtSymbol, dtName } = usePricing(ddo)
const [dtName, setDtName] = useState<string>()
const [dtSymbol, setDtSymbol] = useState<string>()
useEffect(() => {
if (!ocean) return
async function getDataTokenInfo() {
const name = await ocean.datatokens.getName(dataToken)
setDtName(name)
const symbol = await ocean.datatokens.getSymbol(dataToken)
setDtSymbol(symbol)
}
getDataTokenInfo()
}, [ocean, dataToken])
return ( return (
<div className={styles.metaFull}> <div className={styles.metaFull}>

View File

@ -33,7 +33,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
> >
{() => {() =>
showPricing ? ( showPricing ? (
<FormPricing /> <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
) : ( ) : (
<Alert <Alert
state="info" state="info"