styling, content, datatoken info

content/pages/publish.json

@@ -96,21 +96,5 @@
       }
     ],
     "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..."
-      }
-    }
   }
 }

content/price.json

@@ -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": {
     "tooltips": {
       "price": "Explain how this price is determined...",

src/components/organisms/AssetActions/Pool/index.tsx

@@ -1,5 +1,5 @@
 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 styles from './index.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 { price } = useMetadata(ddo)
+  const { dtSymbol } = usePricing(ddo)
 
   const [poolTokens, setPoolTokens] = useState<string>()
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
-  const [dtSymbol, setDtSymbol] = useState<string>()
   const [userLiquidity, setUserLiquidity] = useState<Balance>()
   const [swapFee, setSwapFee] = useState<string>()
 
@@ -79,12 +79,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       setIsLoading(true)
 
       try {
-        //
-        // Get data token symbol
-        //
-        const dtSymbol = await ocean.datatokens.getSymbol(ddo.dataToken)
-        setDtSymbol(dtSymbol)
-
         //
         // Get everything which is in the pool
         //

src/components/organisms/AssetContent/FormPricing/Coin.tsx

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

src/components/organisms/AssetContent/FormPricing/Dynamic.module.css

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

src/components/organisms/AssetContent/FormPricing/Dynamic.tsx

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

src/components/organisms/AssetContent/FormPricing/Fees.module.css

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

src/components/organisms/AssetContent/FormPricing/Fixed.tsx

@@ -6,8 +6,15 @@ import Conversion from '../../../atoms/Price/Conversion'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
 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')
 
   return (

src/components/organisms/AssetContent/FormPricing/index.module.css

@@ -1,7 +1,6 @@
 .price {
-  border: 1px solid var(--brand-grey-lighter);
-  background: var(--brand-grey-dimmed);
-  border-radius: var(--border-radius);
+  margin: -2rem;
+  margin-bottom: 0;
 }
 
 .content {
@@ -36,3 +35,12 @@
   text-align: center;
   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);
+}

src/components/organisms/AssetContent/FormPricing/index.tsx

@@ -6,16 +6,17 @@ import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useFormikContext } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import ddo from '../../../../../tests/unit/__fixtures__/ddo'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import Button from '../../../atoms/Button'
+import { DDO } from '@oceanprotocol/lib'
 
 const query = graphql`
   query PriceFieldQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
       edges {
         node {
-          childPagesJson {
-            price {
+          childContentJson {
+            create {
               fixed {
                 title
                 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()
   // Get content
   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
   const { values, setFieldValue } = useFormikContext()
@@ -63,16 +70,11 @@ export default function FormPricing(): ReactElement {
   const tabs = [
     {
       title: content.fixed.title,
-      content: <Fixed content={content.fixed} />
+      content: <Fixed content={content.fixed} ddo={ddo} />
     },
     {
       title: content.dynamic.title,
-      content: (
-        <Dynamic
-          datatokenOptions={ddo.dataTokenInfo}
-          content={content.dynamic}
-        />
-      )
+      content: <Dynamic content={content.dynamic} ddo={ddo} />
     }
   ]
 
@@ -83,6 +85,16 @@ export default function FormPricing(): ReactElement {
         handleTabChange={handleTabChange}
         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 && (
         <pre>
           <code>{JSON.stringify(values, null, 2)}</code>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -1,12 +1,11 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import Time from '../../atoms/Time'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import { MetadataMarket } from '../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 import EtherscanLink from '../../atoms/EtherscanLink'
-
-import { useOcean } from '@oceanprotocol/react'
+import { usePricing } from '@oceanprotocol/react'
 
 export default function MetaFull({
   ddo,
@@ -15,24 +14,9 @@ export default function MetaFull({
   ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
-  const { ocean } = useOcean()
   const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
-
-  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])
+  const { dtSymbol, dtName } = usePricing(ddo)
 
   return (
     <div className={styles.metaFull}>

src/components/organisms/AssetContent/Pricing.tsx

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