fix: display 0 percent change on explore (#4747)

* fixed issue

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -56,17 +56,21 @@ export function calculateDelta(start: number, current: number) {
   return (current / start - 1) * 100
 }
 
-export function getDeltaArrow(delta: number) {
-  if (Math.sign(delta) > 0) {
-    return <StyledUpArrow size={16} key="arrow-up" />
-  } else if (delta === 0) {
+export function getDeltaArrow(delta: number | null | undefined) {
+  // Null-check not including zero
+  if (delta === null || delta === undefined) {
     return null
-  } else {
+  } else if (Math.sign(delta) < 0) {
     return <StyledDownArrow size={16} key="arrow-down" />
   }
+  return <StyledUpArrow size={16} key="arrow-up" />
 }
 
-export function formatDelta(delta: number) {
+export function formatDelta(delta: number | null | undefined) {
+  // Null-check not including zero
+  if (delta === null || delta === undefined) {
+    return '-'
+  }
   let formattedDelta = delta.toFixed(2) + '%'
   if (Math.sign(delta) > 0) {
     formattedDelta = '+' + formattedDelta

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -485,8 +485,8 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
   const L2Icon = getChainInfo(CHAIN_NAME_TO_CHAIN_ID[filterNetwork]).circleLogoUrl
   const timePeriod = useAtomValue(filterTimeAtom)
   const delta = token.market?.pricePercentChange?.value
-  const arrow = delta ? getDeltaArrow(delta) : null
-  const formattedDelta = delta ? formatDelta(delta) : null
+  const arrow = getDeltaArrow(delta)
+  const formattedDelta = formatDelta(delta)
   const sortAscending = useAtomValue(sortAscendingAtom)
 
   const exploreTokenSelectedEventProperties = {
@@ -544,7 +544,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
           }
           percentChange={
             <ClickableContent>
-              {formattedDelta ?? '-'}
+              {formattedDelta}
               {arrow}
             </ClickableContent>
           }