diff --git a/components/OrchestratorList/index.tsx b/components/OrchestratorList/index.tsx index 1370086e..a4c3f6e7 100644 --- a/components/OrchestratorList/index.tsx +++ b/components/OrchestratorList/index.tsx @@ -169,6 +169,20 @@ const OrchestratorList = ({ }, }); + // Pre-compute formatted values to avoid useMemo in Cell render functions + const formattedFeeCut = numbro( + 1 - Number(row.feeShare) / 1000000 + ).format({ mantissa: 0, output: "percent" }); + const formattedRewardCut = numbro( + Number(row.rewardCut) / 1000000 + ).format({ mantissa: 0, output: "percent" }); + const formattedRewardCalls = + pools.length > 0 + ? `${numbro(rewardCalls) + .divide(pools.length) + .format({ mantissa: 0, output: "percent" })}` + : "0%"; + return { ...row, daysSinceChangeParams: @@ -191,6 +205,10 @@ const OrchestratorList = ({ ninetyDayVolumeETH: Number(row.ninetyDayVolumeETH), totalActiveStake: Number(protocolData?.totalActiveStake), totalStake: Number(row.totalStake), + // Pre-formatted values for Cell rendering + formattedFeeCut, + formattedRewardCut, + formattedRewardCalls, }, }; }) @@ -339,35 +357,13 @@ const OrchestratorList = ({ accessor: (row) => row.earningsComputed, id: "earnings", Cell: ({ row }) => { - const isNewlyActive = useMemo( - () => row.values.earnings.isNewlyActive, - [row.values?.earnings?.isNewlyActive] - ); - const feeCut = useMemo( - () => - numbro(1 - Number(row.values.earnings.feeShare) / 1000000).format( - { mantissa: 0, output: "percent" } - ), - [row.values.earnings.feeShare] - ); - const rewardCut = useMemo( - () => - numbro(Number(row.values.earnings.rewardCut) / 1000000).format({ - mantissa: 0, - output: "percent", - }), - [row.values.earnings.rewardCut] - ); - const rewardCalls = useMemo( - () => - `${numbro(row.values.earnings.rewardCalls) - .divide(row.values.earnings.rewardCallLength) - .format({ mantissa: 0, output: "percent" })}`, - [ - row.values.earnings.rewardCalls, - row.values.earnings.rewardCallLength, - ] - ); + // Use pre-computed values from accessor instead of useMemo in render + const { + isNewlyActive, + formattedFeeCut: feeCut, + formattedRewardCut: rewardCut, + formattedRewardCalls: rewardCalls, + } = row.values.earnings; return ( diff --git a/components/StakeTransactions/index.tsx b/components/StakeTransactions/index.tsx index d4511cee..a9fba43b 100644 --- a/components/StakeTransactions/index.tsx +++ b/components/StakeTransactions/index.tsx @@ -1,5 +1,6 @@ import { Box, Card, Flex, Heading, Text } from "@livepeer/design-system"; import { UnbondingLock } from "apollo"; +import { useMemo } from "react"; import { parseEther } from "viem"; import { @@ -12,19 +13,22 @@ import RedelegateFromUndelegated from "../RedelegateFromUndelegated"; import WithdrawStake from "../WithdrawStake"; const Index = ({ delegator, transcoders, currentRound, isMyAccount }) => { - const pendingStakeTransactions: Array = - delegator.unbondingLocks.filter( + const isBonded = !!delegator.delegate; + + const pendingStakeTransactions = useMemo(() => { + const roundId = parseInt(currentRound.id, 10); + return delegator.unbondingLocks.filter( (item: UnbondingLock) => - item.withdrawRound && - +item.withdrawRound > parseInt(currentRound.id, 10) + item.withdrawRound && +item.withdrawRound > roundId ); - const completedStakeTransactions: Array = - delegator.unbondingLocks.filter( + }, [delegator.unbondingLocks, currentRound.id]); + const completedStakeTransactions = useMemo(() => { + const roundId = parseInt(currentRound.id, 10); + return delegator.unbondingLocks.filter( (item: UnbondingLock) => - item.withdrawRound && - +item.withdrawRound <= parseInt(currentRound.id, 10) + item.withdrawRound && +item.withdrawRound <= roundId ); - const isBonded = !!delegator.delegate; + }, [delegator.unbondingLocks, currentRound.id]); return (