@xframes/node 0.0.11 → 0.0.13

package/dist/components/TradingGuiDemo/TradingGuiDemo.js

@@ -0,0 +1,299 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TradingGuiDemo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("@xframes/common");
+// import { HelpMarker } from "./HelpMarker/HelpMarker";
+const CryptoLinePlots_1 = require("./CryptoPlots/CryptoLinePlots");
+const store_1 = require("./store");
+const CryptoAssetsList_1 = require("./CryptoAssetsList/CryptoAssetsList");
+const dataService_1 = require("./dataService");
+const CryptoAssetPanels_1 = require("./CryptoAssetPanels/CryptoAssetPanels");
+const CryptoCandlestickPlots_1 = require("./CryptoPlots/CryptoCandlestickPlots");
+const Sidebar_1 = require("./Sidebar/Sidebar");
+const CryptoSymbolBlock_1 = require("./CryptoSymbolBlock/CryptoSymbolBlock");
+const Tabs_1 = require("./Tabs/Tabs");
+const XFrames_1 = require("src/lib/XFrames");
+const themes_1 = require("src/themes");
+const componentMap = {
+    cryptoAssetPanels: CryptoAssetPanels_1.CryptoAssetPanels,
+    cryptoAssetList: CryptoAssetsList_1.CryptoAssetsList,
+    cryptoLinePlots: CryptoLinePlots_1.CryptoLinePlots,
+    cryptoCandlestickPlots: CryptoCandlestickPlots_1.CryptoCandlestickPlots,
+};
+const dataService = new dataService_1.DataService();
+const TradingGuiDemo = () => {
+    const symbols = (0, store_1.useStore)((state) => state.symbols);
+    const selectedTabIndex = (0, store_1.useStore)((state) => state.selectedTabIndex);
+    const setSelectedTabIndex = (0, store_1.useStore)((state) => state.setSelectedTabIndex);
+    const setCryptoAssets = (0, store_1.useStore)((state) => state.setCryptoAssets);
+    // const socketRef = useRef<WebSocket>();
+    const widgetRegistratonService = (0, common_1.useWidgetRegistrationService)();
+    const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)([
+        "cryptoAssetPanels",
+    ]);
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        rootNode: {
+            height: "100%",
+        },
+        mainLayoutNode: {
+            flex: 1,
+            flexDirection: "row",
+        },
+        title: {
+            colors: { [common_1.ImGuiCol.Text]: themes_1.theme2Colors.green },
+            font: { name: "roboto-regular", size: 24 },
+        },
+        debugButton: {
+            positionType: "absolute",
+            position: { right: 15, bottom: 15 },
+            flexDirection: "row",
+            gap: { column: 10 },
+        },
+        button: {
+            colors: {
+                [common_1.ImGuiCol.Text]: themes_1.theme2Colors.green,
+                [common_1.ImGuiCol.Border]: themes_1.theme2Colors.green,
+            },
+            padding: { all: 8 },
+            vars: {
+                [common_1.ImGuiStyleVar.FrameBorderSize]: 1,
+                [common_1.ImGuiStyleVar.FrameRounding]: 5,
+            },
+        },
+        mainNode: {
+            flex: 1,
+        },
+        mainTitleNode: {
+            flexDirection: "row",
+            borderBottom: {
+                color: "#1B1D20", // todo: remove double border
+                thickness: 1,
+            },
+            borderRight: {
+                color: "#1B1D20", // todo: remove double border
+                thickness: 1,
+            },
+            padding: { all: 20 },
+        },
+        mainTitle: {
+            font: { name: "roboto-bold", size: 32 },
+        },
+        contentNode: {
+            padding: {
+                left: 8,
+            },
+        },
+        tabContent: {
+            height: "100%",
+            width: 350,
+            gap: { row: 10 },
+            padding: {
+                horizontal: 8,
+                vertical: 16,
+            },
+            borderLeft: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+        },
+        marketSearchInput: {
+            vars: {
+                [common_1.ImGuiStyleVar.FrameBorderSize]: 1,
+                [common_1.ImGuiStyleVar.FramePadding]: [10, 10],
+            },
+            colors: {
+                [common_1.ImGuiCol.Border]: "#1C1E22",
+            },
+        },
+        marketSearchInputHover: {
+            vars: {
+                [common_1.ImGuiStyleVar.FrameBorderSize]: 1,
+                [common_1.ImGuiStyleVar.FramePadding]: [10, 10],
+            },
+            colors: {
+                [common_1.ImGuiCol.Border]: "#fff",
+                [common_1.ImGuiCol.TextDisabled]: "#fff",
+            },
+        },
+        marketSearchFilterWrapper: {
+            flexDirection: "row",
+            gap: { all: 8 },
+            flexWrap: "wrap",
+        },
+        marketSearchFilter: {
+            width: 60,
+            colors: {
+                [common_1.ImGuiCol.Button]: "#1E2025",
+                [common_1.ImGuiCol.ButtonHovered]: "#1E2025",
+                [common_1.ImGuiCol.ButtonActive]: "#1E2025",
+                [common_1.ImGuiCol.Text]: "#777B84",
+            },
+            vars: {
+                [common_1.ImGuiStyleVar.FrameRounding]: 5,
+            },
+        },
+        marketSearchFilterActive: {
+            width: 60,
+            colors: {
+                [common_1.ImGuiCol.Button]: "#fff",
+                [common_1.ImGuiCol.ButtonHovered]: "#fff",
+                [common_1.ImGuiCol.ButtonActive]: "#fff",
+                [common_1.ImGuiCol.Text]: "#292A2C",
+            },
+            vars: {
+                [common_1.ImGuiStyleVar.FrameRounding]: 5,
+            },
+        },
+    }), []);
+    // todo: move to dataService.ts ?
+    // const connect = useCallback(() => {
+    //     socketRef.current = new WebSocket("ws://localhost:4000");
+    //     socketRef.current.addEventListener("error", () => {
+    //         console.log("Connected to server");
+    //     });
+    //     socketRef.current.addEventListener("open", () => {
+    //         console.log("Connected to server");
+    //     });
+    //     socketRef.current.addEventListener("close", (ev) => {
+    //         try {
+    //             const reason = JSON.parse(ev.reason);
+    //             console.log(`Disconnected from server: ${reason.message}`);
+    //         } catch (error) {
+    //             console.log("Disconnected from server");
+    //         }
+    //     });
+    //     socketRef.current.addEventListener("message", (event) => {
+    //         const data = JSON.parse(event.data);
+    //         if (data.cryptoAssets) {
+    //             // todo: remove filtering
+    //             setCryptoAssets(
+    //                 data.cryptoAssets.filter((asset: any) => cryptoSymbols.includes(asset.symbol)),
+    //             );
+    //         } else if (data.cryptoQuote) {
+    //             dataService.addCryptoQuote(data.cryptoQuote);
+    //         } else if (data.latestCryptoQuotes) {
+    //             // console.log(data.latestCryptoQuotes);
+    //             Object.entries(data.latestCryptoQuotes).forEach(([symbol, cryptoQuote]) =>
+    //                 dataService.addCryptoQuote({ ...(cryptoQuote as any), S: symbol }),
+    //             );
+    //         } else if (data.cryptoSnapshots) {
+    //             dataService.addCryptoSnapshots(data.cryptoSnapshots);
+    //             // console.log(data.cryptoSnapshots);
+    //         } else if (data.latestCryptoBars) {
+    //             console.log(data.latestCryptoBars);
+    //         } else if (data.cryptoBars) {
+    //             dataService.addCryptoBars(data.cryptoBars);
+    //             // console.log(data.cryptoBars);
+    //         }
+    //     });
+    // }, [setCryptoAssets]);
+    // const sendMessage = useCallback((message: any) => {
+    //     if (socketRef.current) {
+    //         socketRef.current.send(JSON.stringify(message));
+    //     }
+    // }, []);
+    // const subscribeToLiveData = useCallback(
+    //     () =>
+    //         sendMessage({
+    //             passkey: "",
+    //             action: "subscribeForCryptoQuotes",
+    //             symbols,
+    //         }),
+    //     [sendMessage, symbols],
+    // );
+    // const getLatestQuotes = useCallback(() => {
+    //     const currentDate = new Date();
+    //     const end = currentDate.toISOString();
+    //     const start = subMinutes(currentDate, 1);
+    //     sendMessage({
+    //         action: "getQuotes",
+    //         symbols,
+    //         options: { start, end },
+    //     });
+    // }, [symbols]);
+    // const getCryptoQuotes = useCallback(() => {
+    //     const currentDate = new Date();
+    //     const end = currentDate.toISOString();
+    //     const start = subMinutes(currentDate, 1).toISOString();
+    //     const options: GetQuotesParams = {
+    //         start,
+    //         end,
+    //     };
+    //     sendMessage({
+    //         action: "getCryptoQuotes",
+    //         symbols,
+    //         options,
+    //     });
+    // }, [symbols]);
+    // const getCryptoBars = useCallback(() => {
+    //     const currentDate = new Date();
+    //     const end = currentDate.toISOString();
+    //     const start = subDays(currentDate, 30).toISOString();
+    //     const options: GetCryptoBarsParams = { start, end, timeframe: "1D" };
+    //     sendMessage({
+    //         action: "getCryptoBars",
+    //         symbols,
+    //         options,
+    //     });
+    // }, [symbols]);
+    // const getCryptoSnapshots = useCallback(
+    //     () =>
+    //         sendMessage({
+    //             action: "getCryptoSnapshots",
+    //             symbols,
+    //         }),
+    //     [symbols],
+    // );
+    // const getLatestCryptoQuotes = useCallback(
+    //     () =>
+    //         sendMessage({
+    //             action: "getLatestCryptoQuotes",
+    //             symbols,
+    //         }),
+    //     [symbols],
+    // );
+    // const getLatestCryptoBars = useCallback(
+    //     () =>
+    //         sendMessage({
+    //             action: "getLatestCryptoBars",
+    //             symbols,
+    //         }),
+    //     [symbols],
+    // );
+    // const getCryptoAssets = useCallback(
+    //     () =>
+    //         sendMessage({
+    //             action: "getCryptoAssets",
+    //             symbols,
+    //         }),
+    //     [symbols],
+    // );
+    const debugModeBtnClicked = (0, react_1.useCallback)(() => {
+        widgetRegistratonService.setDebug(true);
+    }, []);
+    const onToggleItemSelection = (0, react_1.useCallback)((itemId, selected) => {
+        setSelectedItemIds((selection) => {
+            if (selected) {
+                return [itemId];
+            }
+            else {
+                return selection.filter((item) => item !== itemId);
+            }
+        });
+    }, []);
+    const onMarketSearchTextChange = (0, react_1.useCallback)((evt) => {
+        console.log(evt.nativeEvent.value);
+    }, []);
+    // useEffect(() => {
+    // connect();
+    // setTimeout(() => {
+    //     getCryptoAssets();
+    // }, 1000);
+    // }, [connect, getCryptoAssets]);
+    const tabs = (0, react_1.useMemo)(() => ["Markets", "History"], []);
+    const Component = componentMap[selectedItemIds[0]];
+    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { root: true, style: styleSheet.rootNode, children: [(0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.mainLayoutNode, children: [(0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, {}), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.mainNode, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.mainTitleNode, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: "Trade", style: styleSheet.mainTitle }) }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.contentNode, children: [(0, jsx_runtime_1.jsx)(CryptoSymbolBlock_1.CryptoSymbolBlock, { symbol: "BTC/USD" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs, { tabs: tabs, selectedTabIndex: selectedTabIndex, onSelectedTabChange: setSelectedTabIndex }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.tabContent, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.InputText, { onChange: onMarketSearchTextChange, hint: `${common_1.faIconMap["magnifying-glass"]} SEARCH MARKETS`, style: styleSheet.marketSearchInput, hoverStyle: styleSheet.marketSearchInputHover }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.marketSearchFilterWrapper, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["star"], style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "ALL", style: styleSheet.marketSearchFilterActive, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "TOP", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "BTC", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "ETH", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "USD", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "USDC", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "DAI", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: "MKR", style: styleSheet.marketSearchFilter, hoverStyle: styleSheet.marketSearchFilterActive })] })] })] })] })] }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sidebarNode }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.debugButton, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap.bug, onClick: debugModeBtnClicked }) })] }));
+};
+exports.TradingGuiDemo = TradingGuiDemo;

