v3.6.0 - Crypto HeatMap + Coin URL Selector (#649)

Co-authored-by: elcharitas <[email protected]>

Author: Xavier-Charles

packages/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alphaday/frontend",
   "private": true,
-  "version": "3.5.6",
+  "version": "3.6.0",
   "type": "module",
   "scripts": {
     "prepare": "export VITE_COMMIT=$(git rev-parse --short HEAD)",

packages/frontend/public/crypto-logos/bitcoin.avif

@@ -33,3 +33,4 @@ export * from "./useValueWatcher";
 export * from "./useOnScreen";
 export * from "./usePullToRefresh";
 export * from "./useHistory";
+export * from "./useSelectedCoin";

packages/frontend/src/api/hooks/index.ts

@@ -0,0 +1,130 @@
+import { useMemo, useEffect, useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { useGlobalSearch, useQuery } from "src/api/hooks";
+import { TBaseTag } from "src/api/services";
+import { setSelectedMarket } from "src/api/store";
+import { useAppDispatch, useAppSelector } from "src/api/store/hooks";
+import { TCoin } from "src/api/types";
+import { TMarketMeta } from "src/components/market/types";
+
+interface UseSelectedCoinReturn {
+    selectedCoin: TCoin | undefined;
+    handleSelectedCoin: (market: TMarketMeta) => void;
+}
+
+export const useSelectedCoin = (
+    widgetHash: string,
+    coinsData: TCoin[],
+    pinnedCoins: TCoin[],
+    tags?: TBaseTag[]
+): UseSelectedCoinReturn => {
+    const dispatch = useAppDispatch();
+    const history = useHistory();
+    const { lastSelectedKeyword } = useGlobalSearch();
+    const query = useQuery();
+    const coinSlugFromUrl = query.get("coin");
+
+    const prevSelectedMarketData = useAppSelector(
+        (state) => state.widgets.market?.[widgetHash]
+    );
+
+    // Helper function to remove coin parameter from URL
+    const removeCoinFromUrl = useCallback(() => {
+        const currentParams = new URLSearchParams(window.location.search);
+        currentParams.delete("coin");
+        const newSearch = currentParams.toString();
+        const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ""}`;
+        history.replace(newUrl);
+    }, [history]);
+
+    const selectedCoin: TCoin | undefined = useMemo(() => {
+        // Priority 1: URL parameter - find coin by slug
+        if (coinSlugFromUrl) {
+            const coinFromUrl = [...pinnedCoins, ...coinsData].find(
+                (c) => c.slug === coinSlugFromUrl
+            );
+            if (coinFromUrl) {
+                return coinFromUrl;
+            }
+            // Clean up URL if coin slug is not found in available coins
+            if (coinsData.length > 0 || pinnedCoins.length > 0) {
+                removeCoinFromUrl();
+            }
+        }
+
+        // Priority 2: Redux stored selection
+        const storedMarket = [...pinnedCoins, ...coinsData].find(
+            (c) => c.id === prevSelectedMarketData?.selectedMarket?.id
+        );
+
+        // Priority 3: Fallback to first pinned coin or first available coin
+        return storedMarket ?? pinnedCoins[0] ?? coinsData[0] ?? undefined;
+    }, [
+        coinSlugFromUrl,
+        prevSelectedMarketData?.selectedMarket,
+        coinsData,
+        pinnedCoins,
+        removeCoinFromUrl,
+    ]);
+
+    const handleSelectedCoin = useCallback(
+        (market: TMarketMeta) => {
+            dispatch(setSelectedMarket({ widgetHash, market }));
+
+            // Remove coin URL parameter when user manually selects a coin
+            if (coinSlugFromUrl) {
+                removeCoinFromUrl();
+            }
+        },
+        [dispatch, widgetHash, coinSlugFromUrl, removeCoinFromUrl]
+    );
+
+    // Sync URL parameter to Redux when coin from URL is found
+    useEffect(() => {
+        // Add guard for data availability
+        if (!coinsData.length && !pinnedCoins.length) {
+            return; // Wait for data to load
+        }
+        if (
+            coinSlugFromUrl &&
+            selectedCoin &&
+            selectedCoin.slug === coinSlugFromUrl
+        ) {
+            // Only update Redux if the current Redux state doesn't match the URL selection
+            if (
+                selectedCoin.id !== prevSelectedMarketData?.selectedMarket?.id
+            ) {
+                handleSelectedCoin(selectedCoin);
+            }
+        }
+    }, [
+        coinSlugFromUrl,
+        selectedCoin,
+        prevSelectedMarketData?.selectedMarket?.id,
+        handleSelectedCoin,
+        coinsData.length,
+        pinnedCoins.length,
+    ]);
+
+    // Existing useEffect for global search
+    useEffect(() => {
+        if (
+            lastSelectedKeyword &&
+            tags?.find((t) => t.id === lastSelectedKeyword.tag.id)
+        ) {
+            const newMarketFromSearch = coinsData.find((marketMeta) => {
+                return marketMeta.tags?.find(
+                    (t) => t.id === lastSelectedKeyword.tag.id
+                );
+            });
+            if (newMarketFromSearch) {
+                handleSelectedCoin(newMarketFromSearch);
+            }
+        }
+    }, [lastSelectedKeyword, coinsData, tags, handleSelectedCoin]);
+
+    return {
+        selectedCoin,
+        handleSelectedCoin,
+    };
+};

packages/frontend/src/api/hooks/useSelectedCoin.ts

@@ -112,6 +112,11 @@ export type TBaseCoin = TProtoItem & {
     market_cap: number;
     volume: number;
     price_percent_change_24h: number;
+    price_percent_change_7d: number;
+    price_percent_change_14d: number;
+    price_percent_change_30d: number;
+    price_percent_change_60d: number;
+    tags: TRemoteTagReadOnly[];
 };
 
 export type TRemoteWriteComment = {

packages/frontend/src/api/services/baseTypes.ts

@@ -36,6 +36,10 @@ const transformRemoteCoin = (coin: TRemoteCoin): TCoin => {
         volume: coin.volume ?? 0,
         marketCap: coin.market_cap ?? 0,
         percentChange24h: coin.price_percent_change_24h ?? 0,
+        percentChange7d: coin.price_percent_change_7d ?? 0,
+        percentChange14d: coin.price_percent_change_14d ?? 0,
+        percentChange30d: coin.price_percent_change_30d ?? 0,
+        percentChange60d: coin.price_percent_change_60d ?? 0,
     };
 };
 

packages/frontend/src/api/services/coins/coinsEndpoints.ts

@@ -23,6 +23,7 @@ export type TGetCoinsRequest = {
     tags?: string;
     limit?: number;
     page?: number;
+    kasandra_supported?: boolean;
 } | void;
 export type TGetCoinsRawResponse = TPagination & {
     results: TRemoteCoin[];

packages/frontend/src/api/services/coins/types.ts

@@ -31,6 +31,10 @@ const mapRemoteMarketCoin = (coin: TRemoteMarketCoin) => {
         volume: coin.volume,
         marketCap: coin.market_cap,
         percentChange24h: coin.price_percent_change_24h,
+        percentChange7d: coin.price_percent_change_7d,
+        percentChange14d: coin.price_percent_change_14d,
+        percentChange30d: coin.price_percent_change_30d,
+        percentChange60d: coin.price_percent_change_60d,
     };
 };
 

packages/frontend/src/api/services/market/marketEndpoints.ts

@@ -52,6 +52,10 @@ export type TCoin = {
     tags?: TTag[];
     price: number;
     percentChange24h: number;
+    percentChange7d: number;
+    percentChange14d: number;
+    percentChange30d: number;
+    percentChange60d: number;
     marketCap: number;
     volume?: number;
 };

packages/frontend/src/api/types/primitives.ts

@@ -1,13 +1,31 @@
+import { useMemo } from "react";
 import { DraggingStyle, NotDraggingStyle } from "react-beautiful-dnd";
-import { TUserViewWidget } from "src/api/types";
+import { TCachedView, TUserViewWidget } from "src/api/types";
 import { Logger } from "src/api/utils/logging";
+import KasandraContainer from "src/containers/kasandra/KasandraContainer";
+import MarketHeatmapContainer from "src/containers/market-heatmap/MarketHeatmapContainer";
 import { deviceBreakpoints } from "src/globalStyles/breakpoints";
 import CONFIG from "src/config";
+import { ETemplateNameRegistry } from "src/constants";
 
 const { Z_INDEX_REGISTRY } = CONFIG.UI;
+const { WIDGETS } = CONFIG;
 
 const { singleCol, twoCol, threeCol, fourCol } = deviceBreakpoints;
 
+export const TWO_COL_WIDGETS_CONFIG = {
+    kasandra: {
+        templateName: ETemplateNameRegistry.Kasandra,
+        Container: KasandraContainer,
+        widgetConfig: WIDGETS.KASANDRA,
+    },
+    marketHeatmap: {
+        templateName: ETemplateNameRegistry.MarketHeatmap,
+        Container: MarketHeatmapContainer,
+        widgetConfig: WIDGETS.MARKET_HEATMAP,
+    },
+} as const;
+
 /**
  * Heads up: layout is in the form (col #, row #) or (x, y), starting from the
  * top left. That is, if:
@@ -243,3 +261,51 @@ export const recomputeWidgetsPos = (
 
     return widgets;
 };
+
+export const getTwoColWidgetTemplateSlugs = () => {
+    return Object.values(TWO_COL_WIDGETS_CONFIG).map(
+        (config) => `${config.templateName.toLowerCase()}_template`
+    );
+};
+
+export const useTwoColWidgets = (selectedView: TCachedView | undefined) => {
+    return useMemo(() => {
+        if (!selectedView) return { widgets: {}, twoColWidgetSlugs: [] };
+        const twoColWidgetSlugs = getTwoColWidgetTemplateSlugs();
+        const widgets: Record<string, TUserViewWidget> = {};
+
+        Object.entries(TWO_COL_WIDGETS_CONFIG).forEach(([key, config]) => {
+            const templateSlug = `${config.templateName.toLowerCase()}_template`;
+            const widgetData = selectedView?.data.widgets.find(
+                (w: TUserViewWidget) => w.widget.template.slug === templateSlug
+            );
+            widgets[key] = widgetData as TUserViewWidget;
+        });
+
+        return { widgets, twoColWidgetSlugs };
+    }, [selectedView]);
+};
+
+export const calculateTwoColWidgetsHeight = (
+    widgets: Record<string, TUserViewWidget>,
+    collapsedStates: Record<string, boolean>
+) => {
+    let totalHeight = 0;
+    const defaultMarginBottom = 14;
+
+    Object.entries(TWO_COL_WIDGETS_CONFIG).forEach(([key, config]) => {
+        if (widgets[key]) {
+            if (collapsedStates[key]) {
+                totalHeight +=
+                    (config.widgetConfig.COLLAPSED_WIDGET_HEIGHT as number) ||
+                    0;
+            } else {
+                totalHeight +=
+                    (config.widgetConfig.WIDGET_HEIGHT as number) || 0;
+            }
+            totalHeight += defaultMarginBottom;
+        }
+    });
+
+    return totalHeight;
+};