diff --git a/app/src/components/homescreen/IdCard.tsx b/app/src/components/homescreen/IdCard.tsx
index afdf842ad..bd0706a9e 100644
--- a/app/src/components/homescreen/IdCard.tsx
+++ b/app/src/components/homescreen/IdCard.tsx
@@ -2,11 +2,10 @@
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-import type { FC } from 'react';
-import React, { useCallback } from 'react';
-import { Image, Pressable, StyleSheet } from 'react-native';
+import React, { type FC, useCallback } from 'react';
+import { Dimensions, Image, Pressable, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
-import { Text, XStack, YStack } from 'tamagui';
+import { Separator, Text, XStack, YStack } from 'tamagui';
import { useNavigation } from '@react-navigation/native';
import type { AadhaarData } from '@selfxyz/common';
@@ -20,11 +19,18 @@ import {
import { WarningTriangleIcon } from '@selfxyz/euclid/dist/components/icons/WarningTriangleIcon';
import { RoundFlag } from '@selfxyz/mobile-sdk-alpha/components';
import {
+ black,
red600,
+ slate100,
+ slate300,
+ slate400,
+ slate500,
white,
yellow500,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot, plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+import AadhaarIcon from '@selfxyz/mobile-sdk-alpha/svgs/icons/aadhaar.svg';
+import EPassport from '@selfxyz/mobile-sdk-alpha/svgs/icons/epassport.svg';
import CardBackgroundId1 from '@/assets/images/card_background_id1.png';
import CardBackgroundId2 from '@/assets/images/card_background_id2.png';
@@ -34,14 +40,20 @@ import CardBackgroundId5 from '@/assets/images/card_background_id5.png';
import CardBackgroundId6 from '@/assets/images/card_background_id6.png';
import DevCardLogo from '@/assets/images/dev_card_logo.svg';
import DevCardWave from '@/assets/images/dev_card_wave.svg';
+import LogoGray from '@/assets/images/logo_gray.svg';
import SelfLogoPending from '@/assets/images/self_logo_pending.svg';
import WaveOverlay from '@/assets/images/wave_overlay.png';
import { getSecurityLevel } from '@/components/homescreen/cardSecurityBadge';
import { cardStyles } from '@/components/homescreen/cardStyles';
import KycIdCard from '@/components/homescreen/KycIdCard';
+import { SvgXml } from '@/components/homescreen/SvgXmlWrapper';
import { useCardDimensions } from '@/hooks/useCardDimensions';
import { getBackgroundIndex } from '@/utils/cardBackgroundSelector';
-import { getDocumentAttributes } from '@/utils/documentAttributes';
+import {
+ formatDateFromYYMMDD,
+ getDocumentAttributes,
+ getNameAndSurname,
+} from '@/utils/documentAttributes';
import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
const CARD_BACKGROUNDS = [
@@ -282,6 +294,12 @@ const getCountryDemonym = (code: string): string => {
return COUNTRY_DEMONYMS[upperCode] || upperCode;
};
+const logoSvg = ``;
+
interface IdCardLayoutAttributes {
idDocument: PassportData | AadhaarData | KycData | null;
selected: boolean;
@@ -356,6 +374,331 @@ const IdCardLayout: FC = ({
);
}
+
+ // When data is revealed (hidden=false), show the white data-view card
+ if (!hidden && selected) {
+ const { width: screenWidth } = Dimensions.get('window');
+ const revealedWidth = screenWidth * 0.95 - 16;
+ const revealedHeight = revealedWidth * 0.645;
+ const revealedBorderRadius = revealedWidth * 0.04;
+ const revealedPadding = revealedWidth * 0.035;
+ const revealedFontSize = {
+ large: revealedWidth * 0.045,
+ small: revealedWidth * 0.028,
+ xsmall: revealedWidth * 0.022,
+ };
+ const imageSize = {
+ width: revealedWidth * 0.2,
+ height: revealedWidth * 0.29,
+ };
+ const contentLeftOffset = imageSize.width + revealedPadding;
+ const docAttributes = getDocumentAttributes(idDocument);
+ const nameData = getNameAndSurname(docAttributes.nameSlice);
+
+ return (
+
+
+ {/* Header Section */}
+
+
+ {isAadhaarDocument(idDocument) ? (
+
+ ) : (
+
+ )}
+
+
+ {isMRZDocument(idDocument) &&
+ idDocument.documentCategory === 'passport'
+ ? 'Passport'
+ : isAadhaarDocument(idDocument)
+ ? 'Aadhaar'
+ : 'ID Card'}
+
+
+ Verified{' '}
+ {isMRZDocument(idDocument) &&
+ idDocument.documentCategory === 'passport'
+ ? 'Biometric Passport'
+ : isAadhaarDocument(idDocument)
+ ? 'Aadhaar Document'
+ : 'Biometric ID Card'}
+
+
+
+
+ {idDocument.mock && (
+
+
+ DEVELOPER
+
+
+ )}
+
+
+
+
+
+ {/* Main Content Section */}
+
+ {/* Person Image Placeholder */}
+
+
+
+
+ {/* ID Attributes Grid */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isAadhaarDocument(idDocument) ? (
+ <>
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Footer Section - MRZ */}
+ {isMRZDocument(idDocument) && idDocument.mrz && (
+
+
+
+
+
+ {idDocument.documentCategory === 'passport' ? (
+ <>
+
+ {idDocument.mrz.slice(0, 44)}
+
+
+ {idDocument.mrz.slice(44, 88)}
+
+
+ ) : (
+ <>
+
+ {idDocument.mrz.slice(0, 30)}
+
+
+ {idDocument.mrz.slice(30, 60)}
+
+
+ {idDocument.mrz.slice(60, 90)}
+
+
+ )}
+
+
+ )}
+
+ {/* Footer Section - Empty placeholder for Aadhaar */}
+ {isAadhaarDocument(idDocument) && (
+
+
+
+
+
+ )}
+
+
+ );
+ }
+
const padding = cardWidth * 0.04;
// Get document attributes
@@ -712,4 +1055,33 @@ const styles = StyleSheet.create({
},
});
+interface IdAttributeProps {
+ name: string;
+ value: string;
+}
+
+const IdAttribute: FC = ({ name, value }) => {
+ const { width: screenWidth } = Dimensions.get('window');
+ const attrFontSize = {
+ label: screenWidth * 0.024,
+ value: screenWidth * 0.02,
+ };
+
+ return (
+
+
+ {name}
+
+
+ {value}
+
+
+ );
+};
+
export default IdCardLayout;
diff --git a/app/src/screens/documents/management/IdDetailsScreen.tsx b/app/src/screens/documents/management/IdDetailsScreen.tsx
index 9f421e8c2..558953d32 100644
--- a/app/src/screens/documents/management/IdDetailsScreen.tsx
+++ b/app/src/screens/documents/management/IdDetailsScreen.tsx
@@ -3,10 +3,10 @@
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useEffect, useState } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, Text, XStack, YStack, ZStack } from 'tamagui';
-import { BlurView } from '@react-native-community/blur';
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
import type { DocumentCatalog, IDDocument } from '@selfxyz/common/utils/types';
import {
@@ -36,18 +36,6 @@ const IdDetailsScreen: React.FC = () => {
const navigation = useNavigation();
const { bottom } = useSafeAreaInsets();
- const [isFocused, setIsFocused] = useState(false);
-
- // Added to unmount BlurView when screen loses focus
- useFocusEffect(
- React.useCallback(() => {
- setIsFocused(true);
- return () => {
- setIsFocused(false);
- };
- }, []),
- );
-
useEffect(() => {
const loadDocumentAndCatalog = async () => {
const allDocs = await getAllDocuments();
@@ -140,21 +128,17 @@ const IdDetailsScreen: React.FC = () => {
{ListHeader}
- {isFocused && (
-
- )}
+