Show credential info

Author: soerenbf

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdCredentials.tsx

@@ -1,28 +1,24 @@
 import React from 'react';
-import Plus from '@assets/svgX/plus.svg';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAtomValue } from 'jotai';
+
+import Plus from '@assets/svgX/plus.svg';
 import Page from '@popup/popupX/shared/Page';
 import Button from '@popup/popupX/shared/Button';
 import Web3IdCard from '@popup/popupX/shared/Web3IdCard';
-import { useNavigate } from 'react-router-dom';
 import { relativeRoutes, web3IdDetailsRoute } from '@popup/popupX/constants/routes';
-import { useAtomValue } from 'jotai';
 import { storedVerifiableCredentialsAtom } from '@popup/store/verifiable-credential';
 import { VerifiableCredential } from '@shared/storage/types';
-import { ContractAddress } from '@concordium/web-sdk';
+import { parseCredentialDID } from '@shared/utils/verifiable-credential-helpers';
 
 export default function Web3IdCredentials() {
     const { t } = useTranslation('x', { keyPrefix: 'web3Id.credentials' });
     const verifiableCredentials = useAtomValue(storedVerifiableCredentialsAtom);
     const nav = useNavigate();
 
     const toDetails = (vc: VerifiableCredential) => {
-        const [, index, subindex, id] =
-            vc.id.match(/.*:sci:(\d*):(\d*)\/credentialEntry\/(.*)$/) ??
-            (() => {
-                throw new Error('Invalid ID found in verifiable credential');
-            })();
-        const contract = ContractAddress.create(BigInt(index), BigInt(subindex));
+        const [contract, id] = parseCredentialDID(vc.id);
         nav(web3IdDetailsRoute(contract, id));
     };
 

packages/browser-wallet/src/popup/popupX/pages/Web3Id/Web3IdDetails.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useParams } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
@@ -24,6 +24,7 @@ function Web3IdDetailsParsed({ id, contract }: Props) {
     const verifiableCredentials = useAtomValue(storedVerifiableCredentialsAtom);
     const net = useAtomValue(networkConfigurationAtom);
     const credential = verifiableCredentials.value.find((c) => c.id === createCredentialId(id, contract, net));
+    const [showInfo, setShowInfo] = useState(false);
 
     if (verifiableCredentials.loading) return null;
     if (credential === undefined) throw new Error('Expected to find credential');
@@ -32,10 +33,14 @@ function Web3IdDetailsParsed({ id, contract }: Props) {
         <Page>
             <Page.Top heading={t('title')}>
                 <Button.Icon icon={<Stop />} />
-                <Button.Icon className="web3-id-details-x__info" icon={<Info />} />
+                <Button.Icon
+                    className="web3-id-details-x__info"
+                    icon={<Info />}
+                    onClick={() => setShowInfo((v) => !v)}
+                />
             </Page.Top>
             <Page.Main>
-                <Web3IdCard credential={credential} />
+                <Web3IdCard showInfo={showInfo} credential={credential} />
             </Page.Main>
         </Page>
     );

packages/browser-wallet/src/popup/popupX/shared/Web3IdCard/Web3IdCard.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ClassName } from 'wallet-common-helpers';
+import React, { useMemo } from 'react';
+import { ClassName, TimeStampUnit, dateFromTimestamp } from 'wallet-common-helpers';
 import { AttributeType } from '@concordium/web-sdk';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -13,15 +13,18 @@ import {
     VerifiableCredentialSchema,
     VerifiableCredentialStatus,
 } from '@shared/storage/types';
-
+import { parseCredentialDID } from '@shared/utils/verifiable-credential-helpers';
 import Img from '@popup/shared/Img';
+
 import {
     defaultFormatAttribute,
+    useCredentialEntry,
     useCredentialLocalization,
     useCredentialMetadata,
     useCredentialSchema,
     useCredentialStatus,
 } from '../utils/verifiable-credentials';
