fix: updating bag to not remove nfts on click (#5224)

* updating bag to not remove nfts on click

src/components/NavBar/Bag.tsx

 import { NavIcon } from 'components/NavBar/NavIcon'
 import { BagIcon, HundredsOverflowIcon } from 'nft/components/icons'
-import { useBag, useSellAsset } from 'nft/hooks'
+import { useBag } from 'nft/hooks'
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
@@ -28,21 +28,10 @@ export const Bag = () => {
     ({ bagExpanded, setBagExpanded }) => ({ bagExpanded, setBagExpanded }),
     shallow
   )
-  const { isSellMode, resetSellAssets, setIsSellMode } = useSellAsset(
-    ({ isSellMode, reset, setIsSellMode }) => ({
-      isSellMode,
-      resetSellAssets: reset,
-      setIsSellMode,
-    }),
-    shallow
-  )
+
   const handleIconClick = useCallback(() => {
-    if (isSellMode && bagExpanded) {
-      resetSellAssets()
-      setIsSellMode(false)
-    }
     setBagExpanded({ bagExpanded: !bagExpanded })
-  }, [bagExpanded, isSellMode, resetSellAssets, setBagExpanded, setIsSellMode])
+  }, [bagExpanded, setBagExpanded])
 
   useEffect(() => {
     setBagQuantity(itemsInBag.length)

src/nft/components/bag/BagHeader.tsx

 import { Trans } from '@lingui/macro'
 import { OpacityHoverState } from 'components/Common'
 import { BagCloseIcon } from 'nft/components/icons'
+import { useMemo } from 'react'
 import styled from 'styled-components/macro'
 import { ButtonText, ThemedText } from 'theme'
 
@@ -10,6 +11,10 @@ const ClearButton = styled(ButtonText)`
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
+
+  :active {
+    text-decoration: none;
+  }
 `
 
 const IconWrapper = styled.button`
@@ -28,15 +33,17 @@ const IconWrapper = styled.button`
 
   ${OpacityHoverState}
 `
-const CounterDot = styled.div`
+const CounterDot = styled.div<{ sizing: string }>`
   align-items: center;
   background-color: ${({ theme }) => theme.accentAction};
   border-radius: 100px;
+  font-weight: bold;
   color: ${({ theme }) => theme.accentTextLightPrimary};
   display: flex;
   font-size: 10px;
   justify-content: center;
-  min-width: 20px;
+  min-width: ${({ sizing }) => sizing};
+  min-height: ${({ sizing }) => sizing};
   padding: 4px 6px;
 `
 const Wrapper = styled.div`
@@ -55,13 +62,26 @@ interface BagHeaderProps {
   isProfilePage: boolean
 }
 
+const BASE_SIZING = 14
+const INCREMENTAL_SIZING = 6
+
+const getCircleSizing = (numberOfAssets: number): string => {
+  const numberOfCharacters = numberOfAssets.toString().length
+
+  // each digit adds 6px worth of width (approximately), so I set the height and width to be 6px larger for each digit added
+  // 1 digit => 14 + 6, 2 digit 14 + 12, etc.
+  return `${BASE_SIZING + INCREMENTAL_SIZING * numberOfCharacters}px`
+}
+
 export const BagHeader = ({ numberOfAssets, closeBag, resetFlow, isProfilePage }: BagHeaderProps) => {
+  const sizing = useMemo(() => getCircleSizing(numberOfAssets), [numberOfAssets])
+
   return (
     <Wrapper>
       <ThemedText.HeadlineSmall>{isProfilePage ? <Trans>Sell</Trans> : <Trans>Bag</Trans>}</ThemedText.HeadlineSmall>
       {numberOfAssets > 0 && (
         <>
-          <CounterDot>{numberOfAssets}</CounterDot>
+          <CounterDot sizing={sizing}>{numberOfAssets}</CounterDot>
           <ClearButton onClick={resetFlow}>Clear all</ClearButton>
         </>
       )}