restore live calculations

src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx

@@ -16,8 +16,10 @@ import { useWeb3 } from '@context/Web3'
 import { isValidNumber } from '@utils/numbers'
 import Decimal from 'decimal.js'
 import { useAsset } from '@context/Asset'
+import { LoggerInstance, Pool } from '@oceanprotocol/lib'
 
 export default function FormAdd({
+  tokenInAddress,
   coin,
   dtBalance,
   dtSymbol,
@@ -30,6 +32,7 @@ export default function FormAdd({
   setNewPoolTokens,
   setNewPoolShare
 }: {
+  tokenInAddress: string
   coin: string
   dtBalance: string
   dtSymbol: string
@@ -67,39 +70,42 @@ export default function FormAdd({
 
   useEffect(() => {
     async function calculatePoolShares() {
-      // if (!web3) return
+      if (!web3) return
-      // const tokenInAddress =
+
-      //   coin === 'OCEAN' ? ocean.pool.oceanAddress : ocean.pool.dtAddress
+      if (!values.amount || !tokenInAddress) {
-      // if (!values.amount || !tokenInAddress) {
+        setNewPoolTokens('0')
-      //   setNewPoolTokens('0')
+        setNewPoolShare('0')
-      //   setNewPoolShare('0')
+        return
-      //   return
+      }
-      // }
+      if (Number(values.amount) > Number(amountMax)) return
-      // if (Number(values.amount) > Number(amountMax)) return
+
-      // const poolTokens = await ocean.pool.calcPoolOutGivenSingleIn(
+      const poolInstance = new Pool(web3, LoggerInstance)
-      //   poolAddress,
+
-      //   tokenInAddress,
+      const poolTokens = await poolInstance.calcPoolOutGivenSingleIn(
-      //   `${values.amount}`
+        poolAddress,
-      // )
+        tokenInAddress,
-      // setNewPoolTokens(poolTokens)
+        `${values.amount}`
-      // const newPoolShareDecimal =
+      )
-      //   isValidNumber(poolTokens) && isValidNumber(totalPoolTokens)
+      setNewPoolTokens(poolTokens)
-      //     ? new Decimal(poolTokens)
+      const newPoolShareDecimal =
-      //         .dividedBy(
+        isValidNumber(poolTokens) && isValidNumber(totalPoolTokens)
-      //           new Decimal(totalPoolTokens).plus(new Decimal(poolTokens))
+          ? new Decimal(poolTokens)
-      //         )
+              .dividedBy(
-      //         .mul(100)
+                new Decimal(totalPoolTokens).plus(new Decimal(poolTokens))
-      //         .toString()
+              )
-      //     : '0'
+              .mul(100)
-      // totalBalance && setNewPoolShare(newPoolShareDecimal)
+              .toString()
+          : '0'
+      totalBalance && setNewPoolShare(newPoolShareDecimal)
     }
     calculatePoolShares()
   }, [
+    tokenInAddress,
+    web3,
     values.amount,
     totalBalance,
     totalPoolTokens,
     amountMax,
-    coin,
     poolAddress,
     setNewPoolTokens,
     setNewPoolShare

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -13,7 +13,7 @@ import DebugOutput from '@shared/DebugOutput'
 import { useWeb3 } from '@context/Web3'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
-import { Datatoken } from '@oceanprotocol/lib'
+import { Datatoken, LoggerInstance, Pool } from '@oceanprotocol/lib'
 
 export interface FormAddLiquidity {
   amount: number
@@ -53,6 +53,7 @@ export default function Add({
   const [newPoolTokens, setNewPoolTokens] = useState('0')
   const [newPoolShare, setNewPoolShare] = useState('0')
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
+  const [tokenInAddress, setTokenInAddress] = useState<string>()
 
   // Live validation rules
   // https://github.com/jquense/yup#number
@@ -80,37 +81,56 @@ export default function Add({
 
   // Get maximum amount for either OCEAN or datatoken
   useEffect(() => {
-    if (!accountId || !isAssetNetwork || !poolAddress) return
+    if (!web3 || !accountId || !isAssetNetwork || !poolAddress) return
 
     async function getMaximum() {
-      // const amountMaxPool =
+      const poolInstance = new Pool(web3, LoggerInstance)
-      //   coin === 'OCEAN'
+      const baseTokenAddress = await poolInstance.getBasetoken(poolAddress)
-      //     ? await ocean.pool.getOceanMaxAddLiquidity(poolAddress)
+
-      //     : await ocean.pool.getDTMaxAddLiquidity(poolAddress)
+      const tokenInAddress = coin === 'OCEAN' ? baseTokenAddress : dtAddress
-      // const amountMax =
+      setTokenInAddress(tokenInAddress)
-      //   coin === 'OCEAN'
+
-      //     ? Number(balance.ocean) > Number(amountMaxPool)
+      const amountMaxPool = await poolInstance.getReserve(
-      //       ? amountMaxPool
+        poolAddress,
-      //       : balance.ocean
+        tokenInAddress
-      //     : Number(dtBalance) > Number(amountMaxPool)
+      )
-      //     ? amountMaxPool
+
-      //     : dtBalance
+      // coin === 'OCEAN'
-      // setAmountMax(Number(amountMax).toFixed(3))
+      //   ? await poolInstance.getOceanMaxAddLiquidity(poolAddress)
+      //   : await poolInstance.getDTMaxAddLiquidity(poolAddress)
+      const amountMax =
+        coin === 'OCEAN'
+          ? Number(balance.ocean) > Number(amountMaxPool)
+            ? amountMaxPool
+            : balance.ocean
+          : Number(dtBalance) > Number(amountMaxPool)
+          ? amountMaxPool
+          : dtBalance
+      setAmountMax(Number(amountMax).toFixed(3))
     }
     getMaximum()
-  }, [accountId, isAssetNetwork, poolAddress, coin, dtBalance, balance.ocean])
+  }, [
+    web3,
+    accountId,
+    isAssetNetwork,
+    poolAddress,
+    dtAddress,
+    coin,
+    dtBalance,
+    balance.ocean
+  ])
 
   // Submit
   async function handleAddLiquidity(amount: number, resetForm: () => void) {
+    const poolInstance = new Pool(web3, LoggerInstance)
+
     try {
-      // const result =
+      // const result = await poolInstance.joinPool(
-      //   coin === 'OCEAN'
+      //   accountId,
-      //     ? await ocean.pool.addOceanLiquidity(
+      //   poolAddress,
-      //         accountId,
+      //   poolAmountOut,
-      //         poolAddress,
+      //   amountMax
-      //         `${amount}`
+      // )
-      //       )
-      //     : await ocean.pool.addDTLiquidity(accountId, poolAddress, `${amount}`)
       // setTxId(result?.transactionHash)
       // resetForm()
       fetchAllData()
@@ -139,6 +159,7 @@ export default function Add({
             <div className={styles.addInput}>
               {isWarningAccepted ? (
                 <FormAdd
+                  tokenInAddress={tokenInAddress}
                   coin={coin}
                   dtBalance={dtBalance}
                   dtSymbol={dtSymbol}