+import { withDateAndTime } from '@shared/utils/time-helpers';
 
 /**
  * Component for displaying the status of a verifiable credential.
@@ -147,14 +150,16 @@ function applySchemaAndLocalization(
 
 type Props = Pick<ViewProps, 'className'> & {
     credential: VerifiableCredential;
+    showInfo?: boolean;
 };
 
-export default function Web3IdCard({ credential, ...viewProps }: Props) {
-    const { t } = useTranslation('x', { keyPrefix: 'sharedX.web3IdCard.warning' });
+export default function Web3IdCard({ credential, showInfo = false, ...viewProps }: Props) {
+    const { t } = useTranslation('x', { keyPrefix: 'sharedX.web3IdCard' });
     const status = useCredentialStatus(credential);
     const schema = useCredentialSchema(credential);
     const metadata = useCredentialMetadata(credential);
     const localization = useCredentialLocalization(credential);
+    const entry = useCredentialEntry(credential);
 
     // Render nothing until all the required data is available.
     if (!schema || !metadata || localization.loading || status === undefined) {
@@ -165,15 +170,38 @@ export default function Web3IdCard({ credential, ...viewProps }: Props) {
         schema,
         credential.credentialSubject.attributes
     );
-    const attributes = Object.entries(credential.credentialSubject.attributes).map(
-        applySchemaAndLocalization(schema, localization.result)
-    );
+
+    let attributes: AttributeView[] = [];
+    if (showInfo && entry !== undefined) {
+        const [contract, id] = parseCredentialDID(credential.id);
+        if (!entry) {
+            return null;
+        }
+
+        const validFrom = dateFromTimestamp(entry.credentialInfo.validFrom, TimeStampUnit.milliSeconds);
+        const validFromFormatted = withDateAndTime(validFrom);
+        attributes = [
+            { title: t('details.id'), value: id },
+            { title: t('details.contract'), value: contract.toString() },
+            { title: t('details.validFrom'), value: validFromFormatted },
+        ];
+
+        if (entry.credentialInfo.validUntil !== undefined) {
+            const validUntil = dateFromTimestamp(entry.credentialInfo.validUntil, TimeStampUnit.milliSeconds);
+            const validUntilFormatted = withDateAndTime(validUntil);
+            attributes.push({ title: t('details.validUntil'), value: validUntilFormatted });
+        }
+    } else if (!showInfo) {
+        attributes = Object.entries(credential.credentialSubject.attributes).map(
+            applySchemaAndLocalization(schema, localization.result)
+        );
+    }
 
     let warning: string | undefined;
     if (!schemaMatchesCredentialAttributes) {
-        warning = t('schemaMismatch');
+        warning = t('warning.schemaMismatch');
     } else if (schema.usingFallback) {
-        warning = t('fallback');
+        warning = t('warning.fallback');
     }
 
     return (

packages/browser-wallet/src/popup/popupX/shared/i18n/en.ts

@@ -59,6 +59,12 @@ const t = {
             schemaMismatch: 'Attributes found do not match credential schema',
             fallback: 'Using fallback credential chema',
         },
+        details: {
+            id: 'Credential holder ID',
+            contract: 'Contract address',
+            validFrom: 'Valid from',
+            validUntil: 'Valid until',
+        },
     },
 };
 

packages/browser-wallet/src/shared/utils/verifiable-credential-helpers.ts

@@ -9,6 +9,7 @@ import {
     Energy,
     Parameter,
     ReturnValue,
+    HexString,
 } from '@concordium/web-sdk';
 import * as ed from '@noble/ed25519';
 import {
@@ -1132,6 +1133,19 @@ export function createCredentialId(
     }/credentialEntry/${credentialHolderId}`;
 }
 
+/**
+ * Parse the {@linkcode ContractAddress.Type} and holder ID from the given DID string
+ */
+export function parseCredentialDID(did: string): [ContractAddress.Type, HexString] {
+    const [, index, subindex, id] =
+        did.match(/.*:sci:(\d*):(\d*)\/credentialEntry\/(.*)$/) ??
+        (() => {
+            throw new Error('Invalid ID found in verifiable credential');
+        })();
+    const contract = ContractAddress.create(BigInt(index), BigInt(subindex));
+    return [contract, id];
+}
+
 /**
  * Extracts the network from any concordium DID identitifer.
  * Note that if the network is not present in the DID, then 'mainnet' is returned, per the specifiction, see https://proposals.concordium.software/ID/concordium-did.html#identifier-syntax.