@xframes/node 0.0.12 → 0.0.13

package/dist/App.d.ts

@@ -0,0 +1 @@
+export declare const App: () => import("react/jsx-runtime").JSX.Element;

package/dist/App.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const XFrames_1 = require("./lib/XFrames");
+const TradingGuiDemo_1 = require("./components/TradingGuiDemo/TradingGuiDemo");
+const App = () => {
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { root: true, style: { width: "100%", height: "100%" }, children: (0, jsx_runtime_1.jsx)(TradingGuiDemo_1.TradingGuiDemo, {}) }));
+};
+exports.App = App;

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

@@ -0,0 +1,3 @@
+type Props = {};
+export declare const CryptoAssetPanels: ({}: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoAssetPanels/CryptoAssetPanels.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoAssetPanels = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const store_1 = require("../store");
+const CryptoQuotePrice_1 = require("../CryptoQuotePrice/CryptoQuotePrice");
+const common_1 = require("@xframes/common");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoAssetPanels = ({}) => {
+    const cryptoAssets = (0, store_1.useStore)((state) => state.cryptoAssets.sort((a, b) => {
+        if (a.symbol < b.symbol) {
+            return -1;
+        }
+        else if (a.symbol > b.symbol) {
+            return 1;
+        }
+        return 0;
+    }));
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        mainWrapperNode: {
+            width: "100%",
+            height: "auto",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: { row: 5, column: 5 },
+        },
+        asset: {
+            minWidth: 200,
+            maxWidth: 240,
+            flex: 1,
+            height: "auto",
+            border: {
+                color: "#000",
+                thickness: 1,
+            },
+            alignItems: "center",
+            padding: { vertical: 5 },
+            gap: { row: 5 },
+        },
+        symbol: {
+            font: { name: "roboto-regular", size: 24 },
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.mainWrapperNode, children: cryptoAssets.map((asset) => {
+            return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.asset, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.symbol, text: asset.symbol }), (0, jsx_runtime_1.jsx)(CryptoQuotePrice_1.CryptoQuotePrice, { symbol: asset.symbol })] }, asset.id));
+        }) }));
+};
+exports.CryptoAssetPanels = CryptoAssetPanels;

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

