chore: remove some unused NFT exports (#5517)

This commit is contained in:
Vignesh Mohankumar 2022-12-01 23:07:00 -05:00 committed by GitHub
parent 5126e24d19
commit 5364eb5715
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 6 additions and 290 deletions

@ -96,7 +96,7 @@ const ActionsSubContainer = styled.div`
}
`
export const SortDropdownContainer = styled.div<{ isFiltersExpanded: boolean }>`
const SortDropdownContainer = styled.div<{ isFiltersExpanded: boolean }>`
width: max-content;
height: 44px;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
@ -127,7 +127,7 @@ export const ClearAllButton = styled.button`
background: none;
`
export const InfiniteScrollWrapper = styled.div`
const InfiniteScrollWrapper = styled.div`
${InfiniteScrollWrapperCss}
`
@ -176,7 +176,7 @@ export const LoadingAssets = ({ count }: { count?: number }) => (
</>
)
export const CollectionNftsLoading = () => (
const CollectionNftsLoading = () => (
<Box width="full" className={styles.assetList}>
<LoadingAssets />
</Box>

@ -136,7 +136,7 @@ interface NftDisplayProps {
nfts: GenieAsset[]
}
export const NftDisplay = ({ nfts }: NftDisplayProps) => {
const NftDisplay = ({ nfts }: NftDisplayProps) => {
return (
<NftDisplayContainer>
{[...Array(3)].map((_, index) => {

@ -1,12 +0,0 @@
import { style } from '@vanilla-extract/css'
export const list = style({
overflowAnchor: 'none',
scrollbarWidth: 'none',
msOverflowStyle: 'none',
selectors: {
'&::-webkit-scrollbar': {
display: 'none',
},
},
})

@ -1,73 +0,0 @@
import { bodySmall } from '../../css/common.css'
import { shortenAddress } from '../../utils/address'
import { Box, BoxProps } from '../Box'
import { Column, Row } from '../Flex'
const DetailItemLabel = (props: BoxProps) => <Box as="span" fontSize="14" color="textSecondary" {...props} />
const DetailItemValue = (props: BoxProps) => (
<Box as="span" fontSize="14" marginLeft="4" color="textPrimary" {...props} />
)
const Detail = (props: BoxProps) => (
<Row justifyContent="space-between" width="full" style={{ minWidth: '224px' }} {...props} />
)
export const Details = ({
contractAddress,
tokenId,
metadataUrl,
tokenType,
totalSupply,
blockchain,
}: {
contractAddress: string
tokenId: string
metadataUrl?: string
tokenType: string
totalSupply?: number
blockchain: string
}) => (
<Row gap={{ md: '32', sm: '16' }} width="full" justifyContent="space-between" alignItems="flex-start" flexWrap="wrap">
<Column width={{ sm: 'full', md: 'auto' }} gap="10">
<Detail>
<DetailItemLabel>Contract Address: </DetailItemLabel>
<a
href={`https://etherscan.io/token/${contractAddress}`}
target="_blank"
rel="noreferrer"
style={{ textDecoration: 'none' }}
>
<DetailItemValue>{shortenAddress(contractAddress)}</DetailItemValue>
</a>
</Detail>
<Detail>
<DetailItemLabel>Token ID:</DetailItemLabel>
<DetailItemValue className={bodySmall}>{tokenId}</DetailItemValue>
</Detail>
{metadataUrl ? (
<Detail>
<DetailItemLabel>Metadata:</DetailItemLabel>
<a href={metadataUrl} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
<DetailItemValue>{metadataUrl.slice(0, 12)}...</DetailItemValue>
</a>
</Detail>
) : null}
</Column>
<Column width={{ sm: 'full', md: 'auto' }} gap="10">
<Detail>
<DetailItemLabel>Contract type:</DetailItemLabel>
<DetailItemValue>{tokenType}</DetailItemValue>
</Detail>
<Detail>
<DetailItemLabel>Total supply:</DetailItemLabel>
<DetailItemValue>{totalSupply}</DetailItemValue>
</Detail>
<Detail>
<DetailItemLabel>Blockchain:</DetailItemLabel>
<DetailItemValue>{blockchain}</DetailItemValue>
</Detail>
</Column>
</Row>
)

