feat: [ListV2] Changes based off Bug Bash (#5936)

* duration wrap

* better styling a different breakpoints

* throw error on listing same price

* don't show spinner on v2

* remove unused check

---------
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/profile/ListingButton.tsx

@@ -111,7 +111,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
             !listing.overrideFloorPrice
           )
             listingsBelowFloor.push([asset, listing])
-          else if (asset.floor_sell_order_price && listing.price > asset.floor_sell_order_price)
+          else if (asset.floor_sell_order_price && listing.price >= asset.floor_sell_order_price)
             listingsAboveSellOrderFloor.push([asset, listing])
         }
       }
@@ -286,10 +286,18 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
           }}
         >
           {listingStatus === ListingStatus.SIGNING || listingStatus === ListingStatus.PENDING ? (
+            isNftListV2 ? (
+              listingStatus === ListingStatus.PENDING ? (
+                'Pending'
+              ) : (
+                'Proceed in wallet'
+              )
+            ) : (
               <Row gap="8">
                 <LoadingIcon stroke="backgroundSurface" height="20" width="20" />
                 {listingStatus === ListingStatus.PENDING ? 'Pending' : 'Proceed in wallet'}
               </Row>
+            )
           ) : listingStatus === ListingStatus.APPROVED ? (
             'Complete!'
           ) : listingStatus === ListingStatus.PAUSED ? (

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

@@ -12,7 +12,7 @@ import { BackArrowIcon } from 'nft/components/icons'
 import { headlineLarge, headlineSmall } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
-import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
+import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE, LIST_PAGE_MARGIN_TABLET } from 'nft/pages/profile/shared'
 import { looksRareNonceFetcher } from 'nft/queries'
 import { ListingStatus, ProfilePageStateType } from 'nft/types'
 import { fetchPrice, formatEth, formatUsdPrice } from 'nft/utils'
@@ -105,11 +105,15 @@ const FloatingConfirmationBar = styled(Row)`
   max-width: 1200px;
   z-index: ${Z_INDEX.under_dropdown};
 
-  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-    width: calc(100% - ${LIST_PAGE_MARGIN_MOBILE * 2}px);
+  @media screen and (max-width: ${BREAKPOINTS.lg}px) {
+    width: calc(100% - ${LIST_PAGE_MARGIN_TABLET * 2}px);
     bottom: 68px;
     padding: 16px 12px;
   }
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    width: calc(100% - ${LIST_PAGE_MARGIN_MOBILE * 2}px);
+  }
 `
 
 const Overlay = styled.div`
@@ -120,6 +124,16 @@ const Overlay = styled.div`
   background: ${({ theme }) => `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, ${theme.backgroundBackdrop} 100%)`};
 `
 
+const UsdValue = styled(ThemedText.SubHeader)`
+  line-height: 24px;
+  color: ${({ theme }) => theme.textSecondary};
+  display: none;
+
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    display: flex;
+  }
+`
+
 const ProceedsAndButtonWrapper = styled(Row)`
   width: min-content;
   gap: 40px;
@@ -150,7 +164,7 @@ const ListingButtonWrapper = styled.div`
   width: 170px;
 
   @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-    width: 95px;
+    width: max-content;
   }
 `
 
@@ -304,10 +318,8 @@ export const ListPage = () => {
                 <EthValueWrapper totalEthListingValue={!!totalEthListingValue}>
                   {totalEthListingValue > 0 ? formatEth(totalEthListingValue) : '-'} ETH
                 </EthValueWrapper>
-                {!!totalEthListingValue && !!ethPriceInUSD && !isMobile && (
-                  <ThemedText.SubHeader lineHeight="24px" color="textSecondary">
-                    {formatUsdPrice(totalEthListingValue * ethPriceInUSD)}
-                  </ThemedText.SubHeader>
+                {!!totalEthListingValue && !!ethPriceInUSD && (
+                  <UsdValue>{formatUsdPrice(totalEthListingValue * ethPriceInUSD)}</UsdValue>
                 )}
               </ProceedsWrapper>
               <ListingButtonWrapper>

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

@@ -49,7 +49,7 @@ const FeeColumnWrapper = styled(Column)`
   align-items: flex-end;
   display: none;
 
-  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     display: flex;
   }
 `
@@ -63,7 +63,7 @@ const ReturnColumn = styled(Column)`
   flex: 1.5;
   display: none;
 
-  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     display: flex;
   }
 `

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

@@ -19,12 +19,8 @@ const NFTListRowWrapper = styled(Row)`
 const NFTInfoWrapper = styled(Row)`
   align-items: center;
   min-width: 0px;
-  flex: 2;
-  margin-bottom: auto;
-
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
   flex: 1.5;
-  }
+  margin-bottom: auto;
 `
 
 const ExpandMarketIconWrapper = styled.div`
@@ -77,7 +73,11 @@ const CollectionName = styled(ThemedText.BodySmall)`
 
 const MarketPlaceRowWrapper = styled(Column)`
   gap: 24px;
-  flex: 1;
+  flex: 1.5;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    flex: 2;
+  }
 
   @media screen and (min-width: ${BREAKPOINTS.md}px) {
     flex: 3;

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

@@ -33,7 +33,11 @@ const NFTHeader = styled.div`
 `
 
 const PriceHeaders = styled(Row)`
-  flex: 1;
+  flex: 1.5;
+
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+    flex: 2;
+  }
 
   @media screen and (min-width: ${BREAKPOINTS.md}px) {
     flex: 3;
@@ -100,7 +104,7 @@ const DropdownContainer = styled.div`
 const FeeUserReceivesSharedStyles = css`
   display: none;
   justify-content: flex-end;
-  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+  @media screen and (min-width: ${BREAKPOINTS.md}px) {
     display: flex;
   }
 `

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

@@ -69,6 +69,7 @@ const ErrorMessage = styled(Row)`
   gap: 4px;
   position: absolute;
   top: 44px;
+  white-space: nowrap;
 `
 
 const WarningIcon = styled(AlertTriangle)`

src/nft/pages/profile/profile.tsx

@@ -14,14 +14,14 @@ import { useToggleWalletModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
 
-import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from './shared'
+import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE, LIST_PAGE_MARGIN_TABLET } from './shared'
 
 const ProfilePageWrapper = styled.div`
   height: 100%;
   width: 100%;
   scrollbar-width: none;
 
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
     height: auto;
   }
 `
@@ -34,6 +34,11 @@ const LoadedAccountPage = styled.div<{ cartExpanded: boolean; isOnV2ListPage: bo
   );
   margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN : 0)}px;
 
+  @media screen and (max-width: ${BREAKPOINTS.lg}px) {
+    width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_TABLET * 2 : 0)}px);
+    margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_TABLET : 0)}px;
+  }
+
   @media screen and (max-width: ${BREAKPOINTS.sm}px) {
     width: calc(100% - ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE * 2 : 0)}px);
     margin: 0px ${({ isOnV2ListPage }) => (isOnV2ListPage ? LIST_PAGE_MARGIN_MOBILE : 0)}px;

src/nft/pages/profile/shared.ts

 export const LIST_PAGE_MARGIN = 156
+export const LIST_PAGE_MARGIN_TABLET = 60
 export const LIST_PAGE_MARGIN_MOBILE = 16