Add Liquidation Chart

packages/frontend/app/components/BasicMenu/BasicMenu.tsx

@@ -6,6 +6,7 @@ import styles from './BasicMenu.module.css';
 export interface BasicMenuItemIF {
     label: string;
     listener: () => void;
+    exclude?: boolean;
 }
 
 interface BasicMenuProps {
@@ -41,18 +42,21 @@ const BasicMenu: React.FC<BasicMenuProps> = ({
                     <div
                         className={`${styles.menuContainer} ${styles[positionVertical]} ${styles[positionHorizontal]}`}
                     >
-                        {items.map((item, index) => (
-                            <div
-                                key={index}
-                                className={styles.menuItem}
-                                onClick={() => {
-                                    item.listener();
-                                    setIsOpen(false);
-                                }}
-                            >
-                                {item.label}
-                            </div>
-                        ))}
+                        {items.map(
+                            (item, index) =>
+                                !item.exclude && (
+                                    <div
+                                        key={index}
+                                        className={styles.menuItem}
+                                        onClick={() => {
+                                            item.listener();
+                                            setIsOpen(false);
+                                        }}
+                                    >
+                                        {item.label}
+                                    </div>
+                                ),
+                        )}
                     </div>
                 )}
             </div>

packages/frontend/app/components/Inputs/ComboBox/ComboBoxContainer.tsx

@@ -48,6 +48,8 @@ export default function ComboBoxContainer() {
         setUseMockLeverage,
         mockMinimumLeverage,
         setMockMinimumLeverage,
+        pauseLiqAnimation,
+        setPauseLiqAnimation,
     } = useDebugStore();
 
     const currencies = ['USD', 'BTC', 'ETH'];
@@ -143,7 +145,6 @@ export default function ComboBoxContainer() {
                 </div>
                 <div className={styles.divider} />
             </div>
-
             <HorizontalScrollable
                 excludes={['debug-wallet-static-area']}
                 wrapperId='trade-page-left-section'
@@ -277,7 +278,10 @@ export default function ComboBoxContainer() {
                                                     target: userWalletKey,
                                                 },
                                             );
-                                            console.log({ ix, sessionState });
+                                            console.log({
+                                                ix,
+                                                sessionState,
+                                            });
                                             const result =
                                                 await sessionState.sendTransaction(
                                                     [ix],
@@ -291,6 +295,42 @@ export default function ComboBoxContainer() {
                             </button>
                         </div>
                     )}
+                    <div className={styles.subInfo}>{userAddress}</div>
+                    <div className={styles.divider} />
+                    {isEstablished(sessionState) && (
+                        <button
+                            onClick={() => {
+                                (async () => {
+                                    if (isEstablished(sessionState)) {
+                                        console.log('established');
+                                        const userWalletKey =
+                                            sessionState.walletPublicKey ||
+                                            sessionState.sessionPublicKey;
+                                        const ix = instructions.pingIx(42n, {
+                                            actor: sessionState.sessionPublicKey,
+                                            target: userWalletKey,
+                                        });
+                                        console.log({ ix, sessionState });
+                                        const result =
+                                            await sessionState.sendTransaction([
+                                                ix,
+                                            ]);
+                                        console.log({ result });
+                                    }
+                                })();
+                            }}
+                        >
+                            Ping
+                        </button>
+                    )}
+                    <div
+                        className={`${styles.wsToggle} ${pauseLiqAnimation ? styles.wsToggleRunning : styles.wsTogglePaused}`}
+                        onClick={() => setPauseLiqAnimation(!pauseLiqAnimation)}
+                    >
+                        <div className={styles.wsToggleButton}>
+                            {pauseLiqAnimation ? 'Pause Liq' : 'Pause Liq'}
+                        </div>
+                    </div>
                 </div>
             </HorizontalScrollable>
         </section>

packages/frontend/app/components/Tradingview/TradingviewWrapper.tsx

@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { TradingViewProvider } from '~/contexts/TradingviewContext';
 import TradingViewChart from '~/routes/chart/chart';
 import { loadTradingViewLibrary } from '~/routes/chart/lazyLoading/useLazyTradingview';
-import OverlayCanvas from '~/routes/chart/overlayCanvas/overlayCanvas';
+import LiquidationOverlayCanvas from '~/routes/chart/overlayCanvas/LiqudationOverlayCanvas';
+import OrderLinesOverlayCanvas from '~/routes/chart/overlayCanvas/OrderLinesOverlayCanvas';
+import { useAppStateStore } from '~/stores/AppStateStore';
 import styles from './chartLoading.module.css';
 
 const TradingViewWrapper: React.FC = () => {
+    const { liquidationsActive } = useAppStateStore();
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [tvLib, setTvLib] = useState<any>(null);
     const [chartLoadingStatus, setChartLoadingStatus] = useState<
@@ -56,7 +60,8 @@ const TradingViewWrapper: React.FC = () => {
                     setChartLoadingStatus={setChartLoadingStatus}
                 >
                     <TradingViewChart />
-                    <OverlayCanvas />
+                    {liquidationsActive && <LiquidationOverlayCanvas />}
+                    <OrderLinesOverlayCanvas />
                 </TradingViewProvider>
             )}
         </div>

packages/frontend/app/contexts/TradingviewContext.tsx

@@ -34,6 +34,7 @@ import {
     getChartDefaultColors,
     getChartThemeColors,
     mapI18nToTvLocale,
+    getLiquidationsSvgIcon,
     priceFormatterFactory,
     type ChartLayout,
 } from '~/routes/chart/data/utils/utils';
@@ -120,6 +121,8 @@ export const TradingViewProvider: React.FC<{
         setChartState(res);
     }, [i18n.language]);
 
