fix: Several Listing Cleanup Items (#5119)

* Improving view my nfts and listing

src/components/Common/index.tsx

@@ -0,0 +1,31 @@
+import { css } from 'styled-components/macro'
+
+export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
+  // Firefox scrollbar styling
+  scrollbar-width: thin;
+  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
+  height: 100%;
+
+  // safari and chrome scrollbar styling
+  ::-webkit-scrollbar {
+    background: transparent;
+
+    // Set height for horizontal scrolls
+    ${({ $isHorizontalScroll }) => {
+      return $isHorizontalScroll
+        ? css`
+            height: 4px;
+            overflow-x: scroll;
+          `
+        : css`
+            width: 4px;
+            overflow-y: scroll;
+          `
+    }}
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.backgroundOutline};
+    border-radius: 8px;
+  }
+`

src/components/NavBar/index.tsx

@@ -7,7 +7,8 @@ import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
-import { ReactNode } from 'react'
+import { useIsMobile } from 'nft/hooks'
+import { ReactNode, useMemo } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
 import { ChainSelector } from './ChainSelector'
@@ -71,9 +72,30 @@ const PageTabs = () => {
   )
 }
 
+const useShouldHideNavbar = () => {
+  const { pathname } = useLocation()
+  const isMobile = useIsMobile()
+
+  const shouldHideNavbar = useMemo(() => {
+    const paths = ['/nfts/profile']
+    if (!isMobile) return false
+
+    for (const path of paths) {
+      if (pathname.includes(path)) return true
+    }
+
+    return false
+  }, [isMobile, pathname])
+
+  return shouldHideNavbar
+}
+
 const Navbar = () => {
+  const shouldHideNavbar = useShouldHideNavbar()
   const isNftPage = useIsNftPage()
 
+  if (shouldHideNavbar) return null
+
   return (
     <>
       <nav className={styles.nav}>

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -1,3 +1,4 @@
+import { ScrollBarStyles } from 'components/Common'
 import { ChevronLeft } from 'react-feather'
 import styled from 'styled-components/macro'
 
@@ -8,22 +9,11 @@ const Menu = styled.div`
   overflow: auto;
   max-height: 450px;
 
-  // Firefox scrollbar styling
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
+  ${ScrollBarStyles}
 
-  // safari and chrome scrollbar styling
-  ::-webkit-scrollbar {
-    background: transparent;
-    width: 4px;
-  }
   ::-webkit-scrollbar-track {
     margin-top: 40px;
   }
-  ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.backgroundOutline};
-    border-radius: 8px;
-  }
 `
 
 const Header = styled.span`

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

