fix(trading): trading view on multiple tabs

apps/trading/.env

@@ -29,5 +29,5 @@ NX_REFERRALS=true
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
-NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
-NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=
+# NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
+# NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

libs/trading-view/src/lib/trading-view.tsx

@@ -41,16 +41,17 @@ export const TradingView = ({
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const widgetRef = useRef<IChartingLibraryWidget>();
 
-  const datafeed = useDatafeed();
-
   const prevMarketId = usePrevious(marketId);
   const prevTheme = usePrevious(theme);
 
+  const datafeed = useDatafeed(marketId);
+
   useEffect(() => {
     // Widget already created
     if (widgetRef.current !== undefined) {
       // Update the symbol if changed
       if (marketId !== prevMarketId) {
+        datafeed.setSymbol(marketId);
         widgetRef.current.setSymbol(
           marketId,
           (interval ? interval : '15') as TVResolutionString,

libs/trading-view/src/lib/use-datafeed.ts

@@ -44,14 +44,22 @@ const configurationData: DatafeedConfiguration = {
   supported_resolutions: supportedResolutions as ResolutionString[],
 } as const;
 
-export const useDatafeed = () => {
+// HACK: local handle for market id
+let requestedSymbol: string | undefined = undefined;
+
+export const useDatafeed = (marketId: string) => {
   const hasHistory = useRef(false);
   const subRef = useRef<Subscription>();
   const client = useApolloClient();
 
   const datafeed = useMemo(() => {
-    const feed: IBasicDataFeed = {
+    const feed: IBasicDataFeed & { setSymbol: (symbol: string) => void } = {
+      setSymbol: (symbol: string) => {
+        // re-setting the symbol so it could be consumed by `resolveSymbol`
+        requestedSymbol = symbol;
+      },
       onReady: (callback) => {
+        requestedSymbol = marketId;
         setTimeout(() => callback(configurationData));
       },
 
@@ -68,7 +76,7 @@ export const useDatafeed = () => {
           const result = await client.query<SymbolQuery, SymbolQueryVariables>({
             query: SymbolDocument,
             variables: {
-              marketId,
+              marketId: requestedSymbol || marketId,
             },
           });
 
@@ -242,7 +250,7 @@ export const useDatafeed = () => {
     };
 
     return feed;
-  }, [client]);
+  }, [client, marketId]);
 
   useEffect(() => {
     return () => {

nx.json

@@ -11,7 +11,9 @@
           "echo $NX_VEGA_URL",
           "echo $NX_TENDERMINT_URL",
           "echo $NX_TENDERMINT_WEBSOCKET_URL",
-          "echo $NX_ETHEREUM_PROVIDER_URL"
+          "echo $NX_ETHEREUM_PROVIDER_URL",
+          "echo $NX_CHARTING_LIBRARY_PATH",
+          "echo $NX_CHARTING_LIBRARY_HASH"
         ]
       }
     }