feat: [ListV2] Proceeds bar polish (#5966)

* update nft info row height

* update proceeds styling

* update text

* move issues to hook

* update br padding

* mobile bar padding

* fix bug where no expiration wouldn't create issue

* build issue

* update bar padding

* reorganize statement

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

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

@@ -33,6 +33,8 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
     removeAllMarketplaceWarnings,
     showResolveIssues,
     toggleShowResolveIssues,
+    issues,
+    setIssues,
   } = useSellAsset(
     ({
       addMarketplaceWarning,
@@ -40,12 +42,16 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       removeAllMarketplaceWarnings,
       showResolveIssues,
       toggleShowResolveIssues,
+      issues,
+      setIssues,
     }) => ({
       addMarketplaceWarning,
       sellAssets,
       removeAllMarketplaceWarnings,
       showResolveIssues,
       toggleShowResolveIssues,
+      issues,
+      setIssues,
     }),
     shallow
   )
@@ -62,7 +68,6 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
   const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const [showWarning, setShowWarning] = useState(false)
   const [canContinue, setCanContinue] = useState(false)
-  const [issues, setIssues] = useState(0)
   const theme = useTheme()
   const warningRef = useRef<HTMLDivElement>(null)
   useOnClickOutside(warningRef, () => {
@@ -89,7 +94,10 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
   ] = useMemo(() => {
     const noMarketplacesSelected = sellAssets.some((asset: WalletAsset) => asset.marketplaces === undefined)
     const missingExpiration = sellAssets.some((asset) => {
-      return asset.expirationTime != null && asset.expirationTime * 1000 - Date.now() < ms`60 seconds`
+      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)
@@ -142,7 +150,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       listingsAboveSellOrderFloor,
       invalidPrices,
     ]
-  }, [isNftListV2, sellAssets, showResolveIssues, toggleShowResolveIssues])
+  }, [isNftListV2, sellAssets, setIssues, showResolveIssues, toggleShowResolveIssues])
 
   const [disableListButton, warningMessage] = useMemo(() => {
     const disableListButton =
@@ -219,7 +227,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
 
   return (
     <>
-      <Box position="relative" width="full">
+      <Box position="relative">
         {!showWarningOverride && showWarning && warningMessage.length > 0 && (
           <Row
             className={`${bodySmall} ${styles.warningTooltip}`}

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

@@ -29,20 +29,18 @@ export const sectionDivider = style([
 
 export const button = style([
   sprinkles({
-    height: '40',
-    width: 'full',
+    paddingX: { sm: '12', md: '16' },
+    paddingY: { sm: '10', md: '16' },
     textAlign: 'center',
-    fontWeight: 'medium',
-    fontSize: '14',
+    fontWeight: 'semibold',
+    fontSize: { sm: '16', md: '20' },
+    lineHeight: { sm: '20', md: '24' },
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'flex-end',
     borderRadius: '12',
   }),
-  {
-    lineHeight: '18px',
-  },
 ])
 
 export const listingModalIcon = style([

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

@@ -85,10 +85,10 @@ const MobileListButtonWrapper = styled.div`
   }
 `
 
-const FloatingConfirmationBar = styled(Row)`
-  padding: 20px 32px;
+const FloatingConfirmationBar = styled(Row)<{ issues: boolean }>`
+  padding: 12px 12px 12px 32px;
   border: 1px solid;
-  border-color: ${({ theme }) => theme.backgroundOutline};
+  border-color: ${({ theme, issues }) => (issues ? theme.backgroundOutline : theme.accentAction)};
   border-radius: 20px;
   white-space: nowrap;
   justify-content: space-between;
@@ -100,15 +100,16 @@ const FloatingConfirmationBar = styled(Row)`
   transform: translateX(-50%);
   max-width: 1200px;
   z-index: ${Z_INDEX.under_dropdown};
+  box-shadow: ${({ theme }) => theme.shallowShadow};
 
   @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);
+    padding: 8px 8px 8px 16px;
   }
 `
 
@@ -156,14 +157,6 @@ const EthValueWrapper = styled.span<{ totalEthListingValue: boolean }>`
   }
 `
 
-const ListingButtonWrapper = styled.div`
-  width: 170px;
-
-  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
-    width: max-content;
-  }
-`
-
 export const ListPage = () => {
   const { setProfilePageState: setSellPageState } = useProfilePageState()
   const { provider } = useWeb3React()
@@ -171,10 +164,11 @@ export const ListPage = () => {
   const isMobile = useIsMobile()
   const isNftListV2 = useNftListV2Flag() === NftListV2Variant.Enabled
   const trace = useTrace({ modal: InterfaceModalName.NFT_LISTING })
-  const { setGlobalMarketplaces, sellAssets } = useSellAsset(
-    ({ setGlobalMarketplaces, sellAssets }) => ({
+  const { setGlobalMarketplaces, sellAssets, issues } = useSellAsset(
+    ({ setGlobalMarketplaces, sellAssets, issues }) => ({
       setGlobalMarketplaces,
       sellAssets,
+      issues,
     }),
     shallow
   )
@@ -269,11 +263,11 @@ export const ListPage = () => {
 
   const BannerText = isMobile ? (
     <ThemedText.SubHeader lineHeight="24px">
-      <Trans>Proceeds</Trans>
+      <Trans>Receive</Trans>
     </ThemedText.SubHeader>
   ) : (
     <ThemedText.HeadlineSmall lineHeight="28px">
-      <Trans>Proceeds if sold</Trans>
+      <Trans>You receive</Trans>
     </ThemedText.HeadlineSmall>
   )
 
@@ -302,7 +296,7 @@ export const ListPage = () => {
       </MarketWrap>
       {isNftListV2 && (
         <>
-          <FloatingConfirmationBar>
+          <FloatingConfirmationBar issues={!!issues}>
             {BannerText}
             <ProceedsAndButtonWrapper>
               <ProceedsWrapper>
@@ -313,13 +307,11 @@ export const ListPage = () => {
                   <UsdValue>{formatUsdPrice(totalEthListingValue * ethPriceInUSD)}</UsdValue>
                 )}
               </ProceedsWrapper>
-              <ListingButtonWrapper>
-                <ListingButton
-                  onClick={handleV2Click}
-                  buttonText={anyListingsMissingPrice && !isMobile ? t`Set prices to continue` : t`Start listing`}
-                  showWarningOverride={true}
-                />
-              </ListingButtonWrapper>
+              <ListingButton
+                onClick={handleV2Click}
+                buttonText={anyListingsMissingPrice && !isMobile ? t`Set prices to continue` : t`Start listing`}
+                showWarningOverride={true}
+              />
             </ProceedsAndButtonWrapper>
           </FloatingConfirmationBar>
           <Overlay />

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

@@ -23,7 +23,7 @@ const NFTListRowWrapper = styled(Row)`
 `
 
 const RemoveIconContainer = styled.div`
-  width: 48px;
+  width: 44px;
   height: 44px;
   padding-left: 12px;
   align-self: flex-start;
@@ -47,8 +47,8 @@ const NFTInfoWrapper = styled(Row)`
 `
 
 const NFTImage = styled.img`
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   border-radius: 8px;
   margin-right: 8px;
 `
@@ -60,7 +60,6 @@ const HideTextOverflow = css`
 `
 
 const TokenInfoWrapper = styled(Column)`
-  gap: 4px;
   margin-right: 8px;
   min-width: 0px;
 `

src/nft/css/sprinkles.css.ts

@@ -313,6 +313,7 @@ const layoutStyles = defineProperties({
     placeContent: flexAlignment,
     fontSize: vars.fontSize,
     fontWeight: vars.fontWeight,
+    lineHeight: vars.lineHeight,
     marginBottom: spacing,
     marginLeft: spacing,
     marginRight: spacing,
@@ -411,7 +412,6 @@ const unresponsiveProperties = defineProperties({
     overflowX: overflow,
     overflowY: overflow,
     boxShadow: { ...themeVars.shadows, none: 'none', dropShadow: vars.color.dropShadow },
-    lineHeight: vars.lineHeight,
     transition: vars.time,
     transitionDuration: vars.time,
     animationDuration: vars.time,

src/nft/hooks/useSellAsset.ts

@@ -5,6 +5,7 @@ import { ListingMarket, ListingWarning, WalletAsset } from '../types'
 
 interface SellAssetState {
   sellAssets: WalletAsset[]
+  issues: number
   showResolveIssues: boolean
   selectSellAsset: (asset: WalletAsset) => void
   removeSellAsset: (asset: WalletAsset) => void
@@ -13,17 +14,19 @@ interface SellAssetState {
   setAssetListPrice: (asset: WalletAsset, price?: number, marketplace?: ListingMarket) => void
   setGlobalMarketplaces: (marketplaces: ListingMarket[]) => void
   removeAssetMarketplace: (asset: WalletAsset, marketplace: ListingMarket) => void
+  toggleShowResolveIssues: () => void
+  setIssues: (issues: number) => void
   // TODO: After merging v2, see if this marketplace logic can be removed
   addMarketplaceWarning: (asset: WalletAsset, warning: ListingWarning) => void
   removeMarketplaceWarning: (asset: WalletAsset, warning: ListingWarning, setGlobalOverride?: boolean) => void
   removeAllMarketplaceWarnings: () => void
-  toggleShowResolveIssues: () => void
 }
 
 export const useSellAsset = create<SellAssetState>()(
   devtools(
     (set) => ({
       sellAssets: [],
+      issues: 0,
       showResolveIssues: false,
       selectSellAsset: (asset) =>
         set(({ sellAssets }) => {
@@ -161,6 +164,10 @@ export const useSellAsset = create<SellAssetState>()(
           return { showResolveIssues: !showResolveIssues }
         })
       },
+      setIssues: (issues) =>
+        set(() => ({
+          issues,
+        })),
     }),
     { name: 'useSelectAsset' }
   )