fix: zustand, migrate to createWithEqualityFn (#7220)

src/components/NavBar/Bag.tsx

@@ -4,7 +4,6 @@ import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons'
 import { useBag, useSellAsset } from 'nft/hooks'
 import { useCallback } from 'react'
 import styled from 'styled-components'
-import { shallow } from 'zustand/shallow'
 
 const CounterDot = styled.div`
   background-color: ${({ theme }) => theme.accent1};
@@ -26,10 +25,7 @@ export const Bag = () => {
   const sellAssets = useSellAsset((state) => state.sellAssets)
   const isProfilePage = useIsNftProfilePage()
 
-  const { bagExpanded, setBagExpanded } = useBag(
-    ({ bagExpanded, setBagExpanded }) => ({ bagExpanded, setBagExpanded }),
-    shallow
-  )
+  const { bagExpanded, setBagExpanded } = useBag(({ bagExpanded, setBagExpanded }) => ({ bagExpanded, setBagExpanded }))
 
   const handleIconClick = useCallback(() => {
     setBagExpanded({ bagExpanded: !bagExpanded })

src/nft/components/bag/Bag.tsx

@@ -13,7 +13,6 @@ import { formatAssetEventProperties, recalculateBagUsingPooledAssets } from 'nft
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { Z_INDEX } from 'theme/zIndex'
-import { shallow } from 'zustand/shallow'
 
 import * as styles from './Bag.css'
 import { BagContent } from './BagContent'
@@ -98,20 +97,18 @@ const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
 )
 
 const Bag = () => {
-  const { resetSellAssets, sellAssets } = useSellAsset(
-    ({ reset, sellAssets }) => ({
+  const { resetSellAssets, sellAssets } = useSellAsset(({ reset, sellAssets }) => ({
     resetSellAssets: reset,
     sellAssets,
-    }),
-    shallow
-  )
+  }))
 
   const { setProfilePageState } = useProfilePageState(({ setProfilePageState }) => ({ setProfilePageState }))
 
-  const { bagStatus, bagIsLocked, reset, bagExpanded, toggleBag, setBagExpanded } = useBag(
-    (state) => ({ ...state, bagIsLocked: state.isLocked, uncheckedItemsInBag: state.itemsInBag }),
-    shallow
-  )
+  const { bagStatus, bagIsLocked, reset, bagExpanded, toggleBag, setBagExpanded } = useBag((state) => ({
+    ...state,
+    bagIsLocked: state.isLocked,
+    uncheckedItemsInBag: state.itemsInBag,
+  }))
   const { uncheckedItemsInBag } = useBag(({ itemsInBag }) => ({ uncheckedItemsInBag: itemsInBag }))
 
   const isProfilePage = useIsNftProfilePage()

src/nft/components/bag/BagFooter.tsx

@@ -37,7 +37,6 @@ import { AlertTriangle, ChevronDown } from 'react-feather'
 import { InterfaceTrade, TradeFillType, TradeState } from 'state/routing/types'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme'
-import { shallow } from 'zustand/shallow'
 
 import { BuyButtonStateData, BuyButtonStates, getBuyButtonStateData } from './ButtonStates'
 
@@ -272,7 +271,7 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
   const { account, chainId, connector } = useWeb3React()
   const connected = Boolean(account && chainId)
   const totalEthPrice = useBagTotalEthPrice()
-  const { inputCurrency } = useTokenInput(({ inputCurrency }) => ({ inputCurrency }), shallow)
+  const { inputCurrency } = useTokenInput(({ inputCurrency }) => ({ inputCurrency }))
   const setInputCurrency = useTokenInput((state) => state.setInputCurrency)
   const defaultCurrency = useCurrency('ETH')
   const inputCurrencyBalance = useTokenBalance(
@@ -284,15 +283,12 @@ export const BagFooter = ({ setModalIsOpen, eventProperties }: BagFooterProps) =
     bagStatus,
     setBagExpanded,
     setBagStatus,
-  } = useBag(
-    ({ isLocked, bagStatus, setBagExpanded, setBagStatus }) => ({
+  } = useBag(({ isLocked, bagStatus, setBagExpanded, setBagStatus }) => ({
     isLocked,
     bagStatus,
     setBagExpanded,
     setBagStatus,
-    }),
-    shallow
-  )
+  }))
   const [tokenSelectorOpen, setTokenSelectorOpen] = useState(false)
   const isPending = PENDING_BAG_STATUSES.includes(bagStatus)
   const activeCurrency = inputCurrency ?? defaultCurrency

src/nft/components/card/index.tsx

@@ -6,7 +6,6 @@ import { useBag } from 'nft/hooks'
 import { GenieAsset, UniformAspectRatio, UniformAspectRatios, WalletAsset } from 'nft/types'
 import { floorFormatter } from 'nft/utils'
 import { ReactNode } from 'react'
-import { shallow } from 'zustand/shallow'
 
 interface NftCardProps {
   asset: GenieAsset | WalletAsset
@@ -70,13 +69,10 @@ export const NftCard = ({
     isDisabled,
     onClick: onButtonClick,
   })
-  const { bagExpanded, setBagExpanded } = useBag(
-    (state) => ({
+  const { bagExpanded, setBagExpanded } = useBag((state) => ({
     bagExpanded: state.bagExpanded,
     setBagExpanded: state.setBagExpanded,
-    }),
-    shallow
-  )
+  }))
 
   const collectionNft = 'marketplace' in asset
   const profileNft = 'asset_contract' in asset

src/nft/components/profile/list/ListPage.tsx

@@ -26,7 +26,6 @@ import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
-import { shallow } from 'zustand/shallow'
 
 import { ListModal } from './Modal/ListModal'
 import { NFTListingsGrid } from './NFTListingsGrid'
@@ -192,8 +191,7 @@ export const ListPage = () => {
       setGlobalMarketplaces,
       sellAssets,
       issues,
-    }),
-    shallow
+    })
   )
   const { listings, collectionsRequiringApproval, setLooksRareNonce, setCollectionStatusAndCallback } = useNFTList(
     ({ listings, collectionsRequiringApproval, setLooksRareNonce, setCollectionStatusAndCallback }) => ({
@@ -201,8 +199,7 @@ export const ListPage = () => {
       collectionsRequiringApproval,
       setLooksRareNonce,
       setCollectionStatusAndCallback,
-    }),
-    shallow
+    })
   )
 
   const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])

src/nft/components/profile/list/ListingButton.tsx

@@ -5,7 +5,6 @@ import { useIsMobile, useSellAsset } from 'nft/hooks'
 import { useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { BREAKPOINTS } from 'theme'
-import { shallow } from 'zustand/shallow'
 
 import { findListingIssues } from './utils'
 
@@ -37,8 +36,7 @@ export const ListingButton = ({ onClick }: { onClick: () => void }) => {
       toggleShowResolveIssues,
       issues,
       setIssues,
-    }),
-    shallow
+    })
   )
   const [showWarning, setShowWarning] = useState(false)
   const isMobile = useIsMobile()

src/nft/components/profile/list/Modal/ListModal.tsx

@@ -16,7 +16,6 @@ import styled from 'styled-components'
 import { BREAKPOINTS, ThemedText } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
-import { shallow } from 'zustand/shallow'
 
 import { TitleRow } from '../shared'
 import { ListModalSection, Section } from './ListModalSection'
@@ -64,8 +63,7 @@ export const ListModal = ({ overlayClick }: { overlayClick: () => void }) => {
         getLooksRareNonce,
         collectionsRequiringApproval,
         listings,
-      }),
-      shallow
+      })
     )
 
   const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])

src/nft/components/profile/list/utils.ts

@@ -14,7 +14,6 @@ import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea'
 import { CollectionRow, Listing, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
 import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
 import { Dispatch, useEffect } from 'react'
-import { shallow } from 'zustand/shallow'
 
 export async function approveCollectionRow(
   collectionRow: CollectionRow,
@@ -134,8 +133,7 @@ export function useSubscribeListingState() {
     ({ setListings, setCollectionsRequiringApproval }) => ({
       setListings,
       setCollectionsRequiringApproval,
-    }),
-    shallow
+    })
   )
   useEffect(() => {
     const [newCollectionsToApprove, newListings] = getListings(sellAssets)

src/nft/components/profile/view/ProfilePage.tsx

@@ -24,7 +24,6 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { easings, useSpring } from 'react-spring'
 import styled from 'styled-components'
-import { shallow } from 'zustand/shallow'
 
 import { EmptyWalletModule } from './EmptyWalletContent'
 import * as styles from './ProfilePage.css'
@@ -63,12 +62,9 @@ export const ProfilePage = () => {
   const { address } = useWalletBalance()
   const walletCollections = useWalletCollections((state) => state.walletCollections)
   const setWalletCollections = useWalletCollections((state) => state.setWalletCollections)
-  const { resetSellAssets } = useSellAsset(
-    ({ reset }) => ({
+  const { resetSellAssets } = useSellAsset(({ reset }) => ({
     resetSellAssets: reset,
-    }),
-    shallow
-  )
+  }))
   const sellAssets = useSellAsset((state) => state.sellAssets)
   const toggleBag = useBag((state) => state.toggleBag)
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()

src/nft/hooks/useBag.ts

 import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
 import { BagItem, BagItemStatus, BagStatus, UpdatedGenieAsset } from 'nft/types'
 import { v4 as uuidv4 } from 'uuid'
-import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 
 interface BagState {
   bagStatus: BagStatus
@@ -25,7 +26,7 @@ interface BagState {
   reset: () => void
 }
 
-export const useBag = create<BagState>()(
+export const useBag = createWithEqualityFn<BagState>()(
   devtools(
     (set, get) => ({
       bagStatus: BagStatus.ADDING_TO_BAG,
@@ -151,5 +152,6 @@ export const useBag = create<BagState>()(
         }),
     }),
     { name: 'useBag' }
-  )
+  ),
+  shallow
 )

src/nft/hooks/useFetchAssets.ts

@@ -5,7 +5,6 @@ import { buildNftTradeInputFromBagItems, recalculateBagUsingPooledAssets } from
 import { getNextBagState, getPurchasableAssets } from 'nft/utils/bag'
 import { buildRouteResponse } from 'nft/utils/nftRoute'
 import { useCallback, useMemo } from 'react'
-import { shallow } from 'zustand/shallow'
 
 import { useBag } from './useBag'
 import { usePurchaseAssets } from './usePurchaseAssets'
@@ -39,8 +38,7 @@ export function useFetchAssets(): () => Promise<void> {
       isLocked,
       setLocked,
       setItemsInBag,
-    }),
-    shallow
+    })
   )
   const tokenTradeInput = useTokenInput((state) => state.tokenTradeInput)
   const itemsInBag = useMemo(() => recalculateBagUsingPooledAssets(uncheckedItemsInBag), [uncheckedItemsInBag])

src/nft/hooks/useNFTList.ts

 import { CollectionRow, ListingRow, ListingStatus } from 'nft/types'
-import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 
 interface NFTListState {
   looksRareNonce: number
@@ -18,7 +19,7 @@ interface NFTListState {
   ) => void
 }
 
-export const useNFTList = create<NFTListState>()(
+export const useNFTList = createWithEqualityFn<NFTListState>()(
   devtools((set, get) => ({
     looksRareNonce: 0,
     listings: [],
@@ -136,5 +137,6 @@ export const useNFTList = create<NFTListState>()(
           collectionsRequiringApproval: collectionsCopy,
         }
       }),
-  }))
+  })),
+  shallow
 )

src/nft/hooks/useProfilePageState.ts

-import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 
 import { ProfilePageStateType } from '../types'
 
@@ -11,7 +12,7 @@ interface profilePageState {
   setProfilePageState: (state: ProfilePageStateType) => void
 }
 
-export const useProfilePageState = create<profilePageState>()(
+export const useProfilePageState = createWithEqualityFn<profilePageState>()(
   devtools(
     (set) => ({
       state: ProfilePageStateType.VIEWING,
@@ -21,5 +22,6 @@ export const useProfilePageState = create<profilePageState>()(
         })),
     }),
     { name: 'useProfilePageState' }
-  )
+  ),
+  shallow
 )

src/nft/hooks/usePurchaseAssets.ts

 import { useWeb3React } from '@web3-react/core'
 import { RouteResponse, UpdatedGenieAsset } from 'nft/types'
 import { useCallback } from 'react'
-import { shallow } from 'zustand/shallow'
 
 import { useBag } from './useBag'
 import { useSendTransaction } from './useSendTransaction'
@@ -20,14 +19,11 @@ export function usePurchaseAssets(): (
     setLocked: setBagLocked,
     setBagExpanded,
     reset: resetBag,
-  } = useBag(
-    ({ setLocked, setBagExpanded, reset }) => ({
+  } = useBag(({ setLocked, setBagExpanded, reset }) => ({
     setLocked,
     setBagExpanded,
     reset,
-    }),
-    shallow
-  )
+  }))
 
   return useCallback(
     async (routingData: RouteResponse, assetsToBuy: UpdatedGenieAsset[], purchasingWithErc20 = false) => {

src/nft/hooks/useSubscribeTransactionState.ts

 import { BagStatus, TxStateType } from 'nft/types'
 import { useEffect, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 
 import { useBag } from './useBag'
 import { useSendTransaction } from './useSendTransaction'
@@ -9,14 +8,11 @@ export function useSubscribeTransactionState(setModalIsOpen: (isOpen: boolean) =
   const transactionState = useSendTransaction((state) => state.state)
   const setTransactionState = useSendTransaction((state) => state.setState)
   const transactionStateRef = useRef(transactionState)
-  const { setBagStatus, setLocked: setBagLocked } = useBag(
-    ({ setBagExpanded, setBagStatus, setLocked }) => ({
+  const { setBagStatus, setLocked: setBagLocked } = useBag(({ setBagExpanded, setBagStatus, setLocked }) => ({
     setBagExpanded,
     setBagStatus,
     setLocked,
-    }),
-    shallow
-  )
+  }))
 
   useEffect(() => {
     useSendTransaction.subscribe((state) => (transactionStateRef.current = state.state))

src/nft/hooks/useTokenInput.ts

 import { Currency } from '@uniswap/sdk-core'
 import { TokenTradeInput } from 'graphql/data/__generated__/types-and-hooks'
-import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 
 interface TokenInputState {
   inputCurrency?: Currency
@@ -11,7 +12,7 @@ interface TokenInputState {
   setTokenTradeInput: (tokenTradeInput: TokenTradeInput | undefined) => void
 }
 
-export const useTokenInput = create<TokenInputState>()(
+export const useTokenInput = createWithEqualityFn<TokenInputState>()(
   devtools(
     (set) => ({
       inputCurrency: undefined,
@@ -21,5 +22,6 @@ export const useTokenInput = create<TokenInputState>()(
       setTokenTradeInput: (tokenTradeInput) => set(() => ({ tokenTradeInput })),
     }),
     { name: 'useTokenInput' }
-  )
+  ),
+  shallow
 )