feat: adding bag icon to navbar (#4619)

* feat: adding bag icon to navbar

* updating sell icon

src/components/NavBar/MenuDropdown.tsx

@@ -126,7 +126,7 @@ export const MenuDropdown = () => {
     <>
       <Box position="relative" ref={ref}>
         <NavIcon isActive={isOpen} onClick={toggleOpen}>
-          <EllipsisIcon />
+          <EllipsisIcon width={20} height={20} />
         </NavIcon>
 
         {isOpen && (

src/components/NavBar/NavIcon.css.ts

@@ -11,7 +11,7 @@ export const navIcon = style([
     justifyContent: 'center',
     textAlign: 'center',
     cursor: 'pointer',
-    padding: '8',
+    padding: '10',
     borderRadius: '8',
     transition: '250',
   }),

src/components/NavBar/Navbar.tsx

 import { Trans } from '@lingui/macro'
+import { ChainSwitcher } from 'components/NavBar/ChainSwitcher'
+import { MenuDropdown } from 'components/NavBar/MenuDropdown'
+import * as styles from 'components/NavBar/Navbar.css'
+import { SearchBar } from 'components/NavBar/SearchBar'
+import { ShoppingBag } from 'components/NavBar/ShoppingBag'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
+import { Box } from 'nft/components/Box'
+import { Row } from 'nft/components/Flex'
+import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
-import { Box } from '../../nft/components/Box'
-import { Row } from '../../nft/components/Flex'
-import { UniIcon } from '../../nft/components/icons'
-import { ChainSwitcher } from './ChainSwitcher'
-import { MenuDropdown } from './MenuDropdown'
-import * as styles from './Navbar.css'
-import { SearchBar } from './SearchBar'
-
 interface MenuItemProps {
   href: string
   id?: NavLinkProps['id']
@@ -64,6 +64,9 @@ const PageTabs = () => {
 }
 
 const Navbar = () => {
+  const { pathname } = useLocation()
+  const isNftPage = pathname.startsWith('/nfts')
+
   return (
     <>
       <nav className={styles.nav}>
@@ -90,6 +93,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
+              {isNftPage && <ShoppingBag />}
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <ChainSwitcher />
               </Box>

src/components/NavBar/ShoppingBag.css.ts

+import { style } from '@vanilla-extract/css'
+import { sprinkles } from 'nft/css/sprinkles.css'
+
+export const bagQuantity = style([
+  sprinkles({
+    position: 'absolute',
+    top: '4',
+    right: '4',
+    backgroundColor: 'magicGradient',
+    borderRadius: 'round',
+    color: 'explicitWhite',
+    textAlign: 'center',
+    fontWeight: 'semibold',
+    paddingY: '1',
+    paddingX: '4',
+  }),
+  {
+    fontSize: '8px',
+    lineHeight: '12px',
+    minWidth: '14px',
+  },
+])

src/components/NavBar/ShoppingBag.tsx

+import { NavIcon } from 'components/NavBar/NavIcon'
+import * as styles from 'components/NavBar/ShoppingBag.css'
+import { Box } from 'nft/components/Box'
+import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons'
+import { useBag, useSellAsset } from 'nft/hooks'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export const ShoppingBag = () => {
+  const itemsInBag = useBag((state) => state.itemsInBag)
+  const sellAssets = useSellAsset((state) => state.sellAssets)
+  const [bagQuantity, setBagQuantity] = useState(0)
+  const [sellQuantity, setSellQuantity] = useState(0)
+  const location = useLocation()
+
+  const toggleBag = useBag((s) => s.toggleBag)
+
+  useEffect(() => {
+    setBagQuantity(itemsInBag.length)
+  }, [itemsInBag])
+
+  useEffect(() => {
+    setSellQuantity(sellAssets.length)
+  }, [sellAssets])
+
+  const isSell = location.pathname === '/nfts/sell'
+
+  return (
+    <NavIcon onClick={toggleBag}>
+      {isSell ? (
+        <>
+          <TagIcon width={20} height={20} />
+          {sellQuantity ? (
+            <Box className={styles.bagQuantity}>{sellQuantity > 99 ? <HundredsOverflowIcon /> : sellQuantity}</Box>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <BagIcon width={20} height={20} />
+          {bagQuantity ? (
+            <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
+          ) : null}
+        </>
+      )}
+    </NavIcon>
+  )
+}

src/nft/components/icons.tsx

@@ -304,37 +304,25 @@ export const InstagramIcon = (props: SVGProps) => (
 )
 
 export const EllipsisIcon = (props: SVGProps) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
-      fill="currentColor"
-    />
-    <path
-      d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
-      fill="currentColor"
-    />
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+      d="M10 10.8334C10.4603 10.8334 10.8334 10.4603 10.8334 10C10.8334 9.53978 10.4603 9.16669 10 9.16669C9.5398 9.16669 9.16671 9.53978 9.16671 10C9.16671 10.4603 9.5398 10.8334 10 10.8334Z"
       stroke="currentColor"
-      strokeWidth="2.5"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
+      d="M15.8334 10.8334C16.2936 10.8334 16.6667 10.4603 16.6667 10C16.6667 9.53978 16.2936 9.16669 15.8334 9.16669C15.3731 9.16669 15 9.53978 15 10C15 10.4603 15.3731 10.8334 15.8334 10.8334Z"
       stroke="currentColor"
-      strokeWidth="2.5"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
-      d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
+      d="M4.16671 10.8334C4.62694 10.8334 5.00004 10.4603 5.00004 10C5.00004 9.53978 4.62694 9.16669 4.16671 9.16669C3.70647 9.16669 3.33337 9.53978 3.33337 10C3.33337 10.4603 3.70647 10.8334 4.16671 10.8334Z"
       stroke="currentColor"
-      strokeWidth="2.5"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
@@ -994,10 +982,25 @@ export const NavMagnifyingGlassIcon = (props: SVGProps) => (
 export const BagIcon = (props: SVGProps) => (
   <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M17.5458 7.85407C17.5461 7.85407 17.5465 7.85407 17.5469 7.85407C17.5472 7.85407 17.5476 7.85407 17.548 7.85407H22.3138C23.0759 7.85407 23.4468 8.37638 23.4468 8.73272V23.6333C23.4468 23.9897 23.0759 24.512 22.3138 24.512H5.63298C4.87086 24.512 4.5 23.9897 4.5 23.6333V8.73272C4.5 8.37638 4.87086 7.85407 5.63298 7.85407H10.3979H17.5458ZM18.7814 5.35407C18.6893 4.2282 18.1894 3.17117 17.3723 2.37499C16.4652 1.49104 15.2417 1 13.9724 1C12.7032 1 11.4796 1.49104 10.5725 2.37499C9.75546 3.17117 9.25555 4.2282 9.16342 5.35407H5.63298C3.76293 5.35407 2 6.73782 2 8.73272V23.6333C2 25.6282 3.76293 27.012 5.63298 27.012H22.3138C24.1839 27.012 25.9468 25.6282 25.9468 23.6333V8.73272C25.9468 6.73782 24.1839 5.35407 22.3138 5.35407H18.7814ZM11.6817 5.35407H16.2631C16.1835 4.91061 15.9651 4.49441 15.6276 4.16545C15.194 3.74293 14.5992 3.5 13.9724 3.5C13.3456 3.5 12.7508 3.74293 12.3173 4.16545C11.9797 4.49441 11.7613 4.91061 11.6817 5.35407ZM10.3984 9.99873C11.0888 9.99873 11.6484 10.5584 11.6484 11.2487C11.6484 11.8304 11.8853 12.3951 12.3178 12.8165C12.7513 13.2391 13.3461 13.482 13.9729 13.482C14.5997 13.482 15.1945 13.2391 15.628 12.8165C16.0605 12.3951 16.2974 11.8304 16.2974 11.2487C16.2974 10.5584 16.857 9.99873 17.5474 9.99873C18.2377 9.99873 18.7974 10.5584 18.7974 11.2487C18.7974 12.5146 18.281 13.722 17.3728 14.607C16.4657 15.4909 15.2422 15.982 13.9729 15.982C12.7037 15.982 11.4801 15.4909 10.573 14.607C9.66479 13.722 9.14844 12.5146 9.14844 11.2487C9.14844 10.5584 9.70808 9.99873 10.3984 9.99873Z"
-      fill="currentColor"
+      d="M15.8333 5H4.16667C3.24619 5 2.5 5.68401 2.5 6.52778V17.2222C2.5 18.066 3.24619 18.75 4.16667 18.75H15.8333C16.7538 18.75 17.5 18.066 17.5 17.2222V6.52778C17.5 5.68401 16.7538 5 15.8333 5Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.5 8.33331C12.5 8.99635 12.2366 9.63224 11.7678 10.1011C11.2989 10.5699 10.663 10.8333 10 10.8333C9.33696 10.8333 8.70107 10.5699 8.23223 10.1011C7.76339 9.63224 7.5 8.99635 7.5 8.33331"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.5 5L7.5 4.375C7.5 3.71196 7.76339 3.07607 8.23223 2.60723C8.70107 2.13839 9.33696 1.875 10 1.875C10.663 1.875 11.2989 2.13839 11.7678 2.60723C12.2366 3.07607 12.5 3.71196 12.5 4.375L12.5 5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 )
@@ -1022,16 +1025,9 @@ export const HundredsOverflowIcon = () => (
 export const TagIcon = (props: SVGProps) => (
   <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M24.6883 16.3117L16.3233 24.6767C16.1066 24.8936 15.8493 25.0657 15.566 25.1831C15.2828 25.3006 14.9791 25.361 14.6725 25.361C14.3659 25.361 14.0622 25.3006 13.779 25.1831C13.4957 25.0657 13.2384 24.8936 13.0217 24.6767L3 14.6667V3H14.6667L24.6883 13.0217C25.1229 13.4588 25.3669 14.0502 25.3669 14.6667C25.3669 15.2831 25.1229 15.8745 24.6883 16.3117V16.3117Z"
+      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"
       stroke="currentColor"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.84375 8.83398H8.85542"
-      stroke="currentColor"
-      strokeWidth="2.5"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

src/nft/hooks/useBag.ts

+import { BagItem } from 'nft/types'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
 interface BagState {
+  itemsInBag: BagItem[]
   bagExpanded: boolean
+  toggleBag: () => void
 }
 
 export const useBag = create<BagState>()(
   devtools(
     (set) => ({
       bagExpanded: false,
+      itemsInBag: [],
       toggleBag: () =>
         set(({ bagExpanded }) => ({
           bagExpanded: !bagExpanded,

src/nft/types/checkout/checkout.ts

@@ -73,3 +73,26 @@ export enum TxStateType {
   Signing = 'Signing',
   Confirming = 'Confirming',
 }
+
+export enum BagItemStatus {
+  ADDED_TO_BAG = 'Added to bag',
+  REVIEWED = 'Reviewed',
+  REVIEWING_PRICE_CHANGE = 'REVIEWING_PRICE_CHANGE',
+  UNAVAILABLE = 'UNAVAILABLE',
+}
+
+export type BagItem = {
+  asset: UpdatedGenieAsset
+  status: BagItemStatus
+}
+
+export enum BagStatus {
+  ADDING_TO_BAG = 'Adding to bag',
+  FETCHING_ROUTE = 'Fetching route',
+  IN_REVIEW = 'In review',
+  WARNING = 'Warning',
+  CONFIRM_REVIEW = 'Confirming review',
+  FETCHING_FINAL_ROUTE = 'Fetching final route',
+  CONFIRMING_IN_WALLET = 'Confirming in wallet',
+  PROCESSING_TRANSACTION = 'Processing',
+}