refactor: consolidate price delta components (#7268)

* refactor: move delta component out of price chart file

* refactor: remove PortfolioArrow

* refactor: search row arrow cell

* fix: svg prop + snapshots failing unit tests

* refactor: css nit

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -5,13 +5,11 @@ import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, TraceEvent } from 'analytics'
 import { ButtonEmphasis, ButtonSize, LoadingButtonSpinner, ThemeButton } from 'components/Button'
 import Column from 'components/Column'
-import { ArrowChangeDown } from 'components/Icons/ArrowChangeDown'
-import { ArrowChangeUp } from 'components/Icons/ArrowChangeUp'
 import { Power } from 'components/Icons/Power'
 import { Settings } from 'components/Icons/Settings'
 import { AutoRow } from 'components/Row'
 import { LoadingBubble } from 'components/Tokens/loading'
-import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
+import { DeltaArrow, formatDelta } from 'components/Tokens/TokenDetails/Delta'
 import Tooltip from 'components/Tooltip'
 import { getConnection } from 'connection'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
@@ -20,11 +18,11 @@ import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hoo
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useState } from 'react'
-import { CreditCard, IconProps, Info } from 'react-feather'
+import { CreditCard, Info } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 import { CopyHelper, ExternalLink, ThemedText } from 'theme'
 import { shortenAddress } from 'utils'
 import { formatNumber, NumberType } from 'utils/formatNumbers'
@@ -151,15 +149,6 @@ const PortfolioDrawerContainer = styled(Column)`
   flex: 1;
 `
 
