fix: hover flash (#4998)

src/nft/components/bag/BagRow.tsx

@@ -17,7 +17,7 @@ import { bodySmall } from 'nft/css/common.css'
 import { loadingBlock } from 'nft/css/loading.css'
 import { GenieAsset, UpdatedGenieAsset } from 'nft/types'
 import { ethNumberStandardFormatter, formatWeiToDecimal, getAssetHref } from 'nft/utils'
-import { MouseEvent, useEffect, useReducer, useRef, useState } from 'react'
+import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import * as styles from './BagRow.css'
@@ -53,14 +53,13 @@ interface BagRowProps {
 }
 
 export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, isMobile }: BagRowProps) => {
-  const [cardHovered, setCardHovered] = useState(false)
   const [loadedImage, setImageLoaded] = useState(false)
   const [noImageAvailable, setNoImageAvailable] = useState(!asset.smallImageUrl)
-  const handleCardHover = () => setCardHovered(!cardHovered)
-  const assetCardRef = useRef<HTMLDivElement>(null)
-  const showRemoveButton = showRemove && cardHovered
 
-  if (cardHovered && assetCardRef.current && assetCardRef.current.matches(':hover') === false) setCardHovered(false)
+  const [cardHovered, setCardHovered] = useState(false)
+  const handleMouseEnter = useCallback(() => setCardHovered(true), [])
+  const handleMouseLeave = useCallback(() => setCardHovered(false), [])
+  const showRemoveButton = showRemove && cardHovered
 
   const assetEthPrice = asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
   const assetEthPriceFormatted = formatWeiToDecimal(assetEthPrice)
@@ -71,7 +70,7 @@ export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, is
 
   return (
     <Link to={getAssetHref(asset)} style={{ textDecoration: 'none' }}>
-      <Row ref={assetCardRef} className={styles.bagRow} onMouseEnter={handleCardHover} onMouseLeave={handleCardHover}>
+      <Row className={styles.bagRow} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
         <Box position="relative" display="flex">
           <Box
             display={showRemove && isMobile ? 'block' : 'none'}