Incorrect wallet balance on trade tab fix (#1310)

* display the actual base token wallet amount

* delete logs

* balance dt fix

* width changes

* remove last commit changes

* sell values

* balance fix for dt item

* logs and comments removed

* fix max calculations

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* disable inputs on trade actions

* clear inputs after submit and catch tx errors

* fix dep

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fetch reserver from contracts

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix null and tag key

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* label change and cleanup

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>
Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
Co-authored-by: Enzo Vezzaro <enzo-vezzaro@live.it>

package-lock.json

@@ -4020,9 +4020,9 @@
       }
     },
     "node_modules/@portis/web3": {
-      "version": "4.0.7",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
-      "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
+      "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
       "dependencies": {
         "ethereumjs-util": "5.2.0",
         "penpal": "3.0.7",
@@ -12607,10 +12607,7 @@
     "node_modules/jsonify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
-      "engines": {
-        "node": "*"
-      }
     },
     "node_modules/jsprim": {
       "version": "1.4.2",
@@ -21920,9 +21917,9 @@
       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
     },
     "@portis/web3": {
-      "version": "4.0.7",
+      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
-      "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
+      "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
       "requires": {
         "ethereumjs-util": "5.2.0",
         "penpal": "3.0.7",
@@ -31940,7 +31937,8 @@
     "styled-jsx": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz",
-      "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw=="
+      "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==",
+      "requires": {}
     },
     "supports-color": {
       "version": "5.5.0",

src/components/@shared/atoms/Tags.tsx

@@ -41,8 +41,8 @@ export default function Tags({
 
   return (
     <div className={classes}>
-      {tags?.map((tag) => (
+      {tags?.map((tag, i) => (
-        <Tag tag={tag} noLinks={noLinks} key={tag} />
+        <Tag tag={tag} noLinks={noLinks} key={tag + i} />
       ))}
       {shouldShowMore && (
         <span className={styles.more}>{`+ ${items.length - max} more`}</span>

src/components/Asset/AssetActions/Trade/FormTrade.tsx

@@ -35,10 +35,10 @@ export default function FormTrade({
   const { isAssetNetwork } = useAsset()
   const { debug } = useUserPreferences()
   const { appConfig } = useMarketMetadata()
-  const { poolInfo } = usePool()
+  const { poolInfo, fetchAllData } = usePool()
+
   const [txId, setTxId] = useState<string>()
   const [coinFrom, setCoinFrom] = useState<string>('OCEAN')
-
   const [maximumBaseToken, setMaximumBaseToken] = useState('0')
   const [maximumDt, setMaximumDt] = useState('0')
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
@@ -105,6 +105,10 @@ export default function FormTrade({
           tokenInOutMarket,
           amountsInOutMaxFee
         )
+
+        if (!tx) {
+          throw new Error('Failed to swap tokens!')
+        }
       }
       if (values.output === 'exactOut') {
         const tokenOutMarket: TokenInOutMarket = {
@@ -139,8 +143,11 @@ export default function FormTrade({
           tokenOutMarket,
           amountsOutMaxFee
         )
+        if (!tx) {
+          throw new Error('Failed to swap tokens!')
+        }
       }
-
+      await fetchAllData()
       setTxId(tx?.transactionHash)
     } catch (error) {
       LoggerInstance.error(error.message)
@@ -152,8 +159,10 @@ export default function FormTrade({
     <Formik
       initialValues={initialValues}
       validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting, resetForm }) => {
+      onSubmit={async (values, { setFieldValue, setSubmitting, resetForm }) => {
         await handleTrade(values)
+        await setFieldValue('baseToken', '')
+        await setFieldValue('datatoken', '')
         resetForm()
         setSubmitting(false)
       }}
@@ -167,6 +176,7 @@ export default function FormTrade({
               setCoin={setCoinFrom}
               setMaximumBaseToken={setMaximumBaseToken}
               setMaximumDt={setMaximumDt}
+              isLoading={isSubmitting}
             />
           ) : (
             <div className={styles.alertWrap}>

src/components/Asset/AssetActions/Trade/Swap.tsx

@@ -30,13 +30,15 @@ export default function Swap({
   balance,
   setMaximumDt,
   setMaximumBaseToken,
-  setCoin
+  setCoin,
+  isLoading
 }: {
   asset: AssetExtended
   balance: PoolBalance
   setMaximumDt: (value: string) => void
   setMaximumBaseToken: (value: string) => void
   setCoin: (value: string) => void
+  isLoading: boolean
 }): ReactElement {
   const { isAssetNetwork } = useAsset()
   const { web3 } = useWeb3()
@@ -69,92 +71,83 @@ export default function Swap({
   const [lpSwapFee, setLpSwapFee] = useState<string>()
 
   useEffect(() => {
-    if (!asset || !balance || !values?.type || !web3 || !appConfig) return
+    if (!asset || !balance || !values?.type || !web3 || !appConfig || !poolInfo)
+      return
     const poolInstance = new Pool(web3)
 
     async function calculateMaximum() {
-      const maxDtFromPool =
+      const datatokenLiquidity = await poolInstance.getReserve(
-        values.type === 'buy'
+        poolData.id,
-          ? calcMaxExactIn(poolData.datatokenLiquidity)
+        poolData.datatoken.address
-          : calcMaxExactOut(poolData.datatokenLiquidity)
+      )
+      const baseTokenLiquidity = await poolInstance.getReserve(
+        poolData.id,
+        poolData.baseToken.address
+      )
+      if (values.type === 'buy') {
+        const maxBaseTokenFromPool = calcMaxExactIn(baseTokenLiquidity)
 
-      const maxBaseTokenFromPool =
+        const maxBaseTokens = maxBaseTokenFromPool.greaterThan(
-        values.type === 'buy'
+          new Decimal(balance.baseToken)
-          ? calcMaxExactOut(poolData.baseTokenLiquidity)
+        )
-          : calcMaxExactIn(poolData.baseTokenLiquidity)
+          ? balance.baseToken
-
+          : maxBaseTokenFromPool.toDecimalPlaces(MAX_DECIMALS).toString()
-      const amountDataToken =
-        values.type === 'buy'
-          ? maxDtFromPool
-          : new Decimal(balance.baseToken).greaterThan(
-              calcMaxExactIn(poolData.datatokenLiquidity)
-            )
-          ? calcMaxExactIn(poolData.datatokenLiquidity)
-          : new Decimal(balance.datatoken)
-
-      const amountBaseToken =
-        values.type === 'buy'
-          ? new Decimal(balance.baseToken).greaterThan(
-              calcMaxExactIn(poolData.baseTokenLiquidity)
-            )
-            ? calcMaxExactIn(poolData.baseTokenLiquidity)
-            : new Decimal(balance.baseToken)
-          : maxBaseTokenFromPool
-
-      try {
-        const maxBuyBaseToken: PoolPriceAndFees =
-          await poolInstance.getAmountOutExactIn(
-            asset.accessDetails.addressOrId,
-            poolInfo.datatokenAddress,
-            poolInfo.baseTokenAddress,
-            amountDataToken.toString(),
-            appConfig.consumeMarketPoolSwapFee
-          )
-
-        const maxBuyDt: PoolPriceAndFees =
-          await poolInstance.getAmountOutExactIn(
-            asset.accessDetails?.addressOrId,
-            poolInfo.baseTokenAddress,
-            poolInfo.datatokenAddress,
-            amountBaseToken.toString(),
-            appConfig.consumeMarketPoolSwapFee
-          )
-        const maximumDt =
-          values.type === 'buy'
-            ? amountDataToken.greaterThan(new Decimal(maxBuyDt.tokenAmount))
-              ? maxBuyDt.tokenAmount
-              : amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
-            : amountDataToken.greaterThan(new Decimal(balance.datatoken))
-            ? balance.datatoken
-            : amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString()
-
-        const maximumBaseToken =
-          values.type === 'sell'
-            ? amountBaseToken.greaterThan(
-                new Decimal(maxBuyBaseToken.tokenAmount)
-              )
-              ? maxBuyBaseToken.tokenAmount
-              : amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
-            : amountBaseToken.greaterThan(new Decimal(balance.baseToken))
-            ? balance.baseToken
-            : amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString()
 
+        const maxDt = await poolInstance.getAmountOutExactIn(
+          asset.accessDetails?.addressOrId,
+          poolInfo.baseTokenAddress,
+          poolInfo.datatokenAddress,
+          maxBaseTokens.toString(),
+          appConfig.consumeMarketPoolSwapFee
+        )
+        const maximumDt = new Decimal(maxDt.tokenAmount)
+          .toDecimalPlaces(MAX_DECIMALS)
+          .toString()
         setMaximumDt(maximumDt)
-        setMaximumBaseToken(maximumBaseToken)
+        setMaximumBaseToken(maxBaseTokens)
 
         setBaseTokenItem((prevState) => ({
           ...prevState,
-          amount: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString(),
+          amount: balance.baseToken,
-          maxAmount: maximumBaseToken
+          maxAmount: maxBaseTokens
         }))
 
         setDtItem((prevState) => ({
           ...prevState,
-          amount: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString(),
+          amount: datatokenLiquidity,
           maxAmount: maximumDt
         }))
-      } catch (error) {
+      } else {
-        LoggerInstance.error(error.message)
+        const maxDtFromPool = calcMaxExactIn(datatokenLiquidity)
+        const maxDatatokens = maxDtFromPool.greaterThan(
+          new Decimal(balance.datatoken)
+        )
+          ? balance.datatoken
+          : maxDtFromPool.toDecimalPlaces(MAX_DECIMALS).toString()
+
+        const maxBaseTokens = await poolInstance.getAmountOutExactIn(
+          asset.accessDetails?.addressOrId,
+          poolInfo?.datatokenAddress,
+          poolInfo?.baseTokenAddress,
+          maxDatatokens.toString(),
+          appConfig.consumeMarketPoolSwapFee
+        )
+        const maximumBasetokens = new Decimal(maxBaseTokens.tokenAmount)
+          .toDecimalPlaces(MAX_DECIMALS)
+          .toString()
+        setMaximumDt(maxDatatokens)
+        setMaximumBaseToken(maximumBasetokens)
+
+        setDtItem((prevState) => ({
+          ...prevState,
+          amount: balance.datatoken,
+          maxAmount: maxDatatokens
+        }))
+        setBaseTokenItem((prevState) => ({
+          ...prevState,
+          amount: baseTokenLiquidity,
+          maxAmount: maximumBasetokens
+        }))
       }
     }
     calculateMaximum()
@@ -167,12 +160,11 @@ export default function Swap({
     asset,
     web3,
     dtItem.token,
+    dtItem.amount,
     baseTokenItem.token,
-    poolInfo.liquidityProviderSwapFee,
+    baseTokenItem.amount,
-    poolInfo.datatokenAddress,
-    poolInfo.baseTokenAddress,
     appConfig,
-    appConfig.consumeMarketPoolSwapFee
+    poolInfo
   ])
 
   const switchTokens = () => {
@@ -321,7 +313,7 @@ export default function Swap({
       <TradeInput
         name={values.type === 'sell' ? 'datatoken' : 'baseToken'}
         item={values.type === 'sell' ? dtItem : baseTokenItem}
-        disabled={!isAssetNetwork}
+        disabled={!isAssetNetwork || isLoading}
         handleValueChange={handleValueChange}
       />
 
@@ -329,7 +321,7 @@ export default function Swap({
         className={styles.swapButton}
         style="text"
         onClick={switchTokens}
-        disabled={!isAssetNetwork}
+        disabled={!isAssetNetwork || isLoading}
       >
         <Arrow />
       </Button>
@@ -337,7 +329,7 @@ export default function Swap({
       <TradeInput
         name={values.type === 'sell' ? 'baseToken' : 'datatoken'}
         item={values.type === 'sell' ? baseTokenItem : dtItem}
-        disabled={!isAssetNetwork}
+        disabled={!isAssetNetwork || isLoading}
         handleValueChange={handleValueChange}
       />
 
@@ -351,7 +343,7 @@ export default function Swap({
         tokenAmount={tokenAmount}
         spotPrice={spotPrice}
       />
-      <Slippage disabled={!isAssetNetwork} />
+      <Slippage disabled={!isAssetNetwork || isLoading} />
     </div>
   )
 }

src/components/Asset/AssetActions/Trade/TradeInput.tsx

@@ -38,7 +38,7 @@ export default function TradeInput({
   const isTopField =
     (name === 'baseToken' && values.type === 'buy') ||
     (name === 'datatoken' && values.type === 'sell')
-  const titleAvailable = isTopField ? `Balance` : `Available from pool`
+  const titleAvailable = isTopField ? `Your Balance` : `Pool Balance`
   const titleMaximum = isTopField ? `Maximum to spend` : `Maximum to receive`
 
   return (