+    const { liquidationsActive, setLiquidationsActive } = useAppStateStore();
+
     const defaultProps: Omit<ChartContainerProps, 'container'> = {
         symbolName: 'BTC',
         libraryPath: '/tv/charting_library/',
@@ -286,70 +289,63 @@ export const TradingViewProvider: React.FC<{
 
         tvWidget.headerReady().then(() => {
             setChartLoadingStatus('ready');
+            const liquidationsButton = tvWidget.createButton();
+
+            let isToggled = liquidationsActive;
+
+            const updateButtonStyle = () => {
+                const svg = getLiquidationsSvgIcon(
+                    isToggled ? '#7371fc' : '#cbcaca',
+                );
+                liquidationsButton.style.color = isToggled
+                    ? '#7371fc'
+                    : '#cbcaca';
+
+                liquidationsButton.innerHTML = `
+                    <span class="liquidations-wrapper" style="display: flex; align-items: center;border-radius:4px;padding:5px">
+                      ${svg}
+                     <span style="padding-left:3px"> Liquidations
+                     </span>`;
+            };
+
+            updateButtonStyle();
+
+            const onClick = () => {
+                isToggled = !isToggled;
+                setLiquidationsActive(isToggled);
+                updateButtonStyle();
+            };
+            const onMouseEnter = () => {
+                const wrapper = liquidationsButton.querySelector(
+                    '.liquidations-wrapper',
+                ) as HTMLDivElement;
+                if (wrapper) {
+                    wrapper.style.backgroundColor = '#313030';
+                }
+            };
+            const onMouseLeave = () => {
+                const wrapper = liquidationsButton.querySelector(
+                    '.liquidations-wrapper',
+                ) as HTMLDivElement;
+                if (wrapper) wrapper.style.backgroundColor = 'transparent';
+            };
+
+            liquidationsButton.addEventListener('click', onClick);
+            liquidationsButton.addEventListener('mouseenter', onMouseEnter);
+            liquidationsButton.addEventListener('mouseleave', onMouseLeave);
+
+            return () => {
+                liquidationsButton.removeEventListener('click', onClick);
+                liquidationsButton.removeEventListener(
+                    'mouseenter',
+                    onMouseEnter,
+                );
+                liquidationsButton.removeEventListener(
+                    'mouseleave',
+                    onMouseLeave,
+                );
+            };
         });
-        // tvWidget.headerReady().then(() => {
-        //     const liquidationsButton = tvWidget.createButton();
-
-        //     let isToggled = false;
-
-        //     const updateButtonStyle = () => {
-        //         const svg = getLiquidationsSvgIcon(
-        //             isToggled ? '#7371fc' : '#cbcaca',
-        //         );
-        //         liquidationsButton.style.color = isToggled
-        //             ? '#7371fc'
-        //             : '#cbcaca';
-
-        //         liquidationsButton.innerHTML = `
-        //             <span class="liquidations-wrapper" style="display: flex; align-items: center;border-radius:4px;padding:5px">
-        //               ${svg}
-        //              <span style="padding-left:3px"> Liquidations
-        //              </span>`;
-        //     };
-
-        //     updateButtonStyle();
-
-        //     const onClick = () => {
-        //         isToggled = !isToggled;
-        //         updateButtonStyle();
-
-        //         if (isToggled) {
-        //             console.log('Open');
-        //         } else {
-        //             console.log('Close');
-        //         }
-        //     };
-        //     const onMouseEnter = () => {
-        //         const wrapper = liquidationsButton.querySelector(
-        //             '.liquidations-wrapper',
-        //         ) as HTMLDivElement;
-        //         if (wrapper) {
-        //             wrapper.style.backgroundColor = '#313030';
-        //         }
-        //     };
-        //     const onMouseLeave = () => {
-        //         const wrapper = liquidationsButton.querySelector(
-        //             '.liquidations-wrapper',
-        //         ) as HTMLDivElement;
-        //         if (wrapper) wrapper.style.backgroundColor = 'transparent';
-        //     };
-
-        //     liquidationsButton.addEventListener('click', onClick);
-        //     liquidationsButton.addEventListener('mouseenter', onMouseEnter);
-        //     liquidationsButton.addEventListener('mouseleave', onMouseLeave);
-
-        //     return () => {
-        //         liquidationsButton.removeEventListener('click', onClick);
-        //         liquidationsButton.removeEventListener(
-        //             'mouseenter',
-        //             onMouseEnter,
-        //         );
-        //         liquidationsButton.removeEventListener(
-        //             'mouseleave',
-        //             onMouseLeave,
-        //         );
-        //     };
-        // });
 
         tvWidget.onChartReady(() => {
             /**

packages/frontend/app/routes/chart/data/utils/utils.ts

@@ -1,3 +1,4 @@
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { bsColorSets, type colorSetIF } from '~/stores/AppSettingsStore';
 import type { ResolutionString } from '~/tv/charting_library';
 
@@ -8,6 +9,26 @@ import type {
     LibrarySymbolInfo,
 } from '~/tv/charting_library';
 
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'd3fc-group': DetailedHTMLProps<
+                HTMLAttributes<HTMLDivElement>,
+                HTMLDivElement
+            >;
+            'd3fc-svg': DetailedHTMLProps<
+                HTMLAttributes<HTMLDivElement>,
+                HTMLDivElement
+            >;
+            'd3fc-canvas': DetailedHTMLProps<
+                HTMLAttributes<HTMLCanvasElement | HTMLDivElement>,
+                HTMLCanvasElement | HTMLDivElement
+            >;
+        }
+    }
+}
+
 export type ChartLayout = {
     chartLayout: object;
     interval: string;

packages/frontend/app/routes/chart/hooks/useLazyD3.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let cachedLibs: { d3: any; d3fc: any } | null = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let loadingPromise: Promise<{ d3: any; d3fc: any }> | null = null;
+
+export function useLazyD3() {
+    const [libs, setLibs] = useState<typeof cachedLibs>(cachedLibs);
+
+    useEffect(() => {
+        if (cachedLibs) {
+            setLibs(cachedLibs);
+            return;
+        }
+
+        if (!loadingPromise) {
+            loadingPromise = (async () => {
+                const [d3, d3fc] = await Promise.all([
+                    import('d3'),
+                    import('d3fc'),
+                ]);
+                cachedLibs = { d3, d3fc };
+                return cachedLibs;
+            })();
+        }
+
+        loadingPromise.then((libs) => {
+            setLibs(libs);
+        });
+    }, []);
+
+    return libs;
+}

packages/frontend/app/routes/chart/lazyLoading/charting_library.mock.d.ts

@@ -226,4 +226,33 @@ declare module '~/tv/charting_library' {
     export interface CustomThemes {
         [name: string]: CustomThemeColors;
     }
+
+    export interface MouseEventParams {
+        clientX: number;
+        clientY: number;
+        pageX: number;
+        pageY: number;
+        screenX: number;
+        screenY: number;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    export interface ISubscription<TFunc extends (...args: any[]) => void> {
+        subscribe(
+            obj: object | null,
+            member: TFunc,
+            singleshot?: boolean,
+        ): void;
+        unsubscribe(obj: object | null, member: TFunc): void;
+        unsubscribeAll(obj: object | null): void;
+    }
+
+    export interface CrossHairMovedEventParams {
+        time: number;
+        price: number;
+        userTime?: number;
+        entityValues?: Record<EntityId, CrossHairMovedEventSource>;
+        offsetX?: number;
+        offsetY?: number;
+    }
 }