Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduces number of total RPC calls on Pools page #1518

Merged
merged 1 commit into from
Nov 3, 2023

Conversation

abtestingalpha
Copy link
Collaborator

@abtestingalpha abtestingalpha commented Oct 27, 2023

Summary by CodeRabbit

Refactor:

  • Enhanced the performance of the application by optimizing components using memoization, resulting in a smoother user experience.
  • Improved the reliability of the application by adding checks to ensure certain actions only occur when the component is mounted on the client side, reducing potential errors.
  • Updated the way pool data is fetched and handled, leading to more accurate and reliable data display for users.
  • Adjusted the handling of virtualPrice and swapFee properties, making them optional, providing flexibility in data handling.

Bug Fix:

  • Fixed potential issues with deposit functionality by adding additional checks and conditions, ensuring a more seamless user experience.

Please note that these changes are mostly under-the-hood improvements and may not result in noticeable changes in the user interface. However, they contribute to a more reliable and efficient application.

efd393a9907d5c20f203701a83b4cdc5ff8a988f: synapse-interface preview link
05ad7eb515ee2bf71fb647edada3f09fa6069bfc: synapse-interface preview link
6022fa5217d231fc23d936f3dd156bf31cdb95bf: synapse-interface preview link
adb0af519e58cbb389942a5685bebf15b7774551: synapse-interface preview link

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 27, 2023

Walkthrough

The changes primarily focus on enhancing the performance and reliability of the Synapse Interface. This is achieved by memoizing components, adding type annotations, and introducing a new state variable isClient to ensure certain actions are executed only on the client side. Additionally, the data fetching methods have been updated to fetch more detailed information.

Changes

File(s) Summary
.../Pools/PoolCardBody.tsx, .../Pools/PoolHeader.tsx Components are memoized and type annotations are added.
.../contexts/UserProvider.tsx, .../pages/pool/PoolBody.tsx, .../pages/pool/[poolId].tsx, .../pages/pools/PoolCard.tsx Introduced isClient state variable to ensure certain actions are executed only on the client side.
.../pages/pools/PoolCards.tsx Added conditional check for ethPrice and updated PoolCard component to receive additional props.
.../utils/actions/getPoolApyData.ts, .../utils/actions/getPoolData.ts Updated data fetching methods to fetch more detailed information.
.../utils/types/index.tsx Updated PoolData interface to make virtualPrice and swapFee properties optional.

🐇💻

"In the land of code, where the shadows lie,

A rabbit hops, under the cloudless sky.

With each key press, a new world unfurls,

In the realm of brackets, where logic swirls.

Memoized components, state variables new,

Fetching data, for a view that's true.

Celebrate the changes, for they are grand,

Crafted with care, by the coder's hand." 🎉🥕


Tips

Chat with CodeRabbit Bot (@coderabbitai)

  • If you reply to a review comment from CodeRabbit, the bot will automatically respond.
  • To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
  • Note: Review comments are made on code diffs or files, not on the PR overview.
  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai help to get help.
  • @coderabbitai resolve to resolve all the CodeRabbit review comments.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • The JSON schema for the configuration file is available here.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.json

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Status

Actionable comments generated: 2

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 938a7be and fbac8f9.
Files selected for processing (10)
  • packages/synapse-interface/components/Pools/PoolCardBody.tsx (2 hunks)
  • packages/synapse-interface/components/Pools/PoolHeader.tsx (1 hunks)
  • packages/synapse-interface/contexts/UserProvider.tsx (5 hunks)
  • packages/synapse-interface/pages/pool/PoolBody.tsx (3 hunks)
  • packages/synapse-interface/pages/pool/[poolId].tsx (2 hunks)
  • packages/synapse-interface/pages/pools/PoolCard.tsx (3 hunks)
  • packages/synapse-interface/pages/pools/PoolCards.tsx (1 hunks)
  • packages/synapse-interface/utils/actions/getPoolApyData.ts (2 hunks)
  • packages/synapse-interface/utils/actions/getPoolData.ts (4 hunks)
  • packages/synapse-interface/utils/types/index.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
  • packages/synapse-interface/contexts/UserProvider.tsx
Additional comments: 27
packages/synapse-interface/utils/types/index.tsx (1)
  • 49-51: The virtualPrice and swapFee properties of the PoolData type have been made optional. Ensure that all uses of these properties throughout the codebase are updated to handle the possibility of these properties being undefined.
