Reduces number of total RPC calls

- memoizes components
- uses isClient/setClient for useEffects with rpc calls to prevent double calls

packages/synapse-interface/components/Pools/PoolCardBody.tsx

@@ -1,31 +1,45 @@
+import { Token } from '@/utils/types'
 import _ from 'lodash'
 import numeral from 'numeral'
+import { memo } from 'react'
 import { LoaderIcon } from 'react-hot-toast'
 
-export const PoolCardBody = ({ pool, poolData, poolApyData }) => {
-  const format = poolData.totalLockedUSD > 1000000 ? '$0,0.0' : '$0,0'
-  return (
-    <div className="flex items-center justify-between px-3 pt-1 pb-2 h-[65px]">
-      <div className="flex items-center space-x-3">
-        <PoolTokenIcons pool={pool} />
-        <div className="text-white">
-          <div className="flex items-center space-x-2 font-medium text-xxl">
-            <div className="">
-              {poolData && numeral(poolData.totalLockedUSD).format(format)}
+export const PoolCardBody = memo(
+  ({
+    pool,
+    poolData,
+    poolApyData,
+  }: {
+    pool: Token
+    poolData: any
+    poolApyData: any
+  }) => {
+    const format = poolData.totalLockedUSD > 1000000 ? '$0,0.0' : '$0,0'
+    return (
+      <div className="flex items-center justify-between px-3 pt-1 pb-2 h-[65px]">
+        <div className="flex items-center space-x-3">
+          <PoolTokenIcons pool={pool} />
+          <div className="text-white">
+            <div className="flex items-center space-x-2 font-medium text-xxl">
+              <div className="">
+                {poolData && numeral(poolData.totalLockedUSD).format(format)}
+              </div>
+              <span className="text-base text-[#BFBCC2]">
+                {pool.priceUnits}
+              </span>
             </div>
-            <span className="text-base text-[#BFBCC2]">{pool.priceUnits}</span>
           </div>
         </div>
-      </div>
 
-      <div className="">
-        <ApyDisplay pool={pool} poolApyData={poolApyData} />
+        <div className="">
+          <ApyDisplay pool={pool} poolApyData={poolApyData} />
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)
 
-const PoolTokenIcons = ({ pool }) => {
+const PoolTokenIcons = memo(({ pool }: { pool: Token }) => {
   if (pool.poolTokens.length === 3) {
     return (
       <div className="flex flex-col items-center">
@@ -67,7 +81,7 @@ const PoolTokenIcons = ({ pool }) => {
       </div>
     )
   }
-}
+})
 
 const ApyDisplay = ({ pool, poolApyData }) => {
   if (!pool.incentivized) {

packages/synapse-interface/components/Pools/PoolHeader.tsx

@@ -1,64 +1,69 @@
 import _ from 'lodash'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import Link from 'next/link'
-import { useNetwork } from 'wagmi'
+import { Address, useNetwork } from 'wagmi'
 
 import { getPoolUrl } from '@urls'
 import { CHAINS_BY_ID } from '@/constants/chains'
 import { usePortfolioState } from '@/slices/portfolio/hooks'
 import { RightArrow } from '@/components/icons/RightArrow'
+import { Token } from '@/utils/types'
 
-export const PoolHeader = ({ pool, address }) => {
-  const { chain: connectedChain } = useNetwork()
-  const chain = CHAINS_BY_ID[pool.chainId]
-  const { balancesAndAllowances } = usePortfolioState()
-  const canDeposit = useMemo(() => {
-    const balancesForChain = _(balancesAndAllowances[pool.chainId])
-      .pickBy((value, _key) => value.balance > 0n)
-      .value()
+export const PoolHeader = memo(
+  ({ pool, address }: { pool: Token; address: Address }) => {
+    const { chain: connectedChain } = useNetwork()
+    const chain = CHAINS_BY_ID[pool.chainId]
+    const { balancesAndAllowances } = usePortfolioState()
+    const canDeposit = useMemo(() => {
+      const balancesForChain = _(balancesAndAllowances[pool.chainId])
+        .pickBy((value, _key) => value.balance > 0n)
+        .value()
 
-    if (Object.keys(balancesForChain).length === 0) return false
+      if (Object.keys(balancesForChain).length === 0) return false
 
-    if (!address) {
-      return null
-    }
+      if (!address) {
+        return null
+      }
 
-    return _.some(pool.nativeTokens, (poolToken) => {
-      const poolAddress = _.get(poolToken, `addresses.${pool.chainId}`)
-      return _.some(balancesForChain, (balance) => {
-        return poolAddress === _.get(balance, `token.addresses.${pool.chainId}`)
+      return _.some(pool.nativeTokens, (poolToken) => {
+        const poolAddress = _.get(poolToken, `addresses.${pool.chainId}`)
+        return _.some(balancesForChain, (balance) => {
+          return (
+            poolAddress === _.get(balance, `token.addresses.${pool.chainId}`)
+          )
+        })
       })
-    })
-  }, [pool, balancesAndAllowances, address])
-  return (
-    <div className="flex items-center justify-between p-3 pt-2 pb-2 pl-3 border border-transparent ">
-      <div className="flex items-center">
-        <img
-          src={chain.chainImg.src}
-          className="w-[16px] h-[16px] rounded-full mr-2"
-        />
-        <div className="mr-2 text-white text-md">{chain.name}</div>
-        <div className="text-sm text-[#BFBCC2] mr-4">{pool.symbol}</div>
-        {connectedChain && connectedChain.id === pool.chainId && (
-          <ConnectedIndicator />
-        )}
-      </div>
+    }, [pool, balancesAndAllowances, address])
+    return (
+      <div className="flex items-center justify-between p-3 pt-2 pb-2 pl-3 border border-transparent ">
+        <div className="flex items-center">
+          <img
+            src={chain.chainImg.src}
+            className="w-[16px] h-[16px] rounded-full mr-2"
+          />
+          <div className="mr-2 text-white text-md">{chain.name}</div>
+          <div className="text-sm text-[#BFBCC2] mr-4">{pool.symbol}</div>
+          {connectedChain && connectedChain.id === pool.chainId && (
+            <ConnectedIndicator />
+          )}
+        </div>
 
-      {canDeposit && pool.incentivized ? (
-        <Link href={getPoolUrl(pool)}>
-          <div className="text-sm text-[#99E6FF] flex items-center space-x-1">
-            <div className="hover:underline">Deposit</div>
-            <RightArrow color="#99E6FF" />
+        {canDeposit && pool.incentivized ? (
+          <Link href={getPoolUrl(pool)}>
+            <div className="text-sm text-[#99E6FF] flex items-center space-x-1">
+              <div className="hover:underline">Deposit</div>
+              <RightArrow color="#99E6FF" />
+            </div>
+          </Link>
+        ) : (
+          <div className="">
+            <RightArrow color="#565058" />
           </div>
-        </Link>
-      ) : (
-        <div className="">
-          <RightArrow color="#565058" />
-        </div>
-      )}
-    </div>
-  )
-}
+        )}
+      </div>
+    )
+  }
+)
 
 const ConnectedIndicator = () => {
   return (

packages/synapse-interface/contexts/UserProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef } from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import { Chain, useAccount, useNetwork } from 'wagmi'
 import { segmentAnalyticsEvent } from './SegmentAnalyticsProvider'
 import { useRouter } from 'next/router'
@@ -18,6 +18,7 @@ const WalletStatusContext = createContext(undefined)
 export const UserProvider = ({ children }) => {
   const dispatch = useAppDispatch()
   const { chain } = useNetwork()
+  const [isClient, setIsClient] = useState(false)
   const router = useRouter()
   const { query, pathname } = router
   const { address, connector } = useAccount({
@@ -40,6 +41,18 @@ export const UserProvider = ({ children }) => {
   }, [chain])
   const prevChain = prevChainRef.current
 
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  useEffect(() => {
+    if (isClient) {
+      dispatch(fetchSynPrices())
+      dispatch(fetchEthPrice())
+      dispatch(fetchAvaxPrice())
+    }
+  }, [isClient])
+
   useEffect(() => {
     if (chain) {
       dispatch(setSwapChainId(chain.id))
@@ -65,7 +78,7 @@ export const UserProvider = ({ children }) => {
 
   useEffect(() => {
     ;(async () => {
-      if (address && chain?.id) {
+      if (isClient && address && chain?.id) {
         try {
           await dispatch(fetchAndStorePortfolioBalances(address))
         } catch (error) {
@@ -77,13 +90,7 @@ export const UserProvider = ({ children }) => {
         dispatch(resetPortfolioState())
       }
     })()
-  }, [chain, address])
-
-  useEffect(() => {
-    dispatch(fetchSynPrices())
-    dispatch(fetchEthPrice())
-    dispatch(fetchAvaxPrice())
-  }, [])
+  }, [chain, address, isClient])
 
   return (
     <WalletStatusContext.Provider value={null}>

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

@@ -27,6 +27,7 @@ const PoolBody = ({
   address?: Address
   connectedChainId?: number
 }) => {
+  const [isClient, setIsClient] = useState(false)
   const { chains, switchNetwork } = useSwitchNetwork()
   const { openConnectModal } = useConnectModal()
 
@@ -35,19 +36,22 @@ const PoolBody = ({
   const { pool, poolAPYData } = useSelector(
     (state: RootState) => state.poolData
   )
-  const { poolUserData } = useSelector((state: RootState) => state.poolUserData)
   const [stakedBalance, setStakedBalance] = useState({
     amount: 0n,
     reward: 0n,
   })
 
   useEffect(() => {
-    if (pool) {
+    setIsClient(true)
+  }, [])
+
+  useEffect(() => {
+    if (pool && isClient) {
       segmentAnalyticsEvent(`[Pool] arrives`, {
         poolName: pool?.poolName,
       })
     }
-    if (address) {
+    if (address && isClient) {
       getStakedBalance(
         address as Address,
         pool.chainId,
@@ -62,7 +66,7 @@ const PoolBody = ({
     } else {
       setStakedBalance({ amount: 0n, reward: 0n })
     }
-  }, [])
+  }, [isClient])
 
   if (!pool) return null
 

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

@@ -37,12 +37,17 @@ const PoolPage = () => {
   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()
 
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   useEffect(() => {
     const handleRouteChange = () => {
       dispatch(resetPoolData())
@@ -62,11 +67,11 @@ const PoolPage = () => {
   }, [chain])
 
   useEffect(() => {
-    if (poolId) {
+    if (poolId && isClient) {
       dispatch(resetPoolData())
       dispatch(fetchPoolData({ poolName: String(poolId) }))
     }
-  }, [poolId, address])
+  }, [poolId, address, isClient])
 
   return (
     <LandingPageWrapper>