@@ -0,0 +1,3 @@
+type Props = {};
+export declare const CryptoAssetsList: ({}: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoAssetsList/CryptoAssetsList.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoAssetsList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dataServiceContext_1 = require("../dataServiceContext");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoAssetsList = ({}) => {
+    const dataService = (0, dataServiceContext_1.useDataService)();
+    const tableRef = (0, react_1.useRef)(null);
+    const tableColumns = (0, react_1.useMemo)(() => [
+        {
+            heading: "Symbol",
+            fieldId: "symbol",
+        },
+        {
+            heading: "ASK",
+            fieldId: "askPrice",
+        },
+        {
+            heading: "Change",
+            fieldId: "askChange",
+        },
+        {
+            heading: "BID",
+            fieldId: "bidPrice",
+        },
+        {
+            heading: "Change",
+            fieldId: "bidChange",
+        },
+    ], []);
+    (0, react_1.useEffect)(() => {
+        const subscription = dataService
+            .getCryptoSnapshots()
+            .subscribe((snapshots) => {
+            const data = Object.entries(snapshots).map(([symbol, snapshot]) => ({
+                symbol,
+                askPrice: snapshot.LatestQuote.AskPrice.toFixed(6),
+                bidPrice: snapshot.LatestQuote.BidPrice.toFixed(6),
+                // todo: totally unsure here
+                askChange: (snapshot.LatestQuote.AskPrice - snapshot.DailyBar.Open).toFixed(6),
+                bidChange: (snapshot.LatestQuote.BidPrice - snapshot.DailyBar.Open).toFixed(6),
+            }));
+            data.sort((a, b) => {
+                if (a.symbol < b.symbol) {
+                    return -1;
+                }
+                else if (a.symbol > b.symbol) {
+                    return 1;
+                }
+                return 0;
+            });
+            tableRef.current?.setTableData(data);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [dataService]);
+    return (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Table, { ref: tableRef, columns: tableColumns });
+};
+exports.CryptoAssetsList = CryptoAssetsList;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    symbol: string;
+};
+export declare const CryptoCandlestickPlot: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlot.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoCandlestickPlot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const dataServiceContext_1 = require("../dataServiceContext");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoCandlestickPlot = ({ symbol }) => {
+    const dataService = (0, dataServiceContext_1.useDataService)();
+    const plotRef = (0, react_1.useRef)(null);
+    // const [axisAutoFit, setAxisAutoFit] = useState(true);
+    (0, react_1.useEffect)(() => {
+        const subscription = dataService
+            .getCryptoBarDatasets()
+            .pipe((0, rxjs_1.map)((cryptoBars) => cryptoBars[symbol]))
+            .subscribe((cryptoBarsForSymbol) => {
+            if (plotRef.current) {
+                const data = cryptoBarsForSymbol.map((cryptoBar) => ({
+                    date: Number(new Date(cryptoBar.Timestamp)) / 1000,
+                    open: cryptoBar.Open,
+                    close: cryptoBar.Close,
+                    high: cryptoBar.High,
+                    low: cryptoBar.Low,
+                }));
+                // console.log(data);
+                plotRef.current.setData(data);
+            }
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [dataService]);
+    // const toggleAxisAutoFit = useCallback(() => {
+    //     setAxisAutoFit((val) => !val);
+    // }, []);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.PlotCandlestick, { ref: plotRef, style: { width: "100%", height: 400 } }));
+};
+exports.CryptoCandlestickPlot = CryptoCandlestickPlot;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+export declare const CryptoCandlestickPlots: ({}: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoCandlestickPlots.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoCandlestickPlots = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const store_1 = require("../store");
+const CryptoCandlestickPlot_1 = require("./CryptoCandlestickPlot");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoCandlestickPlots = ({}) => {
+    const symbols = (0, store_1.useStore)((state) => state.symbols);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: {
+            width: "100%",
+            height: "100%",
+            flexDirection: "column",
+            gap: { row: 5 },
+        }, children: symbols.map((sym) => ((0, jsx_runtime_1.jsx)(CryptoCandlestickPlot_1.CryptoCandlestickPlot, { symbol: sym }, sym))) }));
+};
+exports.CryptoCandlestickPlots = CryptoCandlestickPlots;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlot.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    symbol: string;
+};
+export declare const CryptoLinePlot: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlot.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoLinePlot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dataServiceContext_1 = require("../dataServiceContext");
+const common_1 = require("@xframes/common");
+const rxjs_1 = require("rxjs");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoLinePlot = ({ symbol }) => {
+    const dataService = (0, dataServiceContext_1.useDataService)();
+    const plotRef = (0, react_1.useRef)(null);
+    // const [axisAutoFit, setAxisAutoFit] = useState(true);
+    (0, react_1.useEffect)(() => {
+        const subscription = dataService
+            .getCryptoQuotes()
+            .pipe((0, rxjs_1.filter)((cryptoQuote) => cryptoQuote.S === symbol))
+            .subscribe((quote) => {
+            if (plotRef.current) {
+                const date = new Date(quote.Timestamp);
+                plotRef.current.appendData(Number(date) / 1000, quote.BidPrice);
+            }
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [dataService]);
+    // const toggleAxisAutoFit = useCallback(() => {
+    //     setAxisAutoFit((val) => !val);
+    // }, []);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.PlotLine, { xAxisScale: common_1.ImPlotScale.Time, ref: plotRef, style: { width: "100%", height: 400 } }));
+};
+exports.CryptoLinePlot = CryptoLinePlot;

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlots.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+export declare const CryptoLinePlots: ({}: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoPlots/CryptoLinePlots.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoLinePlots = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const store_1 = require("../store");
+const CryptoLinePlot_1 = require("./CryptoLinePlot");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoLinePlots = ({}) => {
+    const symbols = (0, store_1.useStore)((state) => state.symbols);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: {
+            width: "100%",
+            height: "100%",
+            flexDirection: "column",
+            gap: { row: 5 },
+        }, children: symbols.map((sym) => ((0, jsx_runtime_1.jsx)(CryptoLinePlot_1.CryptoLinePlot, { symbol: sym }, sym))) }));
+};
+exports.CryptoLinePlots = CryptoLinePlots;

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

@@ -0,0 +1,5 @@
+type Props = {
+    symbol: string;
+};
+export declare const CryptoQuotePrice: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoQuotePrice/CryptoQuotePrice.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoQuotePrice = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const common_1 = require("@xframes/common");
+const dataServiceContext_1 = require("../dataServiceContext");
+const XFrames_1 = require("src/lib/XFrames");
+const themes_1 = require("src/themes");
+const CryptoQuotePrice = ({ symbol }) => {
+    const [data, setData] = (0, react_1.useState)({
+        lastUpdated: "n/a",
+    });
+    // const [lastUpdated, setLastUpdated] = useState<string>("n/a");
+    const dataService = (0, dataServiceContext_1.useDataService)();
+    (0, react_1.useEffect)(() => {
+        const subscription = dataService
+            .getCryptoQuotes()
+            .pipe((0, rxjs_1.filter)((cryptoQuote) => cryptoQuote.S === symbol))
+            .subscribe((quote) => {
+            const newData = {
+                quote,
+                lastUpdated: "n/a",
+            };
+            setData((oldData) => {
+                // if (oldData.quote) {
+                //     const quoteDate = new Date(quote.Timestamp);
+                //     const previousDate = new Date(oldData.quote.Timestamp);
+                //     const msDiff = differenceInMilliseconds(quoteDate, previousDate);
+                //     if (msDiff >= 1000) {
+                //         newData.lastUpdated = formatDuration(
+                //             intervalToDuration(interval(quoteDate, previousDate)),
+                //         );
+                //     } else {
+                //         newData.lastUpdated = `${msDiff}ms ago`;
+                //     }
+                // }
+                return newData;
+            });
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [dataService]);
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        pricesWrapper: {
+            alignSelf: "center",
+            flexDirection: "row",
+            gap: { column: 5 },
+        },
+        price: {
+            width: 100,
+            height: "auto",
+            // borderColor: "#000",
+            // borderThickness: 1,
+            alignItems: "center",
+        },
+        ask: {
+            colors: {
+                [common_1.ImGuiCol.Text]: themes_1.theme2Colors.red,
+            },
+        },
+        bid: {
+            colors: {
+                [common_1.ImGuiCol.Text]: themes_1.theme2Colors.green,
+            },
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.pricesWrapper, children: [(0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.price, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: "ASK", style: styleSheet.ask }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: typeof data?.quote?.AskPrice === "number"
+                                ? data?.quote?.AskPrice.toFixed(6)
+                                : "n/a", style: styleSheet.ask })] }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.price, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: "BID", style: styleSheet.bid }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: typeof data?.quote?.BidPrice === "number"
+                                ? data?.quote?.BidPrice.toFixed(6)
+                                : "n/a", style: styleSheet.bid })] })] }) }));
+};
+exports.CryptoQuotePrice = CryptoQuotePrice;

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

