diff --git a/directory/sail.json b/directory/sail.json index b53927ee..d0a9a070 100644 --- a/directory/sail.json +++ b/directory/sail.json @@ -7,11 +7,11 @@ "description": "Displays a chart of a given stock, using the TradingView applications", "type": "web", "details": { - "url": "/static/example-apps/tradingview/chart.html" + "url": "/static/example-apps/tradingview/chart/chart.html" }, "screenshots": [ { - "src": "/static/example-apps/tradingview/chart.png", + "src": "/static/example-apps/tradingview/chart/chart.png", "label": "Demo Screenshot" } ], @@ -36,6 +36,42 @@ } } }, + { + "appId": "trading-view-news-1", + "name": "Top Stories", + "title": "Top Stories", + "description": "Help your audience keep track of what's happening in the crypto and stock markets with our daily news briefs – designed to be read in 20 seconds or less.", + "type": "web", + "details": { + "url": "/static/example-apps/tradingview/top-stories/top-stories.html" + }, + "screenshots": [ + { + "src": "/static/example-apps/tradingview/top-stories/top-stories.png", + "label": "Demo Screenshot" + } + ], + "hostManifests": {}, + "version": "1.0.0", + "publisher": "FINOS", + "icons": [ + { + "src": "/static/example-apps/tradingview/tradingview-icon.png" + } + ], + "interop": { + "intents": { + "listensFor": { + "ViewNews": { + "contexts": [ + "fdc3.instrument" + ], + "displayName": "View News" + } + } + } + } + }, { "appId": "workbench", "name": "FDC3 Workbench", diff --git a/fdc3-workbench/package-lock.json b/fdc3-workbench/package-lock.json index f2369711..e6cf3842 100644 --- a/fdc3-workbench/package-lock.json +++ b/fdc3-workbench/package-lock.json @@ -2995,9 +2995,9 @@ } }, "node_modules/@types/node": { - "version": "20.16.8", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.8.tgz", - "integrity": "sha512-sbo5JmfbZNkyDv+2HCccr9Y9ZkKJBMTru7UdAsCojMGjKNjdaOV73bqEW242QrHEZL8R4LbHMrW+FHB5lZ5/bw==", + "version": "20.16.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.9.tgz", + "integrity": "sha512-rkvIVJxsOfBejxK7I0FO5sa2WxFmJCzoDwcd88+fq/CUfynNywTo/1/T6hyFz22CyztsnLS9nVlHOnTI36RH5w==", "dev": true, "dependencies": { "undici-types": "~6.19.2" diff --git a/src/example-apps/tradingview/TradingViewWidget.tsx b/src/example-apps/tradingview/chart/TradingViewWidget.tsx similarity index 100% rename from src/example-apps/tradingview/TradingViewWidget.tsx rename to src/example-apps/tradingview/chart/TradingViewWidget.tsx diff --git a/src/example-apps/tradingview/chart.tsx b/src/example-apps/tradingview/chart/chart.tsx similarity index 100% rename from src/example-apps/tradingview/chart.tsx rename to src/example-apps/tradingview/chart/chart.tsx diff --git a/src/example-apps/tradingview/top-stories/TradingViewWidget.tsx b/src/example-apps/tradingview/top-stories/TradingViewWidget.tsx new file mode 100644 index 00000000..f23783d2 --- /dev/null +++ b/src/example-apps/tradingview/top-stories/TradingViewWidget.tsx @@ -0,0 +1,73 @@ +// TradingViewWidget.jsx +import { getAgent } from "@kite9/fdc3" +import { useEffect, useRef, memo, useState } from "react" + +export const TradingViewWidget = () => { + const container: any = useRef() + + const [state, setState] = useState("MSFT") + + useEffect(() => { + getAgent().then((fdc3) => { + fdc3.addIntentListener("ViewChart", async (context) => { + setState(context?.id?.ticker) + }) + + fdc3.addContextListener("fdc3.instrument", async (context) => { + setState(context?.id?.ticker) + }) + }) + }, []) + + useEffect(() => { + var script: HTMLScriptElement | null = null + + script = document.getElementById( + "tradingview-widget-script", + ) as HTMLScriptElement + + if (script) { + container.current.removeChild(script) + } + + script = document.createElement("script") + container.current.appendChild(script) + + script!!.id = "tradingview-widget-script" + script.src = + "https://s3.tradingview.com/external-embedding/embed-widget-timeline.js" + script.type = "text/javascript" + script.async = true + script.innerHTML = ` + { + "feedMode": "all_symbols", + "isTransparent": false, + "displayMode": "regular", + "colorTheme": "light", + "locale": "en" + }` + }, [state]) + return ( +