packages/synapse-interface/pages/pools/PoolCards.tsx (3)
  • 5-12: The addition of useAppSelector to fetch synPrices, ethPrice, and avaxPrice from the state is a good practice. It helps to avoid prop drilling and makes the component more maintainable. However, ensure that the state is updated correctly before this component is rendered to avoid potential issues.

  • 14-16: The early return when ethPrice is not available is a good practice. It prevents the component from rendering when the necessary data is not available.

  • 31-37: The PoolCard component now receives additional props ethPrice, avaxPrice, and synPrices. Ensure that the PoolCard component has been updated to handle these new props correctly.

packages/synapse-interface/pages/pool/[poolId].tsx (2)
  • 40-49: The introduction of the isClient state variable and setting it to true on component mount is a good way to ensure that certain effects and data fetches only execute on the client side. This can help optimize the number of RPC calls.

  • 70-74: The addition of isClient to the dependency array of the useEffect hook and the conditional check for isClient before dispatching resetPoolData and fetchPoolData actions ensures that these actions are only dispatched on the client side. This is a good optimization to reduce the number of RPC calls.

packages/synapse-interface/components/Pools/PoolHeader.tsx (3)
  • 12-13: The PoolHeader component is now wrapped with the memo function from React. This is a performance optimization that helps to avoid unnecessary re-renders of the component by memoizing the output of the component and only re-rendering if the props have changed.

  • 14-36: The logic inside the PoolHeader component remains the same. It uses the useNetwork hook to get the connected chain, the usePortfolioState hook to get portfolio-related state information, and the useMemo hook to calculate the canDeposit variable.

  • 37-64: The render logic of the PoolHeader component remains the same. It renders a header section with pool information and a deposit link if certain conditions are met.

packages/synapse-interface/pages/pool/PoolBody.tsx (3)
  • 30-32: The introduction of the isClient state variable is a good approach to prevent unnecessary RPC calls on the server side. This variable is set to true when the component mounts, indicating that the component is on the client side.

  • 44-46: The useEffect hook is used to set isClient to true when the component mounts. This is a good practice to ensure that the component knows when it's being rendered on the client side.

  • 36-57: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [48-69]

The useEffect hook now checks for isClient before executing its logic. This is a good practice to prevent unnecessary RPC calls on the server side. However, it's important to note that this change might affect the timing of the segmentAnalyticsEvent and getStakedBalance calls. Make sure that these calls still work as expected and that they don't rely on being executed immediately when the component mounts.

packages/synapse-interface/components/Pools/PoolCardBody.tsx (3)
  • 1-4: The new hunk imports the memo function from React and the Token type from the local utility types. This is a good practice as it helps to avoid unnecessary re-renders of the components, improving the performance of the application.

  • 7-40: The PoolCardBody component is now wrapped with the memo function from React. This is a good practice as it helps to avoid unnecessary re-renders of the component, improving the performance of the application. The props are also now explicitly typed, which improves code readability and maintainability.

  • 1-45: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [42-84]

The PoolTokenIcons component is now wrapped with the memo function from React. This is a good practice as it helps to avoid unnecessary re-renders of the component, improving the performance of the application. The props are also now explicitly typed, which improves code readability and maintainability.

packages/synapse-interface/utils/actions/getPoolApyData.ts (2)
  • 2-8: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [1-8]

The import of fetchBalance and fetchToken has been removed and replaced with erc20ABI. This change is in line with the PR's goal of reducing RPC calls by using multicall to fetch data in a single call.

  • 51-71: The fetchBalance and fetchToken calls have been replaced with multicall calls using the erc20ABI ABI to fetch balanceOf and totalSupply. This change reduces the number of RPC calls, improving performance.
-  const lpTokenBalanceResult =
-    (
-      await fetchBalance({
-        address: minichefAddress,
-        chainId,
-        token: poolToken.addresses[chainId] as Address,
-      })
-    )?.value ?? 0n
-
-  const lpTokenSupplyResult =
-    (
-      await fetchToken({
-        address: poolToken.addresses[chainId] as Address,
-        chainId,
-      })
-    )?.totalSupply?.value ?? 0n
+  const lpTokenBalanceResult: bigint = data[3].result ?? 0n
+  const lpTokenSupplyResult: bigint = data[4].result ?? 0n
packages/synapse-interface/pages/pools/PoolCard.tsx (7)
  • 8-13: The import of useAppSelector has been removed and no new imports have been added. Ensure that useAppSelector is not used anywhere else in the code. If it is, replace it with an appropriate alternative.

  • 21-31: The function signature of PoolCard has been changed. It now takes ethPrice, avaxPrice, and synPrices as props. Ensure that all calls to PoolCard throughout the codebase have been updated to match the new signature.

  • 32-44: A new state variable isClient has been introduced and is set to true when the component mounts. This variable is used to conditionally execute effects and fetch data only when the component is on the client side. This is a good practice to prevent unnecessary data fetching on the server side.

  • 46-68: The useEffect hook has been updated to fetch pool data and pool APY data only when isClient is true. This is a good practice to prevent unnecessary data fetching on the server side.

  • 70-86: The useEffect hook has been updated to fetch staked balance only when isClient is true. This is a good practice to prevent unnecessary data fetching on the server side.

  • 101-110: No significant changes have been made in this hunk. The code formatting has been altered slightly, but the functionality remains the same.

  • 113-114: The PoolHeader component now receives address as a prop. Ensure that the PoolHeader component has been updated to handle this new prop.

