feat: NFT Collections: add 24-hour price change and delta arrow (#4913)

* Add 24-hour volume and delta arrow to Collection Stats

* Move 24-hour floor change after Floor stat in row

* Position percent change arrow with styled div

* Use math.round instead of toFixed()

* PR Feedback

* Remove console log

src/nft/components/collection/CollectionStats.tsx

 import clsx from 'clsx'
+import { getDeltaArrow } from 'components/Tokens/TokenDetails/PriceChart'
 import { Box, BoxProps } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { Marquee } from 'nft/components/layout/Marquee'
@@ -10,10 +11,17 @@ import { ethNumberStandardFormatter } from 'nft/utils/currency'
 import { putCommas } from 'nft/utils/putCommas'
 import { ReactNode, useEffect, useReducer, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
+import styled from 'styled-components/macro'
 
 import { DiscordIcon, EllipsisIcon, ExternalIcon, InstagramIcon, TwitterIcon, VerifiedIcon, XMarkIcon } from '../icons'
 import * as styles from './CollectionStats.css'
 
+const PercentChange = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 const MobileSocialsIcon = ({ children, href }: { children: ReactNode; href: string }) => {
   return (
     <Box
@@ -254,6 +262,9 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
   // round daily volume & floorPrice to 3 decimals or less
   const totalVolumeStr = ethNumberStandardFormatter(stats.stats?.total_volume)
   const floorPriceStr = ethNumberStandardFormatter(stats.floorPrice)
+  const floorChangeStr =
+    stats.stats && stats.stats.one_day_floor_change ? Math.round(Math.abs(stats.stats.one_day_floor_change) * 100) : 0
+  const arrow = stats.stats && stats.stats.one_day_change ? getDeltaArrow(stats.stats.one_day_floor_change) : null
 
   const statsLoadingSkeleton = new Array(5).fill(
     <>
@@ -282,6 +293,13 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
           {floorPriceStr} ETH
         </StatsItem>
       ) : null}
+      {stats.stats?.one_day_floor_change ? (
+        <StatsItem label="24-Hour Floor" isMobile={isMobile ?? false}>
+          <PercentChange>
+            {floorChangeStr}% {arrow}
+          </PercentChange>
+        </StatsItem>
+      ) : null}
       {stats.stats?.total_volume ? (
         <StatsItem label="Total Volume" isMobile={isMobile ?? false}>
           {totalVolumeStr} ETH