Add contract address to verifiableCredentialDetails

packages/browser-wallet/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Added
+
+-   Display contract address of issuer in verifiable credential details.
+
 ### Fixed
 
 -   Incorrect verifiable presentations created, due to incorrect identity/identityProviderIndex used.

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

@@ -16,6 +16,7 @@ import {
     getCredentialHolderId,
     getCredentialRegistryContractAddress,
     getRevokeTransactionExecutionEnergyEstimate,
+    getContractAddressFromIssuerDID,
 } from '@shared/utils/verifiable-credential-helpers';
 import { fetchContractName } from '@shared/utils/token-helpers';
 import { TimeStampUnit, dateFromTimestamp, ClassName } from 'wallet-common-helpers';
@@ -36,38 +37,34 @@ import { DisplayAttribute, VerifiableCredentialCard, VerifiableCredentialCardHea
 function DisplayIssuerMetadata({ issuer }: { issuer: string }) {
     const { t } = useTranslation('verifiableCredential');
     const issuerMetadata = useIssuerMetadata(issuer);
-
-    if (
-        issuerMetadata === undefined ||
-        (issuerMetadata.description === undefined &&
-            issuerMetadata.icon === undefined &&
-            issuerMetadata.name === undefined &&
-            issuerMetadata.url === undefined)
-    ) {
-        return null;
-    }
+    const issuerContract = getContractAddressFromIssuerDID(issuer);
 
     return (
         <div className="verifiable-credential__body-attributes">
             <h3>{t('details.issuer.title')}</h3>
-            {issuerMetadata.icon && <Img className="issuer-logo" src={issuerMetadata.icon.url} withDefaults />}
-            {issuerMetadata.name && (
+            <DisplayAttribute
+                attributeKey="issuerContract"
+                attributeTitle={t('details.issuer.contract')}
+                attributeValue={`${issuerContract.index.toString()} (${issuerContract.subindex.toString()})`}
+            />
+            {issuerMetadata?.icon && <Img className="issuer-logo" src={issuerMetadata.icon.url} withDefaults />}
+            {issuerMetadata?.name && (
                 <DisplayAttribute
                     attributeKey="issuerName"
                     attributeTitle={t('details.issuer.name')}
                     attributeValue={issuerMetadata.name}
                 />
             )}
-            {issuerMetadata.description && (
+            {issuerMetadata?.description && (
                 <DisplayAttribute
-                    attributeKey="issuerName"
+                    attributeKey="issuerDescription"
                     attributeTitle={t('details.issuer.description')}
                     attributeValue={issuerMetadata.description}
                 />
             )}
-            {issuerMetadata.url && (
+            {issuerMetadata?.url && (
                 <DisplayAttribute
-                    attributeKey="issuerName"
+                    attributeKey="issuerUrl"
                     attributeTitle={t('details.issuer.url')}
                     attributeValue={issuerMetadata.url}
                 />

packages/browser-wallet/src/popup/pages/VerifiableCredential/i18n/da.ts

@@ -17,6 +17,7 @@ const t: typeof en = {
         validUntil: 'Gyldig indtil',
         issuer: {
             title: 'Udstedt af',
+            contract: 'kontraktindeks, subindeks',
             name: 'Navn',
             description: 'Beskrivelse',
             url: 'Hjemmeside',

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

@@ -15,6 +15,7 @@ const t = {
         validUntil: 'Valid until',
         issuer: {
             title: 'Issued by',
+            contract: 'contract index, subindex',
             name: 'Name',
             description: 'Description',
             url: 'Website',