fix: adding back listing icon to profile page (#5289)

* fix: adding back listing icon to profile page

* responding to comments

src/components/NavBar/Bag.tsx

 import { NavIcon } from 'components/NavBar/NavIcon'
-import { BagIcon, HundredsOverflowIcon } from 'nft/components/icons'
-import { useBag } from 'nft/hooks'
-import { useCallback, useEffect, useState } from 'react'
+import { useIsNftProfilePage } from 'hooks/useIsNftPage'
+import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons'
+import { useBag, useSellAsset } from 'nft/hooks'
+import { useCallback } from 'react'
 import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
@@ -22,7 +23,8 @@ const CounterDot = styled.div`
 
 export const Bag = () => {
   const itemsInBag = useBag((state) => state.itemsInBag)
-  const [bagQuantity, setBagQuantity] = useState(0)
+  const sellAssets = useSellAsset((state) => state.sellAssets)
+  const isProfilePage = useIsNftProfilePage()
 
   const { bagExpanded, setBagExpanded } = useBag(
     ({ bagExpanded, setBagExpanded }) => ({ bagExpanded, setBagExpanded }),
@@ -33,15 +35,16 @@ export const Bag = () => {
     setBagExpanded({ bagExpanded: !bagExpanded })
   }, [bagExpanded, setBagExpanded])
 
-  useEffect(() => {
-    setBagQuantity(itemsInBag.length)
-  }, [itemsInBag])
-
+  const bagQuantity = isProfilePage ? sellAssets.length : itemsInBag.length
   const bagHasItems = bagQuantity > 0
 
   return (
     <NavIcon isActive={bagExpanded} onClick={handleIconClick}>
-      <BagIcon viewBox="0 0 24 24" width={24} height={24} strokeWidth="2px" />
+      {isProfilePage ? (
+        <TagIcon viewBox="0 0 24 24" width={24} height={24} />
+      ) : (
+        <BagIcon viewBox="0 0 24 24" width={24} height={24} strokeWidth="2px" />
+      )}
       {bagHasItems && <CounterDot>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</CounterDot>}
     </NavIcon>
   )

src/nft/components/icons.tsx

@@ -471,9 +471,9 @@ export const HundredsOverflowIcon = () => (
 )
 
 export const TagIcon = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props}>
     <path
-      d="M6.66667 6.66667H6.67361M17.9917 12.0083L12.0167 17.9833C11.8619 18.1383 11.6781 18.2612 11.4757 18.3451C11.2734 18.429 11.0565 18.4721 10.8375 18.4721C10.6185 18.4721 10.4016 18.429 10.1993 18.3451C9.99694 18.2612 9.81312 18.1383 9.65833 17.9833L2.5 10.8333V2.5H10.8333L17.9917 9.65833C18.3021 9.9706 18.4763 10.393 18.4763 10.8333C18.4763 11.2736 18.3021 11.6961 17.9917 12.0083Z"
+      d="M8.33333 8.33333H8.34097M20.7908 14.2092L14.2183 20.7817C14.0481 20.9521 13.8459 21.0873 13.6233 21.1796C13.4007 21.2719 13.1622 21.3194 12.9213 21.3194C12.6803 21.3194 12.4418 21.2719 12.2192 21.1796C11.9966 21.0873 11.7944 20.9521 11.6242 20.7817L3.75 12.9167V3.75H12.9167L20.7908 11.6242C21.1323 11.9677 21.324 12.4323 21.324 12.9167C21.324 13.401 21.1323 13.8657 20.7908 14.2092Z"
       stroke="currentColor"
       strokeWidth="1.5"
       strokeLinecap="round"