packages/synapse-interface/utils/actions/getPoolData.ts (3)
  • 1-8: The imports have been updated to include erc20ABI and multicall from @wagmi/core, and lpTokenABI and SWAP_ABI from @/constants/abis. This is in line with the PR's goal of reducing RPC calls by using multicall and fetching balanceOf and totalSupply using the erc20ABI ABI.

  • 118-123: The getSinglePoolData function no longer fetches swapFee and virtualPrice from getCorePoolData. This is in line with the PR's summary, which states that getSinglePoolData no longer includes virtualPrice and swapFee in its return value. Ensure that this change does not break any functionality that relies on these values.

  • 144-148: The returned PoolData object no longer includes virtualPrice and swapFee. This is in line with the PR's summary, which states that the PoolData interface has been updated to reflect these changes. Ensure that this change does not break any functionality that relies on these values.

@codecov
Copy link

codecov bot commented Oct 27, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (f7ccb5c) 50.81006% compared to head (84d568e) 50.81006%.
Report is 7 commits behind head on master.

Additional details and impacted files
@@              Coverage Diff              @@
##              master       #1518   +/-   ##
=============================================
  Coverage   50.81006%   50.81006%           
=============================================
  Files            357         357           
  Lines          23887       23887           
  Branches         279         279           
=============================================
  Hits           12137       12137           
  Misses         10596       10596           
  Partials        1154        1154           
Flag Coverage Δ
packages 90.62003% <ø> (ø)
solidity 93.63708% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Oct 30, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 84d568e
Status: ✅  Deploy successful!
Preview URL: https://b7f10b8f.sanguine.pages.dev
Branch Preview URL: https://fe-reduce-rpc-calls.sanguine.pages.dev

View logs

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Status

Actionable comments generated: 3

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between f75a32b and 8411a60166b09b041cd84ce3e8854ce7ee228d66.
Files selected for processing (10)
  • packages/synapse-interface/components/Pools/PoolCardBody.tsx (2 hunks)
  • packages/synapse-interface/components/Pools/PoolHeader.tsx (1 hunks)
  • packages/synapse-interface/contexts/UserProvider.tsx (5 hunks)
  • packages/synapse-interface/pages/pool/PoolBody.tsx (3 hunks)
  • packages/synapse-interface/pages/pool/[poolId].tsx (2 hunks)
  • packages/synapse-interface/pages/pools/PoolCard.tsx (3 hunks)
  • packages/synapse-interface/pages/pools/PoolCards.tsx (1 hunks)
  • packages/synapse-interface/utils/actions/getPoolApyData.ts (2 hunks)
  • packages/synapse-interface/utils/actions/getPoolData.ts (4 hunks)
  • packages/synapse-interface/utils/types/index.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
  • packages/synapse-interface/utils/actions/getPoolApyData.ts
Additional comments: 28
packages/synapse-interface/utils/types/index.tsx (1)
  • 46-52: The virtualPrice and swapFee properties in the PoolData type are now optional. This change should be reflected in all parts of the codebase where PoolData is used. Ensure that all instances of PoolData are checked for the existence of virtualPrice and swapFee before they are used.
packages/synapse-interface/pages/pool/[poolId].tsx (2)
  • 37-49: The introduction of the isClient state variable and setting it to true on component mount is a good practice to prevent unnecessary data fetching on the server side. This can improve performance and reduce the number of RPC calls.

  • 70-74: The conditional check for poolId and isClient before dispatching actions and fetching pool data is a good practice. It ensures that data is only fetched when necessary and on the client side, which can improve performance and reduce the number of RPC calls.

