SELF-1754: Implement selective disclosure on Proving Screen

app/jest.setup.js

@@ -100,6 +100,7 @@ jest.mock('react-native', () => {
     get NativeModules() {
       return global.NativeModules || {};
     },
+    useColorScheme: jest.fn(() => 'light'),
     NativeEventEmitter: jest.fn().mockImplementation(nativeModule => {
       return {
         addListener: jest.fn(),
@@ -110,10 +111,15 @@ jest.mock('react-native', () => {
     }),
     PixelRatio: mockPixelRatio,
     Dimensions: {
-      get: jest.fn(() => ({
-        window: { width: 375, height: 667, scale: 2 },
-        screen: { width: 375, height: 667, scale: 2 },
-      })),
+      get: jest.fn(dimension => {
+        const dimensions = {
+          window: { width: 375, height: 667, scale: 2, fontScale: 1 },
+          screen: { width: 375, height: 667, scale: 2, fontScale: 1 },
+        };
+        return dimension ? dimensions[dimension] : dimensions;
+      }),
+      addEventListener: jest.fn(() => ({ remove: jest.fn() })),
+      removeEventListener: jest.fn(),
     },
     Linking: {
       getInitialURL: jest.fn().mockResolvedValue(null),
@@ -139,6 +145,7 @@ jest.mock('react-native', () => {
     ScrollView: 'ScrollView',
     TouchableOpacity: 'TouchableOpacity',
     TouchableHighlight: 'TouchableHighlight',
+    Pressable: 'Pressable',
     Image: 'Image',
     ActivityIndicator: 'ActivityIndicator',
     SafeAreaView: 'SafeAreaView',
@@ -273,10 +280,15 @@ jest.mock(
         Version: 14,
       },
       Dimensions: {
-        get: jest.fn(() => ({
-          window: { width: 375, height: 667, scale: 2 },
-          screen: { width: 375, height: 667, scale: 2 },
-        })),
+        get: jest.fn(dimension => {
+          const dimensions = {
+            window: { width: 375, height: 667, scale: 2, fontScale: 1 },
+            screen: { width: 375, height: 667, scale: 2, fontScale: 1 },
+          };
+          return dimension ? dimensions[dimension] : dimensions;
+        }),
+        addEventListener: jest.fn(() => ({ remove: jest.fn() })),
+        removeEventListener: jest.fn(),
       },
       StyleSheet: {
         create: jest.fn(styles => styles),
@@ -359,15 +371,18 @@ jest.mock(
   '../packages/mobile-sdk-alpha/node_modules/react-native/Libraries/Utilities/Dimensions',
   () => ({
     getConstants: jest.fn(() => ({
-      window: { width: 375, height: 667, scale: 2 },
-      screen: { width: 375, height: 667, scale: 2 },
+      window: { width: 375, height: 667, scale: 2, fontScale: 1 },
+      screen: { width: 375, height: 667, scale: 2, fontScale: 1 },
     })),
     set: jest.fn(),
-    get: jest.fn(() => ({
-      window: { width: 375, height: 667, scale: 2 },
-      screen: { width: 375, height: 667, scale: 2 },
-    })),
-    addEventListener: jest.fn(),
+    get: jest.fn(dimension => {
+      const dimensions = {
+        window: { width: 375, height: 667, scale: 2, fontScale: 1 },
+        screen: { width: 375, height: 667, scale: 2, fontScale: 1 },
+      };
+      return dimension ? dimensions[dimension] : dimensions;
+    }),
+    addEventListener: jest.fn(() => ({ remove: jest.fn() })),
     removeEventListener: jest.fn(),
   }),
   { virtual: true },
@@ -550,8 +565,14 @@ jest.mock(
   { virtual: true },
 );
 
+// Mock the hooks subpath from mobile-sdk-alpha
+jest.mock('@selfxyz/mobile-sdk-alpha/hooks', () => ({
+  useSafeBottomPadding: jest.fn((basePadding = 20) => basePadding + 50),
+}));
+
 // Mock problematic mobile-sdk-alpha components that use React Native StyleSheet
 jest.mock('@selfxyz/mobile-sdk-alpha', () => ({
+  // Override only the specific mocks we need
   NFCScannerScreen: jest.fn(() => null),
   SelfClientProvider: jest.fn(({ children }) => children),
   useSelfClient: jest.fn(() => {

app/src/components/Disclosures.tsx

@@ -5,45 +5,24 @@
 import React from 'react';
 import { XStack, YStack } from 'tamagui';
 
-import type { Country3LetterCode } from '@selfxyz/common/constants';
-import { countryCodes } from '@selfxyz/common/constants';
 import type { SelfAppDisclosureConfig } from '@selfxyz/common/utils';
 import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
 import { slate200, slate500 } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 
 import CheckMark from '@/assets/icons/checkmark.svg';
+import {
+  getDisclosureText,
+  ORDERED_DISCLOSURE_KEYS,
+} from '@/utils/disclosureUtils';
 
 interface DisclosureProps {
   disclosures: SelfAppDisclosureConfig;
 }
 
-function listToString(list: string[]): string {
-  if (list.length === 1) {
-    return list[0];
-  } else if (list.length === 2) {
-    return list.join(' nor ');
-  }
-  return `${list.slice(0, -1).join(', ')} nor ${list.at(-1)}`;
-}
-
 export default function Disclosures({ disclosures }: DisclosureProps) {
-  // Define the order in which disclosures should appear.
-  const ORDERED_KEYS: Array<keyof SelfAppDisclosureConfig> = [
-    'issuing_state',
-    'name',
-    'passport_number',
-    'nationality',
-    'date_of_birth',
-    'gender',
-    'expiry_date',
-    'ofac',
-    'excludedCountries',
-    'minimumAge',
-  ] as const;
-
   return (
     <YStack>
-      {ORDERED_KEYS.map(key => {
+      {ORDERED_DISCLOSURE_KEYS.map(key => {
         const isEnabled = disclosures[key];
         if (
           !isEnabled ||
@@ -52,53 +31,17 @@ export default function Disclosures({ disclosures }: DisclosureProps) {
           return null;
         }
 
-        let text = '';
-        switch (key) {
-          case 'ofac':
-            text = 'I am not on the OFAC sanction list';
-            break;
-          case 'excludedCountries':
-            text = `I am not a citizen of the following countries: ${countriesToSentence(
-              (disclosures.excludedCountries as Country3LetterCode[]) || [],
-            )}`;
-            break;
-          case 'minimumAge':
-            text = `Age is over ${disclosures.minimumAge}`;
-            break;
-          case 'name':
-            text = 'Name';
-            break;
-          case 'passport_number':
-            text = 'Passport Number';
-            break;
-          case 'date_of_birth':
-            text = 'Date of Birth';
-            break;
-          case 'gender':
-            text = 'Gender';
-            break;
-          case 'expiry_date':
-            text = 'Passport Expiry Date';
-            break;
-          case 'issuing_state':
-            text = 'Issuing State';
-            break;
-          case 'nationality':
-            text = 'Nationality';
-            break;
-          default:
-            return null;
+        const text = getDisclosureText(key, disclosures);
+        if (!text) {
+          return null;
         }
+
         return <DisclosureItem key={key} text={text} />;
       })}
     </YStack>
   );
 }
 
-function countriesToSentence(countries: Array<Country3LetterCode>): string {
-  return listToString(countries.map(country => countryCodes[country]));
-}
-
 interface DisclosureItemProps {
   text: string;
 }

app/src/components/documents/IDSelectorItem.tsx

@@ -0,0 +1,132 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import { Pressable } from 'react-native';
+import { Separator, Text, View, XStack, YStack } from 'tamagui';
+import { Check } from '@tamagui/lucide-icons';
+
+import {
+  black,
+  green500,
+  green600,
+  iosSeparator,
+  slate200,
+  slate300,
+  slate400,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+export interface IDSelectorItemProps {
+  documentName: string;
+  state: IDSelectorState;
+  onPress?: () => void;
+  disabled?: boolean;
+  isLastItem?: boolean;
+  testID?: string;
+}
+
+export type IDSelectorState = 'active' | 'verified' | 'expired' | 'mock';
+
+function getSubtitleText(state: IDSelectorState): string {
+  switch (state) {
+    case 'active':
+      return 'Currently active';
+    case 'verified':
+      return 'Verified ID';
+    case 'expired':
+      return 'Expired';
+    case 'mock':
+      return 'Testing document';
+  }
+}
+
+function getSubtitleColor(state: IDSelectorState): string {
+  switch (state) {
+    case 'active':
+      return green600;
+    case 'verified':
+      return slate400;
+    case 'expired':
+      return slate400;
+    case 'mock':
+      return slate400;
+  }
+}
+
+export const IDSelectorItem: React.FC<IDSelectorItemProps> = ({
+  documentName,
+  state,
+  onPress,
+  disabled,
+  isLastItem,
+  testID,
+}) => {
+  const isDisabled = disabled || isDisabledState(state);
+  const isActive = state === 'active';
+  const subtitleText = getSubtitleText(state);
+  const subtitleColor = getSubtitleColor(state);
+  const textColor = isDisabled ? slate400 : black;
+
+  // Determine circle color based on state
+  const circleColor = isDisabled ? slate200 : slate300;
+
+  return (
+    <>
+      <Pressable
+        onPress={isDisabled ? undefined : onPress}
+        disabled={isDisabled}
+        testID={testID}
+      >
+        <XStack
+          paddingVertical={6}
+          paddingHorizontal={0}
+          alignItems="center"
+          gap={13}
+          opacity={isDisabled ? 0.6 : 1}
+        >
+          {/* Radio button indicator */}
+          <View
+            width={29}
+            height={24}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <View
+              width={24}
+              height={24}
+              borderRadius={12}
+              borderWidth={isActive ? 0 : 2}
+              borderColor={circleColor}
+              backgroundColor={isActive ? green500 : 'transparent'}
+              alignItems="center"
+              justifyContent="center"
+            >
+              {isActive && <Check size={16} color="white" strokeWidth={3} />}
+            </View>
+          </View>
+
+          {/* Document info */}
+          <YStack flex={1} gap={2} paddingVertical={8} paddingBottom={9}>
+            <Text
+              fontFamily={dinot}
+              fontSize={18}
+              fontWeight="500"
+              color={textColor}
+            >
+              {documentName}
+            </Text>
+            <Text fontFamily={dinot} fontSize={14} color={subtitleColor}>
+              {subtitleText}
+            </Text>
+          </YStack>
+        </XStack>
+      </Pressable>
+      {!isLastItem && <Separator borderColor={iosSeparator} />}
+    </>
+  );
+};
+
+export function isDisabledState(state: IDSelectorState): boolean {
+  return state === 'expired';
+}