chore: Refactor ListingButton with deprecation of Listing V1 (#6023)

* remove unused wrapper * remove old listing modal * simplify button styling * deprecate outdated listing logic and move button to styled components * remove unused linting protection * remove unused functions from sellAssets hook * undo and save this refactor for different PR * remove more unused items * hook dependencies * more trash cleanup * styled continue button * slight continue button tweaks * cleanup * add new standard hover state * no mixed conditionals * lint --------- Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

chore: Refactor ListingButton with deprecation of Listing V1 (#6023)
* remove unused wrapper * remove old listing modal * simplify button styling * deprecate outdated listing logic and move button to styled components * remove unused linting protection * remove unused functions from sellAssets hook * undo and save this refactor for different PR * remove more unused items * hook dependencies * more trash cleanup * styled continue button * slight continue button tweaks * cleanup * add new standard hover state * no mixed conditionals * lint --------- Co-authored-by: Charles Bachmeier <charlie@genie.xyz>
1df9da9e · Charles Bachmeier · GitHub · b1e6d0ab · 1df9da9e · b1e6d0ab
Commit 1df9da9e authored Feb 27, 2023 by Charles Bachmeier Committed by GitHub Feb 27, 2023
9 changed files
--- a/src/nft/components/bag/Bag.tsx
+++ b/src/nft/components/bag/Bag.tsx
 import { BigNumber } from '@ethersproject/bignumber'
+import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { NFTEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
@@ -6,12 +7,10 @@ import { GqlRoutingVariant, useGqlRoutingFlag } from 'featureFlags/flags/gqlRout
 import { useNftRouteLazyQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { useIsNftDetailsPage, useIsNftPage, useIsNftProfilePage } from 'hooks/useIsNftPage'
 import { BagFooter } from 'nft/components/bag/BagFooter'
-import ListingModal from 'nft/components/bag/profile/ListingModal'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column } from 'nft/components/Flex'
 import { Overlay } from 'nft/components/modals/Overlay'
-import { buttonTextMedium, commonButtonStyles } from 'nft/css/common.css'
 import {
  useBag,
  useIsMobile,
@@ -89,6 +88,24 @@ const DetailsPageBackground = styled.div`
  height: 100%;
 `
+const ContinueButton = styled.div`
+  background: ${({ theme }) => theme.accentAction};
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  margin: 32px 28px 16px;
+  padding: 10px 0px;
+  border-radius: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+  transition: ${({ theme }) => theme.transition.duration.medium};
+  :hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+`
 const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
  <Box
    marginX="24"
@@ -113,10 +130,7 @@ const Bag = () => {
    shallow
  )
-  const { profilePageState, setProfilePageState } = useProfilePageState(
+  const { setProfilePageState } = useProfilePageState(({ setProfilePageState }) => ({ setProfilePageState }))
-    ({ setProfilePageState, state }) => ({ profilePageState: state, setProfilePageState }),
-    shallow
-  )
  const {
    bagStatus,
@@ -396,48 +410,34 @@ const Bag = () => {
  return (
    <Portal>
      <BagContainer data-testid="nft-bag" raiseZIndex={isMobile || isModalOpen} isProfilePage={isProfilePage}>
-        {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
+        <BagHeader
-          <>
+          numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
-            <BagHeader
+          closeBag={handleCloseBag}
-              numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
+          resetFlow={isProfilePage ? resetSellAssets : reset}
-              closeBag={handleCloseBag}
+          isProfilePage={isProfilePage}
-              resetFlow={isProfilePage ? resetSellAssets : reset}
+        />
-              isProfilePage={isProfilePage}
+        {shouldRenderEmptyState && <EmptyState />}
-            />
+        <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
-            {shouldRenderEmptyState && <EmptyState />}
+        <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
-            <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
+          {isProfilePage ? <ProfileBagContent /> : <BagContent />}
-            <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
+        </Column>
-              {isProfilePage ? <ProfileBagContent /> : <BagContent />}
+        {hasAssetsToShow && !isProfilePage && (
-            </Column>
+          <BagFooter totalEthPrice={totalEthPrice} fetchAssets={fetchAssets} eventProperties={eventProperties} />
-            {hasAssetsToShow && !isProfilePage && (
+        )}
-              <BagFooter totalEthPrice={totalEthPrice} fetchAssets={fetchAssets} eventProperties={eventProperties} />
+        {isSellingAssets && isProfilePage && (
-            )}
+          <ContinueButton
-            {isSellingAssets && isProfilePage && (
+            onClick={() => {
-              <Box
+              toggleBag()
-                marginTop="32"
+              setProfilePageState(ProfilePageStateType.LISTING)
-                marginX="28"
+              sendAnalyticsEvent(NFTEventName.NFT_PROFILE_PAGE_START_SELL, {
-                marginBottom="16"
+                list_quantity: sellAssets.length,
-                paddingY="10"
+                collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
-                className={`${buttonTextMedium} ${commonButtonStyles}`}
+                token_ids: sellAssets.map((asset) => asset.tokenId),
-                backgroundColor="accentAction"
+              })
-                color="white"
+            }}
-                textAlign="center"
+          >
-                onClick={() => {
+            <Trans>Continue</Trans>
-                  toggleBag()
+          </ContinueButton>
-                  setProfilePageState(ProfilePageStateType.LISTING)
-                  sendAnalyticsEvent(NFTEventName.NFT_PROFILE_PAGE_START_SELL, {
-                    list_quantity: sellAssets.length,
-                    collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
-                    token_ids: sellAssets.map((asset) => asset.tokenId),
-                  })
-                }}
-              >
-                Continue
-              </Box>
-            )}
-          </>
-        ) : (
-          <ListingModal />
        )}
      </BagContainer>

--- a/src/nft/components/bag/profile/ListingModal.css.ts
+++ b/src/nft/components/bag/profile/ListingModal.css.ts
-import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
-export const chevron = style([
-  sprinkles({
-    height: '28',
-    width: '28',
-    transition: '250',
-    marginLeft: 'auto',
-    marginRight: '0',
-  }),
-])
-export const chevronDown = style({
-  transform: 'rotate(180deg)',
-  cursor: 'pointer',
-})
-export const sectionDivider = style([
-  sprinkles({
-    borderRadius: '20',
-    marginTop: '8',
-    width: 'full',
-    borderWidth: '0.5px',
-    borderStyle: 'solid',
-    borderColor: 'backgroundOutline',
-  }),
-])
-export const button = style([
-  sprinkles({
-    paddingX: { sm: '12', md: '16' },
-    paddingY: { sm: '10', md: '16' },
-    textAlign: 'center',
-    fontWeight: 'semibold',
-    fontSize: { sm: '16', md: '20' },
-    lineHeight: { sm: '20', md: '24' },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-end',
-    borderRadius: '12',
-  }),
-])
-export const listingModalIcon = style([
-  sprinkles({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'backgroundSurface',
-  }),
-  {
-    boxSizing: 'border-box',
-    marginLeft: '-2px',
-    marginRight: '4px',
-  },
-])
-export const warningTooltip = style([
-  sprinkles({
-    paddingTop: '8',
-    paddingRight: '8',
-    paddingBottom: '8',
-    paddingLeft: '12',
-  }),
-  {
-    boxShadow: '0px 4px 16px rgba(10, 10, 59, 0.2)',
-  },
-])
-export const listingSectionBorder = style([
-  sprinkles({
-    padding: '8',
-    borderRadius: '8',
-    borderColor: 'backgroundOutline',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-  }),
-])
--- a/src/nft/components/bag/profile/ListingModal.tsx
+++ b/src/nft/components/bag/profile/ListingModal.tsx
-import { sendAnalyticsEvent, Trace, useTrace } from '@uniswap/analytics'
-import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
-import { useWeb3React } from '@web3-react/core'
-import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { ChevronLeftIcon, XMarkIcon } from 'nft/components/icons'
-import { caption, headlineSmall, subhead, subheadSmall } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
-import { useBag, useIsMobile, useNFTList, useSellAsset } from 'nft/hooks'
-import { logListing, looksRareNonceFetcher } from 'nft/queries'
-import { AssetRow, CollectionRow, ListingRow, ListingStatus } from 'nft/types'
-import { fetchPrice } from 'nft/utils/fetchPrice'
-import { pluralize } from 'nft/utils/roundAndPluralize'
-import { Dispatch, useEffect, useMemo, useRef, useState } from 'react'
-import shallow from 'zustand/shallow'
-import { ListingButton } from './ListingButton'
-import * as styles from './ListingModal.css'
-import { ListingSection } from './ListingSection'
-import { approveCollectionRow, getTotalEthValue, pauseRow, resetRow, signListingRow, verifyStatus } from './utils'
-const ListingModal = () => {
-  const { provider } = useWeb3React()
-  const sellAssets = useSellAsset((state) => state.sellAssets)
-  const {
-    listingStatus,
-    setListingStatus,
-    setListings,
-    setCollectionsRequiringApproval,
-    setListingStatusAndCallback,
-    setCollectionStatusAndCallback,
-    looksRareNonce,
-    setLooksRareNonce,
-    getLooksRareNonce,
-    collectionsRequiringApproval,
-    listings,
-  } = useNFTList(
-    ({
-      listingStatus,
-      setListingStatus,
-      setListings,
-      setCollectionsRequiringApproval,
-      setListingStatusAndCallback,
-      setCollectionStatusAndCallback,
-      looksRareNonce,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }) => ({
-      listingStatus,
-      setListingStatus,
-      setListings,
-      setCollectionsRequiringApproval,
-      setListingStatusAndCallback,
-      setCollectionStatusAndCallback,
-      looksRareNonce,
-      setLooksRareNonce,
-      getLooksRareNonce,
-      collectionsRequiringApproval,
-      listings,
-    }),
-    shallow
-  )
-  const signer = provider?.getSigner()
-  const [openIndex, setOpenIndex] = useState(0)
-  const [allCollectionsApproved, setAllCollectionsApproved] = useState(false)
-  const toggleCart = useBag((state) => state.toggleBag)
-  const looksRareNonceRef = useRef(looksRareNonce)
-  const isMobile = useIsMobile()
-  const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
-  useEffect(() => {
-    useNFTList.subscribe((state) => (looksRareNonceRef.current = state.looksRareNonce))
-  }, [])
-  const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
-  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
-  useEffect(() => {
-    fetchPrice().then((price) => {
-      setEthPriceInUSD(price || 0)
-    })
-  }, [])
-  const startListingEventProperties = {
-    collection_addresses: sellAssets.map((asset) => asset.asset_contract.address),
-    token_ids: sellAssets.map((asset) => asset.tokenId),
-    marketplaces: Array.from(new Set(listings.map((asset) => asset.marketplace.name))),
-    list_quantity: listings.length,
-    usd_value: ethPriceInUSD * totalEthListingValue,
-    ...trace,
-  }
-  // when all collections have been approved, auto start the signing process
-  useEffect(() => {
-    collectionsRequiringApproval?.length &&
-      setAllCollectionsApproved(
-        collectionsRequiringApproval.every((collection: CollectionRow) => collection.status === ListingStatus.APPROVED)
-      )
-    if (
-      allCollectionsApproved &&
-      (listingStatus === ListingStatus.PENDING ||
-        listingStatus === ListingStatus.CONTINUE ||
-        listingStatus === ListingStatus.SIGNING)
-    ) {
-      resetAllRows()
-      signListings()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [collectionsRequiringApproval, allCollectionsApproved])
-  const allCollectionsApprovedOrPaused = useMemo(
-    () =>
-      collectionsRequiringApproval.every(
-        (collection: CollectionRow) =>
-          collection.status === ListingStatus.APPROVED || collection.status === ListingStatus.PAUSED
-      ),
-    [collectionsRequiringApproval]
-  )
-  const allListingsApprovedOrPaused = useMemo(
-    () =>
-      listings.every(
-        (listing: ListingRow) => listing.status === ListingStatus.APPROVED || listing.status === ListingStatus.PAUSED
-      ),
-    [listings]
-  )
-  // go back to a ready state after a successful retry
-  useEffect(() => {
-    if (listingStatus === ListingStatus.SIGNING && allCollectionsApprovedOrPaused && allListingsApprovedOrPaused) {
-      resetAllRows()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allCollectionsApprovedOrPaused, allListingsApprovedOrPaused])
-  // handles the modal wide listing state based on conglomeration of the wallet, collection, and listing states
-  const startListingFlow = async () => {
-    if (!signer) return
-    sendAnalyticsEvent(NFTEventName.NFT_SELL_START_LISTING, { ...startListingEventProperties })
-    setListingStatus(ListingStatus.SIGNING)
-    const signerAddress = await signer.getAddress()
-    const nonce = await looksRareNonceFetcher(signerAddress)
-    setLooksRareNonce(nonce ?? 0)
-    if (!collectionsRequiringApproval?.some((collection) => collection.status === ListingStatus.PAUSED)) {
-      setListingStatus(ListingStatus.SIGNING)
-      setOpenIndex(1)
-    }
-    // for all unique collection, marketplace combos -> approve collections
-    for (const collectionRow of collectionsRequiringApproval) {
-      verifyStatus(collectionRow.status) &&
-        (isMobile
-          ? await approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback, pauseAllRows)
-          : approveCollectionRow(collectionRow, signer, setCollectionStatusAndCallback, pauseAllRows))
-    }
-  }
-  const signListings = async () => {
-    if (!signer || !provider) return
-    setListingStatus(ListingStatus.SIGNING)
-    setOpenIndex(2)
-    // sign listings
-    for (const listing of listings) {
-      verifyStatus(listing.status) &&
-        (await signListingRow(
-          listing,
-          signer,
-          provider,
-          getLooksRareNonce,
-          setLooksRareNonce,
-          setListingStatusAndCallback,
-          pauseAllRows
-        ))
-    }
-    const allListingsSigned = listings.every((listing: ListingRow) => listing.status === ListingStatus.APPROVED)
-    const paused = listings.some((listing: ListingRow) => listing.status === ListingStatus.PAUSED)
-    if (allListingsSigned) {
-      setOpenIndex(0)
-      setListingStatus(ListingStatus.APPROVED)
-    } else if (!paused) {
-      setListingStatus(ListingStatus.FAILED)
-    }
-    sendAnalyticsEvent(NFTEventName.NFT_LISTING_COMPLETED, {
-      signatures_approved: listings.filter((asset) => asset.status === ListingStatus.APPROVED),
-      list_quantity: listings.length,
-      usd_value: ethPriceInUSD * totalEthListingValue,
-      ...trace,
-    })
-    await logListing(listings, (await signer?.getAddress()) ?? '')
-  }
-  const pauseAllRows = () => {
-    for (const collection of collectionsRequiringApproval) {
-      pauseRow(collection, collectionsRequiringApproval, setCollectionsRequiringApproval as Dispatch<AssetRow[]>)
-    }
-    for (const listing of listings) {
-      pauseRow(listing, listings, setListings as Dispatch<AssetRow[]>)
-    }
-  }
-  const resetAllRows = () => {
-    for (const collection of collectionsRequiringApproval) {
-      resetRow(collection, collectionsRequiringApproval, setCollectionsRequiringApproval as Dispatch<AssetRow[]>)
-    }
-    for (const listing of listings) {
-      resetRow(listing, listings, setListings as Dispatch<AssetRow[]>)
-    }
-  }
-  const clickStopListing = () => {
-    pauseAllRows()
-  }
-  const clickStartListingFlow = () => {
-    resetAllRows()
-    allCollectionsApproved ? signListings() : startListingFlow()
-  }
-  const showSuccessScreen = useMemo(() => listingStatus === ListingStatus.APPROVED, [listingStatus])
-  return (
-    <Trace modal={InterfaceModalName.NFT_LISTING}>
-      <Column paddingTop="20" paddingBottom="20" paddingLeft="12" paddingRight="12">
-        <Row className={headlineSmall} marginBottom="10">
-          {isMobile && !showSuccessScreen && (
-            <Box paddingTop="4" marginRight="4" onClick={toggleCart}>
-              <ChevronLeftIcon height={28} width={28} />
-            </Box>
-          )}
-          {showSuccessScreen ? 'Success!' : `Listing ${sellAssets.length} NFTs`}
-          <Box
-            as="button"
-            border="none"
-            color="textSecondary"
-            backgroundColor="backgroundSurface"
-            marginLeft="auto"
-            marginRight="0"
-            paddingRight="0"
-            display={{ sm: 'flex', md: 'none' }}
-            cursor="pointer"
-            onClick={toggleCart}
-          >
-            <XMarkIcon height={28} width={28} fill={themeVars.colors.textPrimary} />
-          </Box>
-        </Row>
-        <Column overflowX="hidden" overflowY="auto" style={{ maxHeight: '60vh' }}>
-          {showSuccessScreen ? (
-            <Trace
-              name={NFTEventName.NFT_LISTING_COMPLETED}
-              properties={{ list_quantity: listings.length, usd_value: ethPriceInUSD * totalEthListingValue, ...trace }}
-              shouldLogImpression
-            >
-              <ListingSection
-                sectionTitle={`Listed ${listings.length} item${pluralize(listings.length)} for sale`}
-                rows={listings}
-                index={0}
-                openIndex={openIndex}
-                isSuccessScreen={true}
-              />
-            </Trace>
-          ) : (
-            <>
-              <ListingSection
-                sectionTitle={`Approve ${collectionsRequiringApproval.length} collection${pluralize(
-                  collectionsRequiringApproval.length
-                )}`}
-                title="COLLECTIONS"
-                rows={collectionsRequiringApproval}
-                index={1}
-                openIndex={openIndex}
-              />
-              <ListingSection
-                sectionTitle={`Confirm ${listings.length} listing${pluralize(listings.length)}`}
-                caption="Now you can sign to list each item"
-                title="NFTS"
-                rows={listings}
-                index={2}
-                openIndex={openIndex}
-              />
-            </>
-          )}
-        </Column>
-        <hr className={styles.sectionDivider} />
-        <Row className={subhead} marginTop="12" marginBottom={showSuccessScreen ? '8' : '20'}>
-          Return if sold
-          <Row className={subheadSmall} marginLeft="auto" marginRight="0">
-            {totalEthListingValue}
-            &nbsp;ETH
-          </Row>
-        </Row>
-        {showSuccessScreen ? (
-          <Box as="span" className={caption} color="textSecondary">
-            Status:{' '}
-            <Box as="span" color="accentSuccess">
-              Confirmed
-            </Box>
-          </Box>
-        ) : (
-          <ListingButton onClick={clickStartListingFlow} buttonText="Start listing" showWarningOverride={isMobile} />
-        )}
-        {(listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.SIGNING) && (
-          <Box
-            as="button"
-            border="none"
-            backgroundColor="backgroundSurface"
-            cursor="pointer"
-            color="orange"
-            className={styles.button}
-            onClick={clickStopListing}
-            type="button"
-          >
-            Stop listing
-          </Box>
-        )}
-      </Column>
-    </Trace>
-  )
-}
-export default ListingModal
--- a/src/nft/components/bag/profile/ListingSection.tsx
+++ b/src/nft/components/bag/profile/ListingSection.tsx
-import clsx from 'clsx'
-import { Box } from 'nft/components/Box'
-import { Column, Row } from 'nft/components/Flex'
-import { ApprovedCheckmarkIcon, ChevronUpIcon, FailedListingIcon, LoadingIcon } from 'nft/components/icons'
-import { badge, bodySmall, buttonTextSmall, subhead } from 'nft/css/common.css'
-import { useSellAsset } from 'nft/hooks'
-import { AssetRow, CollectionRow, ListingRow, ListingStatus } from 'nft/types'
-import { formatEthPrice, numberToWei } from 'nft/utils/currency'
-import { useEffect, useState } from 'react'
-import * as styles from './ListingModal.css'
-export const ListingSection = ({
-  sectionTitle,
-  caption = undefined,
-  title = undefined,
-  rows,
-  index,
-  openIndex,
-  isSuccessScreen = false,
-}: {
-  sectionTitle: string
-  caption?: string
-  title?: string
-  rows: AssetRow[]
-  index: number
-  openIndex: number
-  isSuccessScreen?: boolean
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const notAllApproved = rows.some((row: AssetRow) => row.status !== ListingStatus.APPROVED)
-  const sellAssets = useSellAsset((state) => state.sellAssets)
-  const removeAssetMarketplace = useSellAsset((state) => state.removeAssetMarketplace)
-  const removeRow = (row: any) => {
-    // collections
-    if (index === 1) {
-      for (const asset of sellAssets)
-        if (asset.asset_contract.address === row.collectionAddress) removeAssetMarketplace(asset, row.marketplace)
-    }
-    // listings
-    else removeAssetMarketplace(row.asset, row.marketplace)
-  }
-  useEffect(() => {
-    setIsOpen(index === openIndex)
-  }, [index, openIndex])
-  function getListingRowPrice(row: AssetRow): number | undefined {
-    const listingRow = row as ListingRow
-    const newListings = listingRow.asset.newListings
-    return newListings?.find((listing) => listing.marketplace.name === listingRow.marketplace.name)?.price ?? 0
-  }
-  const allApproved = !notAllApproved && rows.length > 0 && !isSuccessScreen
-  return (
-    <Row
-      flexWrap="wrap"
-      className={subhead}
-      marginTop="10"
-      marginBottom="10"
-      onClick={() => rows.length > 0 && setIsOpen(!isOpen)}
-      color={allApproved ? 'accentSuccess' : 'textPrimary'}
-    >
-      {allApproved && <ApprovedCheckmarkIcon style={{ marginRight: '8px' }} />}
-      {sectionTitle}
-      {!isSuccessScreen && <ChevronUpIcon className={clsx(`${isOpen ? '' : styles.chevronDown} ${styles.chevron}`)} />}
-      {(isOpen || isSuccessScreen) && (
-        <Column
-          gap="12"
-          width="full"
-          paddingTop={isSuccessScreen ? '28' : 'auto'}
-          className={clsx(!isSuccessScreen && styles.listingSectionBorder)}
-        >
-          {caption && (
-            <Box color="textPrimary" fontWeight="normal" className={caption}>
-              {caption}
-            </Box>
-          )}
-          {title && (
-            <Box color="textSecondary" className={badge}>
-              {title}
-            </Box>
-          )}
-          <Column gap="8">
-            {rows.map((row: AssetRow, index) => {
-              return (
-                <Column key={index} gap="8">
-                  <Row>
-                    {row.images?.map((image, index) => {
-                      return (
-                        <Box
-                          as="img"
-                          height="20"
-                          width="20"
-                          borderRadius={index === 0 && (row as CollectionRow).collectionAddress ? 'round' : '4'}
-                          style={{ zIndex: 2 - index }}
-                          className={styles.listingModalIcon}
-                          src={image}
-                          alt={row.name}
-                          key={index}
-                        />
-                      )
-                    })}
-                    <Box
-                      marginLeft="8"
-                      marginRight="auto"
-                      fontWeight="normal"
-                      color="textPrimary"
-                      textOverflow="ellipsis"
-                      overflow="hidden"
-                      whiteSpace="nowrap"
-                      maxWidth={{
-                        sm: 'max',
-                        md:
-                          row.status === ListingStatus.REJECTED || row.status === ListingStatus.FAILED ? '120' : 'full',
-                      }}
-                      className={bodySmall}
-                    >
-                      {row.name}
-                    </Box>
-                    {isSuccessScreen ? (
-                      getListingRowPrice(row) &&
-                      `${formatEthPrice(numberToWei(getListingRowPrice(row) ?? 0).toString())} ETH`
-                    ) : row.status === ListingStatus.APPROVED ? (
-                      <ApprovedCheckmarkIcon height="20" width="20" />
-                    ) : row.status === ListingStatus.FAILED || row.status === ListingStatus.REJECTED ? (
-                      <Row gap="4">
-                        <Box fontWeight="normal" fontSize="14" color="textSecondary">
-                          {row.status}
-                        </Box>
-                        <FailedListingIcon />
-                      </Row>
-                    ) : (
-                      row.status === ListingStatus.SIGNING && <LoadingIcon height="20" width="20" stroke="#4673FA" />
-                    )}
-                  </Row>
-                  {(row.status === ListingStatus.FAILED || row.status === ListingStatus.REJECTED) && (
-                    <Row gap="8" justifyContent="center">
-                      <Box
-                        width="120"
-                        as="button"
-                        className={buttonTextSmall}
-                        borderRadius="12"
-                        border="none"
-                        color="red400"
-                        height="32"
-                        cursor="pointer"
-                        style={{ backgroundColor: '#FA2B391A' }}
-                        onClick={async (e) => {
-                          e.stopPropagation()
-                          removeRow(row)
-                        }}
-                      >
-                        Remove
-                      </Box>
-                      <Box
-                        width="120"
-                        as="button"
-                        className={buttonTextSmall}
-                        borderRadius="12"
-                        border="none"
-                        color="accentAction"
-                        height="32"
-                        cursor="pointer"
-                        style={{ backgroundColor: '#4C82FB29' }}
-                        onClick={async (e) => {
-                          e.stopPropagation()
-                          if (row.callback) {
-                            await row.callback()
-                          }
-                        }}
-                      >
-                        Try again
-                      </Box>
-                    </Row>
-                  )}
-                </Column>
-              )
-            })}
-          </Column>
-        </Column>
-      )}
-    </Row>
-  )
-}
--- a/src/nft/components/bag/profile/utils.ts
+++ b/src/nft/components/bag/profile/utils.ts
@@ -2,30 +2,8 @@ import type { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { addressesByNetwork, SupportedChainId } from '@looksrare/sdk'
 import { LOOKSRARE_MARKETPLACE_CONTRACT, X2Y2_TRANSFER_CONTRACT } from 'nft/queries'
 import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea'
-import { AssetRow, CollectionRow, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
+import { CollectionRow, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
 import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
-import { Dispatch } from 'react'
-const updateStatus = ({
-  listing,
-  newStatus,
-  rows,
-  setRows,
-  callback,
-}: {
-  listing: AssetRow
-  newStatus: ListingStatus
-  rows: AssetRow[]
-  setRows: Dispatch<AssetRow[]>
-  callback?: () => Promise<void>
-}) => {
-  const rowsCopy = [...rows]
-  const index = rows.findIndex((n) => n === listing)
-  listing.status = newStatus
-  if (callback) listing.callback = callback
-  rowsCopy[index] = listing
-  setRows(rowsCopy)
-}
 export async function approveCollectionRow(
  collectionRow: CollectionRow,
@@ -211,27 +189,3 @@ export const getListingState = (
 export const verifyStatus = (status: ListingStatus) => {
  return status !== ListingStatus.PAUSED && status !== ListingStatus.APPROVED
 }
-export const pauseRow = (row: AssetRow, rows: AssetRow[], setRows: Dispatch<AssetRow[]>) => {
-  if (row.status === ListingStatus.PENDING || row.status === ListingStatus.DEFINED)
-    updateStatus({
-      listing: row,
-      newStatus: ListingStatus.PAUSED,
-      rows,
-      setRows,
-    })
-}
-export const resetRow = (row: AssetRow, rows: AssetRow[], setRows: Dispatch<AssetRow[]>) => {
-  if (
-    row.status === ListingStatus.PAUSED ||
-    row.status === ListingStatus.FAILED ||
-    row.status === ListingStatus.REJECTED
-  )
-    updateStatus({
-      listing: row,
-      newStatus: ListingStatus.DEFINED,
-      rows,
-      setRows,
-    })
-}
--- a/src/nft/components/icons.tsx
+++ b/src/nft/components/icons.tsx
@@ -304,30 +304,6 @@ export const ClockIcon = () => (
  </svg>
 )
-export const LoadingIcon = (props: SVGProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width="100px"
-    height="100px"
-    viewBox="0 0 100 100"
-    preserveAspectRatio="xMidYMid"
-    {...props}
-  >
-    <circle cx="50" cy="50" fill="none" strokeWidth="10" r="35" strokeDasharray="164.93361431346415 56.97787143782138">
-      <animateTransform
-        attributeName="transform"
-        type="rotate"
-        repeatCount="indefinite"
-        dur="1s"
-        values="0 50 50;360 50 50"
-        keyTimes="0;1"
-        {...props}
-      ></animateTransform>
-    </circle>
-  </svg>
-)
 export const ApprovedCheckmarkIcon = (props: SVGProps) => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
@@ -337,15 +313,6 @@ export const ApprovedCheckmarkIcon = (props: SVGProps) => (
  </svg>
 )
-export const FailedListingIcon = (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.9933 16.2444C13.5529 16.2444 16.4909 13.3064 16.4909 9.75307C16.4909 6.19978 13.5466 3.26172 9.98703 3.26172C6.43373 3.26172 3.50195 6.19978 3.50195 9.75307C3.50195 13.3064 6.44001 16.2444 9.9933 16.2444ZM8.12877 12.3207C7.78976 12.3207 7.62653 12.1324 7.62653 11.8624V7.63742C7.62653 7.36747 7.78976 7.17913 8.12877 7.17913H8.80678C9.14579 7.17913 9.30901 7.36747 9.30901 7.63742V11.8624C9.30901 12.1324 9.14579 12.3207 8.80678 12.3207H8.12877ZM11.1798 12.3207C10.8471 12.3207 10.6776 12.1324 10.6776 11.8624V7.63742C10.6776 7.36747 10.8471 7.17913 11.1798 7.17913H11.8641C12.1906 7.17913 12.3538 7.36747 12.3538 7.63742V11.8624C12.3538 12.1324 12.1906 12.3207 11.8641 12.3207H11.1798Z"
-      fill={themeVars.colors.textSecondary}
-    />
-  </svg>
-)
 export const FilterIcon = (props: SVGProps) => (
  <svg width="20" height="20" viewBox="1 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path

--- a/src/nft/components/profile/list/ListPage.tsx
+++ b/src/nft/components/profile/list/ListPage.tsx
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { InterfaceModalName, NFTEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
 import Row from 'components/Row'
-import { ListingButton } from 'nft/components/bag/profile/ListingButton'
 import { approveCollectionRow, getListingState, getTotalEthValue, verifyStatus } from 'nft/components/bag/profile/utils'
+import { ListingButton } from 'nft/components/profile/list/ListingButton'
 import { useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
 import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
 import { looksRareNonceFetcher } from 'nft/queries'
@@ -212,7 +212,6 @@ export const ListPage = () => {
  )
  const totalEthListingValue = useMemo(() => getTotalEthValue(sellAssets), [sellAssets])
-  const anyListingsMissingPrice = useMemo(() => !!listings.find((listing) => !listing.price), [listings])
  const [showListModal, toggleShowListModal] = useReducer((s) => !s, false)
  const [selectedMarkets, setSelectedMarkets] = useState([ListingMarkets[0]]) // default marketplace: x2y2
  const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
@@ -269,7 +268,7 @@ export const ListPage = () => {
    }
  }
-  const handleV2Click = () => {
+  const showModalAndStartListing = () => {
    toggleShowListModal()
    startListingFlow()
  }
@@ -322,11 +321,7 @@ export const ListPage = () => {
              <UsdValue>{formatUsdPrice(totalEthListingValue * ethPriceInUSD)}</UsdValue>
            )}
          </ProceedsWrapper>
-          <ListingButton
+          <ListingButton onClick={showModalAndStartListing} />
-            onClick={handleV2Click}
-            buttonText={anyListingsMissingPrice && !isMobile ? t`Set prices to continue` : t`Start listing`}
-            showWarningOverride={true}
-          />
        </ProceedsAndButtonWrapper>
      </FloatingConfirmationBar>
      <Overlay />

--- a/src/nft/components/bag/profile/ListingButton.tsx
+++ b/src/nft/components/bag/profile/ListingButton.tsx
 import { Plural, t, Trans } from '@lingui/macro'
+import { BaseButton } from 'components/Button'
 import ms from 'ms.macro'
-import { Box } from 'nft/components/Box'
 import { BelowFloorWarningModal } from 'nft/components/profile/list/Modal/BelowFloorWarningModal'
-import { useNFTList, useSellAsset } from 'nft/hooks'
+import { useIsMobile, useNFTList, useSellAsset } from 'nft/hooks'
 import { Listing, ListingStatus, WalletAsset } from 'nft/types'
-import { pluralize } from 'nft/utils/roundAndPluralize'
 import { useEffect, useMemo, useState } from 'react'
-import { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
 import shallow from 'zustand/shallow'
-import * as styles from './ListingModal.css'
+import { getListings } from '../../bag/profile/utils'
-import { getListings } from './utils'
 const BELOW_FLOOR_PRICE_THRESHOLD = 0.8
-interface ListingButtonProps {
+const StyledListingButton = styled(BaseButton)<{ showResolveIssues: boolean; missingPrices: boolean }>`
-  onClick: () => void
+  background: ${({ showResolveIssues, theme }) => (showResolveIssues ? theme.accentFailure : theme.accentAction)};
-  buttonText: string
+  color: ${({ theme }) => theme.accentTextLightPrimary};
-  showWarningOverride?: boolean
+  font-weight: 600;
-}
+  font-size: 20px;
+  line-height: 24px;
+  padding: 16px;
+  border-radius: 12px;
+  width: min-content;
+  border: none;
+  cursor: ${({ missingPrices }) => (missingPrices ? 'auto' : 'pointer')};
+  opacity: ${({ showResolveIssues, missingPrices }) => !showResolveIssues && missingPrices && '0.3'};
-export const ListingButton = ({ onClick, buttonText, showWarningOverride = false }: ListingButtonProps) => {
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-  const {
+    font-size: 16px;
-    addMarketplaceWarning,
+    line-height: 20px;
-    sellAssets,
+    padding: 10px 12px;
-    removeAllMarketplaceWarnings,
+  }
-    showResolveIssues,
+`
-    toggleShowResolveIssues,
-    issues,
+export const ListingButton = ({ onClick }: { onClick: () => void }) => {
-    setIssues,
+  const { sellAssets, showResolveIssues, toggleShowResolveIssues, issues, setIssues } = useSellAsset(
-  } = useSellAsset(
+    ({ sellAssets, showResolveIssues, toggleShowResolveIssues, issues, setIssues }) => ({
-    ({
-      addMarketplaceWarning,
-      sellAssets,
-      removeAllMarketplaceWarnings,
-      showResolveIssues,
-      toggleShowResolveIssues,
-      issues,
-      setIssues,
-    }) => ({
-      addMarketplaceWarning,
      sellAssets,
-      removeAllMarketplaceWarnings,
      showResolveIssues,
      toggleShowResolveIssues,
      issues,
@@ -49,9 +44,8 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
    }),
    shallow
  )
-  const { listingStatus, setListingStatus, setListings, setCollectionsRequiringApproval } = useNFTList(
+  const { setListingStatus, setListings, setCollectionsRequiringApproval } = useNFTList(
-    ({ listingStatus, setListingStatus, setListings, setCollectionsRequiringApproval }) => ({
+    ({ setListingStatus, setListings, setCollectionsRequiringApproval }) => ({
-      listingStatus,
      setListingStatus,
      setListings,
      setCollectionsRequiringApproval,
@@ -59,37 +53,24 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
    shallow
  )
  const [showWarning, setShowWarning] = useState(false)
-  const [canContinue, setCanContinue] = useState(false)
+  const isMobile = useIsMobile()
-  const theme = useTheme()
+  // instantiate listings and collections to approve when user's modify input data
  useEffect(() => {
    const [newCollectionsToApprove, newListings] = getListings(sellAssets)
    setListings(newListings)
    setCollectionsRequiringApproval(newCollectionsToApprove)
    setListingStatus(ListingStatus.DEFINED)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sellAssets, setCollectionsRequiringApproval, setListingStatus, setListings])
-  }, [sellAssets])
-  const [
+  // Find issues with item listing data
-    noMarketplacesSelected,
+  const [listingsMissingPrice, listingsBelowFloor] = useMemo(() => {
-    missingExpiration,
-    invalidExpiration,
-    overMaxExpiration,
-    listingsMissingPrice,
-    listingsBelowFloor,
-    listingsAboveSellOrderFloor,
-    invalidPrices,
-  ] = useMemo(() => {
-    const noMarketplacesSelected = sellAssets.some((asset: WalletAsset) => asset.marketplaces === undefined)
    const missingExpiration = sellAssets.some((asset) => {
      return (
        asset.expirationTime != null &&
        (isNaN(asset.expirationTime) || asset.expirationTime * 1000 - Date.now() < ms`60 seconds`)
      )
    })
-    const invalidExpiration = sellAssets.some((asset) => {
-      return asset.expirationTime != null && isNaN(asset.expirationTime)
-    })
    const overMaxExpiration = sellAssets.some((asset) => {
      return asset.expirationTime != null && asset.expirationTime * 1000 - Date.now() > ms`180 days`
    })
@@ -113,8 +94,8 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
        }
      }
    }
-    // set number of issues
+    // set number of issues
    const foundIssues =
      Number(missingExpiration) +
      Number(overMaxExpiration) +
@@ -126,137 +107,31 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
    if ((missingExpiration || overMaxExpiration || listingsAboveSellOrderFloor.length) && !showResolveIssues)
      toggleShowResolveIssues()
-    const continueCheck = listingsBelowFloor.length === 0 && listingsAboveSellOrderFloor.length === 0
+    return [listingsMissingPrice, listingsBelowFloor]
-    setCanContinue(continueCheck)
-    return [
-      noMarketplacesSelected,
-      missingExpiration,
-      invalidExpiration,
-      overMaxExpiration,
-      listingsMissingPrice,
-      listingsBelowFloor,
-      listingsAboveSellOrderFloor,
-      invalidPrices,
-    ]
  }, [sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
-  const [disableListButton, warningMessage] = useMemo(() => {
-    const disableListButton =
-      noMarketplacesSelected ||
-      missingExpiration ||
-      invalidExpiration ||
-      overMaxExpiration ||
-      invalidPrices.length > 0 ||
-      listingsMissingPrice.length > 0
-    const warningMessage = noMarketplacesSelected
-      ? 'No marketplaces selected'
-      : missingExpiration
-      ? 'Set duration'
-      : invalidExpiration
-      ? 'Invalid duration'
-      : overMaxExpiration
-      ? 'Max duration is 6 months'
-      : listingsMissingPrice.length > 0
-      ? `${listingsMissingPrice.length} item price${pluralize(listingsMissingPrice.length)} not set`
-      : invalidPrices.length > 0
-      ? `${invalidPrices.length} price${pluralize(invalidPrices.length)} are invalid`
-      : listingsBelowFloor.length > 0
-      ? `${listingsBelowFloor.length} item${pluralize(listingsBelowFloor.length)} listed below floor`
-      : listingsAboveSellOrderFloor.length > 0
-      ? `${listingsAboveSellOrderFloor.length} item${pluralize(listingsAboveSellOrderFloor.length)} already listed`
-      : ''
-    return [disableListButton, warningMessage]
-  }, [
-    noMarketplacesSelected,
-    missingExpiration,
-    invalidExpiration,
-    overMaxExpiration,
-    listingsMissingPrice,
-    invalidPrices,
-    listingsBelowFloor,
-    listingsAboveSellOrderFloor,
-  ])
-  useEffect(() => {
-    setShowWarning(false)
-  }, [warningMessage])
-  const addWarningMessages = () => {
-    removeAllMarketplaceWarnings()
-    if (!missingExpiration && !noMarketplacesSelected) {
-      if (listingsMissingPrice.length > 0) {
-        for (const [asset, listing] of listingsMissingPrice) {
-          addMarketplaceWarning(asset, {
-            message: 'PLEASE SET A PRICE',
-            marketplace: listing.marketplace,
-          })
-        }
-      } else if (invalidPrices.length > 0) {
-        for (const [asset, listing] of invalidPrices) {
-          !listing.overrideFloorPrice &&
-            addMarketplaceWarning(asset, {
-              message: `INVALID PRICE`,
-              marketplace: listing.marketplace,
-            })
-        }
-      }
-    }
-    setShowWarning(true)
-  }
  const warningWrappedClick = () => {
-    if ((!disableListButton && canContinue) || showWarningOverride) {
+    if (issues) !showResolveIssues && toggleShowResolveIssues()
-      if (issues) !showResolveIssues && toggleShowResolveIssues()
+    else if (listingsBelowFloor.length) setShowWarning(true)
-      else if (listingsBelowFloor.length) setShowWarning(true)
+    else onClick()
-      else onClick()
-    } else addWarningMessages()
  }
  return (
    <>
-      <Box position="relative">
+      <StyledListingButton
-        <Box
+        onClick={warningWrappedClick}
-          as="button"
+        missingPrices={!!listingsMissingPrice.length}
-          border="none"
+        showResolveIssues={showResolveIssues}
-          backgroundColor={showResolveIssues ? 'accentFailure' : 'accentAction'}
+      >
-          cursor={
+        {showResolveIssues ? (
-            [ListingStatus.APPROVED, ListingStatus.PENDING, ListingStatus.SIGNING].includes(listingStatus) ||
+          <Plural value={issues !== 1 ? 2 : 1} _1="Resolve issue" other={t`Resolve ${issues} issues`} />
-            disableListButton
+        ) : listingsMissingPrice.length && !isMobile ? (
-              ? 'default'
+          <Trans>Set prices to continue</Trans>
-              : 'pointer'
+        ) : (
-          }
+          <Trans>Start listing</Trans>
-          className={styles.button}
+        )}
-          onClick={() => listingStatus !== ListingStatus.APPROVED && warningWrappedClick()}
+      </StyledListingButton>
-          type="button"
-          style={{
-            color: showResolveIssues ? theme.accentTextLightPrimary : theme.white,
-            opacity:
-              ![ListingStatus.DEFINED, ListingStatus.FAILED, ListingStatus.CONTINUE].includes(listingStatus) ||
-              (disableListButton && !showResolveIssues)
-                ? 0.3
-                : 1,
-          }}
-        >
-          {listingStatus === ListingStatus.SIGNING ? (
-            <Trans>Proceed in wallet</Trans>
-          ) : listingStatus === ListingStatus.PENDING ? (
-            <Trans>Pending</Trans>
-          ) : listingStatus === ListingStatus.APPROVED ? (
-            <Trans>Complete!</Trans>
-          ) : listingStatus === ListingStatus.PAUSED ? (
-            <Trans>Paused</Trans>
-          ) : listingStatus === ListingStatus.FAILED ? (
-            <Trans>Try again</Trans>
-          ) : listingStatus === ListingStatus.CONTINUE ? (
-            <Trans>Continue</Trans>
-          ) : showResolveIssues ? (
-            <Plural value={issues !== 1 ? 2 : 1} _1="Resolve issue" other={t`Resolve ${issues} issues`} />
-          ) : (
-            buttonText
-          )}
-        </Box>
-      </Box>
      {showWarning && (
        <BelowFloorWarningModal
          listingsBelowFloor={listingsBelowFloor}

--- a/src/nft/css/common.css.ts
+++ b/src/nft/css/common.css.ts
@@ -18,27 +18,10 @@ export const subheadSmall = sprinkles({ fontWeight: 'medium', fontSize: '14', li
 export const body = sprinkles({ fontWeight: 'normal', fontSize: '16', lineHeight: '24' })
 export const bodySmall = sprinkles({ fontWeight: 'normal', fontSize: '14', lineHeight: '20' })
 export const caption = sprinkles({ fontWeight: 'normal', fontSize: '12', lineHeight: '16' })
-export const badge = sprinkles({ fontWeight: 'semibold', fontSize: '10', lineHeight: '12' })
 export const buttonTextMedium = sprinkles({ fontWeight: 'semibold', fontSize: '16', lineHeight: '20' })
 export const buttonTextSmall = sprinkles({ fontWeight: 'semibold', fontSize: '14', lineHeight: '16' })
-export const commonButtonStyles = style([
-  sprinkles({
-    borderRadius: '12',
-    transition: '250',
-  }),
-  {
-    border: 'none',
-    ':hover': {
-      cursor: 'pointer',
-    },
-    ':disabled': {
-      cursor: 'auto',
-    },
-  },
-])
 const magicalGradient = style({
  selectors: {
    '&::before': {