@ -1,128 +0,0 @@
import clsx from 'clsx'
import { Box } from 'nft/components/Box'
import { Column, Row } from 'nft/components/Flex'
import { ActivityFetcher } from 'nft/queries'
import { ActivityEvent, ActivityEventTypeDisplay, Markets } from 'nft/types'
import { formatEthPrice } from 'nft/utils/currency'
import { getTimeDifference, isValidDate } from 'nft/utils/date'
import { putCommas } from 'nft/utils/putCommas'
import { useEffect, useMemo, useReducer, useState } from 'react'
import { useQuery } from 'react-query'
import { useNavigate } from 'react-router-dom'
import * as styles from './Explore.css'
const ActivityFeed = ({ address }: { address: string }) => {
const [current, setCurrent] = useState(0)
const [hovered, toggleHover] = useReducer((state) => !state, false)
const navigate = useNavigate()
const { data: collectionActivity } = useQuery(['collectionActivity', address], () => ActivityFetcher(address), {
staleTime: 5000,
})
useEffect(() => {
const interval = setInterval(() => {
if (collectionActivity && !hovered) setCurrent(current === collectionActivity.events.length - 1 ? 0 : current + 1)
}, 3000)
return () => clearInterval(interval)
}, [current, collectionActivity, hovered])
return (
<Column
borderRadius="20"
overflow="hidden"
onMouseEnter={toggleHover}
onMouseLeave={toggleHover}
marginTop="40"
style={{ background: 'rgba(13, 14, 14, 0.7)', height: '270px', width: '60%' }}
>
{collectionActivity ? (
<Box display="flex" flexDirection="row" flexWrap="nowrap" overflow="hidden">
<Column padding="20" style={{ maxWidth: '286px' }}>
<Box
as="img"
src={collectionActivity.events[current].tokenMetadata?.imageUrl}
borderRadius="12"
style={{ width: '230px', height: '230px' }}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
navigate(`/nfts/asset/${address}/${collectionActivity.events[current].tokenId}?origin=explore`)
}}
/>
</Column>
<Column width="full" position="relative">
{collectionActivity.events.map((activityEvent: ActivityEvent, index: number) => {
return <ActivityRow event={activityEvent} index={index} key={index} current={current} />
})}
</Column>
</Box>
) : null}
</Column>
)
}
const ActivityRow = ({ event, index, current }: { event: ActivityEvent; index: number; current: number }) => {
const navigate = useNavigate()
const formattedPrice = useMemo(
() => (event.price ? putCommas(formatEthPrice(event.price))?.toString() : null),
[event.price]
)
const scrollPosition = useMemo(() => {
const itemHeight = 56
if (current === index) return current === 0 ? 0 : itemHeight / 2
if (index > current)
return current === 0 ? (index - current) * itemHeight : (index - current) * itemHeight + itemHeight / 2
if (index < current)
return current === 0 ? -(current - index) * itemHeight : -((current - index) * itemHeight - itemHeight / 2)
else return 0
}, [index, current])
return (
<Row
className={clsx(styles.activityRow, index === current && styles.activeRow)}
paddingTop="8"
paddingBottom="8"
fontSize="14"
width="full"
paddingLeft="16"
style={{ transform: `translateY(${scrollPosition}px)` }}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
navigate(`/nfts/asset/${event.collectionAddress}/${event.tokenId}?origin=explore`)
}}
>
<Box as="img" src={event.tokenMetadata?.imageUrl} borderRadius="12" marginRight="8" width="40" height="40" />
<Box as="span" color="explicitWhite">
<Box as="span">{ActivityEventTypeDisplay[event.eventType]}</Box>
<Box as="span" color="gray300" paddingLeft="4" paddingRight="4">
for
</Box>
{formattedPrice} ETH
</Box>
{event.eventTimestamp && isValidDate(event.eventTimestamp) && (
<Box className={styles.timestamp}>
{getTimeDifference(event.eventTimestamp?.toString())}
{event.marketplace && <MarketplaceIcon marketplace={event.marketplace} />}
</Box>
)}
</Row>
)
}
export default ActivityFeed
const MarketplaceIcon = ({ marketplace }: { marketplace: Markets }) => {
return (
<Box
as="img"
alt={marketplace}
src={`/nft/svgs/marketplaces/${marketplace}.svg`}
className={styles.marketplaceIcon}
/>
)
}

