Merge pull request #136 from oceanprotocol/fix/pool-price

price refactor

package-lock.json

@@ -3850,9 +3850,9 @@
       "integrity": "sha512-p0oOHXr60hXZuLNsQ/PsOQtCfia79thm7MjPxTrnnBvD+csJoHzARYMB0IFj/KTw6U5vLXODgjJAn8x6QksLwg=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.8.0",
+      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.0.tgz",
-      "integrity": "sha512-FZALOw3LMAPo2US+YjJv5Fkz7IDS9m89PZzF7uKZKYT8V3xB/m0PV91vV1pEPC0eVWk3Sl1IXyT0L3ASFEUjvg==",
+      "integrity": "sha512-BI00ZXTdGXJZNTJhwtqsnXjKtlcl1PXB18e26aCo5g1VT9S19urPLT04k9Zkz4k+3HepSc5QdOu+yo47MS1I7g==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.7",
@@ -3867,12 +3867,12 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.8",
+      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.9.tgz",
-      "integrity": "sha512-cbijintJy5Cg5/FFhLNfgIgmxRHCDZnv9zoMOeQJE28fwG/jOAkU+r3G4OK0EvFm9BXDsBxqoZxOO6Eb1EpV6w==",
+      "integrity": "sha512-qsaQVSQtHL+5QoknrVuJOdRr2mQ+2An368yNYzsMbxaAKp6HJ7b3p9bfqV0WQqaMA10GqTyfUi1GUJq630h9DA==",
       "requires": {
-        "@oceanprotocol/lib": "^0.8.0",
+        "@oceanprotocol/lib": "^0.9.0",
-        "axios": "^0.20.0",
+        "axios": "^0.21.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",
         "web3modal": "^1.9.1"
@@ -9105,9 +9105,9 @@
       "integrity": "sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q=="
     },
     "axios": {
-      "version": "0.20.0",
+      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
-      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
       "requires": {
         "follow-redirects": "^1.10.0"
       }
@@ -17246,6 +17246,14 @@
             "color-convert": "^2.0.1"
           }
         },
+        "axios": {
+          "version": "0.20.0",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+          "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+          "requires": {
+            "follow-redirects": "^1.10.0"
+          }
+        },
         "cacheable-request": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
@@ -34833,9 +34841,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.19.0",
+          "version": "12.19.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz",
-          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
+          "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A=="
         }
       }
     },
@@ -35033,9 +35041,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.19.0",
+          "version": "12.19.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz",
-          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
+          "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A=="
         }
       }
     },

package.json

@@ -22,8 +22,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.8.0",
+    "@oceanprotocol/lib": "^0.9.0",
-    "@oceanprotocol/react": "^0.3.8",
+    "@oceanprotocol/react": "^0.3.9",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",
@@ -31,7 +31,7 @@
     "@types/classnames": "^2.2.10",
     "@vercel/node": "^1.8.4",
     "@walletconnect/web3-provider": "^1.3.1",
-    "axios": "^0.20.0",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "decimal.js": "^10.2.1",

src/@types/MetaData.d.ts

@@ -19,6 +19,7 @@ export interface MetadataMarket extends Metadata {
 }
 
 export interface PriceOptionsMarket extends PriceOptions {
+  weightOnOcean: string
   // easier to keep this as number for Yup input validation
   swapFee: number
 }

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

@@ -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,
@@ -25,7 +27,11 @@ export default function Dynamic({
 
   // Connect with form
   const { values } = useFormikContext()
-  const { price, weightOnDataToken } = values as PriceOptionsMarket
+  const {
+    price,
+    weightOnDataToken,
+    weightOnOcean
+  } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
 
@@ -68,15 +74,21 @@ 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>
 
       <div className={styles.tokens}>
         <Coin
-          name="price"
+          name="oceanAmount"
           datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-          weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
+          weight={`${Number(weightOnOcean) * 10}%`}
         />
         <Coin
           name="dtAmount"

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx

@@ -49,7 +49,7 @@ export default function Fees({
           type="number"
           postfix="%"
           min="0.1"
-          max="0.9"
+          max="10"
           step="0.1"
           small
           {...field}

src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css

@@ -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);
-}

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

@@ -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>
-
+      <Price ddo={ddo} />
-      <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>
     </div>
   )
 }

src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css

@@ -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);
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx

@@ -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>
+  )
+}

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

@@ -23,7 +23,13 @@ export default function FormPricing({
 
   // Connect with form
   const { values, setFieldValue, submitForm } = useFormikContext()
-  const { price, weightOnDataToken, type } = values as PriceOptionsMarket
+  const {
+    price,
+    oceanAmount,
+    weightOnOcean,
+    weightOnDataToken,
+    type
+  } = values as PriceOptionsMarket
 
   // Switch type value upon tab change
   function handleTabChange(tabName: string) {
@@ -33,9 +39,12 @@ export default function FormPricing({
 
   // Always update everything when price value changes
   useEffect(() => {
-    const dtAmount = Number(price) * Number(weightOnDataToken)
+    const dtAmount =
+      (Number(oceanAmount) / Number(weightOnOcean) / price) *
+      Number(weightOnDataToken)
+
     setFieldValue('dtAmount', dtAmount)
-  }, [price, weightOnDataToken])
+  }, [price, oceanAmount, weightOnOcean, weightOnDataToken])
 
   const tabs = [
     {

src/models/FormPricing.ts

@@ -2,12 +2,16 @@ import { PriceOptionsMarket } from '../@types/MetaData'
 import * as Yup from 'yup'
 
 export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
-  price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
+  price: Yup.number().min(1, 'Must be greater than 1').required('Required'),
-  dtAmount: Yup.number().min(1, 'Must be greater than 0').required('Required'),
+  dtAmount: Yup.number().min(9, 'Must be greater than 9').required('Required'),
+  oceanAmount: Yup.number()
+    .min(1, 'Must be greater than 0')
+    .required('Required'),
   type: Yup.string()
     .matches(/fixed|dynamic/g)
     .required('Required'),
   weightOnDataToken: Yup.string().required('Required'),
+  weightOnOcean: Yup.string().required('Required'),
   swapFee: Yup.number()
     .min(0.1, 'Must be more or equal to 0.1')
     .max(10, 'Maximum is 10%')
@@ -18,7 +22,9 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
 export const initialValues: PriceOptionsMarket = {
   price: 1,
   type: 'dynamic',
-  dtAmount: 1,
+  dtAmount: 9,
+  oceanAmount: 1,
+  weightOnOcean: '1', // 10% on OCEAN
   weightOnDataToken: '9', // 90% on datatoken
   swapFee: 0.1 // in %
 }