@@ -0,0 +1,5 @@
+type Props = {
+    symbol: string;
+};
+export declare const CryptoSymbolBlock: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoSymbolBlock/CryptoSymbolBlock.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoSymbolBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("@xframes/common");
+const CryptoSymbolPair_1 = require("../CryptoSymbolPairs/CryptoSymbolPair");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoSymbolBlock = ({ symbol }) => {
+    const price = "40,730.00";
+    const currency = "USD";
+    const trend = "(+2.50%)";
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        block: {
+            flexDirection: "row",
+            padding: {
+                // horizontal: 2,
+                vertical: 8,
+            },
+            gap: { column: 5 },
+            // borderColor: "#fff",
+            // borderThickness: 1,
+        },
+        symbolLogos: {
+            width: 60,
+            height: 40,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        info: {
+            gap: { row: 5 },
+        },
+        priceRow: {
+            flexDirection: "row",
+            gap: { column: 2 },
+        },
+        symbol: {
+            font: { name: "roboto-bold", size: 16 },
+            colors: { [common_1.ImGuiCol.Text]: "#A9B5C0" },
+        },
+        price: {
+            font: { name: "roboto-bold", size: 20 },
+            colors: { [common_1.ImGuiCol.Text]: "#D9D9D9" },
+        },
+        currency: {
+            font: { name: "roboto-bold", size: 20 },
+            colors: { [common_1.ImGuiCol.Text]: "#A9B5C0" },
+        },
+        trend: {
+            font: { name: "roboto-bold", size: 20 },
+            colors: { [common_1.ImGuiCol.Text]: "#239465" },
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.block, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.symbolLogos, children: (0, jsx_runtime_1.jsx)(CryptoSymbolPair_1.CryptoSymbolPair, { symbol: symbol }) }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.info, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.symbol, text: symbol }), (0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.priceRow, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.price, text: price }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.currency, text: currency }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { style: styleSheet.trend, text: trend })] })] })] }));
+};
+exports.CryptoSymbolBlock = CryptoSymbolBlock;

