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

price refactor
2024-11-14 17:24:51 +01:00 · 2020-10-26 17:46:14 +01:00 · 2020-10-26 17:46:14 +01:00 · 8756a8e688
commit 8756a8e688
parent 1a621becd5 0b5e7f27d2
11 changed files with 150 additions and 110 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -3850,9 +3850,9 @@
      "integrity": "sha512-p0oOHXr60hXZuLNsQ/PsOQtCfia79thm7MjPxTrnnBvD+csJoHzARYMB0IFj/KTw6U5vLXODgjJAn8x6QksLwg=="
    },
    "@oceanprotocol/lib": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.8.0.tgz",
-      "integrity": "sha512-FZALOw3LMAPo2US+YjJv5Fkz7IDS9m89PZzF7uKZKYT8V3xB/m0PV91vV1pEPC0eVWk3Sl1IXyT0L3ASFEUjvg==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.8.tgz",
-      "integrity": "sha512-cbijintJy5Cg5/FFhLNfgIgmxRHCDZnv9zoMOeQJE28fwG/jOAkU+r3G4OK0EvFm9BXDsBxqoZxOO6Eb1EpV6w==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.9.tgz",
+      "integrity": "sha512-qsaQVSQtHL+5QoknrVuJOdRr2mQ+2An368yNYzsMbxaAKp6HJ7b3p9bfqV0WQqaMA10GqTyfUi1GUJq630h9DA==",
      "requires": {
-        "@oceanprotocol/lib": "^0.8.0",
-        "axios": "^0.20.0",
+        "@oceanprotocol/lib": "^0.9.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",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
-      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "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",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
-          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
+          "version": "12.19.1",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz",
+          "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A=="
        }
      }
    },
@ -35033,9 +35041,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "12.19.0",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.0.tgz",
-          "integrity": "sha512-4BVAE9yp5DU3ISqBInsaRp9J474HWNaNVs8eZ1Far3dI1MwS3Wk0EvBRMM4xBh3Oz+c05hUgJmcbtAVmG8bv7w=="
+          "version": "12.19.1",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz",
+          "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A=="
        }
      }
    },
--- a/package.json
+++ b/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/react": "^0.3.8",
+    "@oceanprotocol/lib": "^0.9.0",
+    "@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",
--- a/src/@types/MetaData.d.ts
+++ b/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
 }
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
+++ b/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"
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
+++ b/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}
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
+++ b/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);
-}
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
+++ b/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>
-
-      <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>
+      <Price ddo={ddo} />
    </div>
  )
 }
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
+++ b/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);
+}
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx
+++ b/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>
+  )
+}
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
+++ b/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 = [
    {
--- a/src/models/FormPricing.ts
+++ b/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'),
-  dtAmount: 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(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,
-  weightOnDataToken: '9', // 90% on data token
+  dtAmount: 9,
+  oceanAmount: 1,
+  weightOnOcean: '1', // 10% on OCEAN
+  weightOnDataToken: '9', // 90% on datatoken
  swapFee: 0.1 // in %
 }