chore: updating listing marketplace icons (#6458)

* chore: updating listing marketplace icons

* removing svgs from public

* responding to comments

public/nft/svgs/marketplaces/looksrare.svg

-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="200" height="200" fill="#04CD58"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M100 112C87.3026 112 77 101.708 77 89C77 76.2923 87.3026 66 100 66C112.697 66 123 76.2923 123 89C123 101.708 112.697 112 100 112ZM90 89C90 94.5251 94.4794 99 100 99C105.521 99 110 94.5251 110 89C110 83.4749 105.521 79 100 79C94.4794 79 90 83.4749 90 89Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26 89.0304L70 45H130L174 89.0304L100 163L26 89.0304ZM134 72.9998C115.305 54.2224 84.6953 54.2225 66 72.9999L50 89.0001L66 105C84.6953 123.778 115.305 123.777 134 105L150 89.0001L134 72.9998Z" fill="black"/>
-</svg>

public/nft/svgs/marketplaces/opensea.svg

-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="100" height="100" fill="#2081E2"/>
-<path d="M24.6679 51.6802L24.8836 51.3411L37.8906 30.9933C38.0807 30.6954 38.5276 30.7262 38.6714 31.0498C40.8444 35.9197 42.7194 41.9763 41.841 45.7469C41.466 47.2983 40.4386 49.3993 39.2827 51.3411C39.1338 51.6237 38.9694 51.9011 38.7947 52.1682C38.7125 52.2915 38.5738 52.3634 38.4248 52.3634H25.048C24.6884 52.3634 24.4778 51.973 24.6679 51.6802Z" fill="white"/>
-<path d="M82.6444 55.461V58.6819C82.6444 58.8668 82.5314 59.0312 82.367 59.1031C81.3602 59.5346 77.9132 61.1168 76.48 63.11C72.8224 68.2008 70.0279 75.48 63.7812 75.48H37.721C28.4847 75.48 21 67.9697 21 58.7024V58.4045C21 58.1579 21.2003 57.9576 21.4469 57.9576H35.9745C36.2621 57.9576 36.4727 58.2247 36.4471 58.5072C36.3443 59.4524 36.519 60.4182 36.9659 61.2966C37.8289 63.0484 39.6166 64.1426 41.5481 64.1426H48.74V58.5278H41.6303C41.2656 58.5278 41.0499 58.1065 41.2605 57.8086C41.3375 57.6904 41.4249 57.5672 41.5173 57.4285C42.1903 56.473 43.1509 54.9884 44.1064 53.2983C44.7588 52.1579 45.3906 50.9404 45.8992 49.7178C46.002 49.4969 46.0841 49.2708 46.1663 49.0499C46.305 48.6595 46.4489 48.2948 46.5516 47.9301C46.6544 47.6218 46.7365 47.2982 46.8187 46.9951C47.0602 45.9574 47.1629 44.8581 47.1629 43.7177C47.1629 43.2708 47.1424 42.8033 47.1013 42.3564C47.0807 41.8684 47.0191 41.3803 46.9574 40.8923C46.9163 40.4608 46.8393 40.0344 46.7571 39.5875C46.6544 38.9351 46.5105 38.2879 46.3461 37.6354L46.2896 37.3889C46.1663 36.9419 46.0636 36.5156 45.9198 36.0687C45.5139 34.6662 45.0465 33.2998 44.5533 32.0207C44.3735 31.5121 44.168 31.0241 43.9625 30.5361C43.6595 29.8015 43.3512 29.1337 43.0687 28.5018C42.9249 28.2141 42.8016 27.9521 42.6783 27.685C42.5396 27.3819 42.3958 27.0788 42.2519 26.7912C42.1492 26.5703 42.031 26.3648 41.9488 26.1593L41.0704 24.536C40.9471 24.3151 41.1526 24.0531 41.394 24.1199L46.8907 25.6096H46.9061C46.9163 25.6096 46.9215 25.6148 46.9266 25.6148L47.6509 25.8151L48.4472 26.0412L48.74 26.1233V22.8562C48.74 21.2791 50.0037 20 51.5654 20C52.3462 20 53.0551 20.3185 53.5637 20.8373C54.0722 21.3562 54.3907 22.0651 54.3907 22.8562V27.7056L54.9764 27.8699C55.0226 27.8854 55.0688 27.9059 55.1099 27.9367C55.2538 28.0446 55.4592 28.2038 55.7212 28.3991C55.9267 28.5634 56.1476 28.7638 56.4147 28.9693C56.9438 29.3956 57.5757 29.9453 58.2692 30.5772C58.4541 30.7364 58.6339 30.9008 58.7983 31.0652C59.6922 31.8974 60.6939 32.8734 61.6494 33.9522C61.9165 34.2553 62.1785 34.5635 62.4456 34.8871C62.7127 35.2159 62.9953 35.5395 63.2418 35.8632C63.5655 36.2947 63.9148 36.7416 64.2179 37.2091C64.3617 37.43 64.5261 37.656 64.6648 37.8769C65.0552 38.4676 65.3994 39.079 65.7282 39.6903C65.8669 39.9728 66.0107 40.281 66.134 40.5841C66.4987 41.4009 66.7864 42.2331 66.9713 43.0653C67.0278 43.2451 67.0689 43.4403 67.0895 43.615V43.6561C67.1511 43.9026 67.1717 44.1646 67.1922 44.4317C67.2744 45.2845 67.2333 46.1372 67.0484 46.9951C66.9713 47.3599 66.8686 47.704 66.7453 48.0688C66.622 48.4181 66.4987 48.7828 66.3395 49.127C66.0313 49.841 65.6665 50.5551 65.235 51.2229C65.0963 51.4695 64.9319 51.7315 64.7675 51.9781C64.5877 52.24 64.4028 52.4866 64.2384 52.7281C64.0124 53.0363 63.771 53.3599 63.5244 53.6476C63.3035 53.9507 63.0775 54.2538 62.8309 54.5209C62.4867 54.9267 62.1579 55.312 61.8137 55.6819C61.6083 55.9233 61.3874 56.1699 61.1613 56.3908C60.9405 56.6373 60.7144 56.8582 60.5089 57.0637C60.1648 57.4079 59.8771 57.675 59.6356 57.8959L59.0706 58.4148C58.9884 58.4867 58.8805 58.5278 58.7675 58.5278H54.3907V64.1426H59.8976C61.1305 64.1426 62.3018 63.7059 63.247 62.9045C63.5706 62.622 64.9833 61.3994 66.6528 59.5552C66.7093 59.4935 66.7813 59.4473 66.8635 59.4268L82.0742 55.0295C82.3568 54.9473 82.6444 55.163 82.6444 55.461Z" fill="white"/>
-</svg>

public/nft/svgs/marketplaces/x2y2.svg

-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" fill="#F9F9F9"/>
-<path d="M21.94 7.92004C20.4077 6.42277 18.3116 5.5 16 5.5C11.3056 5.5 7.5 9.30559 7.5 14C7.5 18.6944 11.3056 22.5 16 22.5C18.3116 22.5 20.4077 21.5772 21.94 20.08C20.1123 22.4633 17.2356 24 14 24C8.47715 24 4 19.5229 4 14C4 8.47715 8.47715 4 14 4C17.2356 4 20.1123 5.53668 21.94 7.92004Z" fill="url(#paint0_linear_6993_17582)"/>
-<path d="M9.64795 18.864C10.8738 20.0618 12.5507 20.8 14.4 20.8C18.1555 20.8 21.2 17.7555 21.2 14C21.2 10.2445 18.1555 7.2 14.4 7.2C12.5507 7.2 10.8738 7.9382 9.64795 9.13601C11.1102 7.22934 13.4115 6 16 6C20.4183 6 24 9.58172 24 14C24 18.4183 20.4183 22 16 22C13.4115 22 11.1102 20.7707 9.64795 18.864Z" fill="url(#paint1_linear_6993_17582)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 14C20 17.3137 17.3137 20 14 20C10.6863 20 8 17.3137 8 14C8 10.6863 10.6863 8 14 8C17.3137 8 20 10.6863 20 14ZM18 14C18 16.2091 16.2091 18 14 18C11.7909 18 10 16.2091 10 14C10 11.7909 11.7909 10 14 10C16.2091 10 18 11.7909 18 14Z" fill="url(#paint2_linear_6993_17582)"/>
-<defs>
-<linearGradient id="paint0_linear_6993_17582" x1="4" y1="13.6552" x2="24" y2="13.6552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00E0FF"/>
-<stop offset="1" stop-color="#562EC8"/>
-</linearGradient>
-<linearGradient id="paint1_linear_6993_17582" x1="3.99998" y1="13.6552" x2="24" y2="13.6552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00E0FF"/>
-<stop offset="1" stop-color="#562EC8"/>
-</linearGradient>
-<linearGradient id="paint2_linear_6993_17582" x1="4" y1="13.6552" x2="24" y2="13.6552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00E0FF"/>
-<stop offset="1" stop-color="#562EC8"/>
-</linearGradient>
-</defs>
-</svg>

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -12,6 +12,7 @@ import {
 } from 'nft/components/profile/list/utils'
 import { useSellAsset } from 'nft/hooks'
 import { ListingMarket, WalletAsset } from 'nft/types'
+import { getMarketplaceIcon } from 'nft/utils'
 import { formatEth, formatUsdPrice } from 'nft/utils/currency'
 import { fetchPrice } from 'nft/utils/fetchPrice'
 import { Dispatch, DispatchWithoutAction, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
@@ -64,11 +65,10 @@ const MarketIconWrapper = styled(Column)`
   cursor: pointer;
 `
 
-const MarketIcon = styled.img<{ index: number }>`
+const MarketIcon = styled.div<{ index: number }>`
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  object-fit: cover;
   z-index: ${({ index }) => 2 - index};
   margin-left: ${({ index }) => `${index === 0 ? 0 : -8}px`};
   outline: 1px solid ${({ theme }) => theme.backgroundInteractive};
@@ -214,7 +214,7 @@ export const MarketplaceRow = ({
                   removeMarket && removeMarket()
                 }}
               >
-                <MarketIcon alt={market.name} src={market.icon} index={index} />
+                <MarketIcon index={index}>{getMarketplaceIcon(market.name, '20')}</MarketIcon>
                 <RemoveMarketplaceWrap hovered={marketIconHovered && (expandMarketplaceRows ?? false)}>
                   <img width="20px" src="/nft/svgs/minusCircle.svg" alt="Remove item" />
                 </RemoveMarketplaceWrap>

src/nft/components/profile/list/Modal/ContentRow.tsx

@@ -4,6 +4,7 @@ import Loader from 'components/Icons/LoadingSpinner'
 import Row from 'components/Row'
 import { VerifiedIcon } from 'nft/components/icons'
 import { AssetRow, CollectionRow, ListingStatus } from 'nft/types'
+import { getMarketplaceIcon } from 'nft/utils'
 import { useEffect, useRef } from 'react'
 import { Check, XOctagon } from 'react-feather'
 import styled, { css, useTheme } from 'styled-components/macro'
@@ -37,7 +38,7 @@ const AssetIcon = styled.img`
   z-index: 1;
 `
 
-const MarketplaceIcon = styled.img`
+const MarketplaceIcon = styled.div`
   border-radius: 4px;
   height: 24px;
   width: 24px;
@@ -137,8 +138,8 @@ export const ContentRow = ({
         failed={failed}
         ref={rowRef}
       >
-        {isCollectionApprovalSection ? <CollectionIcon src={row.images[0]} /> : <AssetIcon src={row.images[0]} />}
-        <MarketplaceIcon src={row.images[1]} />
+        {isCollectionApprovalSection ? <CollectionIcon src={row.image} /> : <AssetIcon src={row.image} />}
+        <MarketplaceIcon>{getMarketplaceIcon(row.marketplace.name, '24')}</MarketplaceIcon>
         <ContentName>{row.name}</ContentName>
         {isCollectionApprovalSection && (row as CollectionRow).isVerified && <StyledVerifiedIcon />}
         <IconWrapper>

src/nft/components/profile/list/Modal/ListModalSection.tsx

@@ -143,7 +143,7 @@ export const ListModalSection = ({ sectionType, active, content, toggleSection }
             {content.map((row: AssetRow) => (
               <ContentRow
                 row={row}
-                key={(row?.name ?? '') + row?.images[1]}
+                key={row?.name ?? row.marketplace.name}
                 removeRow={removeRow}
                 isCollectionApprovalSection={isCollectionApprovalSection}
               />

src/nft/components/profile/list/RoyaltyTooltip.tsx

@@ -3,8 +3,8 @@ import Column from 'components/Column'
 import Row from 'components/Row'
 import { getMarketplaceFee, getRoyalty } from 'nft/components/profile/list/utils'
 import { ListingMarket, WalletAsset } from 'nft/types'
-import { formatEth } from 'nft/utils'
-import styled from 'styled-components/macro'
+import { formatEth, getMarketplaceIcon } from 'nft/utils'
+import styled, { css } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 const FeeWrap = styled(Row)`
@@ -17,17 +17,22 @@ const RoyaltyContainer = styled(Column)`
   padding: 4px 0px;
 `
 
-const MarketIcon = styled.img`
+const iconStyles = css`
   width: 16px;
   height: 16px;
-  border-radius: 2px;
-  object-fit: cover;
   outline: 1px solid ${({ theme }) => theme.backgroundInteractive};
   margin-right: 8px;
 `
 
-const CollectionIcon = styled(MarketIcon)`
+const MarketIcon = styled.div`
+  border-radius: 4px;
+  ${iconStyles}
+`
+
+const CollectionIcon = styled.img`
+  object-fit: cover;
   border-radius: 50%;
+  ${iconStyles}
 `
 
 const FeePercent = styled(ThemedText.Caption)`
@@ -57,7 +62,7 @@ export const RoyaltyTooltip = ({
       {selectedMarkets.map((market) => (
         <FeeWrap key={asset.collection?.address ?? '' + asset.tokenId + market.name + 'fee'}>
           <Row>
-            <MarketIcon src={market.icon} />
+            <MarketIcon>{getMarketplaceIcon(market.name, '16')}</MarketIcon>
             <ThemedText.Caption lineHeight="16px" marginRight="12px">
               {market.name}&nbsp;
               <Trans>fee</Trans>

src/nft/components/profile/list/SelectMarketplacesDropdown.tsx

@@ -6,6 +6,7 @@ import { Checkbox } from 'nft/components/layout/Checkbox'
 import { buttonTextMedium, caption } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { ListingMarket } from 'nft/types'
+import { getMarketplaceIcon } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { Dispatch, FormEvent, useMemo, useReducer, useRef } from 'react'
 import styled from 'styled-components/macro'
@@ -25,13 +26,6 @@ const MarketplaceRowWrapper = styled(Row)`
   border-radius: 12px;
 `
 
-const MarketplaceDropdownIcon = styled.img`
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  object-fit: cover;
-`
-
 const FeeText = styled.div`
   color: ${({ theme }) => theme.textSecondary};
 `
@@ -60,7 +54,7 @@ const MarketplaceRow = ({ market, setSelectedMarkets, selectedMarkets }: Marketp
   return (
     <MarketplaceRowWrapper onMouseEnter={toggleHovered} onMouseLeave={toggleHovered} onClick={toggleSelected}>
       <Row gap="12" onClick={toggleSelected}>
-        <MarketplaceDropdownIcon alt={market.name} src={market.icon} />
+        {getMarketplaceIcon(market.name, '24')}
         <Column>
           <ThemedText.BodyPrimary>{market.name}</ThemedText.BodyPrimary>
           <FeeText className={caption}>{market.fee}% fee</FeeText>
@@ -93,12 +87,11 @@ const HeaderButtonContentWrapper = styled.div`
   display: flex;
 `
 
-const MarketIcon = styled.img<{ index: number; totalSelected: number }>`
+const MarketIcon = styled.div<{ index: number; totalSelected: number }>`
   height: 20px;
   width: 20px;
   margin-right: 8px;
-  border: 1px solid;
-  border-color: ${({ theme }) => theme.backgroundInteractive};
+  outline: 1px solid ${({ theme }) => theme.backgroundInteractive};
   border-radius: 4px;
   z-index: ${({ index, totalSelected }) => totalSelected - index};
   margin-left: ${({ index }) => `${index === 0 ? 0 : -18}px`};
@@ -156,13 +149,9 @@ export const SelectMarketplacesDropdown = ({
         <HeaderButtonContentWrapper>
           {selectedMarkets.map((market, index) => {
             return (
-              <MarketIcon
-                key={index}
-                alt={market.name}
-                src={market.icon}
-                totalSelected={selectedMarkets.length}
-                index={index}
-              />
+              <MarketIcon key={index} totalSelected={selectedMarkets.length} index={index}>
+                {getMarketplaceIcon(market.name, '20')}
+              </MarketIcon>
             )
           })}
           {dropdownDisplayText}

src/nft/components/profile/list/utils.ts

@@ -93,7 +93,7 @@ const getListings = (sellAssets: WalletAsset[]): [CollectionRow[], ListingRow[]]
   sellAssets.forEach((asset) => {
     asset.marketplaces?.forEach((marketplace: ListingMarket) => {
       const newListing = {
-        images: [asset.smallImageUrl, marketplace.icon],
+        image: asset.smallImageUrl,
         name: asset.name || `#${asset.tokenId}`,
         status: ListingStatus.DEFINED,
         asset,
@@ -109,7 +109,7 @@ const getListings = (sellAssets: WalletAsset[]): [CollectionRow[], ListingRow[]]
         )
       ) {
         const newCollectionRow = {
-          images: [asset.asset_contract.image_url, marketplace.icon],
+          image: asset.asset_contract.image_url,
           name: asset.asset_contract.name,
           status: ListingStatus.DEFINED,
           collectionAddress: asset.asset_contract.address,

src/nft/types/sell/sell.ts

@@ -5,7 +5,6 @@ import { GenieCollection, PriceInfo } from '../common'
 export interface ListingMarket {
   name: string
   fee: number
-  icon: string
 }
 
 export interface SellOrder {
@@ -89,22 +88,21 @@ export enum ListingStatus {
 }
 
 export interface AssetRow {
-  images: (string | undefined)[]
+  image: string | undefined
   name?: string
   status: ListingStatus
+  marketplace: ListingMarket
   callback?: () => Promise<void>
 }
 
 export interface ListingRow extends AssetRow {
   asset: WalletAsset
-  marketplace: ListingMarket
   price?: number
 }
 
 export interface CollectionRow extends AssetRow {
   collectionAddress?: string
   isVerified?: boolean
-  marketplace: ListingMarket
   nftStandard?: NftStandard
 }
 

src/nft/utils/listNfts.ts

@@ -35,12 +35,10 @@ export const ListingMarkets: ListingMarket[] = [
   {
     name: 'X2Y2',
     fee: 0.5,
-    icon: '/nft/svgs/marketplaces/x2y2.svg',
   },
   {
     name: 'OpenSea',
     fee: 0,
-    icon: '/nft/svgs/marketplaces/opensea.svg',
   },
 ]