SELF-1754: Implement selective disclosure on Proving Screen

app/jest.setup.js

@@ -139,6 +139,7 @@ jest.mock('react-native', () => {
     ScrollView: 'ScrollView',
     TouchableOpacity: 'TouchableOpacity',
     TouchableHighlight: 'TouchableHighlight',
+    Pressable: 'Pressable',
     Image: 'Image',
     ActivityIndicator: 'ActivityIndicator',
     SafeAreaView: 'SafeAreaView',

app/src/components/documents/IDSelectorItem.tsx

@@ -0,0 +1,126 @@
+// 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, Circle } from '@tamagui/lucide-icons';
+
+import {
+  black,
+  slate300,
+  slate500,
+} 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;
+  testID?: string;
+}
+
+export type IDSelectorState =
+  | 'active'
+  | 'verified'
+  | 'not_accepted'
+  | 'expired';
+
+const green500 = '#22C55E';
+const red500 = '#EF4444';
+
+function getSubtitleText(state: IDSelectorState): string {
+  switch (state) {
+    case 'active':
+      return 'Currently active';
+    case 'verified':
+      return 'Verified ID';
+    case 'not_accepted':
+      return 'Not accepted';
+    case 'expired':
+      return 'Expired';
+  }
+}
+
+function getSubtitleColor(state: IDSelectorState): string {
+  switch (state) {
+    case 'active':
+      return green500;
+    case 'verified':
+      return slate500;
+    case 'not_accepted':
+      return slate500;
+    case 'expired':
+      return red500;
+  }
+}
+
+function isDisabledState(state: IDSelectorState): boolean {
+  return state === 'not_accepted' || state === 'expired';
+}
+
+export const IDSelectorItem: React.FC<IDSelectorItemProps> = ({
+  documentName,
+  state,
+  onPress,
+  disabled,
+  testID,
+}) => {
+  const isDisabled = disabled || isDisabledState(state);
+  const isActive = state === 'active';
+  const subtitleText = getSubtitleText(state);
+  const subtitleColor = getSubtitleColor(state);
+  const textColor = isDisabled ? slate500 : black;
+
+  return (
+    <>
+      <Pressable
+        onPress={isDisabled ? undefined : onPress}
+        disabled={isDisabled}
+        testID={testID}
+      >
+        <XStack
+          paddingVertical={16}
+          paddingHorizontal={8}
+          alignItems="center"
+          gap={12}
+          opacity={isDisabled ? 0.6 : 1}
+        >
+          {/* Radio button indicator */}
+          <View
+            width={24}
+            height={24}
+            borderRadius={12}
+            borderWidth={isActive ? 0 : 2}
+            borderColor={slate300}
+            backgroundColor={isActive ? green500 : 'transparent'}
+            alignItems="center"
+            justifyContent="center"
+          >
+            {isActive && <Check size={16} color="white" strokeWidth={3} />}
+            {!isActive && !isDisabled && (
+              <Circle size={20} color={slate300} strokeWidth={0} />
+            )}
+          </View>
+
+          {/* Document info */}
+          <YStack flex={1} gap={2}>
+            <Text
+              fontFamily={dinot}
+              fontSize={16}
+              fontWeight="500"
+              color={textColor}
+            >
+              {documentName}
+            </Text>
+            <Text fontFamily={dinot} fontSize={14} color={subtitleColor}>
+              {subtitleText}
+            </Text>
+          </YStack>
+        </XStack>
+      </Pressable>
+      <Separator borderColor={slate300} />
+    </>
+  );
+};

app/src/components/documents/IDSelectorSheet.tsx

@@ -0,0 +1,170 @@
+// 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 {
+  Button,
+  ScrollView,
+  Separator,
+  Sheet,
+  Text,
+  XStack,
+  YStack,
+} from 'tamagui';
+import { X } from '@tamagui/lucide-icons';
+
+import {
+  black,
+  blue600,
+  slate300,
+  slate500,
+  white,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import type { IDSelectorState } from '@/components/documents/IDSelectorItem';
+import { IDSelectorItem } from '@/components/documents/IDSelectorItem';
+
+export interface IDSelectorDocument {
+  id: string;
+  name: string;
+  state: IDSelectorState;
+}
+
+export interface IDSelectorSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  documents: IDSelectorDocument[];
+  selectedId?: string;
+  onSelect: (documentId: string) => void;
+  onDismiss: () => void;
+  onApprove: () => void;
+  testID?: string;
+}
+
+export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
+  open,
+  onOpenChange,
+  documents,
+  selectedId,
+  onSelect,
+  onDismiss,
+  onApprove,
+  testID = 'id-selector-sheet',
+}) => {
+  return (
+    <Sheet
+      modal
+      open={open}
+      onOpenChange={onOpenChange}
+      snapPoints={[55]}
+      animation="medium"
+      dismissOnSnapToBottom
+    >
+      <Sheet.Overlay
+        backgroundColor="rgba(0, 0, 0, 0.5)"
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <Sheet.Frame
+        backgroundColor={white}
+        borderTopLeftRadius="$9"
+        borderTopRightRadius="$9"
+        testID={testID}
+      >
+        <YStack padding="$4" flex={1}>
+          {/* Header */}
+          <XStack
+            alignItems="center"
+            justifyContent="space-between"
+            marginBottom="$4"
+          >
+            <Text
+              fontSize={20}
+              fontFamily={dinot}
+              fontWeight="600"
+              color={black}
+            >
+              Select an ID
+            </Text>
+            <XStack
+              onPress={onDismiss}
+              padding="$2"
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              testID={`${testID}-close-button`}
+            >
+              <X color={slate500} size={24} />
+            </XStack>
+          </XStack>
+
+          <Separator borderColor={slate300} marginBottom="$2" />
+
+          {/* Document List */}
+          <ScrollView
+            flex={1}
+            showsVerticalScrollIndicator={false}
+            testID={`${testID}-list`}
+          >
+            {documents.map(doc => {
+              const isSelected = doc.id === selectedId;
+              const itemState: IDSelectorState = isSelected
+                ? 'active'
+                : doc.state;
+
+              return (
+                <IDSelectorItem
+                  key={doc.id}
+                  documentName={doc.name}
+                  state={itemState}
+                  onPress={() => onSelect(doc.id)}
+                  testID={`${testID}-item-${doc.id}`}
+                />
+              );
+            })}
+          </ScrollView>
+
+          {/* Footer Buttons */}
+          <XStack gap={12} marginTop="$4" paddingBottom="$2">
+            <Button
+              flex={1}
+              backgroundColor={white}
+              borderWidth={1}
+              borderColor={slate300}
+              borderRadius={8}
+              paddingVertical={16}
+              onPress={onDismiss}
+              testID={`${testID}-dismiss-button`}
+            >
+              <Text
+                fontFamily={dinot}
+                fontSize={16}
+                fontWeight="500"
+                color={black}
+              >
+                Dismiss
+              </Text>
+            </Button>
+            <Button
+              flex={1}
+              backgroundColor={blue600}
+              borderRadius={8}
+              paddingVertical={16}
+              onPress={onApprove}
+              testID={`${testID}-approve-button`}
+            >
+              <Text
+                fontFamily={dinot}
+                fontSize={16}
+                fontWeight="500"
+                color={white}
+              >
+                Approve
+              </Text>
+            </Button>
+          </XStack>
+        </YStack>
+      </Sheet.Frame>
+    </Sheet>
+  );
+};

