chore: remove more unused NFT code (#5525)

src/nft/components/bag/BagHeader.css.ts

-import { style } from '@vanilla-extract/css'
-import { headlineSmall } from 'nft/css/common.css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-
-export const header = style([
-  headlineSmall,
-  sprinkles({
-    color: 'textPrimary',
-    justifyContent: 'space-between',
-  }),
-  {
-    lineHeight: '24px',
-  },
-])

src/nft/components/bag/profile/ProfileAssetRow.css.ts

-import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-
-export const removeAsset = style([
-  sprinkles({
-    position: 'absolute',
-    cursor: 'pointer',
-  }),
-  {
-    bottom: '-4px',
-    left: '24px',
-  },
-])

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

@@ -5,7 +5,7 @@ import { AssetRow, CollectionRow, ListingMarket, ListingRow, ListingStatus, Wall
 import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
 import { Dispatch } from 'react'
 
-export const updateStatus = ({
+const updateStatus = ({
   listing,
   newStatus,
   rows,
@@ -171,7 +171,7 @@ export const getListings = (sellAssets: WalletAsset[]): [CollectionRow[], Listin
   return [newCollectionsToApprove, newListings]
 }
 
-export type ListingState = {
+type ListingState = {
   allListingsPending: boolean
   allListingsDefined: boolean
   allListingsApproved: boolean

src/nft/components/collection/CollectionAsset.css.ts

-import { style } from '@vanilla-extract/css'
-
-import { sprinkles } from '../../css/sprinkles.css'
-
-export const buy = style([
-  {
-    top: '-32px',
-    left: '50%',
-    transform: 'translateX(-50%)',
-  },
-  sprinkles({ color: 'backgroundSurface', position: 'absolute', borderRadius: 'round' }),
-])
-
-export const quantity = style([
-  {
-    padding: '9px 4px 8px',
-  },
-  sprinkles({
-    position: 'relative',
-  }),
-])
-
-export const details = style({ float: 'right' })
-
-export const marketplace = style({
-  position: 'absolute',
-  left: '0',
-  bottom: '12px',
-})
-
-export const ethIcon = style({ display: 'inline-block', marginBottom: '-3px', overflow: 'auto' })
-
-export const rarityInfo = style({
-  background: 'rgba(255, 255, 255, 0.6)',
-  backdropFilter: 'blur(6px)',
-})

src/nft/components/details/AssetPriceDetails.tsx

@@ -198,7 +198,7 @@ const DefaultLink = styled(Link)`
   text-decoration: none;
 `
 
-export const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
+const OwnerContainer = ({ asset }: { asset: GenieAsset }) => {
   const navigate = useNavigate()
   const USDPrice = useUsdPrice(asset)
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
@@ -275,7 +275,7 @@ const StyledLink = styled(Link)`
   ${OpacityHoverState}
 `
 
-export const NotForSale = ({ collectionName, collectionUrl }: { collectionName: string; collectionUrl: string }) => {
+const NotForSale = ({ collectionName, collectionUrl }: { collectionName: string; collectionUrl: string }) => {
   const theme = useTheme()
 
   return (

src/nft/components/layout/ExpandableText.css.ts

-import { globalStyle, style } from '@vanilla-extract/css'
-
-import { sprinkles } from '../../css/sprinkles.css'
-
-export const hiddenText = style([
-  sprinkles({
-    overflow: 'hidden',
-  }),
-  {
-    display: '-webkit-box',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical',
-    textOverflow: 'ellipsis',
-  },
-])
-
-export const span = style({})
-
-globalStyle(`${hiddenText} p`, {
-  display: 'none',
-})
-
-globalStyle(`${hiddenText} p:first-child`, {
-  display: 'block',
-})
-
-globalStyle(`${span} p:first-child`, {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  margin: 0,
-})

src/nft/components/layout/ExpandableText.tsx

-import clsx from 'clsx'
-import { useState } from 'react'
-
-import { Box, BoxProps } from '../Box'
-import * as styles from './ExpandableText.css'
-
-const RevealButton = (props: BoxProps) => (
-  <Box
-    as="button"
-    display="inline"
-    fontWeight="bold"
-    border="none"
-    fontSize="14"
-    color="textSecondary"
-    padding="0"
-    background="transparent"
-    {...props}
-  />
-)
-
-export const ExpandableText = ({ children, ...props }: BoxProps) => {
-  const [isExpanded, setExpanded] = useState(false)
-
-  return (
-    <Box
-      display="flex"
-      flexDirection={isExpanded ? 'column' : 'row'}
-      alignItems={isExpanded ? 'flex-start' : 'flex-end'}
-      justifyContent="flex-start"
-      fontSize="14"
-      color="textSecondary"
-      marginTop="0"
-      marginBottom="20"
-      {...props}
-    >
-      <span className={clsx(styles.span, !isExpanded && styles.hiddenText)}>
-        {children}{' '}
-        {isExpanded ? (
-          <RevealButton marginTop={isExpanded ? '8' : 'unset'} onClick={() => setExpanded(!isExpanded)}>
-            Show less
-          </RevealButton>
-        ) : (
-          <RevealButton onClick={() => setExpanded(!isExpanded)}>Show more</RevealButton>
-        )}
-      </span>
-    </Box>
-  )
-}

src/nft/components/layout/Radio.css.ts

-import { style } from '@vanilla-extract/css'
-import { sprinkles, vars } from 'nft/css/sprinkles.css'
-
-export const radio = style([
-  sprinkles({
-    position: 'relative',
-    display: 'inline-block',
-    height: '24',
-    width: '24',
-    cursor: 'pointer',
-    background: 'transparent',
-    borderRadius: { default: 'round', before: 'round' },
-    borderStyle: 'solid',
-    borderWidth: '2px',
-    top: '0',
-    left: '0',
-    right: '0',
-    bottom: '0',
-    transition: {
-      default: '250',
-      before: '250',
-    },
-  }),
-])
-
-export const grayBorderRadio = style([
-  radio,
-  sprinkles({
-    borderColor: 'gray400',
-  }),
-])
-
-export const blueBorderRadio = style([
-  radio,
-  sprinkles({
-    borderColor: 'blue400',
-  }),
-])
-
-export const selectedRadio = style([
-  blueBorderRadio,
-  {
-    ':before': {
-      position: 'absolute',
-      backgroundColor: vars.color.blue400,
-      content: '',
-      height: '14px',
-      width: '14px',
-      top: 3,
-      left: 3,
-    },
-  },
-])

src/nft/components/layout/Radio.tsx

-import { Box } from 'nft/components/Box'
-import * as styles from 'nft/components/layout/Radio.css'
-import { MouseEvent } from 'react'
-
-interface RadioProps {
-  hovered: boolean
-  checked: boolean
-  onClick: (e: MouseEvent) => void
-}
-
-export const Radio = ({ hovered, checked, onClick }: RadioProps) => {
-  return (
-    <Box
-      as="label"
-      className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.grayBorderRadio}
-      onClick={onClick}
-    />
-  )
-}
-
-Radio.displayName = 'Radio'

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

@@ -453,7 +453,7 @@ const MarketplaceRow = ({
   )
 }
 
-export interface NFTListRowProps {
+interface NFTListRowProps {
   asset: WalletAsset
   globalPriceMethod?: SetPriceMethod
   setGlobalPrice: Dispatch<number | undefined>

src/nft/components/profile/view/ProfileAccountDetails.tsx

-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import Identicon from 'components/Identicon'
-import { MouseoverTooltip } from 'components/Tooltip'
-import useCopyClipboard from 'hooks/useCopyClipboard'
-import { Box } from 'nft/components/Box'
-import { Row } from 'nft/components/Flex'
-import { caption, headlineLarge, lightGrayOverlayOnHover } from 'nft/css/common.css'
-import { useCallback } from 'react'
-import { Copy } from 'react-feather'
-import { shortenAddress } from 'utils'
-
-export const ProfileAccountDetails = () => {
-  const { account, ENSName } = useWeb3React()
-  const [isCopied, setCopied] = useCopyClipboard()
-  const copy = useCallback(() => {
-    setCopied(account ?? '')
-  }, [account, setCopied])
-
-  if (!account) {
-    return null
-  }
-
-  return (
-    <Row className={headlineLarge} marginBottom="48" gap="4">
-      <Identicon size={60} />
-      <Box textOverflow="ellipsis" overflow="hidden" marginLeft="8">
-        {ENSName ?? shortenAddress(account)}
-      </Box>
-      <MouseoverTooltip
-        text={
-          <Box className={caption} color="textPrimary">
-            {isCopied ? <Trans>Copied!</Trans> : <Trans>Copy</Trans>}
-          </Box>
-        }
-        placement="right"
-      >
-        <Box paddingX="12" borderRadius="12" cursor="pointer" className={lightGrayOverlayOnHover} onClick={copy}>
-          <Copy strokeWidth={1.5} size={20} />{' '}
-        </Box>
-      </MouseoverTooltip>
-    </Row>
-  )
-}

src/nft/components/profile/view/ProfilePageLoadingSkeleton.tsx

@@ -56,13 +56,13 @@ const SellButtonSkeleton = styled.div`
   border-radius: 12px;
 `
 
-export const ProfileAssetCardSkeleton = styled.div`
+const ProfileAssetCardSkeleton = styled.div`
   width: 100%;
   height: 330px;
   border-radius: 20px;
 `
 
-export const ProfileAssetCardDisplaySectionSkeleton = () => {
+const ProfileAssetCardDisplaySectionSkeleton = () => {
   return (
     <Box width="full" className={assetList}>
       {Array.from(Array(DEFAULT_WALLET_ASSET_QUERY_AMOUNT), (_, index) => (