Merge pull request #496 from balancer/fix/reduce-rpc-calls-beets

fix: reduce rpc calls for beets
balancer · Jan 23, 2025 · 7c7246c · 7c7246c
2 parents 16182cf + 2602736
commit 7c7246c
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 75 deletions.
diff --git a/apps/beets-frontend-v3/app/layouts/base-layout.tsx b/apps/beets-frontend-v3/app/layouts/base-layout.tsx
@@ -1,9 +1,9 @@
 import { BeetsLogoType } from '@/lib/components/imgs/BeetsLogoType'
-import { LzBeetsMigrateModal } from '@/lib/components/modals/LzBeetsMigrateModal'
 import { NavBarContainer } from '@/lib/components/navs/NavBarContainer'
 import { Footer } from '@repo/lib/shared/components/navs/Footer'
 import NextTopLoader from 'nextjs-toploader'
 import { PropsWithChildren } from 'react'
+import { LzBeetsMigrate } from '@/lib/modules/lzbeets-migrate/LzBeetsMigrate'
 
 export function BaseLayout({
   children,
@@ -19,7 +19,7 @@ export function BaseLayout({
       <NextTopLoader color="#7f6ae8" showSpinner={false} />
       <NavBarContainer />
       {children}
-      {renderLzBeetsModal && <LzBeetsMigrateModal />}
+      {renderLzBeetsModal && <LzBeetsMigrate />}
       <Footer
         logoType={<BeetsLogoType />}
         subTitle="Beets is your ultimate destination for liquid-staked tokens, real yield, and AMM innovation."

diff --git a/apps/beets-frontend-v3/lib/modules/lst/Lst.tsx b/apps/beets-frontend-v3/lib/modules/lst/Lst.tsx
@@ -34,8 +34,6 @@ import { LstStake } from './components/LstStake'
 import { LstUnstake } from './components/LstUnstake'
 import { LstUnstakeModal } from './modals/LstUnstakeModal'
 import { LstWithdraw } from './components/LstWithdraw'
-import { useGetUserWithdraws, UserWithdraw } from './hooks/useGetUserWithdraws'
-import { useGetUserNumWithdraws } from './hooks/useGetUserNumWithdraws'
 import { useGetStakedSonicData } from './hooks/useGetStakedSonicData'
 import { bn, fNum, fNumCustom } from '@repo/lib/shared/utils/numbers'
 import { ZenGarden } from '@repo/lib/shared/components/zen/ZenGarden'
@@ -95,22 +93,14 @@ function LstForm() {
     isWithdrawTab,
     stakeTransactionSteps,
     unstakeTransactionSteps,
-    chain,
     nativeAsset,
     stakedAsset,
     getAmountShares,
     getAmountAssets,
     isRateLoading,
   } = useLst()
 
-  const { userNumWithdraws, isLoading: isUserNumWithdrawsLoading } = useGetUserNumWithdraws(chain)
-
-  const { data: UserWithdraws, isLoading: isWithdrawalsLoading } = useGetUserWithdraws(
-    chain,
-    userNumWithdraws
-  )
-  const isLoading =
-    !isMounted || isBalancesLoading || isWithdrawalsLoading || isUserNumWithdrawsLoading
+  const isLoading = !isMounted || isBalancesLoading
 
   const loadingText = isLoading ? 'Loading...' : undefined
 
@@ -181,12 +171,7 @@ function LstForm() {
           </VStack>
           {isStakeTab && <LstStake />}
           {isUnstakeTab && <LstUnstake />}
-          {isWithdrawTab && !isWithdrawalsLoading && (
-            <LstWithdraw
-              isLoading={isWithdrawalsLoading || isUserNumWithdrawsLoading}
-              withdrawalsData={UserWithdraws as UserWithdraw[]}
-            />
-          )}
+          {isWithdrawTab && <LstWithdraw />}
         </Box>
         {/* <HStack>
           {isStakedSonicDataLoading ? (

diff --git a/apps/beets-frontend-v3/lib/modules/lst/components/LstWithdraw.tsx b/apps/beets-frontend-v3/lib/modules/lst/components/LstWithdraw.tsx
@@ -8,18 +8,25 @@ import { useEffect } from 'react'
 import { useState } from 'react'
 import { LstWithdrawModal } from '../modals/LstWithdrawModal'
 import { useDisclosure } from '@chakra-ui/react'
-import { UserWithdraw } from '../hooks/useGetUserWithdraws'
+import { useGetUserWithdraws, UserWithdraw } from '../hooks/useGetUserWithdraws'
+import { useGetUserNumWithdraws } from '../hooks/useGetUserNumWithdraws'
 
-export function LstWithdraw({
-  withdrawalsData,
-  isLoading,
-}: {
-  withdrawalsData: UserWithdraw[]
-  isLoading: boolean
-}) {
-  const { stakedAsset, pagination, setPagination, first, skip, chain } = useLst()
+export function LstWithdraw() {
+  const { stakedAsset, pagination, setPagination, first, skip, chain, isWithdrawTab } = useLst()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  const { userNumWithdraws, isLoading: isUserNumWithdrawsLoading } = useGetUserNumWithdraws(
+    chain,
+    isWithdrawTab
+  )
+
+  const { data: withdrawalsData, isLoading: isWithdrawalsLoading } = useGetUserWithdraws(
+    chain,
+    userNumWithdraws,
+    isWithdrawTab
+  )
+
+  const isLoading = isWithdrawalsLoading || isUserNumWithdrawsLoading
   const withdrawalsDataOrdered = orderBy(withdrawalsData, 'requestTimestamp', 'desc')
   const count = withdrawalsDataOrdered.length
   const paginationProps = getPaginationProps(count || 0, pagination, setPagination, false, true)

diff --git a/apps/beets-frontend-v3/lib/modules/lst/hooks/useGetUserNumWithdraws.tsx b/apps/beets-frontend-v3/lib/modules/lst/hooks/useGetUserNumWithdraws.tsx
@@ -7,11 +7,12 @@ import { useReadContract } from 'wagmi'
 import { sonicStakingAbi } from '@repo/lib/modules/web3/contracts/abi/beets/generated'
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 
-export function useGetUserNumWithdraws(chain: GqlChain) {
-  const { isConnected, userAddress } = useUserAccount()
+export function useGetUserNumWithdraws(chain: GqlChain, enabled: boolean) {
   const chainId = getChainId(chain)
 
+  const { isConnected, userAddress } = useUserAccount()
   const { shouldChangeNetwork } = useChainSwitch(chainId)
+
   const config = getNetworkConfig(chainId)
 
   const query = useReadContract({
@@ -20,7 +21,7 @@ export function useGetUserNumWithdraws(chain: GqlChain) {
     address: config.contracts.beets?.lstStakingProxy,
     functionName: 'userNumWithdraws',
     args: [userAddress],
-    query: { enabled: isConnected && !shouldChangeNetwork && !!userAddress },
+    query: { enabled: isConnected && !shouldChangeNetwork && !!userAddress && !!enabled },
   })
 
   return {

diff --git a/apps/beets-frontend-v3/lib/modules/lst/hooks/useGetUserWithdraws.tsx b/apps/beets-frontend-v3/lib/modules/lst/hooks/useGetUserWithdraws.tsx
@@ -17,7 +17,11 @@ export type UserWithdraw = {
   validatorId: bigint
 }
 
-export function useGetUserWithdraws(chain: GqlChain, userNumWithdraws: bigint | undefined) {
+export function useGetUserWithdraws(
+  chain: GqlChain,
+  userNumWithdraws: bigint | undefined,
+  enabled: boolean
+) {
   const { isConnected, userAddress } = useUserAccount()
   const chainId = getChainId(chain)
 
@@ -30,7 +34,10 @@ export function useGetUserWithdraws(chain: GqlChain, userNumWithdraws: bigint |
     address: config.contracts.beets?.lstWithdrawRequestHelper,
     functionName: 'getUserWithdraws',
     args: [userAddress, 0n, userNumWithdraws || 0n, false],
-    query: { enabled: isConnected && !shouldChangeNetwork && !!userAddress && !!userNumWithdraws },
+    query: {
+      enabled:
+        isConnected && !shouldChangeNetwork && !!userAddress && !!userNumWithdraws && !!enabled,
+    },
   })
 
   return {

diff --git a/apps/beets-frontend-v3/lib/modules/lst/hooks/useLstUnstakeStep.tsx b/apps/beets-frontend-v3/lib/modules/lst/hooks/useLstUnstakeStep.tsx
@@ -24,9 +24,15 @@ export function useLstUnstakeStep(sharesAmount: string, chain: GqlChain, enabled
   const { getTransaction } = useTransactionState()
   const { isConnected } = useUserAccount()
   const { refetchBalances } = useTokenBalances()
-  const { userNumWithdraws, refetch: refetchUserNumWithdraws } = useGetUserNumWithdraws(chain)
-  const { refetch: refetchWithdrawals } = useGetUserWithdraws(chain, userNumWithdraws)
+
+  const { userNumWithdraws, refetch: refetchUserNumWithdraws } = useGetUserNumWithdraws(
+    chain,
+    enabled
+  )
+
+  const { refetch: refetchWithdrawals } = useGetUserWithdraws(chain, userNumWithdraws, enabled)
   const { chooseValidatorsForUnstakeAmount } = useGetAmountDelegatedPerValidator(chain)
+
   const validators = chooseValidatorsForUnstakeAmount(parseUnits(sharesAmount, 18))
 
   function onSuccess() {

diff --git a/apps/beets-frontend-v3/lib/modules/lst/hooks/useLstWithdrawStep.tsx b/apps/beets-frontend-v3/lib/modules/lst/hooks/useLstWithdrawStep.tsx
@@ -26,8 +26,13 @@ export function useLstWithdrawStep(
   const { getTransaction } = useTransactionState()
   const { isConnected } = useUserAccount()
   const { refetchBalances } = useTokenBalances()
-  const { userNumWithdraws, refetch: refetchUserNumWithdraws } = useGetUserNumWithdraws(chain)
-  const { refetch: refetchWithdrawals } = useGetUserWithdraws(chain, userNumWithdraws)
+
+  const { userNumWithdraws, refetch: refetchUserNumWithdraws } = useGetUserNumWithdraws(
+    chain,
+    enabled
+  )
+
+  const { refetch: refetchWithdrawals } = useGetUserWithdraws(chain, userNumWithdraws, enabled)
 
   const labels: TransactionLabels = {
     init: 'Withdraw',

diff --git a/apps/beets-frontend-v3/lib/modules/lzbeets-migrate/LzBeetsMigrate.tsx b/apps/beets-frontend-v3/lib/modules/lzbeets-migrate/LzBeetsMigrate.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { lzBeetsAddress, LzBeetsMigrateModal, sonicChainId } from './LzBeetsMigrateModal'
+import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
+import { useBalance } from 'wagmi'
+import { bn } from '@repo/lib/shared/utils/numbers'
+
+export function LzBeetsMigrate() {
+  const { userAddress } = useUserAccount()
+  const { data: balanceData } = useBalance({
+    chainId: sonicChainId,
+    address: userAddress,
+    token: lzBeetsAddress,
+  })
+
+  const hasBalance = bn(balanceData?.value || 0n).gt(0)
+
+  // only need balance for this token
+  const lzBeetsToken = {
+    address: '0x1e5fe95fb90ac0530f581c617272cd0864626795',
+    name: 'Fantom lzBEETS',
+    symbol: 'lzBEETS',
+    decimals: 18,
+    chain: GqlChain.Sonic,
+    chainId: 146,
+    logoURI:
+      'https://assets.coingecko.com/coins/images/19158/standard/beets-icon-large.png?1696518608',
+    priority: 0,
+    tradable: true,
+    isErc4626: false,
+    isBufferAllowed: true,
+    coingeckoId: null,
+  }
+
+  return hasBalance ? (
+    <TokenBalancesProvider initTokens={[lzBeetsToken]}>
+      <LzBeetsMigrateModal />
+    </TokenBalancesProvider>
+  ) : null
+}
diff --git a/...components/modals/LzBeetsMigrateModal.tsx → ...s/lzbeets-migrate/LzBeetsMigrateModal.tsx b/...components/modals/LzBeetsMigrateModal.tsx → ...s/lzbeets-migrate/LzBeetsMigrateModal.tsx
@@ -13,10 +13,6 @@ import {
   Text,
   useDisclosure,
 } from '@chakra-ui/react'
-import {
-  TokenBalancesProvider,
-  useTokenBalances,
-} from '@repo/lib/modules/tokens/TokenBalancesProvider'
 import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
 import { ConnectWallet } from '@repo/lib/modules/web3/ConnectWallet'
 import { NetworkSwitchButton, useChainSwitch } from '@repo/lib/modules/web3/useChainSwitch'
@@ -26,14 +22,13 @@ import { ErrorAlert } from '@repo/lib/shared/components/errors/ErrorAlert'
 import { getBlockExplorerTxUrl } from '@repo/lib/shared/utils/blockExplorer'
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { bn } from '@repo/lib/shared/utils/numbers'
-import { QueryObserverResult } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { Address, formatUnits } from 'viem'
 import { type BaseError, useBalance, useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
 
-const sonicChainId = 146
-const lzBeetsAddress = '0x1E5fe95fB90ac0530F581C617272cd0864626795'
+export const sonicChainId = 146
+export const lzBeetsAddress = '0x1E5fe95fB90ac0530F581C617272cd0864626795'
 const migratorAddress = '0x5f9a5CD0B77155AC1814EF6Cd9D82dA53d05E386'
 
 function MigrationButton({
@@ -43,7 +38,7 @@ function MigrationButton({
 }: {
   balance: bigint
   isBalancesRefetching: boolean
-  refetchBalances: () => Promise<QueryObserverResult<unknown, Error>[]>
+  refetchBalances: () => void
 }) {
   const { data: hash, writeContract, isPending, error } = useWriteContract()
   const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
@@ -195,37 +190,15 @@ function ApproveButton({
 }
 
 export function LzBeetsMigrateModal() {
-  // only need balance for this token
-  const lzBeetsToken = {
-    address: '0x1e5fe95fb90ac0530f581c617272cd0864626795',
-    name: 'Fantom lzBEETS',
-    symbol: 'lzBEETS',
-    decimals: 18,
-    chain: GqlChain.Sonic,
-    chainId: 146,
-    logoURI:
-      'https://assets.coingecko.com/coins/images/19158/standard/beets-icon-large.png?1696518608',
-    priority: 0,
-    tradable: true,
-    isErc4626: false,
-    isBufferAllowed: true,
-    coingeckoId: null,
-  }
-
-  return (
-    <TokenBalancesProvider initTokens={[lzBeetsToken]}>
-      <LzBeetsMigrateModalContent />
-    </TokenBalancesProvider>
-  )
-}
-
-export function LzBeetsMigrateModalContent() {
   const { shouldChangeNetwork } = useChainSwitch(sonicChainId)
   const [shouldShow, setShouldShow] = useState(true)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { isConnected, userAddress } = useUserAccount()
-  const { refetchBalances, isBalancesRefetching } = useTokenBalances()
-  const { data: balanceData } = useBalance({
+  const {
+    data: balanceData,
+    refetch,
+    isRefetching,
+  } = useBalance({
     chainId: sonicChainId,
     address: userAddress,
     token: lzBeetsAddress,
@@ -278,16 +251,15 @@ export function LzBeetsMigrateModalContent() {
             bridging to Sonic. Claim your BEETS on Sonic now.
           </Text>
         </ModalBody>
-
         <ModalFooter alignItems="flex-start" flexDirection="column">
           {isConnected ? (
             shouldChangeNetwork ? (
               <NetworkSwitchButton chainId={sonicChainId} />
             ) : hasAllowance ? (
               <MigrationButton
                 balance={balanceData?.value || 0n}
-                isBalancesRefetching={isBalancesRefetching}
-                refetchBalances={refetchBalances}
+                isBalancesRefetching={isRefetching}
+                refetchBalances={refetch}
               />
             ) : (
               <ApproveButton