From 60a3129d9efea3b9825f0f7d0e7a31d64a957b7b Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Sun, 26 Nov 2023 21:05:49 -0800
Subject: [PATCH] feat: get hash from env

---
 apps/trading/.env.stagnet1                            |  1 +
 .../components/chart-container/chart-container.tsx    |  5 +++--
 libs/environment/src/hooks/use-environment.ts         |  4 ++++
 libs/environment/src/utils/validate-environment.ts    |  1 +
 libs/react-helpers/src/hooks/use-script.ts            | 11 +++++++----
 libs/trading-view/src/lib/trading-view.tsx            |  7 +++----
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/trading/.env.stagnet1 b/apps/trading/.env.stagnet1
index 4b7de8a4a..354af83f3 100644
--- a/apps/trading/.env.stagnet1
+++ b/apps/trading/.env.stagnet1
@@ -27,3 +27,4 @@ NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
 
 NX_CHARTING_LIBRARY_PATH=http://localhost:8080/charting_library/
+NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=
diff --git a/apps/trading/components/chart-container/chart-container.tsx b/apps/trading/components/chart-container/chart-container.tsx
index 30840ff33..0f3aea89f 100644
--- a/apps/trading/components/chart-container/chart-container.tsx
+++ b/apps/trading/components/chart-container/chart-container.tsx
@@ -13,7 +13,7 @@ import { useEnvironment } from '@vegaprotocol/environment';
  * Renders either the pennant chart or the tradingview chart
  */
 export const ChartContainer = ({ marketId }: { marketId: string }) => {
-  const { CHARTING_LIBRARY_PATH } = useEnvironment();
+  const { CHARTING_LIBRARY_PATH, CHARTING_LIBRARY_HASH } = useEnvironment();
 
   const {
     chartlib,
@@ -46,7 +46,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
     return pennantChart;
   }
 
-  if (!CHARTING_LIBRARY_PATH) {
+  if (!CHARTING_LIBRARY_PATH || !CHARTING_LIBRARY_HASH) {
     return pennantChart;
   }
 
@@ -56,6 +56,7 @@ export const ChartContainer = ({ marketId }: { marketId: string }) => {
         <TradingViewContainer
           marketId={marketId}
           libraryPath={CHARTING_LIBRARY_PATH}
+          libraryHash={CHARTING_LIBRARY_HASH}
         />
       );
     }
diff --git a/libs/environment/src/hooks/use-environment.ts b/libs/environment/src/hooks/use-environment.ts
index eae703797..a8820d345 100644
--- a/libs/environment/src/hooks/use-environment.ts
+++ b/libs/environment/src/hooks/use-environment.ts
@@ -258,6 +258,10 @@ const compileEnvVars = () => {
       'NX_CHARTING_LIBRARY_PATH',
       process.env['NX_CHARTING_LIBRARY_PATH']
     ),
+    CHARTING_LIBRARY_HASH: windowOrDefault(
+      'NX_CHARTING_LIBRARY_HASH',
+      process.env['NX_CHARTING_LIBRARY_HASH']
+    ),
   };
 
   return env;
diff --git a/libs/environment/src/utils/validate-environment.ts b/libs/environment/src/utils/validate-environment.ts
index 1c1059c3e..19e0f806b 100644
--- a/libs/environment/src/utils/validate-environment.ts
+++ b/libs/environment/src/utils/validate-environment.ts
@@ -61,6 +61,7 @@ export const envSchema = z
     CHROME_EXTENSION_URL: z.optional(z.string()),
     MOZILLA_EXTENSION_URL: z.optional(z.string()),
     CHARTING_LIBRARY_PATH: z.optional(z.string()),
+    CHARTING_LIBRARY_HASH: z.optional(z.string()),
   })
   .refine(
     (data) => {
diff --git a/libs/react-helpers/src/hooks/use-script.ts b/libs/react-helpers/src/hooks/use-script.ts
index 2074bbd08..6faaf3d7f 100644
--- a/libs/react-helpers/src/hooks/use-script.ts
+++ b/libs/react-helpers/src/hooks/use-script.ts
@@ -1,17 +1,20 @@
 import { useEffect, useState } from 'react';
 
-const appendScript = (url: string, integrity: string) => {
+const appendScript = (url: string, hash: string) => {
   return new Promise((resolve, reject) => {
     const script = document.createElement('script');
 
+    script.id = hash;
     script.src = url;
     script.async = true;
-    script.crossOrigin = 'anonymous';
-    script.integrity = integrity;
+    script.crossOrigin = 'anonymous'; // make sure sri is respected with cross origin request
+    script.integrity = `sha256-${hash}`;
     script.onload = () => resolve(script);
     script.onerror = () => reject(new Error(`failed to load script: ${url}`));
 
-    document.body.appendChild(script);
+    if (!document.getElementById(hash)) {
+      document.body.appendChild(script);
+    }
   });
 };
 
diff --git a/libs/trading-view/src/lib/trading-view.tsx b/libs/trading-view/src/lib/trading-view.tsx
index 6e341cced..406dd86b0 100644
--- a/libs/trading-view/src/lib/trading-view.tsx
+++ b/libs/trading-view/src/lib/trading-view.tsx
@@ -12,19 +12,18 @@ import {
 */
 import { useDatafeed } from './use-datafeed';
 
-// TODO: get actual hash
-const INTEGRITY_HASH = '';
-
 export const TradingViewContainer = ({
   marketId,
   libraryPath,
+  libraryHash,
 }: {
   marketId: string;
   libraryPath: string;
+  libraryHash: string;
 }) => {
   const scriptState = useScript(
     libraryPath + 'charting_library.standalone.js',
-    INTEGRITY_HASH
+    libraryHash
   );
 
   if (scriptState === 'pending') return null;