package/dist/components/TradingGuiDemo/cryptoSymbols.d.ts

@@ -0,0 +1 @@
+export declare const cryptoSymbols: string[];

package/dist/components/TradingGuiDemo/cryptoSymbols.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cryptoSymbols = void 0;
+exports.cryptoSymbols = [
+    "SUSHI/USD",
+    "YFI/USD",
+    "LTC/USD",
+    "DOGE/USD",
+    "BCH/USDT",
+    "BAT/USDC",
+    "BAT/USD",
+    "CRV/USDC",
+    "SHIB/USDT",
+    "BCH/USDC",
+    "LINK/USDT",
+    "LINK/USDC",
+    "BCH/USD",
+    "CRV/USD",
+    "AVAX/USDT",
+    "LTC/USDT",
+    "XTZ/USDC",
+    "BTC/USDT",
+    "AVAX/USDC",
+    "XTZ/USD",
+    // "AVAX/USD",
+    // "LTC/USDC",
+    // "LINK/USD",
+    // "LINK/BTC",
+    // "SHIB/USDC",
+    // "SOL/USDC",
+    // "GRT/USDC",
+    // "USDT/USDC",
+    // "SOL/USD",
+    // "SOL/USDT",
+    // "SHIB/USD",
+    // "DOGE/USDC",
+    // "GRT/USD",
+    // "ETH/USDT",
+    // "USDT/USD",
+    // "ETH/USDC",
+    // "LTC/BTC",
+    // "AAVE/USDT",
+    // "ETH/USD",
+    // "UNI/USDT",
+    // "ETH/BTC",
+    // "BCH/BTC",
+    // "USDC/USD",
+    // "YFI/USDT",
+    // "UNI/USDC",
+    // "DOT/USDC",
+    // "DOT/USD",
+    // "AAVE/USD",
+    // "MKR/USDC",
+    // "UNI/USD",
+    // "AAVE/USDC",
+    // "UNI/BTC",
+    // "SUSHI/USDT",
+    // "BTC/USDC",
+    // "BTC/USD",
+    // "SUSHI/USDC",
+    // "YFI/USDC",
+    // "MKR/USD",
+    // "DOGE/USDT",
+];

