diff --git a/src/components/NavBar/Bag.tsx b/src/components/NavBar/Bag.tsx index 844fab7026..f6dad4c5bd 100644 --- a/src/components/NavBar/Bag.tsx +++ b/src/components/NavBar/Bag.tsx @@ -1,7 +1,8 @@ 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 ( - + {isProfilePage ? ( + + ) : ( + + )} {bagHasItems && {bagQuantity > 99 ? : bagQuantity}} ) diff --git a/src/nft/components/icons.tsx b/src/nft/components/icons.tsx index 29278b4be4..4c96697608 100644 --- a/src/nft/components/icons.tsx +++ b/src/nft/components/icons.tsx @@ -471,9 +471,9 @@ export const HundredsOverflowIcon = () => ( ) export const TagIcon = (props: SVGProps) => ( - +