-export function PortfolioArrow({ change, ...rest }: { change: number } & IconProps) {
-  const theme = useTheme()
-  return change < 0 ? (
-    <ArrowChangeDown color={theme.critical} width={16} {...rest} />
-  ) : (
-    <ArrowChangeUp color={theme.success} width={16} {...rest} />
-  )
-}
-
 export default function AuthenticatedHeader({ account, openSettings }: { account: string; openSettings: () => void }) {
   const { connector } = useWeb3React()
   const { ENSName } = useENSName(account)
@@ -287,7 +276,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
             <AutoRow marginBottom="20px">
               {absoluteChange !== 0 && percentChange && (
                 <>
-                  <PortfolioArrow change={absoluteChange as number} />
+                  <DeltaArrow delta={absoluteChange} />
                   <ThemedText.BodySecondary>
                     {`${formatNumber({
                       input: Math.abs(absoluteChange as number),

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -2,7 +2,7 @@ import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/an
 import { TraceEvent } from 'analytics'
 import { useCachedPortfolioBalancesQuery } from 'components/AccountDrawer/PrefetchBalancesWrapper'
 import Row from 'components/Row'
-import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
+import { DeltaArrow, formatDelta } from 'components/Tokens/TokenDetails/Delta'
 import { TokenBalance } from 'graphql/data/__generated__/types-and-hooks'
 import { getTokenDetailsURL, gqlToCurrency, logSentryErrorForUnsupportedChain } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
@@ -15,7 +15,6 @@ import { formatNumber, NumberType } from 'utils/formatNumbers'
 import { splitHiddenTokens } from 'utils/splitHiddenTokens'
 
 import { useToggleAccountDrawer } from '../..'
-import { PortfolioArrow } from '../../AuthenticatedHeader'
 import { hideSmallBalancesAtom } from '../../SmallBalanceToggle'
 import { ExpandoRow } from '../ExpandoRow'
 import { PortfolioLogo } from '../PortfolioLogo'
@@ -115,7 +114,7 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
                 })}
               </ThemedText.SubHeader>
               <Row justify="flex-end">
-                <PortfolioArrow change={percentChange} size={20} strokeWidth={1.75} />
+                <DeltaArrow delta={percentChange} />
                 <ThemedText.BodySecondary>{formatDelta(percentChange)}</ThemedText.BodySecondary>
               </Row>
             </>

src/components/NavBar/SuggestionRow.tsx

@@ -20,18 +20,15 @@ import styled from 'styled-components'
 import { ThemedText } from 'theme'
 import { formatUSDPrice } from 'utils/formatNumbers'
 
-import { DeltaText, getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'
+import { DeltaArrow, DeltaText } from '../Tokens/TokenDetails/Delta'
 import { useAddRecentlySearchedAsset } from './RecentlySearchedAssets'
 import * as styles from './SearchBar.css'
 
 const PriceChangeContainer = styled.div`
   display: flex;
   align-items: center;
-`
-
-const ArrowCell = styled.span`
   padding-top: 4px;
-  padding-right: 2px;
+  gap: 2px;
 `
 
 interface CollectionRowProps {
@@ -156,8 +153,6 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
     }
   }, [toggleOpen, isHovered, token, navigate, handleClick, tokenDetailsPath])
 
-  const arrow = getDeltaArrow(token.market?.pricePercentChange?.value, 16)
-
   return (
     <Link
       data-testid={`searchbar-token-row-${token.chain}-${token.address ?? 'NATIVE'}`}
@@ -192,7 +187,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
               <Box className={styles.primaryText}>{formatUSDPrice(token.market.price.value)}</Box>
             </Row>
             <PriceChangeContainer>
-              <ArrowCell>{arrow}</ArrowCell>
+              <DeltaArrow delta={token.market?.pricePercentChange?.value} />
               <ThemedText.BodySmall>
                 <DeltaText delta={token.market?.pricePercentChange?.value}>
                   {Math.abs(token.market?.pricePercentChange?.value ?? 0).toFixed(2)}%

src/components/Tokens/TokenDetails/Delta.tsx

+import { ArrowChangeDown } from 'components/Icons/ArrowChangeDown'
+import { ArrowChangeUp } from 'components/Icons/ArrowChangeUp'
+import styled from 'styled-components'
+
+const StyledUpArrow = styled(ArrowChangeUp)<{ $noColor?: boolean }>`
+  color: ${({ theme, $noColor }) => ($noColor ? theme.neutral2 : theme.success)};
+`
+const StyledDownArrow = styled(ArrowChangeDown)<{ $noColor?: boolean }>`
+  color: ${({ theme, $noColor }) => ($noColor ? theme.neutral2 : theme.critical)};
+`
+
+export function calculateDelta(start: number, current: number) {
+  return (current / start - 1) * 100
+}
+
+function isValidDelta(delta: number | null | undefined): delta is number {
+  // Null-check not including zero
+  return delta !== null && delta !== undefined && delta !== Infinity && !isNaN(delta)
+}
+
+interface DeltaArrowProps {
+  delta?: number | null
+  noColor?: boolean
+  size?: number
+}
+
+export function formatDelta(delta: number | null | undefined) {
+  if (!isValidDelta(delta)) return '-'
+
+  const formattedDelta = Math.abs(delta).toFixed(2) + '%'
+  return formattedDelta
+}
+
+export function DeltaArrow({ delta, noColor = false, size = 16 }: DeltaArrowProps) {
+  if (!isValidDelta(delta)) return null
+
+  return Math.sign(delta) < 0 ? (
+    <StyledDownArrow width={size} height={size} key="arrow-down" aria-label="down" $noColor={noColor} />
+  ) : (
+    <StyledUpArrow width={size} height={size} key="arrow-up" aria-label="up" $noColor={noColor} />
+  )
+}
+
+export const DeltaText = styled.span<{ delta?: number }>`
+  color: ${({ theme, delta }) =>
+    delta !== undefined ? (Math.sign(delta) < 0 ? theme.critical : theme.success) : theme.neutral1};
+`

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -6,14 +6,12 @@ import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
 import AnimatedInLineChart from 'components/Charts/AnimatedInLineChart'
 import FadedInLineChart from 'components/Charts/FadeInLineChart'
-import { ArrowChangeDown } from 'components/Icons/ArrowChangeDown'
-import { ArrowChangeUp } from 'components/Icons/ArrowChangeUp'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { bisect, curveCardinal, NumberValue, scaleLinear, timeDay, timeHour, timeMinute, timeMonth } from 'd3'
 import { PricePoint, TimePeriod } from 'graphql/data/util'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-import { ArrowDownRight, ArrowUpRight, Info, TrendingUp } from 'react-feather'
+import { Info, TrendingUp } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme'
 import { textFadeIn } from 'theme/styles'
@@ -27,6 +25,8 @@ import {
 } from 'utils/formatChartTimes'
 import { formatUSDPrice } from 'utils/formatNumbers'
 
+import { calculateDelta, DeltaArrow, formatDelta } from './Delta'
+
 const DATA_EMPTY = { value: 0, timestamp: 0 }
 
 export function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
@@ -36,56 +36,6 @@ export function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
   return [min, max]
 }
 
-const StyledUpArrow = styled(ArrowChangeUp)`
-  color: ${({ theme }) => theme.success};
-`
-const StyledDownArrow = styled(ArrowChangeDown)`
-  color: ${({ theme }) => theme.critical};
-`
-
-const DefaultUpArrow = styled(ArrowUpRight)`
-  color: ${({ theme }) => theme.neutral3};
-`
-const DefaultDownArrow = styled(ArrowDownRight)`
-  color: ${({ theme }) => theme.neutral3};
-`
-
-function calculateDelta(start: number, current: number) {
-  return (current / start - 1) * 100
-}
-
-export function getDeltaArrow(delta: number | null | undefined, iconSize = 16, styled = true) {
-  // Null-check not including zero
-  if (delta === null || delta === undefined) {
-    return null
-  } else if (Math.sign(delta) < 0) {
-    return styled ? (
-      <StyledDownArrow width={iconSize} height={iconSize} key="arrow-down" aria-label="down" />
-    ) : (
-      <DefaultDownArrow size={iconSize} key="arrow-down" aria-label="down" />
-    )
-  }
-  return styled ? (
-    <StyledUpArrow width={iconSize} height={iconSize} key="arrow-up" aria-label="up" />
-  ) : (
-    <DefaultUpArrow size={iconSize} key="arrow-up" aria-label="up" />
-  )
-}
-
-export function formatDelta(delta: number | null | undefined) {
-  // Null-check not including zero
-  if (delta === null || delta === undefined || delta === Infinity || isNaN(delta)) {
-    return '-'
-  }
-  const formattedDelta = Math.abs(delta).toFixed(2) + '%'
-  return formattedDelta
-}
-
-export const DeltaText = styled.span<{ delta?: number }>`
-  color: ${({ theme, delta }) =>
-    delta !== undefined ? (Math.sign(delta) < 0 ? theme.critical : theme.success) : theme.neutral1};
-`
-
 const ChartHeader = styled.div`
   position: absolute;
   ${textFadeIn};
@@ -113,10 +63,6 @@ const DeltaContainer = styled.div`
   margin-top: 4px;
   color: ${({ theme }) => theme.neutral2};
 `
-export const ArrowCell = styled.div`
-  padding-right: 3px;
-  display: flex;
-`
 
 const OutdatedPriceContainer = styled.div`
   display: flex;
@@ -151,6 +97,22 @@ function fixChart(prices: PricePoint[] | undefined | null) {
 const margin = { top: 100, bottom: 48, crosshair: 72 }
 const timeOptionsHeight = 44
 
+interface ChartDeltaProps {
+  startingPrice: PricePoint
+  endingPrice: PricePoint
+  noColor?: boolean
+}
+
+function ChartDelta({ startingPrice, endingPrice, noColor }: ChartDeltaProps) {
+  const delta = calculateDelta(startingPrice.value, endingPrice.value)
+  return (
+    <DeltaContainer>
+      {formatDelta(delta)}
+      <DeltaArrow delta={delta} noColor={noColor} />
+    </DeltaContainer>
+  )
+}
+
 interface PriceChartProps {
   width: number
   height: number
@@ -202,10 +164,6 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
     return DATA_EMPTY
   }, [prices])
 
-  const totalDelta = calculateDelta(firstPrice.value, lastPrice.value)
-  const formattedTotalDelta = formatDelta(totalDelta)
-  const defaultArrow = getDeltaArrow(totalDelta, 20, false)
-
   // first price point on the x-axis of the current time period's chart
   const startingPrice = originalPrices?.[0] ?? DATA_EMPTY
   // last price point on the x-axis of the current time period's chart
@@ -334,9 +292,6 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
   }
 
   const updatedTicks = maxTicks > 0 ? (ticks.length > maxTicks ? calculateTicks(ticks) : ticks) : []
-  const delta = calculateDelta(startingPrice.value, displayPrice.value)
-  const formattedDelta = formatDelta(delta)
-  const arrow = getDeltaArrow(delta)
   const crosshairEdgeMax = width * 0.85
   const crosshairAtEdge = !!crosshair && crosshair > crosshairEdgeMax
 
@@ -355,10 +310,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
         {displayPrice.value ? (
           <>
             <TokenPrice>{formatUSDPrice(displayPrice.value)}</TokenPrice>
-            <DeltaContainer>
-              {formattedDelta}
-              <ArrowCell>{arrow}</ArrowCell>
-            </DeltaContainer>
+            <ChartDelta startingPrice={startingPrice} endingPrice={displayPrice} />
           </>
         ) : lastPrice.value ? (
           <OutdatedContainer>
@@ -368,10 +320,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
                 <Info size={16} />
               </MouseoverTooltip>
             </OutdatedPriceContainer>
-            <DeltaContainer>
-              {formattedTotalDelta}
-              <ArrowCell>{defaultArrow}</ArrowCell>
-            </DeltaContainer>
+            <ChartDelta startingPrice={firstPrice} endingPrice={lastPrice} noColor />
           </OutdatedContainer>
         ) : (
           <>

src/components/Tokens/TokenDetails/__snapshots__/PriceChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`PriceChart renders correctly with all prices filled 1`] = `
 <DocumentFragment>
-  .c4 {
+  .c3 {
   color: #40B66B;
 }
 
@@ -34,14 +34,6 @@ exports[`PriceChart renders correctly with all prices filled 1`] = `
   color: #7D7D7D;
 }
 
-.c3 {
-  padding-right: 3px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 <div
     class="c0"
     data-cy="chart-header"
@@ -55,24 +47,20 @@ exports[`PriceChart renders correctly with all prices filled 1`] = `
       class="c2"
     >
       0.00%
-      <div
+      <svg
+        aria-label="up"
         class="c3"
+        fill="none"
+        height="16"
+        viewBox="0 0 24 24"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <svg
-          aria-label="up"
-          class="c4"
-          fill="none"
-          height="16"
-          viewBox="0 0 24 24"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
+        <path
+          d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
   </div>
   <svg
@@ -426,8 +414,8 @@ exports[`PriceChart renders correctly with some prices filled 1`] = `
   height: inherit;
 }
 
-.c7 {
-  color: #CECECE;
+.c6 {
+  color: #7D7D7D;
 }
 
 .c0 {
@@ -462,14 +450,6 @@ exports[`PriceChart renders correctly with some prices filled 1`] = `
   color: #7D7D7D;
 }
 
-.c6 {
-  padding-right: 3px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -535,33 +515,20 @@ exports[`PriceChart renders correctly with some prices filled 1`] = `
         class="c5"
       >
         0.00%
-        <div
+        <svg
+          aria-label="up"
           class="c6"
+          fill="none"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-label="up"
-            class="c7"
-            fill="none"
-            height="20"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <line
-              x1="7"
-              x2="17"
-              y1="17"
-              y2="7"
-            />
-            <polyline
-              points="7 7 17 7 17 17"
-            />
-          </svg>
-        </div>
+          <path
+            d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
     </div>
   </div>

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -33,7 +33,7 @@ import {
   TokenSortMethod,
   useSetSortMethod,
 } from '../state'
-import { ArrowCell, DeltaText, formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
+import { DeltaArrow, DeltaText, formatDelta } from '../TokenDetails/Delta'
 
 const Cell = styled.div`
   display: flex;
@@ -103,8 +103,9 @@ const StyledTokenRow = styled.div<{
   }
 `
 
-const ClickableContent = styled.div`
+const ClickableContent = styled.div<{ gap?: number }>`
   display: flex;
+  ${({ gap }) => gap && `gap: ${gap}px`};
   text-decoration: none;
   color: ${({ theme }) => theme.neutral1};
   align-items: center;
@@ -184,6 +185,7 @@ const PercentChangeInfoCell = styled(Cell)`
 
   @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
     display: flex;
+    gap: 3px;
     justify-content: flex-end;
     color: ${({ theme }) => theme.neutral2};
     font-size: 12px;
@@ -445,8 +447,6 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const chainId = supportedChainIdFromGQLChain(filterNetwork)
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
-  const arrow = getDeltaArrow(delta)
-  const smallArrow = getDeltaArrow(delta, 14)
   const formattedDelta = formatDelta(delta)
 
   const exploreTokenSelectedEventProperties = {
@@ -489,15 +489,15 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
               <PriceInfoCell>
                 {price}
                 <PercentChangeInfoCell>
-                  <ArrowCell>{smallArrow}</ArrowCell>
+                  <DeltaArrow delta={delta} size={14} />
                   <DeltaText delta={delta}>{formattedDelta}</DeltaText>
                 </PercentChangeInfoCell>
               </PriceInfoCell>
             </ClickableContent>
           }
           percentChange={
-            <ClickableContent>
-              <ArrowCell>{arrow}</ArrowCell>
+            <ClickableContent gap={3}>
+              <DeltaArrow delta={delta} />
               <DeltaText delta={delta}>{formattedDelta}</DeltaText>
             </ClickableContent>
           }

src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap

@@ -2,22 +2,14 @@
 
 exports[`LoadedRow.tsx renders a row 1`] = `
 <DocumentFragment>
-  .c19 {
+  .c18 {
   color: #40B66B;
 }
 
-.c20 {
+.c19 {
   color: #40B66B;
 }
 
-.c18 {
-  padding-right: 3px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .c9 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
@@ -113,6 +105,22 @@ exports[`LoadedRow.tsx renders a row 1`] = `
   cursor: pointer;
 }
 
+.c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 3px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #222222;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+
 .c6 {
   gap: 8px;
   max-width: 100%;
@@ -156,7 +164,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
   padding-right: 8px;
 }
 
-.c21 {
+.c20 {
   padding-right: 8px;
 }
 
@@ -264,7 +272,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }
 
 @media only screen and (max-width:540px) {
-  .c21 {
+  .c20 {
     display: none;
   }
 }
@@ -275,6 +283,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    gap: 3px;
     -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
@@ -408,26 +417,22 @@ exports[`LoadedRow.tsx renders a row 1`] = `
               <div
                 class="c2 c17"
               >
-                <div
+                <svg
+                  aria-label="up"
                   class="c18"
+                  fill="none"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  width="14"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    aria-label="up"
-                    class="c19"
-                    fill="none"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    width="14"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
+                    fill="currentColor"
+                  />
+                </svg>
                 <span
-                  class="c20"
+                  class="c19"
                 >
                   0.00%
                 </span>
@@ -436,32 +441,28 @@ exports[`LoadedRow.tsx renders a row 1`] = `
           </div>
         </div>
         <div
-          class="c2 c14 c21"
+          class="c2 c14 c20"
           data-testid="percent-change-cell"
         >
           <div
-            class="c5"
+            class="c21"
           >
-            <div
+            <svg
+              aria-label="up"
               class="c18"
+              fill="none"
+              height="16"
+              viewBox="0 0 24 24"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                aria-label="up"
-                class="c19"
-                fill="none"
-                height="16"
-                viewBox="0 0 24 24"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
+              <path
+                d="M13.3021 7.7547L17.6821 14.2475C18.4182 15.3388 17.7942 17 16.6482 17L7.3518 17C6.2058 17 5.5818 15.3376 6.3179 14.2475L10.6979 7.7547C11.377 6.7484 12.623 6.7484 13.3021 7.7547Z"
+                fill="currentColor"
+              />
+            </svg>
             <span
-              class="c20"
+              class="c19"
             >
               0.00%
             </span>

src/nft/components/collection/CollectionStats.tsx

-import { getDeltaArrow } from 'components/Tokens/TokenDetails/PriceChart'
+import { DeltaArrow } from 'components/Tokens/TokenDetails/Delta'
 import { useScreenSize } from 'hooks/useScreenSize'
 import { Box, BoxProps } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -352,7 +352,6 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
   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))
-  const arrow = stats?.stats?.one_day_floor_change ? getDeltaArrow(stats.stats.one_day_floor_change) : undefined
 
   const isBagExpanded = useBag((state) => state.bagExpanded)
   const isScreenSize = useScreenSize()
@@ -372,7 +371,7 @@ const StatsRow = ({ stats, isMobile, ...props }: { stats: GenieCollection; isMob
           {stats.stats?.one_day_floor_change !== undefined ? (
             <StatsItem label="Floor 24H" shouldHide={false}>
               <PercentChange isNegative={stats.stats.one_day_floor_change < 0}>
-                {arrow}
+                <DeltaArrow delta={stats?.stats?.one_day_floor_change} />
                 {floorChangeStr}%
               </PercentChange>
             </StatsItem>

src/nft/components/explore/Cells/Cells.tsx

 import { formatEther } from '@ethersproject/units'
-import { ArrowChangeDown } from 'components/Icons/ArrowChangeDown'
-import { ArrowChangeUp } from 'components/Icons/ArrowChangeUp'
+import { DeltaArrow } from 'components/Tokens/TokenDetails/Delta'
 import { VerifiedIcon } from 'nft/components/icons'
 import { useIsMobile } from 'nft/hooks'
 import { Denomination } from 'nft/types'
@@ -162,11 +161,7 @@ export const ChangeCell = ({ change, children }: { children?: ReactNode; change?
   const TextComponent = isMobile ? ThemedText.BodySmall : ThemedText.BodyPrimary
   return (
     <ChangeCellContainer change={change ?? 0}>
-      {!change || change > 0 ? (
-        <ArrowChangeUp width="16px" height="16px" />
-      ) : (
-        <ArrowChangeDown width="16px" height="16px" />
-      )}
+      <DeltaArrow delta={change} />
       <TextComponent color="currentColor">{children || `${change ? Math.abs(Math.round(change)) : 0}%`}</TextComponent>
     </ChangeCellContainer>
   )