Abstract credential query

subvisual · Mar 18, 2024 · 5b1f465 · 5b1f465
1 parent a11d72e
commit 5b1f465
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 89 deletions.
diff --git a/packages/web-app/app/_lib/queries.tsx b/packages/web-app/app/_lib/queries.tsx
@@ -2,9 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import { useIdOS } from '../_providers/idos';
 import { idOSCredential } from '../_types/idos';
 import { useAccount } from 'wagmi';
+// import { idOS } from '@idos-network/idos-sdk';
 
 export const useFetchIdOSProfile = () => {
   const { sdk } = useIdOS();
+
   return useQuery({
     queryKey: ['idos-profile'],
     queryFn: () => sdk?.auth?.currentUser(),
@@ -32,6 +34,33 @@ export const useFetchCredentials = () => {
   });
 };
 
+export const useFetchCredentialContent = (credentialId: string) => {
+  const { sdk } = useIdOS();
+
+  return useQuery({
+    queryKey: ['credential-content', credentialId],
+    queryFn: async () => {
+      if (!sdk) return;
+
+      const credential = await sdk.data.get('credentials', credentialId);
+
+      if (!credential) return '';
+
+      // check if this step is really needed
+      // const verified = await idOS.verifiableCredentials.verify(credential?.content);
+
+      // console.log(
+      //   '%c==>Verify Credential:',
+      //   'color: green; background: yellow; font-size: 20px',
+      //   verified,
+      // );
+
+      return JSON.parse(credential?.content as string);
+    },
+    enabled: !!credentialId,
+  });
+};
+
 export const useFetchWallets = () => {
   const { sdk } = useIdOS();
 

diff --git a/packages/web-app/app/_ui/projects/acquire-access-grant-button.tsx b/packages/web-app/app/_ui/projects/acquire-access-grant-button.tsx
@@ -28,11 +28,6 @@ export const AcquireAccessGrantButton = ({
         Math.floor(Date.now() / 1000) + serverInfo.lockTimeSpanSeconds,
         serverInfo.encryptionPublicKey,
       );
-      console.log(
-        '%c==>',
-        'color: green; background: yellow; font-size: 20px',
-        grant,
-      );
     } catch (error) {
       console.log(
         '%c==>',

diff --git a/packages/web-app/app/_ui/projects/grants.tsx b/packages/web-app/app/_ui/projects/grants.tsx
@@ -22,19 +22,15 @@ const DecryptButton = ({ dataId }: { dataId: string }) => {
   const getAccessGrants = getAccessGrantsContentDecrypted.bind(null, dataId);
   const [state, dispatch] = useFormState(getAccessGrants, initialState);
 
-  console.log(
-    '%c==>',
-    'color: green; background: yellow; font-size: 20px',
-    state,
-  );
-
   return (
     <>
       <form action={dispatch}>
         <Button type="submit">Decrypt</Button>
       </form>
       {state?.content ? (
-        <pre className="mt-5">${json(JSON.parse(state.content))}</pre>
+        <pre className="mt-5 flex overflow-auto bg-slate-400">
+          ${json(JSON.parse(state.content))}
+        </pre>
       ) : null}
     </>
   );
@@ -43,12 +39,6 @@ const DecryptButton = ({ dataId }: { dataId: string }) => {
 export const Grants = ({ serverInfo }: TGrantsProps) => {
   const { data: grants } = useFetchGrants(serverInfo.grantee);
 
-  console.log(
-    '%c==>',
-    'color: green; background: yellow; font-size: 20px',
-    serverInfo.grantee,
-  );
-
   if (!grants?.length) return null;
 
   return (

diff --git a/packages/web-app/app/_ui/projects/idos-info.tsx b/packages/web-app/app/_ui/projects/idos-info.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { useAccount } from 'wagmi';
 import { Button } from '../components/button';
-import { useIdOS } from '@/app/_providers/idos';
 import { useState } from 'react';
-import { idOS } from '@idos-network/idos-sdk';
-import { useFetchCredentials, useFetchWallets } from '@/app/_lib/queries';
+import {
+  useFetchCredentialContent,
+  useFetchCredentials,
+  useFetchWallets,
+} from '@/app/_lib/queries';
 import { PublicInfo } from '@/app/_server/types';
 import { AcquireAccessGrantButton } from './acquire-access-grant-button';
 import { Grants } from './grants';
@@ -19,25 +20,10 @@ type TIdosInfoProps = {
 };
 
 export const IdosInfo = ({ serverInfo }: TIdosInfoProps) => {
-  const [contentStr, setContentStr] = useState('');
   const [credentialId, setCredentialId] = useState('');
-  const { address } = useAccount();
-  const { sdk } = useIdOS();
   const { data, isError, isLoading } = useFetchCredentials();
+  const { data: credentialContent } = useFetchCredentialContent(credentialId);
   const { data: wallets } = useFetchWallets();
-  // const { data: credentials } = useFetchCredentials();
-
-  console.log(
-    '%c==>',
-    'color: green; background: yellow; font-size: 20px',
-    serverInfo,
-  );
-
-  console.log(
-    '%c==>Credentials',
-    'color: green; background: yellow; font-size: 20px',
-    data,
-  );
 
   return (
     <div className="mt-2">
@@ -62,56 +48,7 @@ export const IdosInfo = ({ serverInfo }: TIdosInfoProps) => {
             <span>Id: </span>
             <Button
               className="p-0"
-              onClick={async () => {
-                if (!sdk) return;
-
-                try {
-                  const _credential = await sdk.data.get(
-                    'credentials',
-                    credential.id,
-                  );
-
-                  if (!_credential) return;
-                  const { content } = _credential;
-
-                  console.log(
-                    '%c==>Credential',
-                    'color: green; background: yellow; font-size: 20px',
-                    content,
-                  );
-
-                  const verified =
-                    await idOS.verifiableCredentials.verify(content);
-
-                  console.log(
-                    '%c==>Verify Credential:',
-                    'color: green; background: yellow; font-size: 20px',
-                    verified,
-                  );
-
-                  setContentStr(JSON.parse(content));
-                  setCredentialId(credential.id);
-                } catch (error) {
-                  console.log(
-                    '%c==>',
-                    'color: green; background: yellow; font-size: 20px',
-                    error,
-                  );
-                }
-
-                // try {
-                //   const result = await sdk.grants.list({
-                //     owner: address,
-                //     // grantee: fakeServer.publicInfo.granteeAddress,
-                //   });
-
-                //   console.log(
-                //     '%c==>GRANTS',
-                //     'color: green; background: yellow; font-size: 20px',
-                //     result,
-                //   );
-                // } catch (error) {}
-              }}
+              onClick={() => setCredentialId(credential.id)}
             >
               {credential.id}
             </Button>
@@ -129,7 +66,11 @@ export const IdosInfo = ({ serverInfo }: TIdosInfoProps) => {
       {credentialId ? (
         <AcquireAccessGrantButton id={credentialId} serverInfo={serverInfo} />
       ) : null}
-      {contentStr ? <pre className="mt-5">${json(contentStr)}</pre> : null}
+      {credentialContent ? (
+        <pre className="mt-5 flex overflow-auto bg-slate-400">
+          ${json(credentialContent)}
+        </pre>
+      ) : null}
       <Grants serverInfo={serverInfo} />
     </div>
   );