@xframes/node 0.0.13 → 0.0.15

package/dist/components/TradingGuiDemo/TradingGuiDemo.js

@@ -1,299 +0,0 @@
-"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

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

package/dist/components/TradingGuiDemo/cryptoSymbols.js

@@ -1,64 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-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

@@ -1,33 +0,0 @@
-"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

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

package/dist/components/TradingGuiDemo/dataServiceContext.js

@@ -1,13 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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 })),
-}));

package/dist/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/themes.d.ts

@@ -1,26 +0,0 @@
-import { XFramesStyleForPatching } from "@xframes/common";
-export declare const theme1Colors: {
-    black: string;
-    darkGrey: string;
-    grey: string;
-    lightGrey: string;
-    veryLightGrey: string;
-    superLightGrey: string;
-    white: string;
-    hero: string;
-    hoverHero: string;
-};
-export declare const theme1: XFramesStyleForPatching;
-export declare const theme2Colors: {
-    darkestGrey: string;
-    darkerGrey: string;
-    darkGrey: string;
-    lightGrey: string;
-    lighterGrey: string;
-    evenLighterGrey: string;
-    black: string;
-    green: string;
-    red: string;
-    white: string;
-};
-export declare const theme2: XFramesStyleForPatching;