Allow secret line to be overwritten, and use that to restore special …

…identity attribute handling

packages/browser-wallet/src/popup/pages/Web3ProofRequest/AccountStatement.tsx

@@ -10,9 +10,11 @@ import { useDisplayAttributeValue } from '@popup/shared/utils/identity-helpers';
 import { ConfirmedIdentity, CredentialSchemaSubject, WalletCredential } from '@shared/storage/types';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { SecretStatement, useStatementName, useStatementValue } from '../IdProofRequest/DisplayStatement/utils';
 import CredentialSelector from './CredentialSelector';
 import { DisplayRevealStatements } from './Display/DisplayRevealStatements';
 import { DisplaySecretStatements } from './Display/DisplaySecretStatements';
+import { OverwriteSecretLine } from './Display/utils';
 import { DisplayCredentialStatementProps, SecretStatementV2 } from './utils';
 
 export function DisplayAccount({ option }: { option: WalletCredential }) {
@@ -65,6 +67,15 @@ export default function AccountStatement({
         }
     }, []);
 
+    const accountCreateSecretLine: OverwriteSecretLine = (statement: SecretStatementV2) => {
+        const value = useStatementValue(statement as SecretStatement);
+        const attribute = useStatementName(statement as SecretStatement);
+        return {
+            attribute,
+            value,
+        };
+    };
+
     if (!identity) {
         return null;
     }
@@ -97,6 +108,7 @@ export default function AccountStatement({
                     statements={secrets}
                     formatAttribute={displayAttribute}
                     schema={IDENTITY_SUBJECT_SCHEMA as CredentialSchemaSubject}
+                    overwriteSecretLine={accountCreateSecretLine}
                 />
             )}
         </div>

packages/browser-wallet/src/popup/pages/Web3ProofRequest/Display/DisplaySecretStatements.tsx

@@ -63,19 +63,22 @@ export function DisplaySecretStatements<Attribute extends AttributeType>({
     attributes,
     className,
     formatAttribute = (_, value) => value.toString(),
+    overwriteSecretLine = () => ({}),
 }: DisplayProps<SecretStatementV2, Attribute>) {
     const { t } = useTranslation('web3IdProofRequest', { keyPrefix: 'displayStatement' });
     const header = t('headers.secret');
 
     const lines = statements.map((s) => {
         const value = getStatementValue(s, schema, t, formatAttribute);
-        const title = getPropertyTitle(s.attributeTag, schema);
+        const attribute = getPropertyTitle(s.attributeTag, schema);
         const description = getStatementDescription(s, schema, t, formatAttribute);
+
         return {
-            attribute: title,
             value,
-            isRequirementMet: canProveAtomicStatement(s, attributes),
+            attribute,
             description,
+            ...overwriteSecretLine(s),
+            isRequirementMet: canProveAtomicStatement(s, attributes),
         };
     });
 

packages/browser-wallet/src/popup/pages/Web3ProofRequest/Display/utils.ts

@@ -1,16 +1,24 @@
 import { CredentialSchemaSubject } from '@shared/storage/types';
 import { ClassName } from 'wallet-common-helpers';
+import { SecretStatementV2 } from '../utils';
 
 export function getPropertyTitle(attributeTag: string, schemaSubject: CredentialSchemaSubject) {
     // TODO use localization here
     const property = schemaSubject.properties.attributes.properties[attributeTag];
     return property ? property.title : attributeTag;
 }
 
+export type OverwriteSecretLine = (statement: SecretStatementV2) => {
+    attribute?: string;
+    value?: string;
+    description?: string;
+};
+
 export type DisplayProps<StatementType, Attribute> = ClassName & {
     statements: StatementType[];
     attributes: Record<string, Attribute>;
     schema: CredentialSchemaSubject;
     className: string;
     formatAttribute?: (key: string, value: Attribute) => string;
+    overwriteSecretLine?: OverwriteSecretLine;
 };