@@ -115,6 +115,7 @@ export const removeButton = style([
 export const bagRowImage = sprinkles({
   width: '56',
   height: '56',
+  objectFit: 'cover',
   borderRadius: '8',
 })
 

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

@@ -13,6 +13,7 @@ export const chevron = style([
 
 export const chevronDown = style({
   transform: 'rotate(180deg)',
+  cursor: 'pointer',
 })
 
 export const sectionDivider = style([
@@ -53,6 +54,7 @@ export const listingModalIcon = style([
   {
     boxSizing: 'border-box',
     marginLeft: '-2px',
+    marginRight: '4px',
   },
 ])
 

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

@@ -110,6 +110,7 @@ export const ListingSection = ({
                       color="textPrimary"
                       textOverflow="ellipsis"
                       overflow="hidden"
+                      whiteSpace="nowrap"
                       maxWidth={{
                         sm: 'max',
                         md:

src/nft/components/collection/CollectionStats.tsx

@@ -280,7 +280,7 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
   const isCollectionStatsLoading = useIsCollectionLoading((state) => state.isCollectionStatsLoading)
 
   // round daily volume & floorPrice to 3 decimals or less
-  const totalVolumeStr = volumeFormatter(stats.stats?.total_volume ?? 0)
+  const totalVolumeStr = volumeFormatter(Number(stats.stats?.total_volume) ?? 0)
   const floorPriceStr = floorFormatter(stats.stats?.floor_price ?? 0)
   // graphQL formatted %age values out of 100, whereas v3 endpoint did a decimal between 0 & 1
   const floorChangeStr = Math.round(Math.abs(stats?.stats?.one_day_floor_change ?? 0))

src/nft/components/details/AssetActivity.tsx

@@ -1,3 +1,4 @@
+import { ScrollBarStyles } from 'components/Common'
 import { ActivityEventResponse } from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
 import { formatEthPrice } from 'nft/utils/currency'
@@ -92,20 +93,7 @@ const ActivityContainer = styled.div`
   max-height: 310px;
   overflow: auto;
 
-  // Firefox scrollbar styling
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
-
-  // safari and chrome scrollbar styling
-  ::-webkit-scrollbar {
-    background: transparent;
-    width: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.backgroundOutline};
-    border-radius: 8px;
-  }
+  ${ScrollBarStyles}
 `
 
 const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | undefined }) => {

src/nft/components/details/AssetDetails.tsx

@@ -1,3 +1,4 @@
+import { ScrollBarStyles } from 'components/Common'
 import Resource from 'components/Tokens/TokenDetails/Resource'
 import { MouseoverTooltip } from 'components/Tooltip/index'
 import { Box } from 'nft/components/Box'
@@ -142,23 +143,7 @@ const ActivitySelectContainer = styled.div`
   gap: 8px;
   margin-bottom: 34px;
   overflow-x: auto;
-
-  // Firefox scrollbar styling
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`};
-
-  // safari and chrome scrollbar styling
-  ::-webkit-scrollbar {
-    background: transparent;
-    height: 4px;
-  }
-  ::-webkit-scrollbar-track {
-    margin-top: 40px;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.backgroundOutline};
-    border-radius: 8px;
-  }
+  ${ScrollBarStyles}
 
   @media (max-width: 720px) {
     padding-bottom: 8px;
@@ -454,7 +439,7 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
         secondaryHeader={formattedPrice ? `Last Sale: ${formattedPrice} ETH` : undefined}
       >
         <>
-          <ActivitySelectContainer>
+          <ActivitySelectContainer $isHorizontalScroll>
             <Filter eventType={ActivityEventType.Listing} />
             <Filter eventType={ActivityEventType.Sale} />
             <Filter eventType={ActivityEventType.Transfer} />

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

@@ -1,3 +1,4 @@
+import { ScrollBarStyles } from 'components/Common'
 import { AnimatedBox, Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { XMarkIcon } from 'nft/components/icons'
@@ -9,9 +10,14 @@ import { useFiltersExpanded, useIsMobile, useWalletCollections } from 'nft/hooks
 import { WalletCollection } from 'nft/types'
 import { Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
 import { useSpring } from 'react-spring'
+import styled from 'styled-components/macro'
 
 import * as styles from './ProfilePage.css'
 
+const ItemsContainer = styled.div`
+  ${ScrollBarStyles}
+`
+
 export const FilterSidebar = () => {
   const collectionFilters = useWalletCollections((state) => state.collectionFilters)
   const setCollectionFilters = useWalletCollections((state) => state.setCollectionFilters)
@@ -30,7 +36,7 @@ export const FilterSidebar = () => {
       position={{ sm: 'fixed', md: 'sticky' }}
       top={{ sm: '40', md: 'unset' }}
       left={{ sm: '0', md: 'unset' }}
-      width={{ sm: 'full', md: 'auto' }}
+      width={{ sm: 'full', md: '332', lg: '332' }}
       height={{ sm: 'full', md: 'auto' }}
       zIndex={{ sm: '3', md: 'auto' }}
       display={isFiltersExpanded ? 'flex' : 'none'}
@@ -40,7 +46,7 @@ export const FilterSidebar = () => {
         paddingTop={{ sm: '24', md: '0' }}
         paddingLeft={{ sm: '16', md: '0' }}
         paddingRight="16"
-        width={{ sm: 'full', md: 'auto' }}
+        width={{ sm: 'full', md: '332', lg: '332' }}
       >
         <Row width="full" justifyContent="space-between">
           {isMobile && (
@@ -99,16 +105,18 @@ const CollectionSelect = ({
             collectionSearchText={collectionSearchText}
             setCollectionSearchText={setCollectionSearchText}
           />
-          <Box paddingBottom="8" overflowY="scroll" style={{ scrollbarWidth: 'none' }}>
-            {displayCollections?.map((collection, index) => (
-              <CollectionItem
-                key={index}
-                collection={collection}
-                collectionFilters={collectionFilters}
-                setCollectionFilters={setCollectionFilters}
-              />
-            ))}
-          </Box>
+          <ItemsContainer>
+            <Box paddingBottom="8" style={{ scrollbarWidth: 'none' }}>
+              {displayCollections?.map((collection) => (
+                <CollectionItem
+                  key={collection.address}
+                  collection={collection}
+                  collectionFilters={collectionFilters}
+                  setCollectionFilters={setCollectionFilters}
+                />
+              ))}
+            </Box>
+          </ItemsContainer>
         </Column>
       </Box>
     </>

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

@@ -29,7 +29,6 @@ import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
 import { EmptyWalletContent } from './EmptyWalletContent'
-import { ProfileAccountDetails } from './ProfileAccountDetails'
 import * as styles from './ProfilePage.css'
 import { WalletAssetDisplay } from './WalletAssetDisplay'
 
@@ -52,7 +51,6 @@ const SellModeButton = styled.button<{ active: boolean }>`
 `
 
 const ProfilePageColumn = styled(Column)`
-  overflow-x: hidden !important;
   ${ScreenBreakpointsPaddings}
 `
 
@@ -115,12 +113,11 @@ export const ProfilePage = () => {
       {ownerAssets?.length === 0 ? (
         <EmptyWalletContent />
       ) : (
-        <Row alignItems="flex-start" position="relative">
+        <Row alignItems="flex-start" position="relative" paddingX="20">
           <FilterSidebar />
 
           {(!isMobile || !isFiltersExpanded) && (
             <Column width="full">
-              <ProfileAccountDetails />
               <AnimatedBox
                 flexShrink="0"
                 style={{
@@ -129,6 +126,7 @@ export const ProfilePage = () => {
                       `translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)`
                   ),
                 }}
+                paddingY="20"
               >
                 <Row gap="8" flexWrap="nowrap" justifyContent="space-between">
                   <FilterButton
@@ -275,7 +273,7 @@ const CollectionFiltersRow = ({
     return collections?.find((collection) => collection.address === collectionAddress)
   }
   return (
-    <Row paddingTop="18" gap="8" flexWrap="wrap">
+    <Row paddingY="18" gap="8" flexWrap="wrap">
       {collectionFilters &&
         collectionFilters.map((collectionAddress, index) => (
           <CollectionFilterItem

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

@@ -58,8 +58,7 @@ export const WalletAssetDisplay = ({ asset, isSellMode }: { asset: WalletAsset;
   return (
     <Link to={getAssetHref(asset, DetailsOrigin.PROFILE)} style={{ textDecoration: 'none' }}>
       <Column
-        borderBottomLeftRadius="20"
-        borderBottomRightRadius="20"
+        borderRadius="20"
         paddingBottom="20"
         transition="250"
         backgroundColor={boxHovered ? 'backgroundOutline' : 'backgroundSurface'}

src/nft/pages/profile/sell.css.ts

@@ -22,7 +22,6 @@ export const mobileSellWrapper = style([
     zIndex: { sm: '3', md: 'auto' },
     height: { sm: 'full', md: 'auto' },
     width: 'full',
-    overflowY: 'scroll',
   }),
   {
     scrollbarWidth: 'none',