Merge pull request #1849 from Chia-Network/rifeljm/vc-is-valid-lazy-g…

…et-proofs
Chia-Network · Jun 15, 2023 · 1d5f7f2 · 1d5f7f2
2 parents 2960b7f + adf2c01
commit 1d5f7f2
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 5 deletions.
diff --git a/packages/api-react/src/hooks/index.ts b/packages/api-react/src/hooks/index.ts
@@ -23,3 +23,4 @@ export { default as useNFTCoinAdded } from './useNFTCoinAdded';
 export { default as useNFTCoinRemoved } from './useNFTCoinRemoved';
 export { default as useNFTCoinUpdated } from './useNFTCoinUpdated';
 export { default as useNFTCoinDIDSet } from './useNFTCoinDIDSet';
+export { useVCCoinAdded, useVCCoinRemoved } from './useVCEvents';
diff --git a/packages/api-react/src/hooks/useVCEvents.ts b/packages/api-react/src/hooks/useVCEvents.ts
@@ -0,0 +1,11 @@
+import { VC } from '@chia-network/api';
+
+import useSubscribeToEvent from './useSubscribeToEvent';
+
+export function useVCCoinAdded(callback: (coin: any) => void) {
+  return useSubscribeToEvent('onVCCoinAdded', VC, callback);
+}
+
+export function useVCCoinRemoved(callback: (coin: any) => void) {
+  return useSubscribeToEvent('onVCCoinRemoved', VC, callback);
+}
diff --git a/packages/api-react/src/services/index.ts b/packages/api-react/src/services/index.ts
@@ -195,6 +195,7 @@ export const {
   useSpendVCMutation,
   useAddVCProofsMutation,
   useGetProofsForRootQuery,
+  useLazyGetProofsForRootQuery,
   useRevokeVCMutation,
   // clawback
   useSetAutoClaimMutation,

diff --git a/packages/api-react/src/services/wallet.ts b/packages/api-react/src/services/wallet.ts
@@ -1562,6 +1562,7 @@ export const {
   useSpendVCMutation,
   useAddVCProofsMutation,
   useGetProofsForRootQuery,
+  useLazyGetProofsForRootQuery,
   useRevokeVCMutation,
   // clawback
   useSetAutoClaimMutation,

diff --git a/packages/gui/src/components/vcs/VCCard.tsx b/packages/gui/src/components/vcs/VCCard.tsx
@@ -140,7 +140,7 @@ export default function VCCard(props: { vcRecord: any; isDetail?: boolean; proof
             <Trans>Expired</Trans>
           ) : vcRecord.revoked ? (
             <Trans>Revoked</Trans>
-          ) : proofs && Object.keys(proofs).length ? (
+          ) : vcRecord.isValid || !!(proofs && Object.keys(proofs).length > 0) ? (
             <Trans>Valid</Trans>
           ) : (
             <Trans>Invalid</Trans>

diff --git a/packages/gui/src/components/vcs/VCList.tsx b/packages/gui/src/components/vcs/VCList.tsx
@@ -1,4 +1,10 @@
-import { useGetVCListQuery, useLocalStorage, useGetLoggedInFingerprintQuery } from '@chia-network/api-react';
+import {
+  useGetVCListQuery,
+  useLocalStorage,
+  useGetLoggedInFingerprintQuery,
+  useLazyGetProofsForRootQuery,
+  useVCCoinAdded,
+} from '@chia-network/api-react';
 import { Flex, More, MenuItem, AlertDialog, useOpenDialog, useDarkMode } from '@chia-network/core';
 import {
   VCZeroStateBackground as VCZeroStateBackgroundIcon,
@@ -74,6 +80,37 @@ export default function VCList() {
 
   const { isDarkMode } = useDarkMode();
 
+  const [getProofsForRoot] = useLazyGetProofsForRootQuery();
+
+  const [proofs, setProofs] = React.useState<any>({});
+
+  /* We only need to subscribe to event and the list will be updated automatically on added VC */
+  useVCCoinAdded(() => {});
+
+  React.useEffect(() => {
+    async function loadProofsData() {
+      if (isLoading || !blockchainVCs) {
+        return;
+      }
+
+      const mapping: Record<string, any> = {};
+
+      const proofDataPromises = blockchainVCs.vcRecords.map(async (vcRecord: any) => {
+        const proofHash = (vcRecord as any)?.vc?.proofHash;
+        if (proofHash) {
+          const { data } = await getProofsForRoot({ root: proofHash });
+          const vcProofs = data?.proofs;
+          mapping[proofHash] = vcProofs;
+        }
+      });
+      await Promise.all(proofDataPromises);
+
+      setProofs(mapping);
+    }
+
+    loadProofsData();
+  }, [isLoading, blockchainVCs, getProofsForRoot]);
+
   const COMPONENTS = {
     Item: ItemContainer,
     List: ListContainer,
@@ -93,16 +130,24 @@ export default function VCList() {
   }
 
   function renderVCCard(index: number, vcRecord: any) {
-    return <VCCard vcRecord={vcRecord} />;
+    const proofHash = vcRecord?.vc?.proofHash;
+    const vcProofs = proofHash ? proofs[proofHash] : undefined;
+    return <VCCard vcRecord={vcRecord} proofs={vcProofs} />;
   }
 
   const allVCs = React.useMemo(() => {
     if (fingerprint) {
       // filter out undefined values
-      return (blockchainVCs?.vcRecords || []).concat(VCsLocalStorage[fingerprint]).filter(Boolean);
+      return blockchainVCs?.vcRecords
+        .map((record) => ({
+          ...record,
+          isValid: !!(proofs[record.vc.proofHash] && Object.keys(proofs[record.vc.proofHash]).length > 0),
+        }))
+        .concat(VCsLocalStorage[fingerprint])
+        .filter(Boolean);
     }
     return [];
-  }, [VCsLocalStorage, blockchainVCs?.vcRecords, fingerprint]);
+  }, [VCsLocalStorage, blockchainVCs?.vcRecords, fingerprint, proofs]);
 
   if (isLoading) return null;