package/dist/components/TradingGuiDemo/dataService.d.ts

@@ -0,0 +1,22 @@
+import { CryptoBar, CryptoQuote, CryptoSnapshot } from "@alpacahq/alpaca-trade-api/dist/resources/datav2/entityv2";
+export type CryptoQuoteWithSymbol = CryptoQuote & {
+    S: string;
+};
+export type CryptoSnapshots = {
+    [key: string]: CryptoSnapshot;
+};
+export type CryptoBarDataset = {
+    [key: string]: CryptoBar[];
+};
+export declare class DataService {
+    private cryptoQuotes;
+    private cryptoSnapshots;
+    private cryptoBarDatasets;
+    constructor();
+    addCryptoQuote(cryptoQuote: CryptoQuoteWithSymbol): void;
+    addCryptoSnapshots(cryptoSnapshots: CryptoSnapshots): void;
+    addCryptoBars(cryptoBarDataset: CryptoBarDataset): void;
+    getCryptoQuotes(): import("rxjs").Observable<CryptoQuoteWithSymbol>;
+    getCryptoSnapshots(): import("rxjs").Observable<CryptoSnapshots>;
+    getCryptoBarDatasets(): import("rxjs").Observable<CryptoBarDataset>;
+}

package/dist/components/TradingGuiDemo/dataService.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataService = void 0;
+const rxjs_1 = require("rxjs");
+class DataService {
+    cryptoQuotes;
+    cryptoSnapshots;
+    cryptoBarDatasets;
+    constructor() {
+        this.cryptoQuotes = new rxjs_1.ReplaySubject(100000);
+        this.cryptoSnapshots = new rxjs_1.ReplaySubject(100000);
+        this.cryptoBarDatasets = new rxjs_1.ReplaySubject(100000);
+    }
+    addCryptoQuote(cryptoQuote) {
+        this.cryptoQuotes.next(cryptoQuote);
+    }
+    addCryptoSnapshots(cryptoSnapshots) {
+        this.cryptoSnapshots.next(cryptoSnapshots);
+    }
+    addCryptoBars(cryptoBarDataset) {
+        this.cryptoBarDatasets.next(cryptoBarDataset);
+    }
+    getCryptoQuotes() {
+        return this.cryptoQuotes.asObservable();
+    }
+    getCryptoSnapshots() {
+        return this.cryptoSnapshots.asObservable();
+    }
+    getCryptoBarDatasets() {
+        return this.cryptoBarDatasets.asObservable();
+    }
+}
+exports.DataService = DataService;

