Merge pull request #99 from oceanprotocol/feature/price-changes

refactor for new price
2024-12-02 05:57:29 +01:00 · 2020-10-08 14:55:40 +02:00 · 2020-10-08 14:55:40 +02:00 · 069ca2b6b8
commit 069ca2b6b8
parent 15c37bdc59 4b0f7c0042
8 changed files with 43 additions and 58 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -3291,9 +3291,9 @@
      "integrity": "sha512-gJ8qQACJgxOPIrPE0OFQ09iYXBAisOGg56EmelQlsMUgp0yY0DKgBntDP83S/Ho1yBjGygqfxCjQrPH63hh/PA=="
    },
    "@oceanprotocol/lib": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.5.5.tgz",
-      "integrity": "sha512-TJTehUaQnFfNp0dJmw0t15+mpYbTkeF+RX4oc6D5FN7hmlhdvC8kfGf8yeHiqxI2Nb703foFLSSs38MWu/XEpg==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.5.6.tgz",
+      "integrity": "sha512-S8OU/FYjDJCKkx098GDT9LfxmTTe/gA8zv5fVMy7lRG1k5WFDsHHMplqZkU9mUGXg1aDDtt7KbctwxNdt7ZGFg==",
      "requires": {
        "@ethereum-navigator/navigator": "^0.5.0",
        "@oceanprotocol/contracts": "^0.5.3",
@ -3308,11 +3308,11 @@
      }
    },
    "@oceanprotocol/react": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.1.1.tgz",
-      "integrity": "sha512-IsB66iYOkbnUIcXJMhLKyrD6RMbGdjYnC/wVx8K7lH0IksHptcsGRhmpEXKmwZdLsJQNpug5+AyKf0g7oHvaSg==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.1.2.tgz",
+      "integrity": "sha512-hmaH84wOI/DoyW+C+OfIyzPOKRmUrjBUE6iYsxmDGVC8nZmN2JmSpGybHDnDCYUelIxtA2/vviTsOVPdVJL4Kw==",
      "requires": {
-        "@oceanprotocol/lib": "^0.5.5",
+        "@oceanprotocol/lib": "^0.5.6",
        "axios": "^0.20.0",
        "decimal.js": "^10.2.1",
        "web3": "^1.3.0",
@ -12723,9 +12723,9 @@
      }
    },
    "detect-browser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.1.1.tgz",
