fix: close MP drawer on nft nav (#6251)

* fix: close MP drawer on nft nav

* fix: make callbacks optional, rename props

* fix: improve card API

* fix: add e2e test

cypress/e2e/nfts.test.ts

@@ -53,4 +53,11 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('nft-view-self-nfts')).click()
   })
+
+  it('should close the sidebar when navigating to NFT details', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('mini-portfolio-nav-nfts')).click()
+    cy.get(getTestSelector('mini-portfolio-nft')).first().click()
+    cy.contains('Buy crypto').should('not.be.visible')
+  })
 })

src/components/WalletDropdown/MiniPortfolio/NFT.tsx

@@ -5,6 +5,7 @@ import Row from 'components/Row'
 import { useToggleWalletDrawer } from 'components/WalletDropdown'
 import { Box } from 'nft/components/Box'
 import { NftCard } from 'nft/components/card'
+import { detailsHref } from 'nft/components/card/utils'
 import { VerifiedIcon } from 'nft/components/icons'
 import { WalletAsset } from 'nft/types'
 import { floorFormatter } from 'nft/utils'
@@ -50,8 +51,8 @@ export function NFT({
   const trace = useTrace()
 
   const navigateToNFTDetails = () => {
-    navigate(`/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}`)
     toggleWalletDrawer()
+    navigate(detailsHref(asset))
   }
 
   return (
@@ -62,10 +63,7 @@ export function NFT({
         display={{ disabledInfo: true }}
         isSelected={false}
         isDisabled={false}
-        selectAsset={navigateToNFTDetails}
-        unselectAsset={() => {
-          /* */
-        }}
+        onCardClick={navigateToNFTDetails}
         sendAnalyticsEvent={() =>
           sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, {
             element: InterfaceElementName.MINI_PORTFOLIO_NFT_ITEM,
@@ -77,6 +75,7 @@ export function NFT({
         }
         mediaShouldBePlaying={mediaShouldBePlaying}
         setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+        testId="mini-portfolio-nft"
       />
       <NFTDetails asset={asset} />
     </NFTContainer>

src/components/WalletDropdown/MiniPortfolio/index.tsx

@@ -55,6 +55,7 @@ const PageWrapper = styled.div`
 
 interface Page {
   title: React.ReactNode
+  key: string
   component: ({ account }: { account: string }) => JSX.Element
   loggingElementName: string
 }
@@ -62,13 +63,25 @@ interface Page {
 const Pages: Array<Page> = [
   {
     title: <Trans>Tokens</Trans>,
+    key: 'tokens',
     component: Tokens,
     loggingElementName: InterfaceElementName.MINI_PORTFOLIO_TOKENS_TAB,
   },
-  { title: <Trans>NFTs</Trans>, component: NFTs, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_NFT_TAB },
-  { title: <Trans>Pools</Trans>, component: Pools, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_POOLS_TAB },
+  {
+    title: <Trans>NFTs</Trans>,
+    key: 'nfts',
+    component: NFTs,
+    loggingElementName: InterfaceElementName.MINI_PORTFOLIO_NFT_TAB,
+  },
+  {
+    title: <Trans>Pools</Trans>,
+    key: 'pools',
+    component: Pools,
+    loggingElementName: InterfaceElementName.MINI_PORTFOLIO_POOLS_TAB,
+  },
   {
     title: <Trans>Activity</Trans>,
+    key: 'activity',
     component: ActivityTab,
     loggingElementName: InterfaceElementName.MINI_PORTFOLIO_ACTIVITY_TAB,
   },
@@ -83,7 +96,7 @@ function MiniPortfolio({ account }: { account: string }) {
   return (
     <Wrapper>
       <Nav>
-        {Pages.map(({ title, loggingElementName }, index) => {
+        {Pages.map(({ title, loggingElementName, key }, index) => {
           if (shouldDisableNFTRoutes && loggingElementName.includes('nft')) return null
           return (
             <TraceEvent
@@ -93,6 +106,7 @@ function MiniPortfolio({ account }: { account: string }) {
               key={index}
             >
               <NavItem
+                data-testid={`mini-portfolio-nav-${key}`}
                 onClick={() => setCurrentPage(index)}
                 active={currentPage === index}
                 key={`Mini Portfolio page ${index}`}

src/nft/components/card/containers.tsx

@@ -186,22 +186,20 @@ const Container = ({
   isSelected,
   isDisabled,
   detailsHref,
-  doNotLinkToDetails = false,
   testId,
   onClick,
   children,
 }: {
   isSelected: boolean
   isDisabled: boolean
-  detailsHref: string
-  doNotLinkToDetails: boolean
+  detailsHref?: string
   testId?: string
   children: ReactNode
   onClick?: (e: React.MouseEvent) => void
 }) => {
   return (
     <CardContainer isSelected={isSelected} isDisabled={isDisabled} testId={testId} onClick={onClick}>
-      <StyledLink to={doNotLinkToDetails ? '' : detailsHref}>{children}</StyledLink>
+      {detailsHref ? <StyledLink to={detailsHref}>{children}</StyledLink> : children}
     </CardContainer>
   )
 }

src/nft/components/card/index.tsx

@@ -13,11 +13,11 @@ interface NftCardProps {
   display: NftCardDisplayProps
   isSelected: boolean
   isDisabled: boolean
-  selectAsset: () => void
-  unselectAsset: () => void
-  onClick?: () => void
+  selectAsset?: () => void
+  unselectAsset?: () => void
+  onButtonClick?: () => void
+  onCardClick?: () => void
   sendAnalyticsEvent?: () => void
-  doNotLinkToDetails?: boolean
   mediaShouldBePlaying: boolean
   uniformAspectRatio?: UniformAspectRatio
   setUniformAspectRatio?: (uniformAspectRatio: UniformAspectRatio) => void
@@ -38,6 +38,12 @@ export interface NftCardDisplayProps {
   disabledInfo?: ReactNode
 }
 
+/**
+ * NftCard is a component that displays an NFT asset.
+ *
+ * By default, clicking on the card will navigate to the details page.
+ * If you wish to override this behavior, pass a value for the onCardClick prop.
+ */
 export const NftCard = ({
   asset,
   display,
@@ -45,9 +51,9 @@ export const NftCard = ({
   selectAsset,
   unselectAsset,
   isDisabled,
-  onClick,
+  onButtonClick,
+  onCardClick,
   sendAnalyticsEvent,
-  doNotLinkToDetails = false,
   mediaShouldBePlaying,
   uniformAspectRatio = UniformAspectRatios.square,
   setUniformAspectRatio,
@@ -57,7 +63,13 @@ export const NftCard = ({
   testId,
   hideDetails = false,
 }: NftCardProps) => {
-  const clickActionButton = useSelectAsset(selectAsset, unselectAsset, isSelected, isDisabled, onClick)
+  const clickActionButton = useSelectAsset({
+    selectAsset,
+    unselectAsset,
+    isSelected,
+    isDisabled,
+    onClick: onButtonClick,
+  })
   const { bagExpanded, setBagExpanded } = useBag(
     (state) => ({
       bagExpanded: state.bagExpanded,
@@ -77,11 +89,11 @@ export const NftCard = ({
     <Card.Container
       isSelected={isSelected}
       isDisabled={isDisabled}
-      detailsHref={detailsHref(asset)}
-      doNotLinkToDetails={doNotLinkToDetails}
+      detailsHref={onCardClick ? undefined : detailsHref(asset)}
       testId={testId}
       onClick={() => {
         if (bagExpanded) setBagExpanded({ bagExpanded: false })
+        onCardClick?.()
         sendAnalyticsEvent?.()
       }}
     >

src/nft/components/card/utils.tsx

@@ -96,13 +96,19 @@ export function getNftDisplayComponent(
   }
 }
 
-export function useSelectAsset(
-  selectAsset: () => void,
-  unselectAsset: () => void,
-  isSelected: boolean,
-  isDisabled: boolean,
+export function useSelectAsset({
+  selectAsset,
+  unselectAsset,
+  isSelected,
+  isDisabled,
+  onClick,
+}: {
+  selectAsset?: () => void
+  unselectAsset?: () => void
+  isSelected: boolean
+  isDisabled: boolean
   onClick?: () => void
-) {
+}) {
   return useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -117,7 +123,7 @@ export function useSelectAsset(
         return
       }
 
-      return isSelected ? unselectAsset() : selectAsset()
+      return isSelected ? unselectAsset?.() : selectAsset?.()
     },
     [selectAsset, isDisabled, onClick, unselectAsset, isSelected]
   )

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

@@ -3,10 +3,12 @@ import { useTrace } from '@uniswap/analytics'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { NFTEventName } from '@uniswap/analytics-events'
 import { NftCard, NftCardDisplayProps } from 'nft/components/card'
+import { detailsHref } from 'nft/components/card/utils'
 import { VerifiedIcon } from 'nft/components/icons'
 import { useBag, useIsMobile, useSellAsset } from 'nft/hooks'
 import { WalletAsset } from 'nft/types'
 import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 interface ViewMyNftsAssetProps {
   asset: WalletAsset
@@ -27,6 +29,7 @@ export const ViewMyNftsAsset = ({
   const cartExpanded = useBag((state) => state.bagExpanded)
   const toggleCart = useBag((state) => state.toggleBag)
   const isMobile = useIsMobile()
+  const navigate = useNavigate()
 
   const isSelected = useMemo(() => {
     return sellAssets.some(
@@ -35,7 +38,7 @@ export const ViewMyNftsAsset = ({
   }, [asset, sellAssets])
 
   const trace = useTrace()
-  const onCardClick = () => handleSelect(isSelected)
+  const toggleSelect = () => handleSelect(isSelected)
 
   const handleSelect = (removeAsset: boolean) => {
     if (removeAsset) {
@@ -79,11 +82,13 @@ export const ViewMyNftsAsset = ({
       isDisabled={Boolean(isDisabled)}
       selectAsset={() => handleSelect(false)}
       unselectAsset={() => handleSelect(true)}
-      onClick={onCardClick}
+      onButtonClick={toggleSelect}
+      onCardClick={() => {
+        if (!hideDetails) navigate(detailsHref(asset))
+      }}
       mediaShouldBePlaying={mediaShouldBePlaying}
       setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
       testId="nft-profile-asset"
-      doNotLinkToDetails={hideDetails}
     />
   )
 }