Wrap up cis4 revocation

Author: soerenbf

packages/browser-wallet/src/popup/popupX/pages/SendFunds/Confirm.tsx

@@ -34,7 +34,7 @@ import { logError } from '@shared/utils/log-helpers';
 import { submittedTransactionRoute } from '@popup/popupX/constants/routes';
 
 import { CIS2_TRANSFER_NRG_OFFSET, showToken, useTokenMetadata } from './util';
-import { UpdateContractSubmittedLocationState } from '../SubmittedTransaction/SubmittedTransaction';
+import { CIS2TransferSubmittedLocationState } from '../SubmittedTransaction/SubmittedTransaction';
 
 type Props = {
     sender: AccountAddress.Type;
@@ -108,7 +108,7 @@ export default function SendFundsConfirm({ values, fee, sender }: Props) {
         }
 
         const tx = await submitTransaction(payload, fee);
-        const state: UpdateContractSubmittedLocationState = { type: 'cis2.transfer', amount: values.amount, tokenName };
+        const state: CIS2TransferSubmittedLocationState = { type: 'cis2.transfer', amount: values.amount, tokenName };
         nav(submittedTransactionRoute(TransactionHash.fromHexString(tx)), {
             state,
         });

packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.tsx

@@ -104,12 +104,18 @@ function TransferBody({ transfer }: TransferBodyProps) {
     );
 }
 
