diff --git a/src/components/transactions/MigrateV3/MigrateV3ModalContent.tsx b/src/components/transactions/MigrateV3/MigrateV3ModalContent.tsx index 514442d561..12cd4a5da5 100644 --- a/src/components/transactions/MigrateV3/MigrateV3ModalContent.tsx +++ b/src/components/transactions/MigrateV3/MigrateV3ModalContent.tsx @@ -1,7 +1,7 @@ import { Trans } from '@lingui/macro'; import { Box, Button } from '@mui/material'; import { useRouter } from 'next/router'; -import { useCallback } from 'react'; +import { useMemo } from 'react'; import { UserMigrationReserves } from 'src/hooks/migration/useUserMigrationReserves'; import { UserSummaryForMigration } from 'src/hooks/migration/useUserSummaryForMigration'; import { useModalContext } from 'src/hooks/useModal'; @@ -12,6 +12,7 @@ import { selectSelectedBorrowReservesForMigrationV3, } from 'src/store/v3MigrationSelectors'; import { CustomMarket, getNetworkConfig } from 'src/utils/marketsAndNetworksConfig'; +import { useShallow } from 'zustand/shallow'; import { TxErrorView } from '../FlowCommons/Error'; import { GasEstimationError } from '../FlowCommons/GasEstimationError'; @@ -40,22 +41,31 @@ export const MigrateV3ModalContent = ({ const router = useRouter(); const networkConfig = getNetworkConfig(currentChainId); - const { supplyPositions, borrowPositions } = useRootStore( - useCallback( - (state) => ({ - supplyPositions: selectedUserSupplyReservesForMigration( - state.selectedMigrationSupplyAssets, - userMigrationReserves.supplyReserves, - userMigrationReserves.isolatedReserveV3 - ), - borrowPositions: selectSelectedBorrowReservesForMigrationV3( - state.selectedMigrationBorrowAssets, - toUserSummaryForMigration, - userMigrationReserves - ), - }), - [userMigrationReserves, toUserSummaryForMigration] - ) + const { selectedMigrationSupplyAssets, selectedMigrationBorrowAssets } = useRootStore( + useShallow((state) => ({ + selectedMigrationSupplyAssets: state.selectedMigrationSupplyAssets, + selectedMigrationBorrowAssets: state.selectedMigrationBorrowAssets, + })) + ); + + const supplyPositions = useMemo( + () => + selectedUserSupplyReservesForMigration( + selectedMigrationSupplyAssets, + userMigrationReserves.supplyReserves, + userMigrationReserves.isolatedReserveV3 + ), + [selectedMigrationSupplyAssets, userMigrationReserves] + ); + + const borrowPositions = useMemo( + () => + selectSelectedBorrowReservesForMigrationV3( + selectedMigrationBorrowAssets, + toUserSummaryForMigration, + userMigrationReserves + ), + [selectedMigrationBorrowAssets, toUserSummaryForMigration, userMigrationReserves] ); const supplyAssets = supplyPositions.map((supplyAsset) => { diff --git a/src/modules/migration/MigrationListItem.tsx b/src/modules/migration/MigrationListItem.tsx index 213d29bdfa..e3f5489bb5 100644 --- a/src/modules/migration/MigrationListItem.tsx +++ b/src/modules/migration/MigrationListItem.tsx @@ -162,7 +162,7 @@ export const MigrationListItem = ({ - +