diff --git a/src/nft/components/collection/CollectionNfts.tsx b/src/nft/components/collection/CollectionNfts.tsx index 745a460aef..cacc5b3afa 100644 --- a/src/nft/components/collection/CollectionNfts.tsx +++ b/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) => ( + + {MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]} + + } onClick={() => { scrollToTop() removeMarket(market) diff --git a/src/nft/components/collection/MarketplaceSelect.tsx b/src/nft/components/collection/MarketplaceSelect.tsx index c88350f0ef..b7b7284cea 100644 --- a/src/nft/components/collection/MarketplaceSelect.tsx +++ b/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 }) => { @@ -91,9 +108,16 @@ const MarketplaceItem = ({ ) + const titleWithLogo = ( + + + {title} + + ) + return (
- +
) } diff --git a/src/nft/components/collection/TraitChip.tsx b/src/nft/components/collection/TraitChip.tsx index 9077517f5d..34621a842a 100644 --- a/src/nft/components/collection/TraitChip.tsx +++ b/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 ( {value}