diff --git a/.github/workflows/deploy-to-gh-pages.yaml b/.github/workflows/deploy-to-gh-pages.yaml index 24ce2e8f..4830dcc1 100644 --- a/.github/workflows/deploy-to-gh-pages.yaml +++ b/.github/workflows/deploy-to-gh-pages.yaml @@ -26,8 +26,6 @@ jobs: run: | cd spark-frontend npm run build - env: - REACT_APP_IS_CHART_LIBRARY_EXCLUDED: true - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 diff --git a/spark-frontend/.env.example b/spark-frontend/.env.example deleted file mode 100644 index accb7b1d..00000000 --- a/spark-frontend/.env.example +++ /dev/null @@ -1 +0,0 @@ -REACT_APP_IS_CHART_LIBRARY_EXCLUDED=false \ No newline at end of file diff --git a/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx b/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx index 8553c7fa..f6757476 100644 --- a/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx +++ b/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx @@ -23,11 +23,11 @@ const Root = styled.div` `; const Chart: React.FC = () => { - const isChartExcluded = process.env.REACT_APP_IS_CHART_LIBRARY_EXCLUDED === "true"; - return ( - {!isChartExcluded && } + + + ); }; diff --git a/spark-frontend/src/screens/TradeScreen/Chart/TVChartContainer.tsx b/spark-frontend/src/screens/TradeScreen/Chart/TVChartContainer.tsx index e797fb11..96492ef7 100644 --- a/spark-frontend/src/screens/TradeScreen/Chart/TVChartContainer.tsx +++ b/spark-frontend/src/screens/TradeScreen/Chart/TVChartContainer.tsx @@ -1,132 +1,132 @@ -import * as React from "react"; -import { useEffect, useRef } from "react"; -import { useTheme } from "@emotion/react"; -import { observer } from "mobx-react-lite"; +// import * as React from "react"; +// import { useEffect, useRef } from "react"; +// import { useTheme } from "@emotion/react"; +// import { observer } from "mobx-react-lite"; -import { ChartingLibraryWidgetOptions, LanguageCode, ResolutionString, widget } from "@src/charting_library"; -import { CHARTS_STORAGE, TV_DATAFEED } from "@src/constants"; +// import { ChartingLibraryWidgetOptions, LanguageCode, ResolutionString, widget } from "@src/charting_library"; +// import { CHARTS_STORAGE, TV_DATAFEED } from "@src/constants"; -export interface ChartContainerProps { - symbol: ChartingLibraryWidgetOptions["symbol"]; - interval: ChartingLibraryWidgetOptions["interval"]; - timeframe: ChartingLibraryWidgetOptions["timeframe"]; +// export interface ChartContainerProps { +// symbol: ChartingLibraryWidgetOptions["symbol"]; +// interval: ChartingLibraryWidgetOptions["interval"]; +// timeframe: ChartingLibraryWidgetOptions["timeframe"]; - // BEWARE: no trailing slash is expected in feed URL - datafeedUrl: string; - libraryPath: ChartingLibraryWidgetOptions["library_path"]; - chartsStorageUrl: ChartingLibraryWidgetOptions["charts_storage_url"]; - chartsStorageApiVersion: ChartingLibraryWidgetOptions["charts_storage_api_version"]; - clientId: ChartingLibraryWidgetOptions["client_id"]; - userId: ChartingLibraryWidgetOptions["user_id"]; - fullscreen: ChartingLibraryWidgetOptions["fullscreen"]; - autosize: ChartingLibraryWidgetOptions["autosize"]; - studiesOverrides: ChartingLibraryWidgetOptions["studies_overrides"]; - overrides: ChartingLibraryWidgetOptions["overrides"]; - container: ChartingLibraryWidgetOptions["container"]; - custom_css_url: ChartingLibraryWidgetOptions["custom_css_url"]; -} +// // BEWARE: no trailing slash is expected in feed URL +// datafeedUrl: string; +// libraryPath: ChartingLibraryWidgetOptions["library_path"]; +// chartsStorageUrl: ChartingLibraryWidgetOptions["charts_storage_url"]; +// chartsStorageApiVersion: ChartingLibraryWidgetOptions["charts_storage_api_version"]; +// clientId: ChartingLibraryWidgetOptions["client_id"]; +// userId: ChartingLibraryWidgetOptions["user_id"]; +// fullscreen: ChartingLibraryWidgetOptions["fullscreen"]; +// autosize: ChartingLibraryWidgetOptions["autosize"]; +// studiesOverrides: ChartingLibraryWidgetOptions["studies_overrides"]; +// overrides: ChartingLibraryWidgetOptions["overrides"]; +// container: ChartingLibraryWidgetOptions["container"]; +// custom_css_url: ChartingLibraryWidgetOptions["custom_css_url"]; +// } -const getLanguageFromURL = (): LanguageCode | null => { - const regex = new RegExp("[\\?&]lang=([^&#]*)"); - const results = regex.exec(window.location.search); - return results === null ? null : (decodeURIComponent(results[1].replace(/\+/g, " ")) as LanguageCode); -}; +// const getLanguageFromURL = (): LanguageCode | null => { +// const regex = new RegExp("[\\?&]lang=([^&#]*)"); +// const results = regex.exec(window.location.search); +// return results === null ? null : (decodeURIComponent(results[1].replace(/\+/g, " ")) as LanguageCode); +// }; -const TVChartContainer = () => { - // const vm = useSpotTradeScreenVM(); - const chartContainerRef = useRef() as React.MutableRefObject; - const theme = useTheme(); - const defaultProps: Omit = { - // symbol: `${vm.token0.symbol}/${vm.token1.symbol}`, - symbol: `BTC/USDC`, - interval: "30" as ResolutionString, - timeframe: "1D" as ResolutionString, - datafeedUrl: TV_DATAFEED, - libraryPath: "/charting_library/", - chartsStorageUrl: CHARTS_STORAGE, - chartsStorageApiVersion: "1.1", - clientId: "tradingview.com", - userId: "public_user_id", - fullscreen: false, - autosize: true, - studiesOverrides: {}, - overrides: { - "paneProperties.background": theme.colors.bgSecondary, - "paneProperties.backgroundType": "solid", - // "scalesProperties.lineColor": theme.colors.gray3, - "scalesProperties.textColor": theme.colors.bgSecondary, - "paneProperties.legendProperties.showSeriesOHLC": false, - "mainSeriesProperties.candleStyle.upColor": theme.colors.greenLight, - "mainSeriesProperties.candleStyle.downColor": theme.colors.redLight, - }, - custom_css_url: "src/screens/Trade/Chart/tw-styles.css", - }; - // const { location } = window; - useEffect(() => { - const widgetOptions: ChartingLibraryWidgetOptions = { - symbol: defaultProps.symbol as string, - // BEWARE: no trailing slash is expected in feed URL - // tslint:disable-next-line:no-any - datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(defaultProps.datafeedUrl), - interval: defaultProps.interval as ChartingLibraryWidgetOptions["interval"], - timeframe: defaultProps.timeframe, - container: chartContainerRef.current, - library_path: defaultProps.libraryPath as string, +// const TVChartContainer = () => { +// // const vm = useSpotTradeScreenVM(); +// const chartContainerRef = useRef() as React.MutableRefObject; +// const theme = useTheme(); +// const defaultProps: Omit = { +// // symbol: `${vm.token0.symbol}/${vm.token1.symbol}`, +// symbol: `BTC/USDC`, +// interval: "30" as ResolutionString, +// timeframe: "1D" as ResolutionString, +// datafeedUrl: TV_DATAFEED, +// libraryPath: "/charting_library/", +// chartsStorageUrl: CHARTS_STORAGE, +// chartsStorageApiVersion: "1.1", +// clientId: "tradingview.com", +// userId: "public_user_id", +// fullscreen: false, +// autosize: true, +// studiesOverrides: {}, +// overrides: { +// "paneProperties.background": theme.colors.bgSecondary, +// "paneProperties.backgroundType": "solid", +// // "scalesProperties.lineColor": theme.colors.gray3, +// "scalesProperties.textColor": theme.colors.bgSecondary, +// "paneProperties.legendProperties.showSeriesOHLC": false, +// "mainSeriesProperties.candleStyle.upColor": theme.colors.greenLight, +// "mainSeriesProperties.candleStyle.downColor": theme.colors.redLight, +// }, +// custom_css_url: "src/screens/Trade/Chart/tw-styles.css", +// }; +// // const { location } = window; +// useEffect(() => { +// const widgetOptions: ChartingLibraryWidgetOptions = { +// symbol: defaultProps.symbol as string, +// // BEWARE: no trailing slash is expected in feed URL +// // tslint:disable-next-line:no-any +// datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(defaultProps.datafeedUrl), +// interval: defaultProps.interval as ChartingLibraryWidgetOptions["interval"], +// timeframe: defaultProps.timeframe, +// container: chartContainerRef.current, +// library_path: defaultProps.libraryPath as string, - locale: getLanguageFromURL() || "en", - disabled_features: [ - "symbol_info", - "use_localstorage_for_settings", - "header_widget", - "header_symbol_search", - "symbol_search_hot_key", - "header_resolutions", - "header_settings", - "header_indicators", - "header_compare", - "header_screenshot", - "header_fullscreen_button", - "left_toolbar", - "control_bar", - "timeframes_toolbar", - ], - enabled_features: ["study_templates"], - // charts_storage_url: defaultProps.chartsStorageUrl, - charts_storage_api_version: defaultProps.chartsStorageApiVersion, - client_id: defaultProps.clientId, - user_id: defaultProps.userId, - fullscreen: defaultProps.fullscreen, - autosize: defaultProps.autosize, - studies_overrides: defaultProps.studiesOverrides, - overrides: defaultProps.overrides, - theme: "dark", - // custom_css_url: `${location.origin}/tw-chart-styles.css`, - }; - const tvWidget = new widget(widgetOptions); - // tvWidget.onChartReady(() => { - // tvWidget.headerReady().then(() => { - // const button = tvWidget.createButton(); - // button.setAttribute("title", "Click to show a notification popup"); - // button.classList.add("apply-common-tooltip"); - // button.addEventListener("click", () => - // tvWidget.showNoticeDialog({ - // title: "Notification", - // body: "Press and hold ⌘ while zooming to maintain the chart position", - // callback: () => { - // console.log("Noticed!"); - // }, - // }) - // ); - // button.innerHTML = "Check API"; - // }); - // }); +// locale: getLanguageFromURL() || "en", +// disabled_features: [ +// "symbol_info", +// "use_localstorage_for_settings", +// "header_widget", +// "header_symbol_search", +// "symbol_search_hot_key", +// "header_resolutions", +// "header_settings", +// "header_indicators", +// "header_compare", +// "header_screenshot", +// "header_fullscreen_button", +// "left_toolbar", +// "control_bar", +// "timeframes_toolbar", +// ], +// enabled_features: ["study_templates"], +// // charts_storage_url: defaultProps.chartsStorageUrl, +// charts_storage_api_version: defaultProps.chartsStorageApiVersion, +// client_id: defaultProps.clientId, +// user_id: defaultProps.userId, +// fullscreen: defaultProps.fullscreen, +// autosize: defaultProps.autosize, +// studies_overrides: defaultProps.studiesOverrides, +// overrides: defaultProps.overrides, +// theme: "dark", +// // custom_css_url: `${location.origin}/tw-chart-styles.css`, +// }; +// const tvWidget = new widget(widgetOptions); +// // tvWidget.onChartReady(() => { +// // tvWidget.headerReady().then(() => { +// // const button = tvWidget.createButton(); +// // button.setAttribute("title", "Click to show a notification popup"); +// // button.classList.add("apply-common-tooltip"); +// // button.addEventListener("click", () => +// // tvWidget.showNoticeDialog({ +// // title: "Notification", +// // body: "Press and hold ⌘ while zooming to maintain the chart position", +// // callback: () => { +// // console.log("Noticed!"); +// // }, +// // }) +// // ); +// // button.innerHTML = "Check API"; +// // }); +// // }); - return () => { - tvWidget.remove(); - }; - }); +// return () => { +// tvWidget.remove(); +// }; +// }); - return
; -}; +// return
; +// }; -export default observer(TVChartContainer); +// export default observer(TVChartContainer); diff --git a/spark-frontend/src/screens/TradeScreen/Chart/TradingViewWidget.tsx b/spark-frontend/src/screens/TradeScreen/Chart/TradingViewWidget.tsx index 3279b045..097de949 100644 --- a/spark-frontend/src/screens/TradeScreen/Chart/TradingViewWidget.tsx +++ b/spark-frontend/src/screens/TradeScreen/Chart/TradingViewWidget.tsx @@ -5,76 +5,11 @@ import { observer } from "mobx-react"; let tvScriptLoadingPromise: Promise; -const Root = styled.div` - height: 100%; - width: 100%; - overflow: hidden; - - & > div { - margin: -2px 0 0 -2px; - height: calc(100% + 4px); - width: calc(100% + 4px); - } -`; - -// export default function TradingViewWidget() { -// const onLoadScriptRef = useRef(); -// const { tradeStore } = useStores(); -// const theme = useTheme(); -// useEffect(() => { -// (onLoadScriptRef as any).current = createWidget(tradeStore.isMarketPerp ? "OKX:BTCUSDC" : "OKX:UNIUSDC"); -// -// if (!tvScriptLoadingPromise) { -// tvScriptLoadingPromise = new Promise((resolve) => { -// const script = document.createElement("script"); -// script.id = "tradingview-widget-loading-script"; -// script.src = "https://s3.tradingview.com/tv.js"; -// script.type = "text/javascript"; -// script.onload = resolve; -// -// document.head.appendChild(script); -// }); -// } -// -// tvScriptLoadingPromise.then(() => onLoadScriptRef.current && (onLoadScriptRef as any).current()); -// -// return () => { -// (onLoadScriptRef as any).current = null; -// }; -// -// function createWidget(symbol: string) { -// if (document.getElementById("tradingview_3f939") && "TradingView" in window) { -// new (window as any).TradingView.widget({ -// autosize: true, -// symbol: symbol, -// interval: "30", -// timezone: "Etc/UTC", -// theme: "dark", -// style: "1", -// locale: "en", -// enable_publishing: false, -// backgroundColor: theme.colors.bgPrimary, -// gridColor: theme.colors.borderSecondary, -// hide_top_toolbar: true, -// hide_legend: true, -// save_image: false, -// container_id: "tradingview_3f939", -// }); -// } -// } -// }, [theme]); -// -// return ( -// -//
-// -// ); -// } - const TradingViewWidget = observer(() => { const onLoadScriptRef = useRef(); - // const { tradeStore } = useStores(); + const theme = useTheme(); + useEffect(() => { (onLoadScriptRef as any).current = createWidget; @@ -124,4 +59,17 @@ const TradingViewWidget = observer(() => { ); }); + export default TradingViewWidget; + +const Root = styled.div` + height: 100%; + width: 100%; + overflow: hidden; + + & > div { + margin: -2px 0 0 -2px; + height: calc(100% + 4px); + width: calc(100% + 4px); + } +`; diff --git a/spark-frontend/src/services/SpotMarketService.ts b/spark-frontend/src/services/SpotMarketService.ts index dbd70191..4fee3e63 100644 --- a/spark-frontend/src/services/SpotMarketService.ts +++ b/spark-frontend/src/services/SpotMarketService.ts @@ -69,13 +69,13 @@ export async function fetchMarketCreateEvents(limit: number): Promise