package/dist/components/TradingGuiDemo/dataServiceContext.d.ts

@@ -0,0 +1,3 @@
+import { DataService } from "./dataService";
+export declare const DataServiceContext: import("react").Context<DataService | null>;
+export declare const useDataService: () => DataService;

package/dist/components/TradingGuiDemo/dataServiceContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataService = exports.DataServiceContext = void 0;
+const react_1 = require("react");
+exports.DataServiceContext = (0, react_1.createContext)(null);
+const useDataService = () => {
+    const context = (0, react_1.useContext)(exports.DataServiceContext);
+    if (context) {
+        return context;
+    }
+    throw new Error("DataServiceContext initialisation failed");
+};
+exports.useDataService = useDataService;

package/dist/components/TradingGuiDemo/store.d.ts

@@ -0,0 +1,17 @@
+import type { CryptoQuote } from "@alpacahq/alpaca-trade-api/dist/resources/datav2/entityv2.d.ts";
+export declare const onLoadCryptoQuote: (symbol: string, cryptoQuote: CryptoQuote) => void;
+export declare const emptyCryptoQuote: Readonly<{
+    Timestamp: "";
+    BidPrice: 0;
+    BidSize: 0;
+    AskPrice: 0;
+    AskSize: 0;
+}>;
+export type State = {
+    symbols: string[];
+    cryptoAssets: any[];
+    selectedTabIndex: number;
+    setCryptoAssets: (cryptoAssets: any[]) => void;
+    setSelectedTabIndex: (index: number) => void;
+};
+export declare const useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<State>>;

