feat: get hash from env

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=

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}
         />
       );
     }

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;

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) => {

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);
+    }
   });
 };
 

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;