feat(synapse-interface): post transaction balances

packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx

@@ -13,7 +13,7 @@ import {
 import { SwapChainSelector } from './SwapChainSelector'
 import { SwapFromTokenSelector } from './SwapFromTokenSelector'
 import { usePortfolioState } from '@/slices/portfolio/hooks'
-import { updateSwapFromValue } from '@/slices/swap/reducer'
+import { initialState, updateSwapFromValue } from '@/slices/swap/reducer'
 import { useSwapState } from '@/slices/swap/hooks'
 
 export const SwapInputContainer = () => {
@@ -51,6 +51,10 @@ export const SwapInputContainer = () => {
     ) {
       setShowValue(swapFromValue)
     }
+
+    if (swapFromValue === initialState.swapFromValue) {
+      setShowValue(initialState.swapFromValue)
+    }
   }, [swapFromValue, swapChainId, swapFromToken])
 
   const handleFromValueChange = (

packages/synapse-interface/pages/pool/NoPoolBody.tsx

@@ -1,8 +1,8 @@
 import Card from '@tw/Card'
 import Grid from '@tw/Grid'
-import { getNetworkTextColor } from '@styles/chains'
-import { CHAINS_BY_ID } from '@constants/chains'
 import { Token } from '@types'
+import { CHAINS_BY_ID } from '@constants/chains'
+import { getNetworkTextColor } from '@styles/chains'
 
 const NoPoolBody = ({
   pool,

packages/synapse-interface/pages/pool/PoolBody.tsx

@@ -1,24 +1,22 @@
 import numeral from 'numeral'
 import Link from 'next/link'
+import { Address } from '@wagmi/core'
+import { useEffect, useState } from 'react'
+import { useAccount, useSwitchNetwork } from 'wagmi'
 import { ChevronLeftIcon } from '@heroicons/react/outline'
-import { POOLS_PATH } from '@urls'
 import Card from '@tw/Card'
 import Grid from '@tw/Grid'
-import PoolInfoSection from './PoolInfoSection'
-import PoolManagement from './poolManagement'
 import { zeroAddress } from 'viem'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store/store'
-import { Address } from '@wagmi/core'
-import { useAccount, useSwitchNetwork } from 'wagmi'
+import { PoolActionOptions } from '@/components/Pools/PoolActionOptions'
 import { TransactionButton } from '@/components/buttons/TransactionButton'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
-import { useEffect, useState } from 'react'
-import { PoolActionOptions } from '@/components/Pools/PoolActionOptions'
-import PoolTitle from './components/PoolTitle'
 import { DisplayBalances } from '../pools/PoolCard'
-import { getStakedBalance } from '@/utils/actions/getStakedBalance'
+import { usePoolDataState, usePoolUserDataState } from '@/slices/pools/hooks'
+import { POOLS_PATH } from '@urls'
+import PoolTitle from './components/PoolTitle'
+import PoolInfoSection from './PoolInfoSection'
+import PoolManagement from './poolManagement'
 
 const PoolBody = ({
   address,
@@ -30,16 +28,10 @@ const PoolBody = ({
   const [isClient, setIsClient] = useState(false)
   const { chains, switchNetwork } = useSwitchNetwork()
   const { openConnectModal } = useConnectModal()
-
   const { isConnected } = useAccount()
 
-  const { pool, poolAPYData } = useSelector(
-    (state: RootState) => state.poolData
-  )
-  const [stakedBalance, setStakedBalance] = useState({
-    amount: 0n,
-    reward: 0n,
-  })
+  const { poolUserData } = usePoolUserDataState()
+  const { pool, poolAPYData } = usePoolDataState()
 
   useEffect(() => {
     setIsClient(true)
@@ -51,29 +43,13 @@ const PoolBody = ({
         poolName: pool?.poolName,
       })
     }
-    if (address && isClient) {
-      getStakedBalance(
-        address as Address,
-        pool.chainId,
-        pool.poolId[pool.chainId],
-        pool
-      )
-        .then((res) => {
-          setStakedBalance(res)
-        })
-        .catch((err) => {
-          console.log('Could not get staked balances: ', err)
-        })
-    } else {
-      setStakedBalance({ amount: 0n, reward: 0n })
-    }
   }, [isClient, address, pool])
 
   if (!pool) return null
 
   return (
     <>
-      <div className="">
+      <div id="pool-body">
         <Link href={POOLS_PATH}>
           <div className="inline-flex items-center mb-3 text-sm font-light text-white hover:text-opacity-100">
             <ChevronLeftIcon className="w-4 h-4" />
@@ -87,7 +63,7 @@ const PoolBody = ({
               <DisplayBalances
                 pool={pool}
                 address={address}
-                stakedBalance={stakedBalance}
+                stakedBalance={poolUserData?.stakedBalance}
                 showIcon={false}
               />
             </div>

packages/synapse-interface/pages/pool/PoolInfoSection/index.tsx

@@ -7,11 +7,10 @@ import {
   formatBigIntToPercentString,
   formatBigIntToString,
 } from '@/utils/bigint/format'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store/store'
+import { usePoolDataState } from '@/slices/pools/hooks'
 
 const PoolInfoSection = () => {
-  const { pool, poolData } = useSelector((state: RootState) => state.poolData)
+  const { pool, poolData, isLoading } = usePoolDataState()
 
   const usdFormat = poolData.totalLockedUSD > 1000000 ? '$0,0.0' : '$0,0'
 
@@ -22,49 +21,49 @@ const PoolInfoSection = () => {
         <InfoListItem
           labelText="Trading Fee"
           content={
-            poolData && poolData.swapFee ? (
+            poolData && poolData.swapFee && !isLoading ? (
               formatBigIntToPercentString(poolData.swapFee, 8, 2, false)
             ) : (
-              <LoadingDots />
+              <LoadingDots className="mr-4" />
             )
           }
         />
         <InfoListItem
           labelText="Virtual Price"
           content={
-            poolData && poolData?.virtualPrice ? (
+            poolData && poolData?.virtualPrice && !isLoading ? (
               <AugmentWithUnits
                 content={formatBigIntToString(poolData.virtualPrice, 18, 5)}
                 label={pool.priceUnits}
               />
             ) : (
-              <LoadingDots />
+              <LoadingDots className="mr-4" />
             )
           }
         />
         <InfoListItem
           labelText="Total Liquidity"
           content={
-            poolData && poolData?.totalLocked ? (
+            poolData && poolData?.totalLocked && !isLoading ? (
               <AugmentWithUnits
                 content={numeral(poolData.totalLocked).format('0,0')}
                 label={pool.priceUnits}
               />
             ) : (
-              <LoadingDots />
+              <LoadingDots className="mr-4" />
             )
           }
         />
         <InfoListItem
           labelText="Total Liquidity USD"
           content={
-            poolData && poolData?.totalLockedUSD ? (
+            poolData && poolData?.totalLockedUSD && !isLoading ? (
               <AugmentWithUnits
                 content={numeral(poolData.totalLockedUSD).format(usdFormat)}
                 label="USD"
               />
             ) : (
-              <LoadingDots />
+              <LoadingDots className="mr-4" />
             )
           }
         />

packages/synapse-interface/pages/pool/[poolId].tsx

@@ -1,19 +1,23 @@
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
-import { useAccount, useNetwork } from 'wagmi'
-import { useDispatch, useSelector } from 'react-redux'
 import { useRouter } from 'next/router'
-import StandardPageContainer from '@layouts/StandardPageContainer'
-import { LandingPageWrapper } from '@layouts/LandingPageWrapper'
-import { DEFAULT_FROM_CHAIN } from '@/constants/swap'
-import PoolBody from './PoolBody'
-import NoPoolBody from './NoPoolBody'
+import { useAccount, useNetwork } from 'wagmi'
+import { useAppDispatch } from '@/store/hooks'
 import { fetchPoolData, resetPoolData } from '@/slices/poolDataSlice'
-import { RootState } from '@/store/store'
 import { resetPoolDeposit } from '@/slices/poolDepositSlice'
 import { resetPoolWithdraw } from '@/slices/poolWithdrawSlice'
-import LoadingDots from '@/components/ui/tailwind/LoadingDots'
+import {
+  fetchPoolUserData,
+  resetPoolUserData,
+} from '@/slices/poolUserDataSlice'
+import { usePoolDataState } from '@/slices/pools/hooks'
+import { DEFAULT_FROM_CHAIN } from '@/constants/swap'
+import { LandingPageWrapper } from '@layouts/LandingPageWrapper'
 import { POOL_BY_ROUTER_INDEX } from '@constants/tokens'
+import PoolBody from './PoolBody'
+import NoPoolBody from './NoPoolBody'
+import LoadingDots from '@/components/ui/tailwind/LoadingDots'
+import StandardPageContainer from '@layouts/StandardPageContainer'
 
 export const getStaticPaths = async () => {
   const paths = Object.keys(POOL_BY_ROUTER_INDEX).map((key) => ({
@@ -31,16 +35,15 @@ export const getStaticProps = async (context) => {
 }
 
 const PoolPage = () => {
+  const dispatch = useAppDispatch()
   const router = useRouter()
   const { poolId } = router.query
   const { address } = useAccount()
   const { chain } = useNetwork()
   const [connectedChainId, setConnectedChainId] = useState(0)
   const [isClient, setIsClient] = useState(false)
 
-  const { pool, isLoading } = useSelector((state: RootState) => state.poolData)
-
-  const dispatch: any = useDispatch()
+  const { pool } = usePoolDataState()
 
   useEffect(() => {
     setIsClient(true)
@@ -51,6 +54,7 @@ const PoolPage = () => {
       dispatch(resetPoolData())
       dispatch(resetPoolDeposit())
       dispatch(resetPoolWithdraw())
+      dispatch(resetPoolUserData())
     }
 
     router.events.on('routeChangeStart', handleRouteChange)
@@ -71,13 +75,19 @@ const PoolPage = () => {
     }
   }, [poolId, address, isClient])
 
+  useEffect(() => {
+    if (pool && address) {
+      dispatch(fetchPoolUserData({ pool, address }))
+    }
+  }, [pool])
+
   return (
     <LandingPageWrapper>
       <StandardPageContainer
         connectedChainId={connectedChainId}
         address={address}
       >
-        {!pool || isLoading || !poolId ? (
+        {!pool || !poolId ? (
           <div className="flex items-center justify-center">
             <LoadingDots />
           </div>