package/dist/components/TradingGuiDemo/store.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStore = exports.emptyCryptoQuote = exports.onLoadCryptoQuote = void 0;
+const zustand_1 = require("zustand");
+const rxjs_1 = require("rxjs");
+const cryptoSymbols_1 = require("./cryptoSymbols");
+const cryptoQuoteSubjectMap$ = new rxjs_1.BehaviorSubject(new Map());
+const onLoadCryptoQuote = (symbol, cryptoQuote) => {
+    console.log(symbol, cryptoQuote);
+    const map = cryptoQuoteSubjectMap$.getValue();
+    if (!map.has(symbol)) {
+        map.set(symbol, new rxjs_1.BehaviorSubject(cryptoQuote));
+    }
+    else {
+        const subject$ = map.get(symbol);
+        subject$?.next(cryptoQuote);
+        // map.set(symbol, subject$ as CryptoQuoteSubject);
+    }
+    cryptoQuoteSubjectMap$.next(map);
+};
+exports.onLoadCryptoQuote = onLoadCryptoQuote;
+exports.emptyCryptoQuote = Object.freeze({
+    Timestamp: "",
+    BidPrice: 0,
+    BidSize: 0,
+    AskPrice: 0,
+    AskSize: 0,
+});
+exports.useStore = (0, zustand_1.create)((set) => ({
+    cryptoAssets: [],
+    symbols: cryptoSymbols_1.cryptoSymbols,
+    selectedTabIndex: 0,
+    setCryptoAssets: (cryptoAssets) => set(() => ({ cryptoAssets })),
+    setSelectedTabIndex: (index) => set(() => ({ selectedTabIndex: index })),
+}));