From b92b2866262b7c2df479ee966ba3e0910e6d2f95 Mon Sep 17 00:00:00 2001 From: Jack Short Date: Thu, 27 Apr 2023 16:51:53 -0400 Subject: [PATCH] chore: updating listing marketplace icons (#6458) * chore: updating listing marketplace icons * removing svgs from public * responding to comments --- public/nft/svgs/marketplaces/looksrare.svg | 5 ---- public/nft/svgs/marketplaces/opensea.svg | 5 ---- public/nft/svgs/marketplaces/x2y2.svg | 20 --------------- .../profile/list/MarketplaceRow.tsx | 6 ++--- .../profile/list/Modal/ContentRow.tsx | 7 +++--- .../profile/list/Modal/ListModalSection.tsx | 2 +- .../profile/list/RoyaltyTooltip.tsx | 19 ++++++++------ .../list/SelectMarketplacesDropdown.tsx | 25 ++++++------------- src/nft/components/profile/list/utils.ts | 4 +-- src/nft/types/sell/sell.ts | 6 ++--- src/nft/utils/listNfts.ts | 2 -- 11 files changed, 31 insertions(+), 70 deletions(-) delete mode 100644 public/nft/svgs/marketplaces/looksrare.svg delete mode 100644 public/nft/svgs/marketplaces/opensea.svg delete mode 100644 public/nft/svgs/marketplaces/x2y2.svg diff --git a/public/nft/svgs/marketplaces/looksrare.svg b/public/nft/svgs/marketplaces/looksrare.svg deleted file mode 100644 index 0ba0aafb32..0000000000 --- a/public/nft/svgs/marketplaces/looksrare.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/nft/svgs/marketplaces/opensea.svg b/public/nft/svgs/marketplaces/opensea.svg deleted file mode 100644 index d11500eef5..0000000000 --- a/public/nft/svgs/marketplaces/opensea.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/nft/svgs/marketplaces/x2y2.svg b/public/nft/svgs/marketplaces/x2y2.svg deleted file mode 100644 index 9bee2e062d..0000000000 --- a/public/nft/svgs/marketplaces/x2y2.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/src/nft/components/profile/list/MarketplaceRow.tsx b/src/nft/components/profile/list/MarketplaceRow.tsx index c4a80d6951..303d90299c 100644 --- a/src/nft/components/profile/list/MarketplaceRow.tsx +++ b/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() }} > - + {getMarketplaceIcon(market.name, '20')} Remove item diff --git a/src/nft/components/profile/list/Modal/ContentRow.tsx b/src/nft/components/profile/list/Modal/ContentRow.tsx index a4e6b7810b..c19abd5224 100644 --- a/src/nft/components/profile/list/Modal/ContentRow.tsx +++ b/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 ? : } - + {isCollectionApprovalSection ? : } + {getMarketplaceIcon(row.marketplace.name, '24')} {row.name} {isCollectionApprovalSection && (row as CollectionRow).isVerified && } diff --git a/src/nft/components/profile/list/Modal/ListModalSection.tsx b/src/nft/components/profile/list/Modal/ListModalSection.tsx index b3fb65dd23..c8bf9f0ee8 100644 --- a/src/nft/components/profile/list/Modal/ListModalSection.tsx +++ b/src/nft/components/profile/list/Modal/ListModalSection.tsx @@ -143,7 +143,7 @@ export const ListModalSection = ({ sectionType, active, content, toggleSection } {content.map((row: AssetRow) => ( diff --git a/src/nft/components/profile/list/RoyaltyTooltip.tsx b/src/nft/components/profile/list/RoyaltyTooltip.tsx index 6153cdb496..9cd7431c93 100644 --- a/src/nft/components/profile/list/RoyaltyTooltip.tsx +++ b/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) => ( - + {getMarketplaceIcon(market.name, '16')} {market.name}  fee diff --git a/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx b/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx index a12c1ccfbb..43c65d9979 100644 --- a/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx +++ b/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 ( - + {getMarketplaceIcon(market.name, '24')} {market.name} {market.fee}% fee @@ -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 = ({ {selectedMarkets.map((market, index) => { return ( - + + {getMarketplaceIcon(market.name, '20')} + ) })} {dropdownDisplayText} diff --git a/src/nft/components/profile/list/utils.ts b/src/nft/components/profile/list/utils.ts index ac47e3d1e4..b93faf414b 100644 --- a/src/nft/components/profile/list/utils.ts +++ b/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, diff --git a/src/nft/types/sell/sell.ts b/src/nft/types/sell/sell.ts index e9bee0a906..76fa7c9d10 100644 --- a/src/nft/types/sell/sell.ts +++ b/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 } export interface ListingRow extends AssetRow { asset: WalletAsset - marketplace: ListingMarket price?: number } export interface CollectionRow extends AssetRow { collectionAddress?: string isVerified?: boolean - marketplace: ListingMarket nftStandard?: NftStandard } diff --git a/src/nft/utils/listNfts.ts b/src/nft/utils/listNfts.ts index 888124d0f9..27b84ab4fd 100644 --- a/src/nft/utils/listNfts.ts +++ b/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', }, ]