app/src/components/documents/index.ts

@@ -0,0 +1,15 @@
+// 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.
+
+export type {
+  IDSelectorDocument,
+  IDSelectorSheetProps,
+} from '@/components/documents/IDSelectorSheet';
+
+export type {
+  IDSelectorItemProps,
+  IDSelectorState,
+} from '@/components/documents/IDSelectorItem';
+export { IDSelectorItem } from '@/components/documents/IDSelectorItem';
+export { IDSelectorSheet } from '@/components/documents/IDSelectorSheet';

app/src/navigation/devTools.ts

@@ -13,6 +13,7 @@ import DevHapticFeedbackScreen from '@/screens/dev/DevHapticFeedbackScreen';
 import DevLoadingScreen from '@/screens/dev/DevLoadingScreen';
 import DevPrivateKeyScreen from '@/screens/dev/DevPrivateKeyScreen';
 import DevSettingsScreen from '@/screens/dev/DevSettingsScreen';
+import IDSelectorTestScreen from '@/screens/dev/IDSelectorTestScreen';
 
 const devHeaderOptions: NativeStackNavigationOptions = {
   headerStyle: {
@@ -80,6 +81,13 @@ const devScreens = {
       title: 'Dev Loading Screen',
     } as NativeStackNavigationOptions,
   },
+  IDSelectorTest: {
+    screen: IDSelectorTestScreen,
+    options: {
+      ...devHeaderOptions,
+      title: 'ID Selector Test',
+    } as NativeStackNavigationOptions,
+  },
 };
 
 export default devScreens;