-      "integrity": "sha512-5n2aWI57qC3kZaK4j2zYsG6L1LrxgLptGCNhMQgdKhVn6cSdcq43pp6xHPfTHG3TYM6myF4tIPWiZtfdVDgb9w=="
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.2.0.tgz",
+      "integrity": "sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA=="
    },
    "detect-indent": {
      "version": "6.0.0",
--- 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.5.5",
-    "@oceanprotocol/react": "^0.1.1",
+    "@oceanprotocol/lib": "^0.5.6",
+    "@oceanprotocol/react": "^0.1.2",
    "@oceanprotocol/typographies": "^0.1.0",
    "@sindresorhus/slugify": "^1.0.0",
    "@tippyjs/react": "^4.2.0",
--- a/src/components/atoms/Price/index.tsx
+++ b/src/components/atoms/Price/index.tsx
@ -18,15 +18,12 @@ export default function Price({
  small?: boolean
  conversion?: boolean
 }): ReactElement {
-  const { ocean } = useOcean()
  const { price } = useMetadata(ddo)

-  return !ocean ? (
-    <div className={styles.empty}>Connect your wallet to view price</div>
-  ) : price?.value ? (
+  return price?.value ? (
    <>
      <PriceUnit
-        price={price.value}
+        price={`${price.value}`}
        className={className}
        small={small}
        conversion={conversion}
@ -35,7 +32,7 @@ export default function Price({
        <Badge label="pool" className={styles.badge} />
      )}
    </>
-  ) : price?.value === '' ? (
+  ) : !price || price?.value === 0 ? (
    <div className={styles.empty}>
      No price found{' '}
      <Tooltip content="We could not find a pool for this data set, which can have multiple reasons. Is your wallet connected to the correct network?" />
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@ -21,13 +21,13 @@ export default function PoolStatistics({
  const { debug } = useUserPreferences()

  const totalLiquidityInOcean =
-    Number(totalBalance.ocean) + Number(totalBalance.dt) * Number(price)
+    Number(totalBalance.ocean) + Number(totalBalance.datatoken) * Number(price)

  return (
    <div className={styles.statistics}>
      <h3 className={styles.title}>Pool Statistics</h3>
-      <Token symbol="OCEAN" balance={totalBalance.ocean} />
-      <Token symbol={dtSymbol} balance={totalBalance.dt} />
+      <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
+      <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
      {debug === true && <Token symbol="BPT" balance={totalPoolTokens} />}
      <Token symbol="% swap fee" balance={swapFee} />
      <Conversion price={`${totalLiquidityInOcean}`} />
--- a/src/components/organisms/AssetActions/Pool/Remove.tsx
+++ b/src/components/organisms/AssetActions/Pool/Remove.tsx
@ -50,7 +50,7 @@ export default function Remove({
  }

  function handleMax() {
-    setAmount(userLiquidity.ocean)
+    setAmount(`${userLiquidity.ocean}`)
  }

  return (
@ -63,7 +63,7 @@ export default function Remove({
      <form className={styles.removeInput}>
        <div className={styles.userLiquidity}>
          <span>Your pool liquidity: </span>
-          <PriceUnit price={userLiquidity.ocean} symbol="OCEAN" small />
+          <PriceUnit price={`${userLiquidity.ocean}`} symbol="OCEAN" small />
        </div>
        <InputElement
          value={amount}
@ -74,7 +74,7 @@ export default function Remove({
          onChange={handleAmountChange}
        />

-        {userLiquidity.ocean > amount && (
+        {userLiquidity.ocean > Number(amount) && (
          <Button
            className={styles.buttonMax}
            style="text"
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import styles from './index.module.css'
 import stylesActions from './Actions.module.css'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
@ -16,8 +16,8 @@ import PoolStatistics from './PoolStatistics'
 import Token from './Token'

 export interface Balance {
-  ocean: string
-  dt: string
+  ocean: number
+  datatoken: number
 }

 /* 
@ -31,7 +31,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {

  const [poolTokens, setPoolTokens] = useState<string>()
  const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
-  const [totalBalance, setTotalBalance] = useState<Balance>()
  const [dtSymbol, setDtSymbol] = useState<string>()
  const [userLiquidity, setUserBalance] = useState<Balance>()
  const [swapFee, setSwapFee] = useState<string>()
@ -42,10 +41,11 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {

  const hasAddedLiquidity =
    userLiquidity &&
-    (Number(userLiquidity.ocean) > 0 || Number(userLiquidity.dt) > 0)
+    (Number(userLiquidity.ocean) > 0 || Number(userLiquidity.datatoken) > 0)

  const poolShare =
-    totalBalance &&
+    price?.ocean &&
+    price?.datatoken &&
    userLiquidity &&
    ((Number(poolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)

@ -65,13 +65,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
        //
        // Get everything which is in the pool
        //
-        const oceanReserve = await ocean.pool.getOceanReserve(price.address)
-        const dtReserve = await ocean.pool.getDTReserve(price.address)
-        setTotalBalance({
-          ocean: oceanReserve,
-          dt: dtReserve
-        })
-
        const totalPoolTokens = await ocean.pool.totalSupply(price.address)
        setTotalPoolTokens(totalPoolTokens)

@ -86,14 +79,15 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {

        // calculate user's provided liquidity based on pool tokens
        const userOceanBalance =
-          (Number(poolTokens) / Number(totalPoolTokens)) * Number(oceanReserve)
+          (Number(poolTokens) / Number(totalPoolTokens)) * Number(price.ocean)

        const userDtBalance =
-          (Number(poolTokens) / Number(totalPoolTokens)) * Number(dtReserve)
+          (Number(poolTokens) / Number(totalPoolTokens)) *
+          Number(price.datatoken)

        const userLiquidity = {
-          ocean: `${userOceanBalance}`,
-          dt: `${userDtBalance}`
+          ocean: userOceanBalance,
+          datatoken: userDtBalance
        }

        setUserBalance(userLiquidity)
@ -103,7 +97,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
        const swapFee = await ocean.pool.getSwapFee(price.address)
        setSwapFee(`${Number(swapFee) * 100}`)
      } catch (error) {
-        console.error(error.message)
+        Logger.error(error.message)
      } finally {
        setIsLoading(false)
      }
@ -120,7 +114,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
          setShowAdd={setShowAdd}
          poolAddress={price.address}
          totalPoolTokens={totalPoolTokens}
-          totalBalance={totalBalance}
+          totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
          swapFee={swapFee}
          dtSymbol={dtSymbol}
          dtAddress={ddo.dataToken}
@ -136,8 +130,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
        <>
          <div className={styles.dataToken}>
            <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
-            <PriceUnit price={price.value} />
-            <Conversion price={price.value} />
+            <PriceUnit price={`${price.value}`} />
+            <Conversion price={`${price.value}`} />
            <Tooltip content="Explain how this price is determined..." />
            <div className={styles.dataTokenLinks}>
              <EtherscanLink
@ -158,16 +152,16 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                Your Liquidity
                <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
              </h3>
-              <Token symbol="OCEAN" balance={userLiquidity.ocean} />
-              <Token symbol={dtSymbol} balance={userLiquidity.dt} />
+              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
+              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
              {debug === true && <Token symbol="BPT" balance={poolTokens} />}
              <Token symbol="% of pool" balance={poolShare} />
            </div>

            <PoolStatistics
-              price={price.value}
+              price={`${price.value}`}
              totalPoolTokens={totalPoolTokens}
-              totalBalance={totalBalance}
+              totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
              swapFee={swapFee}
              dtSymbol={dtSymbol}
            />
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@ -21,11 +21,7 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
  useEffect(() => {
    if (!price || !price.value || !balance || !balance.ocean) return

-    const isFree = price.value === '0'
-
-    setIsBalanceSufficient(
-      isFree ? true : compareAsBN(balance.ocean, price.value)
-    )
+    setIsBalanceSufficient(compareAsBN(balance.ocean, `${price.value}`))

    return () => {
      setIsBalanceSufficient(false)
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@ -14,10 +14,8 @@ import { useOcean } from '@oceanprotocol/react'
 const queryHighest = {
  page: 1,
  offset: 3,
-  query: {
-    dtPrice: [0, 9999999]
-  },
-  sort: { dtPrice: 1 }
+  query: { 'price.ocean': [0, 99999] },
+  sort: { 'price.value': 1 }
 }

 const queryLatest = {