@ -196,7 +196,7 @@ interface MarketplaceRowProps {
listings?: number
}
export const MarketplaceRow = ({ marketplace, floorInEth, listings }: MarketplaceRowProps) => {
const MarketplaceRow = ({ marketplace, floorInEth, listings }: MarketplaceRowProps) => {
return (
<>
<TableElement>
@ -284,7 +284,7 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
const DEFAULT_TABLE_ELEMENTS = 12
export const LoadingTable = () => {
const LoadingTable = () => {
return (
<>
{[...Array(DEFAULT_TABLE_ELEMENTS)].map((index) => (

@ -50,15 +50,6 @@ export const BackArrowIcon = (props: SVGProps) => (
</svg>
)
export const WarningIcon = (props: SVGProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" {...props}>
<path
fill="#0A0A3B"
d="M7.994 12.995c2.848 0 5.198-2.35 5.198-5.193 0-2.842-2.356-5.193-5.203-5.193C5.146 2.61 2.8 4.96 2.8 7.802c0 2.843 2.35 5.194 5.193 5.194zm0-4.334c-.296 0-.467-.165-.477-.467l-.07-2.506c-.01-.311.21-.527.542-.527.321 0 .557.22.547.532l-.08 2.501c-.01.307-.176.467-.462.467zm0 1.738c-.342 0-.623-.246-.623-.578 0-.331.276-.577.623-.577.341 0 .618.246.618.577 0 .337-.282.578-.618.578z"
/>
</svg>
)
export const VerifiedIcon = (props: SVGProps) => {
const theme = useTheme()
return (
@ -84,16 +75,6 @@ export const PoolIcon = (props: SVGProps) => (
</svg>
)
export const SuspiciousIcon = (props: SVGProps) => (
<svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.85693" y="5.33325" width="2.28571" height="6.85714" fill="white" />
<path
d="M4.11238 12.5713H11.8782C12.6405 12.5713 13.1426 12.0254 13.1426 11.3581C13.1426 11.1501 13.0799 10.9507 12.9633 10.7601L9.08037 4.04377C8.83825 3.62779 8.41678 3.42847 7.99531 3.42847C7.57384 3.42847 7.1434 3.62779 6.91024 4.04377L3.02732 10.7601C2.91074 10.9507 2.85693 11.1501 2.85693 11.3581C2.85693 12.0254 3.35015 12.5713 4.11238 12.5713ZM7.99531 9.1395C7.65454 9.1395 7.40345 8.91418 7.39449 8.58486L7.32275 6.17566C7.31378 5.79434 7.59177 5.52569 7.99531 5.52569C8.40781 5.52569 8.6858 5.78568 8.67684 6.17566L8.6051 8.58486C8.58716 8.91418 8.34504 9.1395 7.99531 9.1395ZM7.99531 11.2541C7.54693 11.2541 7.18823 10.9161 7.18823 10.4828C7.18823 10.0581 7.54693 9.72014 7.99531 9.72014C8.45265 9.72014 8.81135 10.0668 8.81135 10.4828C8.80238 10.9161 8.45265 11.2541 7.99531 11.2541Z"
fill="#FA2C38"
/>
</svg>
)
export const XMarkIcon = (props: SVGProps) => (
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
@ -112,24 +93,6 @@ export const ArrowRightIcon = (props: SVGProps) => (
</svg>
)
export const MinusIcon = (props: SVGProps) => (
<svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.54562 12.5699H17.4541C17.9136 12.5699 18.3054 12.1857 18.3054 11.7111C18.3054 11.244 17.9136 10.8523 17.4541 10.8523H6.54562C6.10114 10.8523 5.69434 11.244 5.69434 11.7111C5.69434 12.1857 6.10114 12.5699 6.54562 12.5699Z"
fill="currentColor"
/>
</svg>
)
export const PlusIcon = (props: SVGProps) => (
<svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.54534 12.5625H11.1408V17.1579C11.1408 17.625 11.525 18.0167 11.9996 18.0167C12.4742 18.0167 12.8584 17.625 12.8584 17.1579V12.5625H17.4538C17.9209 12.5625 18.3126 12.1783 18.3126 11.7037C18.3126 11.2291 17.9209 10.8449 17.4538 10.8449H12.8584V6.24944C12.8584 5.78237 12.4742 5.39062 11.9996 5.39062C11.525 5.39062 11.1408 5.78237 11.1408 6.24944V10.8449H6.54534C6.07826 10.8449 5.68652 11.2291 5.68652 11.7037C5.68652 12.1783 6.07826 12.5625 6.54534 12.5625Z"
fill="currentColor"
/>
</svg>
)
export const ExternalIcon = (props: SVGProps) => (
<svg {...props} viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
<path
@ -216,19 +179,6 @@ export const SweepIcon = (props: SVGProps) => (
</svg>
)
export const CopyIcon = (props: SVGProps) => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M9.97414 3.125C11.0259 3.125 11.842 3.24608 12.4397 3.83995C12.931 4.33285 13.0873 4.9837 13.125 5.80608H11.9822C11.9543 5.34283 11.8567 4.93753 11.6006 4.67599C11.2788 4.35887 10.7328 4.27815 10.1351 4.27815H6.76732C6.15811 4.27815 5.60637 4.35887 5.29027 4.67599C4.97417 4.9931 4.89371 5.54085 4.89371 6.15202V9.5003C4.89371 10.0999 4.97417 10.6419 5.29027 10.959C5.54809 11.2177 5.96268 11.3229 6.43111 11.3529V12.5C5.60751 12.4618 4.94982 12.3011 4.45117 11.8008C3.8592 11.2127 3.75 10.3998 3.75 9.33886V6.28463C3.75 5.24103 3.8592 4.42806 4.45117 3.83995C5.04314 3.24608 5.85925 3.125 6.89951 3.125H9.97414Z"
fill={themeVars.colors.textSecondary}
/>
<path
d="M16.186 7.58333C15.5939 6.99496 14.7853 6.875 13.7433 6.875H10.6203C9.5897 6.875 8.78115 6.99496 8.19467 7.58333C7.60819 8.16599 7.5 8.97144 7.5 10.0054V13.1082C7.5 14.1593 7.60819 14.9647 8.19467 15.5474C8.78115 16.1358 9.5897 16.25 10.6317 16.25H13.7433C14.7853 16.25 15.5995 16.1358 16.186 15.5474C16.7668 14.959 16.875 14.1593 16.875 13.1082V10.0225C16.875 8.97144 16.7668 8.16599 16.186 7.58333ZM15.7419 9.86257V13.2681C15.7419 13.8622 15.6679 14.3992 15.3547 14.7134C15.0358 15.0333 14.4949 15.1132 13.9027 15.1132H10.478C9.88578 15.1132 9.33916 15.0276 9.02599 14.7134C8.71282 14.3992 8.63311 13.8622 8.63311 13.2681V9.87399C8.63311 9.26848 8.71282 8.72581 9.02599 8.41163C9.33916 8.09745 9.88579 8.01747 10.4893 8.01747H13.9027C14.4949 8.01747 15.0358 8.09745 15.3547 8.41163C15.6679 8.73152 15.7419 9.26848 15.7419 9.86257Z"
fill={themeVars.colors.textSecondary}
/>
</svg>
)
export const CrossIcon = (props: SVGProps) => (
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
@ -316,18 +266,6 @@ export const RowsCollpsedIcon = () => (
</svg>
)
export const ShareIcon = () => (
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21.8711 20.6436L21.8711 11.8564C21.8711 9.97559 20.8867 9 18.9883 9L17 9L17 10.7227L18.8828 10.7227C19.7002 10.7227 20.1484 11.1533 20.1484 12.0059L20.1484 20.5029C20.1484 21.3555 19.7002 21.7773 18.8828 21.7773L8.98828 21.7773C8.1709 21.7773 7.72266 21.3555 7.72266 20.5029L7.72266 12.0059C7.72266 11.1533 8.1709 10.7227 8.98828 10.7227L11 10.7227L11 9L8.88281 9C6.99317 9 6 9.97559 6 11.8564L6 20.6436C6 22.5244 6.99316 23.5 8.88281 23.5L18.9883 23.5C20.8867 23.5 21.8711 22.5244 21.8711 20.6436Z"
fill={themeVars.colors.textSecondary}
/>
<path
d="M14.8519 15.17L14.8519 6.57559L14.787 5.22562L15.3611 5.89148L16.6574 7.25057C16.8056 7.41476 17.0185 7.50597 17.2315 7.50597C17.6481 7.50597 18 7.19584 18 6.77626C18 6.55734 17.9074 6.39316 17.75 6.2381L14.6481 3.28276C14.4259 3.07297 14.2222 3 14 3C13.7778 3 13.5741 3.07297 13.3519 3.28276L10.2407 6.2381C10.0833 6.39316 10 6.55734 10 6.77626C10 7.19584 10.3333 7.50597 10.7593 7.50597C10.963 7.50597 11.1852 7.41476 11.3333 7.25057L12.6389 5.89148L13.213 5.2165L13.1389 6.57559L13.1389 15.17C13.1389 15.6169 13.5278 16 14 16C14.4722 16 14.8519 15.6169 14.8519 15.17Z"
fill={themeVars.colors.textSecondary}
/>
</svg>
)
export const RowsExpandedIcon = () => (
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -554,15 +492,6 @@ export const CheckMarkIcon = (props: SVGProps) => (
</svg>
)
export const CloseIcon = (props: SVGProps) => (
<svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M24.8839 8.88388C25.372 8.39573 25.372 7.60427 24.8839 7.11612C24.3957 6.62796 23.6043 6.62796 23.1161 7.11612L24.8839 8.88388ZM7.11612 23.1161C6.62796 23.6043 6.62796 24.3957 7.11612 24.8839C7.60427 25.372 8.39573 25.372 8.88388 24.8839L7.11612 23.1161ZM8.88388 7.11612C8.39573 6.62796 7.60427 6.62796 7.11612 7.11612C6.62796 7.60427 6.62796 8.39573 7.11612 8.88388L8.88388 7.11612ZM23.1161 24.8839C23.6043 25.372 24.3957 25.372 24.8839 24.8839C25.372 24.3957 25.372 23.6043 24.8839 23.1161L23.1161 24.8839ZM23.1161 7.11612L7.11612 23.1161L8.88388 24.8839L24.8839 8.88388L23.1161 7.11612ZM7.11612 8.88388L23.1161 24.8839L24.8839 23.1161L8.88388 7.11612L7.11612 8.88388Z"
fill="currentColor"
/>
</svg>
)
export const GovernanceIcon = (props: SVGProps) => (
<svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path