From 3097a019fef2b38528cedef9d77cf8bcfdc8939c Mon Sep 17 00:00:00 2001
From: iamoskvin <44796732+iamoskvin@users.noreply.github.com>
Date: Tue, 28 May 2024 21:28:27 +0300
Subject: [PATCH] fix useAccountBalance and maxBal in swap panel (#304)

---
 .../SwapCurrencyInputPanel.tsx                  |  5 +++--
 src/hooks/starknet-react.ts                     |  8 +++++---
 src/pages/Swap/index.tsx                        | 17 ++++++++++-------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
index 58fe1ad6..6ad09f75 100644
--- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -272,7 +272,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
   ) => {
     const [modalOpen, setModalOpen] = useState(false)
     const { address: account, chainId } = useAccountDetails()
-    const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
+    // const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
     const theme = useTheme()
     const { formatCurrencyAmount } = useFormatter()
 
@@ -314,7 +314,8 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
             <ThemedText.SubHeaderSmall style={{ userSelect: 'none', textTransform: 'uppercase' }}>
               {label}
             </ThemedText.SubHeaderSmall>
-            {showMaxButton && selectedCurrencyBalance ? (
+            {/* {showMaxButton && selectedCurrencyBalance ? ( */}
+            {showMaxButton ? (
               <StyledBalanceMax onClick={onMax}>
                 <Trans>Max</Trans>
               </StyledBalanceMax>
diff --git a/src/hooks/starknet-react.ts b/src/hooks/starknet-react.ts
index 9deb4511..6a9c0b19 100644
--- a/src/hooks/starknet-react.ts
+++ b/src/hooks/starknet-react.ts
@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { Connector, useAccount, useBalance, useConnect, useProvider } from '@starknet-react/core'
 import { AccountInterface, constants } from 'starknet'
-import { ChainId, Currency, Token } from '@vnaysn/jediswap-sdk-core'
+import { ChainId, Currency, CurrencyAmount, Token } from '@vnaysn/jediswap-sdk-core'
 import { WETH } from '@jediswap/sdk'
 import { useDefaultActiveTokens } from './Tokens'
 import formatBalance from 'utils/formatBalance'
 import { useQuery } from 'react-query'
+import { ethers } from 'ethers'
 // Define the type for the balances object
 declare enum StarknetChainId {
   SN_MAIN = '0x534e5f4d41494e',
@@ -69,6 +70,7 @@ export const useAccountBalance = (currency: Currency | undefined) => {
     address,
     watch: true,
   })
-
-  return { balance: data?.formatted, formatted: formatBalance(data?.formatted) }
+  const balance = data ? ethers.utils.formatUnits(data.value, data.decimals) : null  //data?.formatted is not accurately implemented, so we a convert balance to String by ourselves
+  const balanceCurrencyAmount =  data && currency ? CurrencyAmount.fromRawAmount(currency, data.value.toString()) : null
+  return { balance, formatted: formatBalance(balance), balanceCurrencyAmount }
 }
diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
index 74263684..53d3c041 100644
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@@ -2,7 +2,7 @@
 
 import { Trans } from '@lingui/macro'
 import { ChainId, Currency, CurrencyAmount, Percent, Token } from '@vnaysn/jediswap-sdk-core'
-import { useAccountDetails } from 'hooks/starknet-react'
+import { useAccountBalance, useAccountDetails } from 'hooks/starknet-react'
 import JSBI from 'jsbi'
 import { ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { ArrowDown } from 'react-feather'
@@ -352,10 +352,10 @@ export function Swap({
     currencyBalances,
     parsedAmount,
     currencies,
-    inputError: swapInputError,
     inputTax,
     outputTax,
   } = swapInfo
+  let { inputError: swapInputError }  = swapInfo
 
   const [inputTokenHasTax, outputTokenHasTax] = useMemo(
     () => [!inputTax.equalTo(0), !outputTax.equalTo(0)],
@@ -491,11 +491,14 @@ export function Swap({
     trade?.fillType
   )
 
-  const maxInputAmount: CurrencyAmount<Currency> | undefined = useMemo(
-    () => maxAmountSpend(currencyBalances[Field.INPUT]),
-    [currencyBalances]
-  )
-  const showMaxButton = Boolean(maxInputAmount?.greaterThan(0) && !parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount))
+  const { balanceCurrencyAmount } = useAccountBalance(currencies[Field.INPUT])
+  const maxInputAmount = balanceCurrencyAmount //in future we could substract the amount for gas here (utils/maxAmountSpend) 
+  
+  const showMaxButton = Boolean(currencies[Field.INPUT] && maxInputAmount?.greaterThan(0) && !parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount))
+  //we need this check because useDerivedSwapInfo does not give an error if the input value is slightly higher than the actual wallet balance
+  if (parsedAmounts[Field.INPUT] && maxInputAmount && maxInputAmount.lessThan(parsedAmounts[Field.INPUT])) {
+    swapInputError = <Trans>Insufficient {currencies[Field.INPUT]?.symbol} balance</Trans>
+  }
 
   const handleContinueToReview = useCallback(() => {
     setSwapState({