feat: adding in trait chips (#4807)

* adding in traitchips

src/nft/components/collection/CollectionNfts.tsx

@@ -21,13 +21,18 @@ import { useIsCollectionLoading } from 'nft/hooks/useIsCollectionLoading'
 import { AssetsFetcher } from 'nft/queries'
 import { DropDownOption, GenieCollection, UniformHeight, UniformHeights } from 'nft/types'
 import { getRarityStatus } from 'nft/utils/asset'
+import { pluralize } from 'nft/utils/roundAndPluralize'
+import { scrollToTop } from 'nft/utils/scrollToTop'
 import { applyFiltersFromURL, syncLocalFiltersWithURL } from 'nft/utils/urlParams'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { useLocation } from 'react-router-dom'
+import styled from 'styled-components/macro'
 
 import { CollectionAssetLoading } from './CollectionAssetLoading'
+import { marketPlaceItems } from './MarketplaceSelect'
+import { TraitChip } from './TraitChip'
 
 interface CollectionNftsProps {
   contractAddress: string
@@ -37,6 +42,17 @@ interface CollectionNftsProps {
 
 const rarityStatusCache = new Map<string, boolean>()
 
+const ClearAllButton = styled.button`
+  color: ${({ theme }) => theme.textTertiary};
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  background: none;
+`
+
 export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerified }: CollectionNftsProps) => {
   const traits = useCollectionFilters((state) => state.traits)
   const minPrice = useCollectionFilters((state) => state.minPrice)
@@ -48,6 +64,11 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
   const setSortBy = useCollectionFilters((state) => state.setSortBy)
   const buyNow = useCollectionFilters((state) => state.buyNow)
   const setIsCollectionNftsLoading = useIsCollectionLoading((state) => state.setIsCollectionNftsLoading)
+  const removeTrait = useCollectionFilters((state) => state.removeTrait)
+  const removeMarket = useCollectionFilters((state) => state.removeMarket)
+  const reset = useCollectionFilters((state) => state.reset)
+  const setMin = useCollectionFilters((state) => state.setMinPrice)
+  const setMax = useCollectionFilters((state) => state.setMaxPrice)
 
   const debouncedMinPrice = useDebounce(minPrice, 500)
   const debouncedMaxPrice = useDebounce(maxPrice, 500)
@@ -208,6 +229,18 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
 
   const hasNfts = collectionNfts && collectionNfts.length > 0
 
+  const minMaxPriceChipText: string | undefined = useMemo(() => {
+    if (debouncedMinPrice && debouncedMaxPrice) {
+      return `Price: ${debouncedMinPrice}-${debouncedMaxPrice} ETH`
+    } else if (debouncedMinPrice) {
+      return `Min. Price: ${debouncedMinPrice} ETH`
+    } else if (debouncedMaxPrice) {
+      return `Max Price: ${debouncedMaxPrice} ETH`
+    }
+
+    return undefined
+  }, [debouncedMinPrice, debouncedMaxPrice])
+
   useEffect(() => {
     const marketCount: any = {}
     collectionStats?.marketplaceCount?.forEach(({ marketplace, count }) => {
@@ -255,6 +288,52 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             <SortDropdown dropDownOptions={sortDropDownOptions} />
             <CollectionSearch />
           </Row>
+          <Row paddingTop="12" gap="8" flexWrap="wrap">
+            {markets.map((market) => (
+              <TraitChip
+                key={market}
+                value={marketPlaceItems[market as keyof typeof marketPlaceItems]}
+                onClick={() => {
+                  scrollToTop()
+                  removeMarket(market)
+                }}
+              />
+            ))}
+            {traits.map((trait) => (
+              <TraitChip
+                key={trait.trait_value}
+                value={
+                  trait.trait_type === 'Number of traits'
+                    ? `${trait.trait_value} trait${pluralize(Number(trait.trait_value))}`
+                    : `${trait.trait_type}: ${trait.trait_value}`
+                }
+                onClick={() => {
+                  scrollToTop()
+                  removeTrait(trait)
+                }}
+              />
+            ))}
+            {minMaxPriceChipText && (
+              <TraitChip
+                value={minMaxPriceChipText}
+                onClick={() => {
+                  scrollToTop()
+                  setMin('')
+                  setMax('')
+                }}
+              />
+            )}
+            {traits.length || markets.length > 0 || minMaxPriceChipText ? (
+              <ClearAllButton
+                onClick={() => {
+                  reset()
+                  scrollToTop()
+                }}
+              >
+                Clear All
+              </ClearAllButton>
+            ) : null}
+          </Row>
         </Box>
       </AnimatedBox>
       <InfiniteScroll

src/nft/components/collection/TraitChip.tsx

+import { CrossIcon } from 'nft/components/icons'
+import styled from 'styled-components/macro'
+
+const TraitChipWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 4px 8px 12px;
+  font-weight: 600;
+  border-radius: 12px;
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  font-size: 14px;
+`
+
+const CrossIconWrap = styled.div`
+  color: ${({ theme }) => theme.textSecondary};
+  height: 28px;
+  width: 28px;
+  border: none;
+  padding-top: 1px;
+`
+
+export const TraitChip = ({ onClick, value }: { value: string; onClick: () => void }) => {
+  return (
+    <TraitChipWrap>
+      <span>{value}</span>
+
+      <CrossIconWrap onClick={onClick}>
+        <CrossIcon cursor="pointer" />
+      </CrossIconWrap>
+    </TraitChipWrap>
+  )
+}

src/nft/hooks/useCollectionFilters.ts

@@ -84,7 +84,7 @@ export const useCollectionFilters = create<CollectionFilters>()(
         set(({ traits }) => ({
           traits: traits.filter((x) => JSON.stringify(x) !== JSON.stringify(trait)),
         })),
-      reset: () => set(() => ({ traits: [], minRarity: '', maxRarity: '', markets: [] })),
+      reset: () => set(() => ({ traits: [], minRarity: '', maxRarity: '', markets: [], minPrice: '', maxPrice: '' })),
       setMinPrice: (price) => set(() => ({ minPrice: price })),
       setMaxPrice: (price) => set(() => ({ maxPrice: price })),
       setMinRarity: (range) => set(() => ({ minRarity: range })),