add/remove baseToken only

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -50,7 +50,7 @@ export default function Actions({
           <TokenApproval
             actionButton={actionButton}
             amount={amount}
-            coin={coin}
+            coin={coin || 'OCEAN'}
             disabled={isDisabled}
           />
         ) : (

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

@@ -8,11 +8,9 @@ import {
   useFormikContext
 } from 'formik'
 import Button from '@shared/atoms/Button'
-import CoinSelect from '../CoinSelect'
 import { FormAddLiquidity } from '.'
 import UserLiquidity from '../../UserLiquidity'
 import { useWeb3 } from '@context/Web3'
-
 import { isValidNumber } from '@utils/numbers'
 import Decimal from 'decimal.js'
 import { useAsset } from '@context/Asset'
@@ -20,11 +18,8 @@ import { LoggerInstance, Pool } from '@oceanprotocol/lib'
 
 export default function FormAdd({
   tokenInAddress,
-  coin,
+  tokenInSymbol,
-  dtBalance,
-  dtSymbol,
   amountMax,
-  setCoin,
   setAmount,
   totalPoolTokens,
   totalBalance,
@@ -33,11 +28,8 @@ export default function FormAdd({
   setNewPoolShare
 }: {
   tokenInAddress: string
-  coin: string
+  tokenInSymbol: string
-  dtBalance: string
-  dtSymbol: string
   amountMax: string
-  setCoin: (value: string) => void
   setAmount: (value: string) => void
   totalPoolTokens: string
   totalBalance: PoolBalance
@@ -111,16 +103,12 @@ export default function FormAdd({
     setNewPoolShare
   ])
 
-  useEffect(() => {
-    setFieldValue('amount', undefined)
-  }, [coin])
-
   return (
     <>
       <UserLiquidity
-        amount={coin === 'OCEAN' ? balance.ocean : dtBalance}
+        amount={balance.ocean}
         amountMax={amountMax}
-        symbol={coin}
+        symbol={tokenInSymbol}
       />
 
       <Field name="amount">
@@ -138,13 +126,7 @@ export default function FormAdd({
             min="0"
             value={`${values.amount}`}
             step="any"
-            prefix={
+            prefix={tokenInSymbol}
-              <CoinSelect
-                dtSymbol={dtSymbol}
-                setCoin={setCoin}
-                disabled={!web3 || !isAssetNetwork}
-              />
-            }
             placeholder="0"
             field={field}
             form={form}
@@ -154,7 +136,7 @@ export default function FormAdd({
         )}
       </Field>
 
-      {(Number(balance.ocean) || dtBalance) > (values.amount || 0) && (
+      {Number(balance.ocean) && (
         <Button
           className={styles.buttonMax}
           style="text"

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

@@ -13,8 +13,7 @@ export default function Output({
   swapFee,
   dtSymbol,
   totalPoolTokens,
-  totalBalance,
+  totalBalance
-  coin
 }: {
   newPoolTokens: string
   newPoolShare: string
@@ -22,7 +21,6 @@ export default function Output({
   dtSymbol: string
   totalPoolTokens: string
   totalBalance: PoolBalance
-  coin: string
 }): ReactElement {
   const { help, titleIn, titleOut } = content.pool.add.output
 
@@ -37,21 +35,14 @@ export default function Output({
       return
     const newPoolSupply = new Decimal(totalPoolTokens).plus(newPoolTokens)
     const ratio = new Decimal(newPoolTokens).div(newPoolSupply)
-    const newOceanReserve =
+    const newOceanReserve = new Decimal(totalBalance.ocean).plus(values.amount)
-      coin === 'OCEAN'
+    const newDtReserve = new Decimal(totalBalance.datatoken)
-        ? new Decimal(totalBalance.ocean).plus(values.amount)
-        : new Decimal(totalBalance.ocean)
-    const newDtReserve =
-      coin === 'OCEAN'
-        ? new Decimal(totalBalance.datatoken)
-        : new Decimal(totalBalance.datatoken).plus(values.amount)
     const poolOcean = newOceanReserve.mul(ratio).toString()
     const poolDatatoken = newDtReserve.mul(ratio).toString()
     setPoolOcean(poolOcean)
     setPoolDatatoken(poolDatatoken)
   }, [
     values.amount,
-    coin,
     totalBalance,
     totalPoolTokens,
     newPoolShare,

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

@@ -13,7 +13,8 @@ import DebugOutput from '@shared/DebugOutput'
 import { useWeb3 } from '@context/Web3'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
-import { Datatoken, LoggerInstance, Pool } from '@oceanprotocol/lib'
+import { LoggerInstance, Pool } from '@oceanprotocol/lib'
+import { getOceanConfig } from '@utils/ocean'
 
 export interface FormAddLiquidity {
   amount: number
@@ -30,7 +31,7 @@ export default function Add({
   totalBalance,
   swapFee,
   dtSymbol,
-  dtAddress,
+  baseTokenSymbol,
   fetchAllData
 }: {
   setShowAdd: (show: boolean) => void
@@ -39,15 +40,13 @@ export default function Add({
   totalBalance: PoolBalance
   swapFee: string
   dtSymbol: string
-  dtAddress: string
+  baseTokenSymbol: string
   fetchAllData: () => void
 }): ReactElement {
   const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
   const { debug } = useUserPreferences()
   const [txId, setTxId] = useState<string>()
-  const [coin, setCoin] = useState('OCEAN')
-  const [dtBalance, setDtBalance] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
   const [amount, setAmount] = useState<string>('0')
   const [newPoolTokens, setNewPoolTokens] = useState('0')
@@ -62,31 +61,19 @@ export default function Add({
       .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
       .max(
         Number(amountMax),
-        `Maximum you can add is ${Number(amountMax).toFixed(2)} ${coin}`
+        `Maximum you can add is ${Number(amountMax).toFixed(2)} OCEAN`
       )
       .required('Required')
   })
 
-  // Get datatoken balance when datatoken selected
+  // Get maximum amount for OCEAN
-  useEffect(() => {
-    if (!web3 || !accountId || !isAssetNetwork || coin === 'OCEAN') return
-
-    async function getDtBalance() {
-      const datatokenInstance = new Datatoken(web3)
-      const dtBalance = await datatokenInstance.balance(dtAddress, accountId)
-      setDtBalance(dtBalance)
-    }
-    getDtBalance()
-  }, [web3, accountId, dtAddress, coin, isAssetNetwork])
-
-  // Get maximum amount for either OCEAN or datatoken
   useEffect(() => {
     if (!web3 || !accountId || !isAssetNetwork || !poolAddress) return
 
     async function getMaximum() {
+      try {
         const poolInstance = new Pool(web3, LoggerInstance)
-      const baseTokenAddress = await poolInstance.getBasetoken(poolAddress)
+        const tokenInAddress = await poolInstance.getBasetoken(poolAddress)
-      const tokenInAddress = coin === 'OCEAN' ? baseTokenAddress : dtAddress
         setTokenInAddress(tokenInAddress)
 
         const amountMaxPool = await poolInstance.getReserve(
@@ -94,30 +81,17 @@ export default function Add({
           tokenInAddress
         )
 
-      // coin === 'OCEAN'
-      //   ? await poolInstance.getOceanMaxAddLiquidity(poolAddress)
-      //   : await poolInstance.getDTMaxAddLiquidity(poolAddress)
         const amountMax =
-        coin === 'OCEAN'
+          Number(balance.ocean) > Number(amountMaxPool)
-          ? Number(balance.ocean) > Number(amountMaxPool)
             ? amountMaxPool
             : balance.ocean
-          : Number(dtBalance) > Number(amountMaxPool)
-          ? amountMaxPool
-          : dtBalance
         setAmountMax(Number(amountMax).toFixed(3))
+      } catch (error) {
+        LoggerInstance.error(error.message)
+      }
     }
     getMaximum()
-  }, [
+  }, [web3, accountId, isAssetNetwork, poolAddress, balance?.ocean])
-    web3,
-    accountId,
-    isAssetNetwork,
-    poolAddress,
-    dtAddress,
-    coin,
-    dtBalance,
-    balance.ocean
-  ])
 
   // Submit
   async function handleAddLiquidity(amount: number, resetForm: () => void) {
@@ -133,10 +107,10 @@ export default function Add({
         minPoolAmountOut
       )
       setTxId(result?.transactionHash)
-      // resetForm()
       fetchAllData()
+      resetForm()
     } catch (error) {
-      console.error(error.message)
+      LoggerInstance.error(error.message)
       toast.error(error.message)
     }
   }
@@ -161,11 +135,8 @@ export default function Add({
               {isWarningAccepted ? (
                 <FormAdd
                   tokenInAddress={tokenInAddress}
-                  coin={coin}
+                  tokenInSymbol={baseTokenSymbol}
-                  dtBalance={dtBalance}
-                  dtSymbol={dtSymbol}
                   amountMax={amountMax}
-                  setCoin={setCoin}
                   setAmount={setAmount}
                   totalPoolTokens={totalPoolTokens}
                   totalBalance={totalBalance}
@@ -196,7 +167,6 @@ export default function Add({
               dtSymbol={dtSymbol}
               totalPoolTokens={totalPoolTokens}
               totalBalance={totalBalance}
-              coin={coin}
             />
 
             <Actions
@@ -212,7 +182,6 @@ export default function Add({
               actionName={content.pool.add.action}
               action={submitForm}
               amount={amount}
-              coin={coin}
               txId={txId}
             />
             {debug && <DebugOutput title="Collected values" output={values} />}

src/components/Asset/AssetActions/Pool/CoinSelect.module.css

@@ -1,26 +0,0 @@
-.coinSelect {
-  composes: select from '@shared/FormInput/InputElement.module.css';
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-base);
-  border: none;
-  margin-left: -0.5rem;
-  margin-right: -0.5rem;
-  background-color: var(--background-highlight);
-  width: auto;
-  padding: 0 1.25rem 0 0.25rem;
-  height: 41px;
-  text-align: center;
-
-  /* custom arrow, without the divider line */
-  background-image: linear-gradient(
-      45deg,
-      transparent 50%,
-      var(--font-color-text) 50%
-    ),
-    linear-gradient(135deg, var(--font-color-text) 50%, transparent 50%);
-  background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0;
-}
-
-.option {
-  color: var(--font-color-heading);
-}

src/components/Asset/AssetActions/Pool/CoinSelect.tsx

@@ -1,27 +0,0 @@
-import React, { ReactElement } from 'react'
-import styles from './CoinSelect.module.css'
-
-export default function CoinSelect({
-  dtSymbol,
-  disabled,
-  setCoin
-}: {
-  dtSymbol: string
-  disabled: boolean
-  setCoin: (coin: string) => void
-}): ReactElement {
-  return (
-    <select
-      className={styles.coinSelect}
-      onChange={(e) => setCoin(e.target.value)}
-      disabled={disabled}
-    >
-      <option className={styles.option} value="OCEAN">
-        OCEAN
-      </option>
-      <option className={styles.option} value={dtSymbol}>
-        {dtSymbol}
-      </option>
-    </select>
-  )
-}

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

@@ -32,7 +32,7 @@ interface PoolInfo {
   weightOcean: string
   weightDt: string
   dtSymbol: string
-  oceanSymbol: string
+  baseTokenSymbol: string
   totalPoolTokens: string
   totalLiquidityInOcean: Decimal
 }
@@ -161,7 +161,7 @@ export default function Pool(): ReactElement {
       weightOcean: getWeight(poolData.baseTokenWeight),
       weightDt: getWeight(poolData.datatokenWeight),
       dtSymbol: poolData.datatoken.symbol,
-      oceanSymbol: poolData.baseToken.symbol,
+      baseTokenSymbol: poolData.baseToken.symbol,
       totalPoolTokens: poolData.totalShares,
       totalLiquidityInOcean
     }
@@ -327,7 +327,6 @@ export default function Pool(): ReactElement {
   //
   useEffect(() => {
     if (!owner || !accountId) return
-
     setIsRemoveDisabled(isInPurgatory && owner === accountId)
   }, [isInPurgatory, owner, accountId])
 
@@ -337,14 +336,14 @@ export default function Pool(): ReactElement {
         <Add
           setShowAdd={setShowAdd}
           poolAddress={price?.address}
-          totalPoolTokens={poolInfo.totalPoolTokens}
+          totalPoolTokens={poolInfo?.totalPoolTokens}
           totalBalance={{
             ocean: new Decimal(price?.ocean).toString(),
             datatoken: new Decimal(price?.datatoken).toString()
           }}
-          swapFee={poolInfo.poolFee}
+          swapFee={poolInfo?.poolFee}
-          dtSymbol={poolInfo.dtSymbol}
+          dtSymbol={poolInfo?.dtSymbol}
-          dtAddress={ddo?.services[0].datatokenAddress}
+          baseTokenSymbol={poolInfo?.baseTokenSymbol}
           fetchAllData={fetchAllData}
         />
       ) : showRemove ? (
@@ -362,7 +361,7 @@ export default function Pool(): ReactElement {
             <PriceUnit price="1" symbol={poolInfo?.dtSymbol} /> ={' '}
             <PriceUnit
               price={`${price?.value}`}
-              symbol={poolInfo?.oceanSymbol}
+              symbol={poolInfo?.baseTokenSymbol}
             />
             <Tooltip content={content.pool.tooltips.price} />
             <div className={styles.dataTokenLinks}>
@@ -398,7 +397,7 @@ export default function Pool(): ReactElement {
               </>
             }
             ocean={`${poolInfoUser?.liquidity?.ocean}`}
-            oceanSymbol={poolInfo?.oceanSymbol}
+            oceanSymbol={poolInfo?.baseTokenSymbol}
             dt={`${poolInfoUser?.liquidity?.datatoken}`}
             dtSymbol={poolInfo?.dtSymbol}
             poolShares={poolInfoUser?.poolShares}
@@ -415,7 +414,7 @@ export default function Pool(): ReactElement {
           <TokenList
             title="Pool Creator Statistics"
             ocean={`${poolInfoOwner?.liquidity?.ocean}`}
-            oceanSymbol={poolInfo?.oceanSymbol}
+            oceanSymbol={poolInfo?.baseTokenSymbol}
             dt={`${poolInfoOwner?.liquidity?.datatoken}`}
             dtSymbol={poolInfo?.dtSymbol}
             poolShares={poolInfoOwner?.poolShares}
@@ -444,7 +443,7 @@ export default function Pool(): ReactElement {
               </>
             }
             ocean={`${price?.ocean}`}
-            oceanSymbol={poolInfo?.oceanSymbol}
+            oceanSymbol={poolInfo?.baseTokenSymbol}
             dt={`${price?.datatoken}`}
             dtSymbol={poolInfo?.dtSymbol}
             poolShares={poolInfo?.totalPoolTokens}