Added dynamic AccessControlConditions interface

.wundergraph/wundergraph.config.ts

@@ -59,7 +59,7 @@ configureWunderGraphApplication({
 		tokenBased: {
 			providers: [
 				{
-					userInfoEndpoint: 'http://localhost:3000/jwt/wunderauth',
+					userInfoEndpoint: 'http://localhost:3000/server/wundergraph',
 				},
 			],
 		},

src/lib/ACCs.svelte

@@ -1,25 +1,74 @@
-<script>
-  let accs = [
-    // Mock data
-    { id: 1, name: "ACC 1" },
-    { id: 2, name: "ACC 2" },
-    { id: 3, name: "ACC 3" },
-  ];
+<script lang="ts">
+  import Cookies from "js-cookie";
+  import {
+    createACC,
+    deleteACC,
+  } from "./services/mutateAccessControlConditions.ts";
+  let signingConditions =
+    JSON.parse(localStorage.getItem("signingConditions")) || [];
+  let newParameter = "";
+  let newComparator = "";
+  let newValue = "";
 
-  function createNewACC() {
-    // Logic for creating a new ACC goes here
-    console.log("Create new ACC button clicked");
+  async function handleCreateNewACC() {
+    await createACC(newParameter, newComparator, newValue);
+    signingConditions =
+      JSON.parse(localStorage.getItem("signingConditions")) || [];
+    Cookies.set("signingConditions", JSON.stringify(signingConditions));
+  }
+
+  async function handleDeleteACC(index) {
+    await deleteACC(index);
+    signingConditions =
+      JSON.parse(localStorage.getItem("signingConditions")) || [];
   }
 </script>
 
 <div class="p-12">
   <h1>Access Control Conditions</h1>
-  {#each accs as acc (acc.id)}
-    <p>{acc.name}</p>
+  {#each signingConditions as condition, index (index)}
+    {#each condition.accs as acc}
+      <div class="text-lg p-4 border rounded-md shadow-md">
+        <span class="text-xl"
+          ><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b
+          ></span
+        >
+        <p>
+          {acc.parameters.join(", ")}
+          {acc.returnValueTest.comparator}
+          {acc.returnValueTest.value}
+        </p>
+        <p>
+          <span class="text-xs">{JSON.stringify(condition)}</span>
+        </p>
+      </div>
+    {/each}
+    <p />
+    <p />
+    <button
+      on:click={() => handleDeleteACC(index)}
+      class="mt-2 px-4 py-2 bg-red-500 text-white rounded-md">Delete ACC</button
+    >
   {/each}
-  <button on:click={createNewACC}>Create New ACC</button>
+  <div class="mt-4">
+    <input
+      bind:value={newParameter}
+      placeholder="Parameter"
+      class="px-4 py-2 border rounded-md mr-2"
+    />
+    <input
+      bind:value={newComparator}
+      placeholder="Comparator"
+      class="px-4 py-2 border rounded-md mr-2"
+    />
+    <input
+      bind:value={newValue}
+      placeholder="Value"
+      class="px-4 py-2 border rounded-md mr-2"
+    />
+    <button
+      on:click={handleCreateNewACC}
+      class="px-4 py-2 bg-blue-500 text-white rounded-md">Create New ACC</button
+    >
+  </div>
 </div>
-
-<style>
-  /* Add your Tailwind CSS classes here */
-</style>

src/lib/services/createJWT.ts

@@ -27,12 +27,14 @@ export const createJWT = async () => {
             contractAddress: '',
             standardContractType: '',
             chain: 'xdai',
-            method: 'eth_getBalance',
-            parameters: [':userAddress', 'latest'],
+            method: '',
+            parameters: [
+                ':userAddress',
+            ],
             returnValueTest: {
-                comparator: '>=',
-                value: '1000000000000',
-            },
+                comparator: '=',
+                value: '0x4b975F10baf1153A5CC688B52d55809cd2d8BB57'
+            }
         },
     ];
 

src/lib/services/mutateAccessControlConditions.ts

@@ -0,0 +1,66 @@
+import { LitNodeClient } from "@lit-protocol/lit-node-client";
+import type { AccsEVMParams } from "@lit-protocol/types";
+
+export const createACC = async (newParameter, newComparator, newValue) => {
+    const litNodeClient = new LitNodeClient({ litNetwork: "serrano" });
+    await litNodeClient.connect();
+
+    const me = JSON.parse(localStorage.getItem('me'));
+    if (!me || !me.sessionSigs) {
+        throw new Error('No sessionSigs found in local storage');
+    }
+
+    const newACC = {
+        conditionType: "evmBasic",
+        contractAddress: "",
+        standardContractType: "",
+        chain: "xdai",
+        method: "",
+        parameters: [newParameter],
+        returnValueTest: {
+            comparator: newComparator,
+            value: newValue,
+        },
+    };
+
+    const resourceId = {
+        baseUrl: "https://localhost:3000",
+        path: "/server/wundergraph",
+        orgId: "°",
+        role: "owner",
+        extraData: "",
+    };
+
+    const sessionSigs = me.sessionSigs;
+
+    await litNodeClient.saveSigningCondition({
+        unifiedAccessControlConditions: [newACC],
+        sessionSigs,
+        resourceId,
+        chain: "litSessionSign",
+    });
+
+    const jwt = await litNodeClient.getSignedToken({
+        unifiedAccessControlConditions: [newACC],
+        chain: 'xdai',
+        sessionSigs,
+        resourceId
+    });
+
+    let signingConditions = JSON.parse(localStorage.getItem("signingConditions")) || [];
+    signingConditions = [
+        ...signingConditions,
+        {
+            accs: [newACC],
+            resourceId,
+            jwt,
+        },
+    ];
+    localStorage.setItem("signingConditions", JSON.stringify(signingConditions));
+};
+
+export const deleteACC = async (index) => {
+    let signingConditions = JSON.parse(localStorage.getItem("signingConditions")) || [];
+    signingConditions = signingConditions.filter((_, i) => i !== index);
+    localStorage.setItem("signingConditions", JSON.stringify(signingConditions));
+};

src/routes/+layout.svelte

@@ -20,7 +20,21 @@
 
   export let data: LayoutData;
 
-  const token = Cookies.get("token");
+  const signingConditionsCookie = Cookies.get("signingConditions");
+  let signingConditions = signingConditionsCookie
+    ? JSON.parse(signingConditionsCookie)
+    : [];
+  console.log("layout signingConditions: ", signingConditions); // Add this line
+  let correctCondition = signingConditions
+    ? signingConditions.find(
+        (condition) =>
+          condition.resourceId.baseUrl === "https://localhost:3000" &&
+          condition.resourceId.path === "/server/wundergraph"
+      )
+    : null;
+  console.log("layout correctcondition: ", correctCondition); // Update this line
+
+  const token = correctCondition ? correctCondition.jwt : null;
 
   googleSession.subscribe((value) => {
     activeSession = value.activeSession;
@@ -31,7 +45,7 @@
   });
 
   if (token) {
-    console.log("layout jwt token: " + token);
+    console.log("layout token: ", token); // Update this line
     client.setAuthorizationToken(token);
   }
 </script>

src/routes/acc/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import ACCs from "$lib/ACCs.svelte";
+</script>
+
+<ACCs />

src/routes/me/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createQuery } from "../../lib/wundergraph";
-  import JWT from "$lib/JWT.svelte";
 
   const projectsQuery = createQuery({
     operationName: "Projects",
@@ -8,8 +7,6 @@
 </script>
 
 <div class="w-full h-full overflow-y-auto">
-  <JWT />
-
   <div class="w-full h-full results">
     {#if $projectsQuery.isLoading}
       <p>Loading...</p>

src/routes/server/wundergraph/+server.ts

@@ -13,18 +13,19 @@ export async function GET({ request }) {
     }
 
     try {
-        const { payload } = await verifyJwt({ jwt: token });
+        const { verified, payload } = await verifyJwt({ jwt: token });
         if (
-            payload.baseUrl !== "https://localhost:3000/" ||
-            payload.path !== "wunderauth" ||
+            payload.baseUrl !== "https://localhost:3000" ||
+            payload.path !== "/server/wundergraph" ||
             payload.orgId !== "°" ||
             payload.role !== "owner" ||
             payload.extraData !== ""
         ) {
             console.log("JWT payload not matching");
-            throw error(401, "JWT payload not macting")
+            throw error(401, "JWT payload not matching")
         }
-        console.log(payload);
+        console.log("JWT Server request verified: ", verified);
+        console.log("JWT Server request payload: ", payload);
         return new Response(JSON.stringify(payload), { status: 200 });
     } catch (err) {
         console.log("JWT error");