packages/synapse-interface/components/Pools/PoolHeader.tsx (1)
  • 1-68: The use of memo to wrap the PoolHeader component is a good practice as it prevents unnecessary re-renders of the component, improving the performance of the application. The use of useMemo for canDeposit is also a good practice as it ensures that the function is only re-computed when pool, balancesAndAllowances, or address changes. This also helps in improving the performance of the application. The type annotations for pool and address provide better type safety. The use of lodash for operations like pickBy, get, and some provides a more readable and maintainable code.
packages/synapse-interface/components/Pools/PoolCardBody.tsx (3)
  • 1-4: Imports look good and are correctly ordered.

  • 7-40: The PoolCardBody component is correctly memoized and the props are properly typed. This will help to avoid unnecessary re-renders and improve performance.

  • 1-45: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [42-84]

The PoolTokenIcons component is correctly memoized and the props are properly typed. This will help to avoid unnecessary re-renders and improve performance.

packages/synapse-interface/pages/pool/PoolBody.tsx (2)
  • 30-33: The introduction of the isClient state variable is a good practice to prevent unnecessary data fetching and effects execution on the server side. This can improve performance and reduce the number of RPC calls.

  • 45-46: This effect sets isClient to true when the component mounts, which is a common pattern to determine if the code is running on the client side.

packages/synapse-interface/contexts/UserProvider.tsx (6)
  • 1-4: The import statements look fine. No issues found.

  • 18-24: The introduction of the isClient state variable is a good way to ensure that certain effects only run on the client side. This can help to improve performance by reducing unnecessary server-side computations.

  • 44-46: This effect sets isClient to true when the component mounts. This is a common pattern for distinguishing between server-side and client-side rendering in React.

  • 48-54: This effect fetches price data when isClient is true. This is a good way to ensure that these fetch actions only run on the client side, which can help to improve performance.

  • 56-58: This effect sets the swap chain ID when chain changes. This is a good way to keep the swap chain ID in sync with the current chain.

  • 78-84: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [78-93]

This effect fetches and stores portfolio balances when isClient, address, and chain.id are truthy. This is a good way to ensure that this fetch action only runs on the client side and when the necessary data is available. The error handling in this effect is also good, as it logs an error message if the fetch action fails.

packages/synapse-interface/pages/pools/PoolCards.tsx (3)
  • 2-41: The PoolCards component is memoized using React.memo. This is a good practice for performance optimization as it prevents unnecessary re-renders of the component when the props do not change. However, it's important to note that React.memo only does a shallow comparison of props. If the props are complex objects, changes inside these objects may not trigger a re-render. In this case, pools is an object and synPrices is also likely to be an object. If these objects are being mutated directly somewhere in the code, the component may not re-render as expected. Consider using deep comparison or immutable data structures to ensure the component re-renders correctly when the data changes.

  • 14-16: The component returns null if ethPrice is falsy. This is a good practice for conditional rendering based on data availability. However, it's important to ensure that the parent component can handle the case where PoolCards returns null, to avoid any potential layout issues.

  • 31-38: The PoolCard component is being rendered with additional props (ethPrice, avaxPrice, synPrices). Ensure that the PoolCard component has been updated to accept and correctly use these new props.

packages/synapse-interface/pages/pools/PoolCard.tsx (5)
  • 18-31: The PoolCard component has been updated to use the memo function from React. This is a good practice as it helps to avoid unnecessary re-renders of the component, improving the performance of the application. However, ensure that the props passed to PoolCard are not deeply nested objects or arrays, as memo only does a shallow comparison of props. If the props are deeply nested objects or arrays, consider using a library like lodash's isEqual for deep comparison or normalize the data structure.

  • 32-38: The isClient state variable is initialized to false and then set to true in a useEffect hook. This is a common pattern used to prevent server-side rendering (SSR) of client-side code. It's a good practice for improving performance and avoiding errors related to accessing browser-specific APIs during SSR.

  • 46-68: The getSinglePoolData and getPoolApyData functions are now called with pool.chainId instead of chainId. This change should be fine as long as pool.chainId is always defined and valid when these functions are called. Also, these functions are now only called if isClient is true, which is a good practice to prevent unnecessary data fetching on the server side.

  • 70-86: The getStakedBalance function is now called with pool.chainId and pool.poolId[pool.chainId] instead of chainId and pool.poolId[chainId]. This change should be fine as long as pool.chainId and pool.poolId[pool.chainId] are always defined and valid when this function is called. Also, this function is now only called if address is truthy and isClient is true, which is a good practice to prevent unnecessary data fetching on the server side.

  • 113-117: The PoolHeader component is now called with address as Address instead of address. This change should be fine as long as address is always a valid Address when this component is rendered.

