refactor: useIsNftPage hooks (#5142)

src/components/NavBar/index.tsx

@@ -3,6 +3,7 @@ import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { chainIdToBackendName } from 'graphql/data/util'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
@@ -48,6 +49,8 @@ const PageTabs = () => {
     pathname.startsWith('/increase') ||
     pathname.startsWith('/find')
 
+  const isNftPage = useIsNftPage()
+
   return (
     <>
       <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
@@ -57,7 +60,7 @@ const PageTabs = () => {
         <Trans>Tokens</Trans>
       </MenuItem>
       {nftFlag === NftVariant.Enabled && (
-        <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
+        <MenuItem href="/nfts" isActive={isNftPage}>
           <Trans>NFTs</Trans>
         </MenuItem>
       )}
@@ -69,8 +72,7 @@ const PageTabs = () => {
 }
 
 const Navbar = () => {
-  const { pathname } = useLocation()
-  const isNftPage = pathname.startsWith('/nfts')
+  const isNftPage = useIsNftPage()
 
   return (
     <>

src/hooks/useIsNftPage.ts

+import { useLocation } from 'react-router-dom'
+
+export function useIsNftPage() {
+  const { pathname } = useLocation()
+  return pathname.startsWith('/nfts')
+}
+
+export function useIsNftProfilePage() {
+  const { pathname } = useLocation()
+  return pathname.startsWith('/nfts/profile')
+}
+
+export function useIsNftDetailsPage() {
+  const { pathname } = useLocation()
+  return pathname.startsWith('/nfts/asset')
+}

src/nft/components/bag/Bag.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { formatEther } from '@ethersproject/units'
 import { useWeb3React } from '@web3-react/core'
+import { useIsNftDetailsPage, useIsNftPage, useIsNftProfilePage } from 'hooks/useIsNftPage'
 import { BagFooter } from 'nft/components/bag/BagFooter'
 import ListingModal from 'nft/components/bag/profile/ListingModal'
 import { Box } from 'nft/components/Box'
@@ -28,7 +29,6 @@ import {
 import { combineBuyItemsWithTxRoute } from 'nft/utils/txRoute/combineItemsWithTxRoute'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useQueryClient } from 'react-query'
-import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
@@ -100,13 +100,11 @@ const Bag = () => {
   } = useBag((state) => ({ ...state, bagIsLocked: state.isLocked, uncheckedItemsInBag: state.itemsInBag }), shallow)
   const { uncheckedItemsInBag } = useBag(({ itemsInBag }) => ({ uncheckedItemsInBag: itemsInBag }))
 
-  const { pathname } = useLocation()
-  const isProfilePage = pathname.startsWith('/nfts/profile')
-  const isNFTPage = pathname.startsWith('/nfts')
+  const isProfilePage = useIsNftProfilePage()
+  const isDetailsPage = useIsNftDetailsPage()
+  const isNFTPage = useIsNftPage()
   const isMobile = useIsMobile()
 
-  const isDetailsPage = pathname.includes('/nfts/asset/')
-
   const sendTransaction = useSendTransaction((state) => state.sendTransaction)
   const transactionState = useSendTransaction((state) => state.state)
   const setTransactionState = useSendTransaction((state) => state.setState)

src/nft/components/bag/EmptyContent.tsx

+import { useIsNftProfilePage } from 'hooks/useIsNftPage'
 import { Center, Column } from 'nft/components/Flex'
 import { LargeBagIcon, LargeTagIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
-import { useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 const StyledColumn = styled(Column)<{ isProfilePage?: boolean }>`
@@ -14,8 +14,7 @@ const StyledColumn = styled(Column)<{ isProfilePage?: boolean }>`
 `
 
 const EmptyState = () => {
-  const { pathname } = useLocation()
-  const isProfilePage = pathname.startsWith('/nfts/profile')
+  const isProfilePage = useIsNftProfilePage()
 
   return (
     <StyledColumn isProfilePage={isProfilePage}>

src/theme/RadialGradientByChainUpdater.ts

 import { useWeb3React } from '@web3-react/core'
+import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
 import { useDarkModeManager } from 'state/user/hooks'
 
 import { SupportedChainId } from '../constants/chains'
@@ -29,8 +29,7 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
 export default function RadialGradientByChainUpdater(): null {
   const { chainId } = useWeb3React()
   const [darkMode] = useDarkModeManager()
-  const { pathname } = useLocation()
-  const isNftPage = pathname.startsWith('/nfts')
+  const isNftPage = useIsNftPage()
 
   // manage background color
   useEffect(() => {