fix: Several bugs on nft, see comments for clarity (#5116)

* a number of minor fixes related to nfts

src/nft/components/collection/ActivityCells.tsx

@@ -40,6 +40,8 @@ import * as styles from './Activity.css'
 const AddressLink = styled(ExternalLink)`
   color: ${({ theme }) => theme.textPrimary};
   text-decoration: none;
+  font-weight: 400;
+  line-height: 20px;
   a {
     color: ${({ theme }) => theme.textPrimary};
     text-decoration: none;

src/nft/components/collection/CollectionNfts.tsx

@@ -90,6 +90,22 @@ const EmptyCollectionWrapper = styled.div`
   textalign: center;
 `
 
+const ViewFullCollection = styled.span`
+  &:hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+
+  &:active {
+    opacity: ${({ theme }) => theme.opacity.click};
+  }
+
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `opacity ${duration.medium} ${timing.ease}`};
+`
+
 const ClearAllButton = styled.button`
   color: ${({ theme }) => theme.textTertiary};
   padding-left: 8px;
@@ -587,11 +603,17 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
         {hasNfts ? (
           Nfts
         ) : collectionNfts?.length === 0 ? (
-          <Center width="full" color="textSecondary" style={{ height: '60vh' }}>
+          <Center width="full" color="textSecondary" textAlign="center" style={{ height: '60vh' }}>
             <EmptyCollectionWrapper>
               <p className={headlineMedium}>No NFTS found</p>
-              <Box className={clsx(bodySmall, buttonTextMedium)} color="blue" cursor="pointer">
-                View full collection
+              <Box
+                onClick={reset}
+                type="button"
+                className={clsx(bodySmall, buttonTextMedium)}
+                color="blue"
+                cursor="pointer"
+              >
+                <ViewFullCollection>View full collection</ViewFullCollection>
               </Box>
             </EmptyCollectionWrapper>
           </Center>

src/nft/components/collection/CollectionStats.tsx

@@ -7,7 +7,7 @@ import { Marquee } from 'nft/components/layout/Marquee'
 import { headlineMedium } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsCollectionLoading } from 'nft/hooks/useIsCollectionLoading'
-import { GenieCollection } from 'nft/types'
+import { GenieCollection, TokenType } from 'nft/types'
 import { floorFormatter, quantityFormatter, roundWholePercentage, volumeFormatter } from 'nft/utils/numbers'
 import { ReactNode, useEffect, useReducer, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
@@ -326,7 +326,8 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
               {uniqueOwnersPercentage}%
             </StatsItem>
           ) : null}
-          {stats.stats?.total_listings && listedPercentageStr > 0 ? (
+
+          {stats.stats?.total_listings && stats.standard !== TokenType.ERC1155 && listedPercentageStr > 0 ? (
             <StatsItem label="Listed" shouldHide={isMobile ?? false}>
               {listedPercentageStr}%
             </StatsItem>

src/nft/pages/collection/index.tsx

@@ -122,7 +122,7 @@ const Collection = () => {
                 {(isLoading || collectionStats !== undefined) && (
                   <CollectionStats stats={collectionStats || ({} as GenieCollection)} isMobile={isMobile} />
                 )}
-
+                <div id="nft-anchor" />
                 <ActivitySwitcher
                   showActivity={isActivityToggled}
                   toggleActivity={() => {

src/nft/utils/scrollToTop.ts

-const DESKTOP_OFFSET = 420
-
-export const scrollToTop = () => window.scrollTo({ top: DESKTOP_OFFSET })
+export const scrollToTop = () => {
+  window.document.getElementById('nft-anchor')?.scrollIntoView({
+    behavior: 'smooth',
+  })
+}