packages/synapse-interface/utils/actions/getPoolData.ts (5)
  • 1-9: The import statements have been reorganized and new imports have been added. Ensure that these new imports are used correctly in the code and that they are necessary for the functionality of the code.

  • 18-94: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [10-20]

The function signature for getBalanceData remains the same. No changes needed here.

  • 70-93: The function now calculates the lpTotalSupply and tokenBalances using the results from the multicall. This is a good optimization that reduces the number of RPC calls. However, ensure that the multicallData array always has the expected length and structure to avoid potential runtime errors.

  • 118-123: The getSinglePoolData function now fetches the ethPrice and avaxPrice if they are not provided in the prices argument. This is a good fallback mechanism that ensures the function always has the necessary data to perform its calculations.

  • 144-147: The getSinglePoolData function no longer includes virtualPrice and swapFee in its return value. Ensure that this change does not break any code that relies on these properties.

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

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Status

Actionable comments generated: 6

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 94f4097 and 84d568e.
Files selected for processing (10)
  • packages/synapse-interface/components/Pools/PoolCardBody.tsx (2 hunks)
  • packages/synapse-interface/components/Pools/PoolHeader.tsx (1 hunks)
  • packages/synapse-interface/contexts/UserProvider.tsx (5 hunks)
  • packages/synapse-interface/pages/pool/PoolBody.tsx (3 hunks)
  • packages/synapse-interface/pages/pool/[poolId].tsx (2 hunks)
  • packages/synapse-interface/pages/pools/PoolCard.tsx (3 hunks)
  • packages/synapse-interface/pages/pools/PoolCards.tsx (1 hunks)
  • packages/synapse-interface/utils/actions/getPoolApyData.ts (2 hunks)
  • packages/synapse-interface/utils/actions/getPoolData.ts (4 hunks)
  • packages/synapse-interface/utils/types/index.tsx (1 hunks)
Additional comments: 32
packages/synapse-interface/utils/types/index.tsx (1)
  • 46-52: The virtualPrice and swapFee properties in the PoolData type are now optional. This change should be reflected in all parts of the codebase where PoolData is used. Ensure that the code can handle cases where these properties are undefined.
  totalLocked: number
  totalLockedUSD: number
-  virtualPrice: bigint
+  virtualPrice?: bigint
  nativeTokens?: any
-  swapFee: bigint
+  swapFee?: bigint
packages/synapse-interface/pages/pools/PoolCards.tsx (2)
  • 2-41: The PoolCards component is memoized which is a good practice for performance optimization. It prevents unnecessary re-renders of the component when the props haven't changed. However, ensure that the props passed to this component are also memoized or are primitive values to fully benefit from this optimization.

  • 31-38: The PoolCard component is being passed additional props (ethPrice, avaxPrice, synPrices). Ensure that these props are being used appropriately within the PoolCard component and that they don't introduce unnecessary re-renders.

packages/synapse-interface/pages/pool/[poolId].tsx (3)
  • 37-40: The introduction of the isClient state variable is a good practice to prevent unnecessary data fetching and effects on the server side. This can improve performance and reduce server load.

  • 47-49: This useEffect hook sets isClient to true when the component mounts, which is a common pattern to determine if the code is running on the client side.

  • 69-74: This useEffect hook now only dispatches the resetPoolData action and fetches pool data if poolId is truthy and isClient is true. This is a good practice to prevent unnecessary data fetching and effects on the server side.

packages/synapse-interface/pages/pool/PoolBody.tsx (3)
  • 27-33: The introduction of the isClient state variable and its initialization to false is a good practice to prevent unnecessary data fetching and effects on the server side. This can improve performance and reduce the number of RPC calls.

  • 36-57: The changes made to the effects that fetch data and set the stakedBalance state variable are correct. The effects now only run on the client side, which can improve performance and reduce the number of RPC calls. The isClient variable is correctly included in the dependency array of these effects to ensure they run when its value changes.

  • 66-69: The isClient variable is correctly included in the dependency array of the effect that sets the stakedBalance state variable. This ensures that the effect runs when the value of isClient changes.

