Revoke credentials

examples/add-example-Web3Id/README.md

@@ -10,7 +10,7 @@ The example project included in this repository, serves as a working example of
 ## Installing
 
 -   Run `yarn` in package root.
--    Build concordium helpers by running `yarn build:api-helpers`.
+-   Build concordium helpers by running `yarn build:api-helpers`.
 
 ## Running the example
 

packages/browser-wallet/package.json

@@ -20,6 +20,7 @@
         "@concordium/browser-wallet-api": "workspace:^",
         "@concordium/browser-wallet-api-helpers": "workspace:^",
         "@concordium/web-sdk": "^6.1.0-alpha.1",
+        "@noble/ed25519": "^1.7.0",
         "@protobuf-ts/runtime-rpc": "^2.8.2",
         "@scure/bip39": "^1.1.0",
         "axios": "^0.27.2",

packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredential.scss

@@ -1,8 +1,16 @@
 .verifiable-credential-list {
+    height: calc(100% - 56px);
+    background-color: $color-bg;
     overflow-y: auto;
 
     &__card {
-        margin: rem(16px);
+        margin-left: rem(16px);
+        margin-right: rem(16px);
+        margin-bottom: rem(16px);
+
+        &:not(:first-child) {
+            margin-top: rem(16px);
+        }
     }
 }
 

packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialDetails.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { VerifiableCredential, VerifiableCredentialSchema, VerifiableCredentialStatus } from '@shared/storage/types';
+import Topbar, { ButtonTypes, MenuButton } from '@popup/shared/Topbar/Topbar';
+import { useTranslation } from 'react-i18next';
+import { AccountTransactionType } from '@concordium/web-sdk';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { grpcClientAtom } from '@popup/store/settings';
+import { absoluteRoutes } from '@popup/constants/routes';
+import { useHdWallet } from '@popup/shared/utils/account-helpers';
+import {
+    VerifiableCredentialMetadata,
+    buildRevokeTransaction,
+    buildRevokeTransactionParameters,
+    getCredentialHolderId,
+    getCredentialRegistryContractAddress,
+    getRevokeTransactionExecutionEnergyEstimate,
+} from '@shared/utils/verifiable-credential-helpers';
+import { fetchContractName } from '@shared/utils/token-helpers';
+import { ClassName } from 'wallet-common-helpers';
+import { accountRoutes } from '../Account/routes';
+import { ConfirmGenericTransferState } from '../Account/ConfirmGenericTransfer';
+import RevokeIcon from '../../../assets/svg/revoke.svg';
+import { useCredentialEntry } from './VerifiableCredentialHooks';
+import { VerifiableCredentialCard } from './VerifiableCredentialCard';
+
+interface CredentialDetailsProps extends ClassName {
+    credential: VerifiableCredential;
+    status: VerifiableCredentialStatus;
+    metadata: VerifiableCredentialMetadata;
+    schema: VerifiableCredentialSchema;
+    backButtonOnClick: () => void;
+}
+
+export default function VerifiableCredentialDetails({
+    credential,
+    status,
+    metadata,
+    schema,
+    backButtonOnClick,
+    className,
+}: CredentialDetailsProps) {
+    const nav = useNavigate();
+    const { pathname } = useLocation();
+    const { t } = useTranslation('verifiableCredential');
+    const client = useAtomValue(grpcClientAtom);
+    const hdWallet = useHdWallet();
+    const credentialEntry = useCredentialEntry(credential);
+
+    const goToConfirmPage = useCallback(async () => {
+        if (credentialEntry === undefined || hdWallet === undefined) {
+            return;
+        }
+
+        const contractAddress = getCredentialRegistryContractAddress(credential.id);
+        const credentialId = getCredentialHolderId(credential.id);
+        const contractName = await fetchContractName(client, contractAddress.index, contractAddress.subindex);
+        if (contractName === undefined) {
+            throw new Error(`Unable to find contract name for address: ${contractAddress}`);
+        }
+
+        const signingKey = hdWallet
+            .getVerifiableCredentialSigningKey(contractAddress, credential.index)
+            .toString('hex');
+
+        const parameters = await buildRevokeTransactionParameters(
+            contractAddress,
+            credentialId,
+            credentialEntry.revocationNonce,
+            signingKey
+        );
+        const maxExecutionEnergy = await getRevokeTransactionExecutionEnergyEstimate(client, contractName, parameters);
+        const payload = await buildRevokeTransaction(
+            contractAddress,
+            contractName,
+            credentialId,
+            maxExecutionEnergy,
+            parameters
+        );
+
+        const confirmTransferState: ConfirmGenericTransferState = {
+            payload,
+            type: AccountTransactionType.Update,
+        };
+
+        // Override current router entry with stateful version
+        nav(pathname, { replace: true, state: true });
+        nav(`${absoluteRoutes.home.account.path}/${accountRoutes.confirmTransfer}`, {
+            state: confirmTransferState,
+        });
+    }, [client, credential, hdWallet, credentialEntry, nav, pathname]);
+
+    const menuButton: MenuButton | undefined = useMemo(() => {
+        if (
+            credentialEntry === undefined ||
+            !credentialEntry.credentialInfo.holderRevocable ||
+            status === VerifiableCredentialStatus.Revoked
+        ) {
+            return undefined;
+        }
+
+        return {
+            type: ButtonTypes.More,
+            items: [
+                {
+                    title: t('menu.revoke'),
+                    icon: <RevokeIcon />,
+                    onClick: goToConfirmPage,
+                },
+            ],
+        };
+    }, [credentialEntry, goToConfirmPage]);
+
+    // Wait for the credential entry to be loaded from the chain, and for the HdWallet
+    // to be loaded to be ready to derive keys.
+    if (credentialEntry === undefined || hdWallet === undefined) {
+        return null;
+    }
+
+    return (
+        <>
+            <Topbar
+                title={t('topbar.details')}
+                backButton={{ show: true, onClick: backButtonOnClick }}
+                menuButton={menuButton}
+            />
+            <div className="verifiable-credential-list">
+                <VerifiableCredentialCard
+                    className={className}
+                    credentialSubject={credential.credentialSubject}
+                    schema={schema}
+                    credentialStatus={status}
+                    metadata={metadata}
+                />
+            </div>
+        </>
+    );
+}

packages/browser-wallet/src/popup/pages/VerifiableCredential/VerifiableCredentialHooks.tsx

@@ -18,7 +18,7 @@ import { AsyncWrapper } from '@popup/store/utils';
 import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 
 /**
- * Retrieve the on-chain credential status for a verifiable credential in a registry contract.
+ * Retrieve the on-chain credential status for a verifiable credential in a CIS-4 credential registry contract.
  * @param credential the verifiable credential to lookup the status for
  * @returns the status for the given credential
  */