-export type UpdateContractSubmittedLocationState = {
+export type CIS2TransferSubmittedLocationState = {
     type: 'cis2.transfer';
     /** formatted amount */
     amount: string;
     tokenName: string;
 };
+
+export type CIS4RevokeSubmittedLocationState = {
+    type: 'cis4.revoke';
+};
+
+type UpdateContractSubmittedLocationState = CIS2TransferSubmittedLocationState | CIS4RevokeSubmittedLocationState;
 function UpdateContractBody() {
     const { t } = useTranslation('x', { keyPrefix: 'submittedTransaction.success' });
     const { state } = useLocation() as Location & { state: UpdateContractSubmittedLocationState };
@@ -122,6 +128,8 @@ function UpdateContractBody() {
                     <Text.Capture>{state.tokenName}</Text.Capture>
                 </>
             );
+        case 'cis4.revoke':
+            return <Text.Capture>{t('web3Revoke')}</Text.Capture>;
         default:
             throw new Error('Unsupported');
     }

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

@@ -6,13 +6,14 @@ const t = {
             updated: "You've updated your delegation settings",
         },
         configureValidator: {
-            changeStake: "You've validating with",
-            removed: "You've stopped validating",
-            updated: "You've updated your delegation settings",
+            changeStake: "You're validating with",
+            removed: "You've removed your validation stake",
+            updated: "You've updated your validation settings",
         },
         transfer: {
             label: "You've sent",
         },
+        web3Revoke: 'Your credential has been successfully revoked',
     },
     pending: {
         label: 'Transaction in progress',

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

@@ -27,12 +27,17 @@ import {
 import Button from '@popup/popupX/shared/Button';
 import Stop from '@assets/svgX/stop.svg';
 import Info from '@assets/svgX/info.svg';
-import { useCredentialEntry } from '@popup/popupX/shared/utils/verifiable-credentials';
+import { useCredentialEntry, useCredentialStatus } from '@popup/popupX/shared/utils/verifiable-credentials';
 import FullscreenNotice, { FullscreenNoticeProps } from '@popup/popupX/shared/FullscreenNotice';
 import { displayNameOrSplitAddress, useHdWallet, useSelectedCredential } from '@popup/shared/utils/account-helpers';
 import { fetchContractName } from '@shared/utils/token-helpers';
 import Text from '@popup/popupX/shared/Text';
-import { ConfirmedCredential, CreationStatus, VerifiableCredential } from '@shared/storage/types';
+import {
+    ConfirmedCredential,
+    CreationStatus,
+    VerifiableCredential,
+    VerifiableCredentialStatus,
+} from '@shared/storage/types';
 import { displayAsCcd, noOp, useAsyncMemo } from 'wallet-common-helpers';
 import {
     TransactionSubmitError,
@@ -41,6 +46,7 @@ import {
     useTransactionSubmit,
 } from '@popup/shared/utils/transaction-helpers';
 import ErrorMessage from '@popup/popupX/shared/Form/ErrorMessage';
+import { CIS4RevokeSubmittedLocationState } from '../SubmittedTransaction/SubmittedTransaction';
 
 type ConfirmRevocationProps = FullscreenNoticeProps & {
     credential: VerifiableCredential;
@@ -104,7 +110,8 @@ function ConfirmRevocation({ credential, entry, walletCred, ...props }: ConfirmR
         }
         try {
             const tx = await submitTransaction(payload, fee);
-            nav(submittedTransactionRoute(TransactionHash.fromHexString(tx)));
+            const submittedState: CIS4RevokeSubmittedLocationState = { type: 'cis4.revoke' };
+            nav(submittedTransactionRoute(TransactionHash.fromHexString(tx)), { state: submittedState });
         } catch (e) {
             if (e instanceof Error) {
                 setError(e);
@@ -158,13 +165,20 @@ function Web3IdDetailsParsed({ id, contract }: Props) {
     const [showConfirm, setShowConfirm] = useState(false);
     const credentialEntry = useCredentialEntry(credential);
     const walletCredential = useSelectedCredential();
+    const status = useCredentialStatus(credential);
 
     if (verifiableCredentials.loading) return null;
     if (credential === undefined) throw new Error('Expected to find credential');
 
+    const canRevoke =
+        walletCredential?.status === CreationStatus.Confirmed &&
+        credentialEntry?.credentialInfo.holderRevocable &&
+        status !== undefined &&
+        [VerifiableCredentialStatus.Active, VerifiableCredentialStatus.NotActivated].includes(status);
+
     return (
         <>
-            {walletCredential?.status === CreationStatus.Confirmed && (
+            {canRevoke && (
                 <ConfirmRevocation
                     open={showConfirm}
                     onClose={() => setShowConfirm(false)}
@@ -175,11 +189,7 @@ function Web3IdDetailsParsed({ id, contract }: Props) {
             )}
             <Page>
                 <Page.Top heading={t('title')}>
-                    {walletCredential?.status === CreationStatus.Confirmed &&
-                        credentialEntry?.credentialInfo.holderRevocable &&
-                        credentialEntry !== undefined && (
-                            <Button.Icon icon={<Stop />} onClick={() => setShowConfirm(true)} />
-                        )}
+                    {canRevoke && <Button.Icon icon={<Stop />} onClick={() => setShowConfirm(true)} />}
                     <Button.Icon
                         className="web3-id-details-x__info"
                         icon={<Info />}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { ClassName, TimeStampUnit, dateFromTimestamp } from 'wallet-common-helpers';
 import { AttributeType } from '@concordium/web-sdk';
 import clsx from 'clsx';
@@ -16,6 +16,7 @@ import {
 import { parseCredentialDID } from '@shared/utils/verifiable-credential-helpers';
 import Img from '@popup/shared/Img';
 
+import { withDateAndTime } from '@shared/utils/time-helpers';
 import {
     defaultFormatAttribute,
     useCredentialEntry,
@@ -24,7 +25,6 @@ import {
     useCredentialSchema,
     useCredentialStatus,
 } from '../utils/verifiable-credentials';
-import { withDateAndTime } from '@shared/utils/time-helpers';
 
 /**
  * Component for displaying the status of a verifiable credential.

packages/browser-wallet/src/popup/popupX/shared/utils/verifiable-credentials.ts

@@ -31,18 +31,20 @@ import { withDateAndTime } from '@shared/utils/time-helpers';
  * @param credential the verifiable credential to lookup the status for
  * @returns the status for the given credential
  */
-export function useCredentialStatus(credential: VerifiableCredential) {
+export function useCredentialStatus(credential: VerifiableCredential | undefined) {
     const [status, setStatus] = useState<VerifiableCredentialStatus>();
     const client = useAtomValue(grpcClientAtom);
 
     useEffect(() => {
+        if (credential === undefined) return;
+
         getVerifiableCredentialStatus(client, credential.id)
             .then(setStatus)
             .catch((e) => {
                 setStatus(VerifiableCredentialStatus.Pending);
                 logError(e);
             });
-    }, [credential.id, client]);
+    }, [credential?.id, client]);
 
     return status;
 }