From 1fb81fdcd8271fb0cb15af9a1e45478842ced228 Mon Sep 17 00:00:00 2001
From: Rob Moffat <rob@kite9.com>
Date: Wed, 25 Sep 2024 23:51:32 +0100
Subject: [PATCH] Added Trading View Top Stories Widget

---
 directory/sail.json                           |  40 +++++++++-
 fdc3-workbench/package-lock.json              |   6 +-
 .../{ => chart}/TradingViewWidget.tsx         |   0
 .../tradingview/{ => chart}/chart.tsx         |   0
 .../top-stories/TradingViewWidget.tsx         |  73 ++++++++++++++++++
 .../tradingview/top-stories/top-stories.tsx   |   7 ++
 .../tradingview/{ => chart}/chart.html        |   2 +-
 .../tradingview/{ => chart}/chart.png         | Bin
 .../tradingview/top-stories/top-stories.html  |  14 ++++
 9 files changed, 136 insertions(+), 6 deletions(-)
 rename src/example-apps/tradingview/{ => chart}/TradingViewWidget.tsx (100%)
 rename src/example-apps/tradingview/{ => chart}/chart.tsx (100%)
 create mode 100644 src/example-apps/tradingview/top-stories/TradingViewWidget.tsx
 create mode 100644 src/example-apps/tradingview/top-stories/top-stories.tsx
 rename static/example-apps/tradingview/{ => chart}/chart.html (79%)
 rename static/example-apps/tradingview/{ => chart}/chart.png (100%)
 create mode 100644 static/example-apps/tradingview/top-stories/top-stories.html

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 (
+    <div
+      className="tradingview-widget-container"
+      ref={container}
+      style={{ height: "100%", width: "100%" }}
+    >
+      <div
+        className="tradingview-widget-container__widget"
+        style={{ height: "calc(100% - 32px)", width: "100%" }}
+      ></div>
+      <div className="tradingview-widget-copyright">
+        <a
+          href="https://www.tradingview.com/"
+          rel="noopener nofollow"
+          target="_blank"
+        >
+          <span className="blue-text"> Track all markets on TradingView </span>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default memo(TradingViewWidget)
diff --git a/src/example-apps/tradingview/top-stories/top-stories.tsx b/src/example-apps/tradingview/top-stories/top-stories.tsx
new file mode 100644
index 00000000..16b6bfbf
--- /dev/null
+++ b/src/example-apps/tradingview/top-stories/top-stories.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from "react-dom/client";
+import TradingViewWidget from "./TradingViewWidget";
+
+const container = document.getElementById("app");
+const root = createRoot(container!);
+
+root.render(<TradingViewWidget />);
diff --git a/static/example-apps/tradingview/chart.html b/static/example-apps/tradingview/chart/chart.html
similarity index 79%
rename from static/example-apps/tradingview/chart.html
rename to static/example-apps/tradingview/chart/chart.html
index 420d95c5..5fef0ec7 100644
--- a/static/example-apps/tradingview/chart.html
+++ b/static/example-apps/tradingview/chart/chart.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <script
       type="module"
-      src="/src/example-apps/tradingview/chart.tsx"
+      src="/src/example-apps/tradingview/chart/chart.tsx"
     ></script>
   </head>
 
diff --git a/static/example-apps/tradingview/chart.png b/static/example-apps/tradingview/chart/chart.png
similarity index 100%
rename from static/example-apps/tradingview/chart.png
rename to static/example-apps/tradingview/chart/chart.png
diff --git a/static/example-apps/tradingview/top-stories/top-stories.html b/static/example-apps/tradingview/top-stories/top-stories.html
new file mode 100644
index 00000000..8c24aba8
--- /dev/null
+++ b/static/example-apps/tradingview/top-stories/top-stories.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <title>FDC3 TradingView Chart</title>
+    <meta charset="UTF-8" />
+    <script
+      type="module"
+      src="/src/example-apps/tradingview/top-stories/top-stories.tsx"
+    ></script>
+  </head>
+
+  <body>
+    <div id="app">Content loads here</div>
+  </body>
+</html>