fix: user pool balances not loading correctly

apps/main/src/dex/components/PagePool/Deposit/components/FieldsDeposit.tsx

@@ -1,6 +1,8 @@
 import { BigNumber } from 'bignumber.js'
 import lodash from 'lodash'
 import { useCallback, useMemo } from 'react'
+import type { Address } from 'viem'
+import { useConnection } from 'wagmi'
 import FieldToken from '@/dex/components/PagePool/components/FieldToken'
 import type { FormValues, LoadMaxAmount } from '@/dex/components/PagePool/Deposit/types'
 import { FieldsWrapper } from '@/dex/components/PagePool/styles'
@@ -11,6 +13,7 @@ import useStore from '@/dex/store/useStore'
 import type { CurrencyReserves } from '@/dex/types/main.types'
 import { getChainPoolIdActiveKey } from '@/dex/utils'
 import Checkbox from '@ui/Checkbox'
+import { useTokenBalances } from '@ui-kit/hooks/useTokenBalance'
 import { t } from '@ui-kit/lib/i18n'
 import { Amount } from '../../utils'
 
@@ -54,6 +57,7 @@ function calculateBalancedValues(
 }
 
 const FieldsDeposit = ({
+  chainId,
   formProcessing,
   formValues,
   haveSigner,
@@ -63,9 +67,9 @@ const FieldsDeposit = ({
   poolDataCacheOrApi,
   routerParams: { rChainId, rPoolIdOrAddress },
   tokensMapper,
-  userPoolBalances,
   updateFormValues,
 }: {
+  chainId: number | undefined
   blockchainId: string
   formProcessing: boolean
   formValues: FormValues
@@ -76,9 +80,8 @@ const FieldsDeposit = ({
     loadMaxAmount: LoadMaxAmount | null,
     updatedMaxSlippage: string | null,
   ) => void
-} & Pick<TransferProps, 'poolData' | 'poolDataCacheOrApi' | 'routerParams' | 'tokensMapper' | 'userPoolBalances'>) => {
+} & Pick<TransferProps, 'poolData' | 'poolDataCacheOrApi' | 'routerParams' | 'tokensMapper'>) => {
   const { data: network } = useNetworkByChain({ chainId: rChainId })
-  const balancesLoading = useStore((state) => state.user.walletBalancesLoading)
   const maxLoading = useStore((state) => state.poolDeposit.maxLoading)
   const setPoolIsWrapped = useStore((state) => state.pools.setPoolIsWrapped)
   const poolId = usePoolIdByAddressOrId({ chainId: rChainId, poolIdOrAddress: rPoolIdOrAddress })
@@ -130,6 +133,13 @@ const FieldsDeposit = ({
     [poolDataCacheOrApi.tokenAddresses, updateFormValues],
   )
 
+  const { address: userAddress } = useConnection()
+  const { data: userPoolBalances, isLoading: balancesLoading } = useTokenBalances({
+    chainId,
+    userAddress,
+    tokenAddresses: poolDataCacheOrApi.tokenAddresses as Address[],
+  })
+
   return (
     <FieldsWrapper>
       {poolDataCacheOrApi.tokens.length === amountsInput.length &&

apps/main/src/dex/components/PagePool/Deposit/components/FormDeposit.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useConfig, type Config } from 'wagmi'
 import AlertFormError from '@/dex/components/AlertFormError'
 import AlertSlippage from '@/dex/components/AlertSlippage'
 import DetailInfoEstGas from '@/dex/components/DetailInfoEstGas'
@@ -39,7 +40,6 @@ const FormDeposit = ({
   routerParams,
   seed,
   tokensMapper,
-  userPoolBalances,
 }: TransferProps) => {
   const isSubscribed = useRef(false)
 
@@ -67,6 +67,8 @@ const FormDeposit = ({
   const poolId = poolData?.pool?.id
   const haveSigner = !!signerAddress
 
+  const config = useConfig()
+
   const updateFormValues = useCallback(
     (
       updatedFormValues: Partial<FormValues>,
@@ -77,6 +79,7 @@ const FormDeposit = ({
       setSlippageConfirmed(false)
       void setFormValues(
         'DEPOSIT',
+        config,
         curve,
         poolDataCacheOrApi.pool.id,
         poolData,
@@ -86,7 +89,7 @@ const FormDeposit = ({
         updatedMaxSlippage || maxSlippage,
       )
     },
-    [curve, maxSlippage, poolData, poolDataCacheOrApi.pool.id, seed.isSeed, setFormValues],
+    [config, curve, maxSlippage, poolData, poolDataCacheOrApi.pool.id, seed.isSeed, setFormValues],
   )
 
   const handleApproveClick = useCallback(
@@ -100,11 +103,18 @@ const FormDeposit = ({
   )
 
   const handleDepositClick = useCallback(
-    async (activeKey: string, curve: CurveApi, poolData: PoolData, formValues: FormValues, maxSlippage: string) => {
+    async (
+      activeKey: string,
+      config: Config,
+      curve: CurveApi,
+      poolData: PoolData,
+      formValues: FormValues,
+      maxSlippage: string,
+    ) => {
       const tokenText = amountsDescription(formValues.amounts)
       const notifyMessage = t`Please confirm deposit of ${tokenText} at max ${maxSlippage}% slippage.`
       const { dismiss } = notify(notifyMessage, 'pending')
-      const resp = await fetchStepDeposit(activeKey, curve, poolData, formValues, maxSlippage)
+      const resp = await fetchStepDeposit(activeKey, config, curve, poolData, formValues, maxSlippage)
 
       if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey && network) {
         const txDescription = t`Deposited ${tokenText}.`
@@ -118,6 +128,7 @@ const FormDeposit = ({
   const getSteps = useCallback(
     (
       activeKey: string,
+      config: Config,
       curve: CurveApi,
       poolData: PoolData,
       formValues: FormValues,
@@ -164,13 +175,13 @@ const FormDeposit = ({
                     onClick: () => setSlippageConfirmed(false),
                   },
                   primaryBtnProps: {
-                    onClick: () => handleDepositClick(activeKey, curve, poolData, formValues, maxSlippage),
+                    onClick: () => handleDepositClick(activeKey, config, curve, poolData, formValues, maxSlippage),
                     disabled: !slippageConfirmed,
                   },
                   primaryBtnLabel: 'Deposit anyway',
                 },
               }
-            : { onClick: () => handleDepositClick(activeKey, curve, poolData, formValues, maxSlippage) }),
+            : { onClick: () => handleDepositClick(activeKey, config, curve, poolData, formValues, maxSlippage) }),
         },
       }
 
@@ -224,6 +235,7 @@ const FormDeposit = ({
     if (curve && poolData) {
       const updatedSteps = getSteps(
         activeKey,
+        config,
         curve,
         poolData,
         formValues,
@@ -237,6 +249,7 @@ const FormDeposit = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
+    config,
     curve?.chainId,
     poolData?.pool.id,
     signerAddress,
@@ -261,6 +274,7 @@ const FormDeposit = ({
   return (
     <>
       <FieldsDeposit
+        chainId={chainId}
         formProcessing={disableForm}
         formValues={formValues}
         haveSigner={haveSigner}
@@ -270,7 +284,6 @@ const FormDeposit = ({
         poolDataCacheOrApi={poolDataCacheOrApi}
         routerParams={routerParams}
         tokensMapper={tokensMapper}
-        userPoolBalances={userPoolBalances}
         updateFormValues={updateFormValues}
       />
 
@@ -304,7 +317,6 @@ const FormDeposit = ({
         loading={!chainId || !steps.length || !seed.loaded}
         routerParams={routerParams}
         seed={seed}
-        userPoolBalances={userPoolBalances}
       >
         <AlertSlippage maxSlippage={maxSlippage} usdAmount={estLpTokenReceivedUsdAmount} />
         {formStatus.error && (

apps/main/src/dex/components/PagePool/Deposit/components/FormDepositStake.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useConfig, type Config } from 'wagmi'
 import AlertFormError from '@/dex/components/AlertFormError'
 import AlertSlippage from '@/dex/components/AlertSlippage'
 import DetailInfoEstGas from '@/dex/components/DetailInfoEstGas'
@@ -42,7 +43,6 @@ const FormDepositStake = ({
   routerParams,
   seed,
   tokensMapper,
-  userPoolBalances,
 }: TransferProps) => {
   const isSubscribed = useRef(false)
 
@@ -70,6 +70,8 @@ const FormDepositStake = ({
   const poolId = poolData?.pool?.id
   const haveSigner = !!signerAddress
 
+  const config = useConfig()
+
   const updateFormValues = useCallback(
     (
       updatedFormValues: Partial<FormValues>,
@@ -80,6 +82,7 @@ const FormDepositStake = ({
       setSlippageConfirmed(false)
       void setFormValues(
         'DEPOSIT_STAKE',
+        config,
         curve,
         poolDataCacheOrApi.pool.id,
         poolData,
@@ -89,7 +92,7 @@ const FormDepositStake = ({
         updatedMaxSlippage || maxSlippage,
       )
     },
-    [curve, maxSlippage, poolData, poolDataCacheOrApi.pool.id, seed.isSeed, setFormValues],
+    [config, curve, maxSlippage, poolData, poolDataCacheOrApi.pool.id, seed.isSeed, setFormValues],
   )
 
   const handleApproveClick = useCallback(
@@ -103,11 +106,18 @@ const FormDepositStake = ({
   )
 
   const handleDepositStakeClick = useCallback(
-    async (activeKey: string, curve: CurveApi, poolData: PoolData, formValues: FormValues, maxSlippage: string) => {
+    async (
+      activeKey: string,
+      config: Config,
+      curve: CurveApi,
+      poolData: PoolData,
+      formValues: FormValues,
+      maxSlippage: string,
+    ) => {
       const tokenText = amountsDescription(formValues.amounts)
       const notifyMessage = t`Please confirm deposit and staking of ${tokenText} LP Tokens at max ${maxSlippage}% slippage.`
       const { dismiss } = notify(notifyMessage, 'pending')
-      const resp = await fetchStepDepositStake(activeKey, curve, poolData, formValues, maxSlippage)
+      const resp = await fetchStepDepositStake(activeKey, config, curve, poolData, formValues, maxSlippage)
 
       if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
         const TxDescription = t`Deposit and staked ${tokenText}`
@@ -121,6 +131,7 @@ const FormDepositStake = ({
   const getSteps = useCallback(
     (
       activeKey: string,
+      config: Config,
       curve: CurveApi,
       poolData: PoolData,
       formValues: FormValues,
@@ -167,13 +178,13 @@ const FormDepositStake = ({
                     onClick: () => setSlippageConfirmed(false),
                   },
                   primaryBtnProps: {
-                    onClick: () => handleDepositStakeClick(activeKey, curve, poolData, formValues, maxSlippage),
+                    onClick: () => handleDepositStakeClick(activeKey, config, curve, poolData, formValues, maxSlippage),
                     disabled: !slippageConfirmed,
                   },
                   primaryBtnLabel: 'Deposit anyway',
                 },
               }
-            : { onClick: () => handleDepositStakeClick(activeKey, curve, poolData, formValues, maxSlippage) }),
+            : { onClick: () => handleDepositStakeClick(activeKey, config, curve, poolData, formValues, maxSlippage) }),
         },
       }
 
@@ -227,6 +238,7 @@ const FormDepositStake = ({
     if (curve && poolData) {
       const updatedSteps = getSteps(
         activeKey,
+        config,
         curve,
         poolData,
         formValues,
@@ -239,7 +251,17 @@ const FormDepositStake = ({
       setSteps(updatedSteps)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId, poolId, signerAddress, formValues, formStatus, slippage.isHighSlippage, slippageConfirmed, maxSlippage])
+  }, [
+    config,
+    chainId,
+    poolId,
+    signerAddress,
+    formValues,
+    formStatus,
+    slippage.isHighSlippage,
+    slippageConfirmed,
+    maxSlippage,
+  ])
 
   const activeStep = haveSigner ? getActiveStep(steps) : null
   const disableForm = !seed.loaded || formStatus.formProcessing
@@ -255,6 +277,7 @@ const FormDepositStake = ({
   return (
     <>
       <FieldsDeposit
+        chainId={chainId}
         formProcessing={disableForm}
         formValues={formValues}
         haveSigner={haveSigner}
@@ -264,7 +287,6 @@ const FormDepositStake = ({
         poolDataCacheOrApi={poolDataCacheOrApi}
         routerParams={routerParams}
         tokensMapper={tokensMapper}
-        userPoolBalances={userPoolBalances}
         updateFormValues={updateFormValues}
       />
 
@@ -304,7 +326,6 @@ const FormDepositStake = ({
         loading={!chainId || !steps.length || !seed.loaded}
         routerParams={routerParams}
         seed={seed}
-        userPoolBalances={userPoolBalances}
       >
         <AlertSlippage maxSlippage={maxSlippage} usdAmount={estLpTokenReceivedUsdAmount} />
         {formStatus.error && (