fix: dont show E2EI shield and correct ciphersuite (#18489)

src/script/client/ClientEntity.ts

@@ -24,11 +24,19 @@ import {splitFingerprint} from 'Util/StringUtil';
 
 import {ClientMapper} from './ClientMapper';
 
+import {isObject} from '../guards/common';
 import {ClientRecord} from '../storage';
 
-export enum MLSPublicKeys {
-  ED25519 = 'ed25519',
-}
+export const MLSPublicKeys = {
+  ed25519: 'ED25519',
+  ed448: 'ED448',
+  ecdsa_secp521r1_sha512: 'EDCSA_SECP521R1_SHA512',
+  ecdsa_secp384r1_sha384: 'EDCSA_SECP384R1_SHA384',
+  ecdsa_secp256r1_sha256: 'EDCSA_SECP256R1_SHA256',
+} as const;
+
+export const isKnownSignature = (signature: unknown): signature is keyof typeof MLSPublicKeys =>
+  signature !== undefined && typeof signature === 'string' && Object.keys(MLSPublicKeys).includes(signature);
 
 export class ClientEntity {
   static CONFIG = {
@@ -51,7 +59,7 @@ export class ClientEntity {
   model?: string;
   time?: string;
   type?: ClientType.PERMANENT | ClientType.TEMPORARY;
-  mlsPublicKeys?: Partial<Record<MLSPublicKeys, string>>;
+  mlsPublicKeys?: Partial<Record<keyof typeof MLSPublicKeys, string>>;
 
   constructor(isSelfClient: boolean, domain: string | null, id = '') {
     this.isSelfClient = isSelfClient;
@@ -101,6 +109,12 @@ export class ClientEntity {
     return hasModel ? this.model : this.class.toUpperCase();
   }
 
+  getCipherSuite(): string | undefined {
+    return isObject(this.mlsPublicKeys) && Object.keys(this.mlsPublicKeys).length > 0
+      ? Object.keys(this.mlsPublicKeys).at(0)
+      : undefined;
+  }
+
   /**
    * This method returns an object which can be stored in our local database.
    */

src/script/components/Badge/components/VerificationBadges/VerificationBadges.tsx

@@ -126,9 +126,11 @@ export const UserVerificationBadges = ({
 export const DeviceVerificationBadges = ({
   device,
   getIdentity,
+  isE2EIEnabled = false,
 }: {
   device: ClientEntity;
   getIdentity?: (deviceId: string) => WireIdentity | undefined;
+  isE2EIEnabled?: boolean;
 }) => {
   const userState = useRef(container.resolve(UserState));
   const identity = useMemo(() => getIdentity?.(device.id), [device, getIdentity]);
@@ -159,7 +161,7 @@ export const DeviceVerificationBadges = ({
   }, [identity]);
 
   let status: MLSStatuses | undefined = undefined;
-  if (identity && user) {
+  if (isE2EIEnabled && identity && user) {
     const mlsStatuses = getMLSStatuses({identities: [identity], user});
     status = mlsStatuses?.[0];
   }

src/script/components/UserDevices/components/DeviceDetails/DeviceDetails.tsx

@@ -112,7 +112,9 @@ export const DeviceDetails = ({
 
   return (
     <div className={cx('participant-devices__header', {'participant-devices__header--padding': !noPadding})}>
-      {deviceIdentity && <MLSDeviceDetails identity={deviceIdentity} isSelfUser={user.isMe} />}
+      {deviceIdentity && (
+        <MLSDeviceDetails identity={deviceIdentity} isSelfUser={user.isMe} cipherSuite={device.getCipherSuite()} />
+      )}
 
       <div className="device-proteus-details">
         <h3 className="device-details-title paragraph-body-3">{t('participantDevicesProteusDeviceVerification')}</h3>

src/script/hooks/useDeviceIdentities.ts

@@ -59,13 +59,11 @@ export const useUserIdentity = (userId: QualifiedId, groupId?: string, updateAft
 
   return {
     deviceIdentities,
-
     status: !deviceIdentities
       ? undefined
       : deviceIdentities.length > 0 && deviceIdentities.every(identity => identity.status === MLSStatuses.VALID)
         ? MLSStatuses.VALID
         : MLSStatuses.NOT_ACTIVATED,
-
     getDeviceIdentity,
   };
 };

src/script/page/MainContent/panels/preferences/DevicesPreferences/components/DetailedDevice.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 
 import {DeviceVerificationBadges} from 'Components/Badge';
 import {ClientEntity} from 'src/script/client/ClientEntity';
-import {WireIdentity} from 'src/script/E2EIdentity';
+import {E2EIHandler, WireIdentity} from 'src/script/E2EIdentity';
 
 import {MLSDeviceDetails} from './MLSDeviceDetails';
 import {ProteusDeviceDetails} from './ProteusDeviceDetails';
@@ -41,16 +41,24 @@ export const DetailedDevice: React.FC<DeviceProps> = ({
   getDeviceIdentity,
   isProteusVerified,
 }) => {
+  const isE2eiEnabled = E2EIHandler.getInstance().isE2EIEnabled();
   const getIdentity = () => getDeviceIdentity?.(device.id);
 
   return (
     <>
       <h3 className="preferences-devices-model preferences-devices-model-name" data-uie-name="device-model">
         <span>{device.model}</span>
-        <DeviceVerificationBadges device={device} getIdentity={getIdentity} />
+        <DeviceVerificationBadges device={device} getIdentity={getIdentity} isE2EIEnabled={isE2eiEnabled} />
       </h3>
 
-      {getIdentity && <MLSDeviceDetails isCurrentDevice={isCurrentDevice} identity={getIdentity()} isSelfUser />}
+      {getIdentity() !== undefined && (
+        <MLSDeviceDetails
+          isCurrentDevice={isCurrentDevice}
+          identity={getIdentity()}
+          isSelfUser
+          cipherSuite={device.getCipherSuite()}
+        />
+      )}
 
       <ProteusDeviceDetails device={device} fingerprint={fingerprint} isProteusVerified={isProteusVerified} />
     </>

src/script/page/MainContent/panels/preferences/DevicesPreferences/components/MLSDeviceDetails/MLSDeviceDetails.tsx

@@ -23,17 +23,23 @@ import {splitFingerprint} from 'Util/StringUtil';
 
 import {styles} from './MLSDeviceDetails.styles';
 
-import {MLSPublicKeys} from '../../../../../../../client';
+import {isKnownSignature, MLSPublicKeys} from '../../../../../../../client';
 import {E2EICertificateDetails} from '../E2EICertificateDetails';
 import {FormattedId} from '../FormattedId';
 
 interface MLSDeviceDetailsProps {
+  cipherSuite?: string;
   isCurrentDevice?: boolean;
   identity?: WireIdentity;
   isSelfUser?: boolean;
 }
 
-export const MLSDeviceDetails = ({isCurrentDevice, identity, isSelfUser = false}: MLSDeviceDetailsProps) => {
+export const MLSDeviceDetails = ({
+  cipherSuite,
+  isCurrentDevice,
+  identity,
+  isSelfUser = false,
+}: MLSDeviceDetailsProps) => {
   if (!isCurrentDevice && !identity) {
     return null;
   }
@@ -53,7 +59,9 @@ export const MLSDeviceDetails = ({isCurrentDevice, identity, isSelfUser = false}
 
   return (
     <div css={styles.wrapper}>
-      <h4 className="paragraph-body-3">{t('mlsSignature', {signature: MLSPublicKeys.ED25519.toUpperCase()})}</h4>
+      {isKnownSignature(cipherSuite) && (
+        <h4 className="paragraph-body-3">{t('mlsSignature', {signature: MLSPublicKeys[cipherSuite]})}</h4>
+      )}
 
       {identity?.thumbprint && (
         <>