package/dist/components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    symbol: string;
+};
+export declare const CryptoSymbolPair: ({ symbol }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/CryptoSymbolPairs/CryptoSymbolPair.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CryptoSymbolPair = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("@xframes/common");
+const XFrames_1 = require("src/lib/XFrames");
+const CryptoSymbolPair = ({ symbol }) => {
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        symbolLogoPair: {
+            flexDirection: "row",
+        },
+        symbolLogoLeft: {
+            width: 24,
+            height: 24,
+        },
+        symbolLogoRight: {
+            width: 24,
+            height: 24,
+            position: { left: -5 }, // todo: doesn't this need absolute positioning?
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.symbolLogoPair, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Image, { url: "bitcoin-btc-logo_gqud0f.png", style: styleSheet.symbolLogoLeft }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Image, { url: "77-771550_dollar-currency-money-finance-usd-us-dollar-dollar_apzzg2.png", style: styleSheet.symbolLogoRight })] }));
+};
+exports.CryptoSymbolPair = CryptoSymbolPair;

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

@@ -0,0 +1 @@
+export declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/TradingGuiDemo/Sidebar/Sidebar.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("@xframes/common");
+const XFrames_1 = require("src/lib/XFrames");
+const Sidebar = () => {
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        sidebarNode: {
+            flexBasis: 60,
+            height: "100%",
+            border: {
+                color: "#1B1D20",
+                thickness: 1,
+            },
+        },
+        sideBarItem: {
+            width: 58,
+            height: 58,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        logo: {
+            font: { name: "roboto-regular", size: 36 },
+        },
+        icon: {
+            width: 48,
+            height: 48,
+            font: { name: "roboto-regular", size: 36 },
+            colors: {
+                [common_1.ImGuiCol.ButtonHovered]: "#001033",
+                [common_1.ImGuiCol.ButtonActive]: "#001033",
+            },
+            vars: { [common_1.ImGuiStyleVar.FrameRounding]: 24 },
+        },
+        iconActive: {
+            width: 48,
+            height: 48,
+            font: { name: "roboto-regular", size: 36 },
+            vars: { [common_1.ImGuiStyleVar.FrameRounding]: 24 },
+            colors: {
+                [common_1.ImGuiCol.Text]: "#588AF5",
+                [common_1.ImGuiCol.Button]: "#001033",
+                [common_1.ImGuiCol.ButtonHovered]: "#001033",
+                [common_1.ImGuiCol.ButtonActive]: "#001033",
+            },
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(XFrames_1.XFrames.Node, { style: styleSheet.sidebarNode, children: [(0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: common_1.faIconMap.otter, style: styleSheet.logo }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["arrow-trend-up"], style: styleSheet.iconActive, hoverStyle: styleSheet.iconActive }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["wallet"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) }), (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.sideBarItem, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Button, { label: common_1.faIconMap["chart-pie"], style: styleSheet.icon, hoverStyle: styleSheet.iconActive }) })] }));
+};
+exports.Sidebar = Sidebar;

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