packages/synapse-interface/components/Pools/PoolHeader.tsx (4)
  • 1-2: The memo function is imported from the react library to optimize the PoolHeader component by avoiding unnecessary re-renders. This is a good practice for performance optimization.

  • 12-66: The PoolHeader component is now memoized using the memo function from the react library. This is a good practice for performance optimization. However, ensure that the props passed to this component are either primitives or objects with stable identities to avoid unnecessary re-renders.

  • 13-14: The PoolHeader component now expects pool and address as props. Ensure that all instances of this component throughout the codebase have been updated to pass these props.

  • 17-36: The canDeposit state is memoized using the useMemo hook. This is a good practice for performance optimization. However, ensure that the dependencies of this hook are correctly specified in the dependency array.

packages/synapse-interface/components/Pools/PoolCardBody.tsx (3)
  • 1-4: The import statements are well-organized and necessary for the code to function correctly.

  • 7-40: The PoolCardBody component is now memoized, which can help to avoid unnecessary re-renders and improve performance. The props are also properly typed, which can help to prevent bugs and improve code readability.

  • 1-45: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [42-84]

The PoolTokenIcons component is now memoized, which can help to avoid unnecessary re-renders and improve performance. The props are also properly typed, which can help to prevent bugs and improve code readability.

packages/synapse-interface/utils/actions/getPoolApyData.ts (4)
  • 2-8: The import statements have been updated to reflect the changes in the function. Ensure that the imported modules and functions are available and correctly exported from their respective files.

  • 48-63: The readContracts function is now directly using the balanceOf and totalSupply functions from the erc20ABI ABI. This is a good optimization as it reduces the number of RPC calls. However, ensure that the erc20ABI ABI includes these functions and that they return the expected results.

  • 67-71: The results from the readContracts function are being assigned to variables. Ensure that the function returns the expected results in the correct order.

  • 73-74: The synapsePerSecond variable is being assigned a value from the synapsePerSecondResult variable or 0n if synapsePerSecondResult is null or undefined. This is a good practice as it ensures that synapsePerSecond always has a value.

Overall, the changes in this file are well-structured and improve the performance of the getPoolApyData function. However, it's important to verify that the changes work as expected in the context of the entire application.

packages/synapse-interface/contexts/UserProvider.tsx (6)
  • 1-4: The import statements look fine. No issues found.

  • 18-24: The new state variable isClient is initialized correctly with useState. The isClient state variable is used to control when data fetching and effects are executed, which can improve performance on the client side.

  • 44-46: This effect sets isClient to true when the component mounts. This is a common pattern for detecting whether code is running on the client side or server side in a Next.js application.

  • 48-54: This effect dispatches several actions to fetch price data when isClient is true. This ensures that these actions are only dispatched on the client side, which can improve performance.

  • 56-58: This effect dispatches the setSwapChainId action when chain is defined. This is a good practice as it ensures that the chain.id is always up-to-date in the Redux store.

  • 78-84: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [79-93]

This effect fetches and stores portfolio balances when isClient is true and address and chain.id are defined. It also resets the portfolio state when address is not defined. This is a good practice as it ensures that the portfolio balances are always up-to-date in the Redux store and that the portfolio state is reset when the user disconnects their wallet.

packages/synapse-interface/utils/actions/getPoolData.ts (4)
  • 1-9: The import statements have been updated to reflect the new dependencies of the functions in this file. Ensure that these dependencies are correctly installed and imported.

  • 18-94: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [10-20]

The function signature of getBalanceData remains the same. The function now uses multicall to fetch all the data in a single RPC call, which is a good performance optimization.

  • 118-123: The getSinglePoolData function now fetches the ethPrice and avaxPrice directly within its body, instead of relying on getCorePoolData. This change reduces the number of RPC calls and improves performance.

  • 144-148: The getSinglePoolData function no longer includes virtualPrice and swapFee in its return value. Ensure that this change does not break any code that relies on these properties.

packages/synapse-interface/pages/pools/PoolCard.tsx (2)
  • 18-31: The PoolCard component has been updated to use memoization. This is a good practice for performance optimization as it prevents unnecessary re-renders of the component. However, ensure that the props passed to PoolCard are not deeply nested objects or arrays, as React's memo only does a shallow comparison, and changes in properties of a nested object or elements of an array will not trigger a re-render.

  • 32-38: The isClient state variable is initialized to false and then set to true in a useEffect hook. This is a common pattern for preventing server-side rendering of client-side only logic, which can improve performance.

@abtestingalpha abtestingalpha merged commit c5a4ae3 into master Nov 3, 2023
51 checks passed
@abtestingalpha abtestingalpha deleted the fe/reduce-rpc-calls branch November 3, 2023 15:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant