feat: add market logos to filters and chips (#5199)

* add market logos to filters and chips

* remove comment

src/nft/components/collection/CollectionNfts.tsx

@@ -45,7 +45,7 @@ import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import { CollectionAssetLoading } from './CollectionAssetLoading'
-import { MARKETPLACE_ITEMS } from './MarketplaceSelect'
+import { MARKETPLACE_ITEMS, MarketplaceLogo } from './MarketplaceSelect'
 import { Sweep, useSweepFetcherParams } from './Sweep'
 import { TraitChip } from './TraitChip'
 
@@ -166,6 +166,10 @@ export const LoadingButton = styled.div`
   background-size: 400%;
 `
 
+const MarketNameWrapper = styled(Row)`
+  gap: 8px;
+`
+
 const loadingAssets = (height?: number) => (
   <>
     {Array.from(Array(ASSET_PAGE_SIZE), (_, index) => (
@@ -459,7 +463,12 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
             {markets.map((market) => (
               <TraitChip
                 key={market}
-                value={MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
+                value={
+                  <MarketNameWrapper>
+                    <MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} />
+                    {MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
+                  </MarketNameWrapper>
+                }
                 onClick={() => {
                   scrollToTop()
                   removeMarket(market)

src/nft/components/collection/MarketplaceSelect.tsx

@@ -24,6 +24,16 @@ const FilterItemWrapper = styled(Row)`
   }
 `
 
+export const MarketplaceLogo = styled.img`
+  height: 16px;
+  width: 16px;
+  border-radius: 4px;
+`
+
+const MarketNameWrapper = styled(Row)`
+  gap: 10px;
+`
+
 export const MARKETPLACE_ITEMS = {
   looksrare: 'LooksRare',
   nft20: 'NFT20',
@@ -34,12 +44,19 @@ export const MARKETPLACE_ITEMS = {
   sudoswap: 'SudoSwap',
 }
 
+function getMarketLogoSrc(market: string) {
+  const marketplaceItem = Object.keys(MARKETPLACE_ITEMS).find(
+    (key) => MARKETPLACE_ITEMS[key as keyof typeof MARKETPLACE_ITEMS] === market
+  )
+  return `/nft/svgs/marketplaces/${marketplaceItem}.svg`
+}
+
 export const FilterItem = ({
   title,
   element,
   onClick,
 }: {
-  title: string
+  title: string | JSX.Element
   element: JSX.Element
   onClick: React.MouseEventHandler<HTMLElement>
 }) => {
@@ -91,9 +108,16 @@ const MarketplaceItem = ({
     </Checkbox>
   )
 
+  const titleWithLogo = (
+    <MarketNameWrapper>
+      <MarketplaceLogo src={getMarketLogoSrc(title)} />
+      {title}
+    </MarketNameWrapper>
+  )
+
   return (
     <div key={value} onMouseEnter={toggleHover} onMouseLeave={toggleHover}>
-      <FilterItem title={title} element={checkbox} onClick={handleCheckbox} />
+      <FilterItem title={titleWithLogo} element={checkbox} onClick={handleCheckbox} />
     </div>
   )
 }

src/nft/components/collection/TraitChip.tsx

@@ -20,7 +20,7 @@ const CrossIconWrap = styled.div`
   padding-top: 1px;
 `
 
-export const TraitChip = ({ onClick, value }: { value: string; onClick: () => void }) => {
+export const TraitChip = ({ onClick, value }: { value: string | JSX.Element; onClick: () => void }) => {
   return (
     <TraitChipWrap>
       <span>{value}</span>