fix useAccountBalance and maxBal in swap panel (#304)

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>

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 }
 }

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({