update + CSP fix

ronykris · Jan 15, 2025 · aeca6fd · aeca6fd
1 parent 7fe5d6b
commit aeca6fd
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 125 deletions.
diff --git a/dfx.json b/dfx.json
@@ -13,7 +13,11 @@
         "src/deda_frontend/dist"
       ],
       "type": "assets",
-      "workspace": "deda_frontend"
+      "workspace": "deda_frontend",
+      "declarations": {
+        "node_compatibility": true,
+        "exclude": ["internet_identity"]
+      }
     },
     "internet_identity": {
       "type": "custom",

diff --git a/src/deda_frontend/public/.ic-assets.json5 b/src/deda_frontend/public/.ic-assets.json5
@@ -24,7 +24,7 @@
             //   See: https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md.
             // - We added img-src data: because data: images are used often.
             // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
-            "Content-Security-Policy": "default-src 'self';script-src 'self';connect-src 'self' <http://localhost:*> <https://icp0.io> <https://*.icp0.io> <https://icp-api.io> <https://ic0.app;img-src> 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
+            "Content-Security-Policy": "default-src 'self';script-src 'self';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://ic0.app https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
 
             // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
             // To configure permissions go here https://www.permissionspolicy.com/

diff --git a/src/deda_frontend/src/components/AddDataRequestNew.tsx b/src/deda_frontend/src/components/AddDataRequestNew.tsx
@@ -8,8 +8,6 @@ import {
 } from "./ui/card";
 import { Textarea } from "./ui/textarea";
 import React, { useEffect, useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
 import { Principal } from "@dfinity/principal";
 import { RefreshCw, Download } from "lucide-react";
 import {
@@ -21,19 +19,7 @@ import {
 import { Input } from "./ui/input"
 import { useRecoilValue } from 'recoil';
 import { userState } from '../state/userState';
-
-const isLocal = process.env.DFX_NETWORK !== "ic";
-const host = isLocal ? "http://localhost:4943" : "https://ic0.app";
-
-const agent = new HttpAgent({ host: `${host}/?canisterId=${process.env.CANISTER_ID_DEDA_FRONTEND}` });
-if (isLocal) {
-    agent.fetchRootKey().catch(err => {
-        console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-        console.error(err);
-    });
-}
-
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+import { getBackend } from '../lib/getBackend'
 
 interface DataRequest {
     id: string;
@@ -50,7 +36,7 @@ type DataSubmission = {
     verified: boolean;
 };
 
-function ResearcherDashboard() {
+const ResearcherDashboard: React.FC = () => {
 
     const [description, setDescription] = useState<string>('');
     const [reward, setReward] = useState<string>('');
@@ -59,13 +45,29 @@ function ResearcherDashboard() {
     const [loadingDataRequest, setLoadingDataRequest] = useState<boolean>(false)
     const [dataSubmission, setDataSubmission] = useState<DataSubmission[]>([]);
     const [loadingDataSubmission, setLoadingDataSubmission] = useState<boolean>(false)
+    const [backend, setBackend] = useState<any>(null);
 
     const user = useRecoilValue(userState);
 
+    useEffect(() => {
+        const fetchBackend = async () => {
+            try {
+                const backend = await getBackend();
+                setBackend(backend);
+                console.log('Backend: ', backend)
+            } catch (error) {
+                console.error('Error fetching backend:', error);
+            }
+        };
+
+        fetchBackend();
+    }, []);
+
     const addDataRequest = async (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
         try {
             setLoadingDataSubmission(true)
+
             const requestId = await backend.add_data_request(description, BigInt(reward));
             console.log(requestId);
             setResponse(`Data request added successfully with ID: ${requestId}`);
@@ -85,7 +87,6 @@ function ResearcherDashboard() {
         try {
             setLoadingDataRequest(true)
             getDataSubmissions();
-
             const requests = await backend.get_my_data_requests();
             setMyDataRequests(requests as DataRequest[]);
             console.log(requests);

diff --git a/src/deda_frontend/src/components/DataRequestList.tsx b/src/deda_frontend/src/components/DataRequestList.tsx
@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
 import { DataRequest } from '../types';
+import { getBackend } from '../lib/getBackend'
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
-console.log(backend)
 
 const DataRequestList: React.FC = () => {
   const [dataRequests, setDataRequests] = useState<DataRequest[]>([]);
+  const [backend, setBackend] = useState<any>(null);
+
+  useEffect(() => {
+    const fetchBackend = async () => {
+      try {
+        const backend = await getBackend();
+        setBackend(backend);
+        console.log('Backend: ', backend)
+      } catch (error) {
+        console.error('Error fetching backend:', error);
+      }
+    };
+    fetchBackend();
+  }, []);
 
   useEffect(() => {
     const fetchDataRequests = async () => {

diff --git a/src/deda_frontend/src/components/Header.tsx b/src/deda_frontend/src/components/Header.tsx
@@ -6,8 +6,7 @@ import { useRecoilState } from "recoil";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import { Principal } from "@dfinity/principal";
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
+import { getBackend } from '../lib/getBackend'
 
 interface DataSubmission {
     id: string;
@@ -25,19 +24,26 @@ interface DataRequest {
     creator: Principal;
 }
 
-const agent = new HttpAgent({ host: `http://localhost:4943/?canisterId=${process.env.CANISTER_ID_DEDA_FRONTEND}` });
-agent.fetchRootKey().catch(err => {
-    console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-    console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
-
 export default function Header() {
 
     const [user, setUser] = useRecoilState(userState);
     const navigate = useNavigate();
     const [allDataRequests, setAllDataRequests] = useState<DataRequest[]>([]);
     const [allDataSubmission, setAllDataSubmission] = useState<DataSubmission[]>([])
+    const [backend, setBackend] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchBackend = async () => {
+            try {
+                const backend = await getBackend();
+                setBackend(backend);
+                console.log('Backend: ', backend)
+            } catch (error) {
+                console.error('Error fetching backend:', error);
+            }
+        };    
+        fetchBackend();
+    }, []);
 
     useEffect(() => {
         const userData = retrieveUser();
@@ -46,6 +52,11 @@ export default function Header() {
         }
     }, []);
 
+    useEffect(() => {
+        getDataRequests();
+        getDataSubmissions();
+    }, []);
+
     const handleLogout = () => {
         clearUser(); // Clear user data from local storage
         setUser({ id: null, balance: 0, role: "User" }); // Reset user state

diff --git a/src/deda_frontend/src/components/Login.tsx b/src/deda_frontend/src/components/Login.tsx
@@ -1,30 +1,13 @@
 import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { userState } from '../state/userState';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory as deda_backend_idl } from '../../../declarations/deda_backend';
 import { Principal } from '@dfinity/principal';
 import { AuthClient } from '@dfinity/auth-client';
 import Header from './Header';
 import { storeUser } from '../lib/cacheFunctions';
 import { useNavigate } from 'react-router-dom';
+import { getBackend } from '../lib/getBackend'
 
-const canisterId = process.env.CANISTER_ID_DEDA_BACKEND as string;
-
-const isLocal = process.env.DFX_NETWORK !== "ic";
-const host = isLocal ? "http://localhost:4943" : "https://ic0.app";
-
-//const agent = new HttpAgent({host: "http://127.0.0.1:4943"}); //http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943/
-const agent = new HttpAgent({host: `${host}/?canisterId=${process.env.CANISTER_ID_DEDA_FRONTEND}`});
-if (isLocal) {
-  agent.fetchRootKey().catch(err => {
-    console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-    console.error(err);
-  });
-}
-
-const backend = Actor.createActor(deda_backend_idl as any, { agent, canisterId: canisterId });
-console.log(backend);
 
 const Login: React.FC = () => {
   const [user, setUser] = useRecoilState(userState);
@@ -51,7 +34,9 @@ const Login: React.FC = () => {
           return `https://identity.ic0.app`;
         }
       };
-
+
+      const backend = await getBackend()
+
       await authClient.login({
         //identityProvider: `http://127.0.0.1:4943/?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`,
         //identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943/`,
@@ -62,10 +47,11 @@ const Login: React.FC = () => {
           console.log(identity)
           const principal = Principal.fromText(identity);
           console.log(principal)
+
           try {
+            console.log(backend)
             const balance = (await backend.get_balance(principal)) as unknown as number;
-            console.log(balance)
-
+            console.log(balance)            
             const result = await backend.login(principal, role);
             console.log(result);
             console.log({ id: principal, balance, role })

diff --git a/src/deda_frontend/src/components/PayContributors.tsx b/src/deda_frontend/src/components/PayContributors.tsx
@@ -1,22 +1,27 @@
-import React, { useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import * as dotenv from 'dotenv';
-//dotenv.config()
-
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+import React, { useEffect, useState } from 'react';
+import { getBackend } from '../lib/getBackend'
 
 const PayContributors: React.FC = () => {
   const [submissionId, setSubmissionId] = useState<string>('');
   const [response, setResponse] = useState<string>('');
+  const [backend, setBackend] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchBackend = async () => {
+            try {
+                const backend = await getBackend();
+                setBackend(backend);
+                console.log('Backend: ', backend)
+            } catch (error) {
+                console.error('Error fetching backend:', error);
+            }
+        };    
+        fetchBackend();
+    }, []);
 
   const payContributors = async () => {
     try {
+
       await backend.pay_contributors(Number(submissionId)); // pay_contributors function invoked
       setResponse('Contributors paid successfully');
     } catch (error) {

diff --git a/src/deda_frontend/src/components/StoreCleanedData.tsx b/src/deda_frontend/src/components/StoreCleanedData.tsx
@@ -1,21 +1,26 @@
-import React, { useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import * as dotenv from 'dotenv';
-//dotenv.config()
-
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+import React, { useEffect, useState } from 'react';
+import { getBackend } from '../lib/getBackend'
 
 const StoreCleanedData: React.FC = () => {
   const [requestId, setRequestId] = useState<string>('');
   const [location, setLocation] = useState<string>('');
   const [response, setResponse] = useState<string>('');
 
+  const [backend, setBackend] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchBackend = async () => {
+            try {
+                const backend = await getBackend();
+                setBackend(backend);
+                console.log('Backend: ', backend)
+            } catch (error) {
+                console.error('Error fetching backend:', error);
+            }
+        };    
+        fetchBackend();
+    }, []);
+
   const storeCleanedData = async () => {
     try {
       await backend.store_cleaned_data(Number(requestId), location);

diff --git a/src/deda_frontend/src/components/SubmitData.tsx b/src/deda_frontend/src/components/SubmitData.tsx
@@ -1,21 +1,28 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { userState } from '../state/userState';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
+import { getBackend } from '../lib/getBackend'
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
 const SubmitData: React.FC = () => {
   const user = useRecoilValue(userState);
   const [requestId, setRequestId] = useState<string>('');
   const [location, setLocation] = useState<string>('');
   const [response, setResponse] = useState<string>('');
+  const [backend, setBackend] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchBackend = async () => {
+            try {
+                const backend = await getBackend();
+                setBackend(backend);
+                console.log('Backend: ', backend)
+            } catch (error) {
+                console.error('Error fetching backend:', error);
+            }
+        };    
+        fetchBackend();
+    }, []);
 
   const submitData = async () => {
     try {