fix(trading): incorrect top gaining and top losing order (#5974)

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -63,7 +63,11 @@ export const useMarketSelectorList = ({
         [
           (m) => {
             if (!m.candles?.length) return 0;
-            return Number(priceChangePercentage(m.candles.map((c) => c.close)));
+            return Number(
+              priceChangePercentage(
+                m.candles.filter((c) => c.close !== '').map((c) => c.close)
+              )
+            );
           },
         ],
         [dir]

libs/ui-toolkit/src/components/sparkline/sparkline.tsx

@@ -31,12 +31,26 @@ export interface SparklineProps {
 }
 
 export const SparklineView = ({
-  data,
+  data: rawData,
   width = 60,
   height = 15,
   points = 24,
   className,
 }: SparklineProps) => {
+  // Value can come in as 0, due to candle.close being empty string ''
+  // Instead of skewing the sparkline with 0 values, we map over and set any
+  // 0 values to the last non 0 value resulting in a better sparkline
+  let lastClose = 0;
+  const data = rawData.map((val) => {
+    if (val === 0) {
+      return lastClose;
+    } else {
+      lastClose = val;
+    }
+
+    return val;
+  });
+
   // Get the extent for our y value
   const [min, max] = extent(data, (d) => d);
 

libs/utils/src/lib/price-change.ts

@@ -1,18 +1,16 @@
 import BigNumber from 'bignumber.js';
 
 export const priceChangePercentage = (candles: string[]) => {
+  if (!candles.length) {
+    return 0;
+  }
+
   const change = priceChange(candles);
-  if (change && candles && candles.length > 0) {
-    const yesterdayLastPrice = candles[0] && BigInt(candles[0]);
-    if (yesterdayLastPrice) {
+
   return new BigNumber(change.toString())
-        .dividedBy(new BigNumber(yesterdayLastPrice.toString()))
+    .dividedBy(new BigNumber(candles[0]))
     .multipliedBy(100)
     .toNumber();
-    }
-    return 0;
-  }
-  return 0;
 };
 
 export const priceChange = (candles: string[]) => {