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>
2024-12-02 05:57:29 +01:00 · 2022-05-05 15:14:37 +03:00 · 2022-05-05 15:14:37 +03:00 · 6324e85b0f
commit 6324e85b0f
parent 1ed3fd8a04
5 changed files with 98 additions and 98 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4020,9 +4020,9 @@
      }
    },
    "node_modules/@portis/web3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
-      "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
+      "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=",
-      "engines": {
-        "node": "*"
-      }
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
    },
    "node_modules/jsprim": {
      "version": "1.4.2",
@ -21920,9 +21917,9 @@
      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
    },
    "@portis/web3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.0.7.tgz",
-      "integrity": "sha512-p/mPjjspIDPGpn2LsMP8HaQlS1OwksPYgpJUbMkwty2xCpJ8CU1xZjqc5rsFDGbCJEwC0jlpVx26jVkoBSoJ3A==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
+      "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",
--- a/src/components/@shared/atoms/Tags.tsx
+++ b/src/components/@shared/atoms/Tags.tsx
@ -41,8 +41,8 @@ export default function Tags({

  return (
    <div className={classes}>
-      {tags?.map((tag) => (
-        <Tag tag={tag} noLinks={noLinks} key={tag} />
+      {tags?.map((tag, i) => (
+        <Tag tag={tag} noLinks={noLinks} key={tag + i} />
      ))}
      {shouldShowMore && (
        <span className={styles.more}>{`+ ${items.length - max} more`}</span>
--- a/src/components/Asset/AssetActions/Trade/FormTrade.tsx
+++ b/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}>
--- a/src/components/Asset/AssetActions/Trade/Swap.tsx
+++ b/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 =
-        values.type === 'buy'
-          ? calcMaxExactIn(poolData.datatokenLiquidity)
-          : calcMaxExactOut(poolData.datatokenLiquidity)
-
-      const maxBaseTokenFromPool =
-        values.type === 'buy'
-          ? calcMaxExactOut(poolData.baseTokenLiquidity)
-          : calcMaxExactIn(poolData.baseTokenLiquidity)
-
-      const amountDataToken =
-        values.type === 'buy'
-          ? maxDtFromPool
-          : new Decimal(balance.baseToken).greaterThan(
-              calcMaxExactIn(poolData.datatokenLiquidity)
+      const datatokenLiquidity = await poolInstance.getReserve(
+        poolData.id,
+        poolData.datatoken.address
      )
-          ? calcMaxExactIn(poolData.datatokenLiquidity)
-          : new Decimal(balance.datatoken)
-
-      const amountBaseToken =
-        values.type === 'buy'
-          ? new Decimal(balance.baseToken).greaterThan(
-              calcMaxExactIn(poolData.baseTokenLiquidity)
+      const baseTokenLiquidity = await poolInstance.getReserve(
+        poolData.id,
+        poolData.baseToken.address
      )
-            ? calcMaxExactIn(poolData.baseTokenLiquidity)
-            : new Decimal(balance.baseToken)
-          : maxBaseTokenFromPool
+      if (values.type === 'buy') {
+        const maxBaseTokenFromPool = calcMaxExactIn(baseTokenLiquidity)

-      try {
-        const maxBuyBaseToken: PoolPriceAndFees =
-          await poolInstance.getAmountOutExactIn(
-            asset.accessDetails.addressOrId,
-            poolInfo.datatokenAddress,
-            poolInfo.baseTokenAddress,
-            amountDataToken.toString(),
-            appConfig.consumeMarketPoolSwapFee
+        const maxBaseTokens = maxBaseTokenFromPool.greaterThan(
+          new Decimal(balance.baseToken)
        )
+          ? balance.baseToken
+          : maxBaseTokenFromPool.toDecimalPlaces(MAX_DECIMALS).toString()

-        const maxBuyDt: PoolPriceAndFees =
-          await poolInstance.getAmountOutExactIn(
+        const maxDt = await poolInstance.getAmountOutExactIn(
          asset.accessDetails?.addressOrId,
          poolInfo.baseTokenAddress,
          poolInfo.datatokenAddress,
-            amountBaseToken.toString(),
+          maxBaseTokens.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 maximumDt = new Decimal(maxDt.tokenAmount)
+          .toDecimalPlaces(MAX_DECIMALS)
+          .toString()
        setMaximumDt(maximumDt)
-        setMaximumBaseToken(maximumBaseToken)
+        setMaximumBaseToken(maxBaseTokens)

        setBaseTokenItem((prevState) => ({
          ...prevState,
-          amount: amountBaseToken.toDecimalPlaces(MAX_DECIMALS).toString(),
-          maxAmount: maximumBaseToken
+          amount: balance.baseToken,
+          maxAmount: maxBaseTokens
        }))

        setDtItem((prevState) => ({
          ...prevState,
-          amount: amountDataToken.toDecimalPlaces(MAX_DECIMALS).toString(),
+          amount: datatokenLiquidity,
          maxAmount: maximumDt
        }))
-      } catch (error) {
-        LoggerInstance.error(error.message)
+      } else {
+        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,
-    poolInfo.datatokenAddress,
-    poolInfo.baseTokenAddress,
+    baseTokenItem.amount,
    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>
  )
 }
--- a/src/components/Asset/AssetActions/Trade/TradeInput.tsx
+++ b/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 (