LIVE-886 (Market): add sparkline variation + fix issue in countervalu…

…e initial value (#1700)

* (Market): add svg sparkline variation + fix issue in countervalue initial setting

* fix-lint

* review: failsafe for sparkline points

src/market/MarketDataProvider.tsx

@@ -220,7 +220,8 @@ export const MarketDataProvider = ({
   }, []);
 
   useEffect(() => {
-    if (countervalue)
+    if (countervalue) {
+      const ticker = countervalue.ticker.toLowerCase();
       api.supportedCounterCurrencies().then(
         (supportedCounterCurrencies) =>
           api.setSupportedCoinsList().then((coins) => {
@@ -233,13 +234,14 @@ export const MarketDataProvider = ({
             });
             dispatch({
               type: ACTIONS.UPDATE_COUNTERVALUE,
-              payload: supportedCounterCurrencies.includes(countervalue.ticker)
-                ? countervalue.ticker
+              payload: supportedCounterCurrencies.includes(ticker)
+                ? ticker
                 : "usd",
             });
           }, handleError),
         handleError
       );
+    }
   }, [api, countervalue, handleError]);
 
   useEffect(() => {

src/market/api/api.ts

@@ -52,6 +52,8 @@ const matchSearch =
   };
 
 function distributedCopy(items: number[], n: number): number[] {
+  if (!items) return [];
+  if (items.length <= n) return items;
   const elements = [items[0]];
   const totalItems = items.length - 2;
   const interval = Math.floor(totalItems / (n - 2));
@@ -83,6 +85,7 @@ function sparklineAsSvgData(points: number[]): SparklineSvgData {
       })
       .join(" "),
     viewBox: `0 0 ${totalXSteps} ${sparklineYHeight + 3}`,
+    isPositive: points[0] <= points[points.length - 1],
   };
 }
 

src/market/types.ts

@@ -34,6 +34,7 @@ export type MarketCurrencyChartDataRequestParams = {
 export type SparklineSvgData = {
   path: string;
   viewBox: string;
+  isPositive: boolean;
 };
 
 export type CurrencyData = {