@@ -0,0 +1,7 @@
+type Props = {
+    tabs: string[];
+    selectedTabIndex: number;
+    onSelectedTabChange: (index: number) => void;
+};
+export declare const Tabs: ({ tabs, selectedTabIndex, onSelectedTabChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TradingGuiDemo/Tabs/Tabs.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const common_1 = require("@xframes/common");
+const XFrames_1 = require("src/lib/XFrames");
+const themes_1 = require("src/themes");
+// todo: fix 1px vertical shift on hover
+const Tabs = ({ tabs, selectedTabIndex, onSelectedTabChange, }) => {
+    // const [selectedItemIds, setSelectedItemIds] = useState("cryptoAssetPanels");
+    const styleSheet = (0, react_1.useMemo)(() => common_1.RWStyleSheet.create({
+        tabs: {
+            flexDirection: "row",
+            borderLeft: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+            borderBottom: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+        },
+        tab: {
+            padding: { vertical: 10, horizontal: 20 },
+            borderTop: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+            borderRight: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+        },
+        hoveredTab: {
+            padding: { vertical: 10, horizontal: 20 },
+            borderTop: {
+                // todo: not currently working for hover/active/disabled states
+                color: "#fff",
+                thickness: 1,
+            },
+            borderRight: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+            position: {
+                top: 1, // todo: hack
+            },
+        },
+        activeTab: {
+            padding: { vertical: 10, horizontal: 20 },
+            borderTop: {
+                // todo: not currently working for hover/active/disabled states
+                color: "#fff",
+                thickness: 1,
+            },
+            borderRight: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+            position: {
+                top: 1, // todo: hack
+            },
+        },
+        selectedTab: {
+            padding: { vertical: 10, horizontal: 20 },
+            borderTop: {
+                color: "#fff",
+                thickness: 1,
+            },
+            borderBottom: {
+                color: themes_1.theme2Colors.black,
+                thickness: 1,
+            },
+            borderRight: {
+                color: "#1C1E22",
+                thickness: 1,
+            },
+            position: {
+                top: 1, // todo: hack
+            },
+        },
+        tabText: {
+            font: { name: "roboto-bold", size: 18 },
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: styleSheet.tabs, children: tabs.map((tab, index) => {
+            const isSelected = selectedTabIndex === index;
+            return ((0, jsx_runtime_1.jsx)(XFrames_1.XFrames.Node, { style: isSelected ? styleSheet.selectedTab : styleSheet.tab, hoverStyle: isSelected ? styleSheet.selectedTab : styleSheet.hoveredTab, activeStyle: isSelected ? styleSheet.selectedTab : styleSheet.activeTab, onClick: () => {
+                    // console.log("clicked");
+                    onSelectedTabChange(index);
+                }, trackMouseClickEvents: true, children: (0, jsx_runtime_1.jsx)(XFrames_1.XFrames.UnformattedText, { text: tab, style: styleSheet.tabText }) }, tab));
+        }) }));
+};
+exports.Tabs = Tabs;

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

@@ -0,0 +1 @@
+export declare const TradingGuiDemo: () => import("react/jsx-runtime").JSX.Element;