From 191accae2fddf3c072001c87d369f9eb340587fd Mon Sep 17 00:00:00 2001
From: Justin Hernandez <justin.hernandez@self.xyz>
Date: Wed, 7 Jan 2026 20:15:14 -0800
Subject: [PATCH] save wip design

---
 .../components/documents/IDSelectorSheet.tsx  |  29 +-
 .../proof-request/BottomActionBar.tsx         | 155 ++++++
 .../proof-request/ConnectedWalletBadge.tsx    | 112 ++++
 .../proof-request/DisclosureItem.tsx          |  95 ++++
 .../proof-request/ProofMetadataBar.tsx        |  95 ++++
 .../proof-request/ProofRequestCard.tsx        | 108 ++++
 .../proof-request/ProofRequestHeader.tsx      |  97 ++++
 .../components/proof-request/designTokens.ts  |  52 ++
 app/src/components/proof-request/index.ts     |  51 ++
 .../DocumentSelectorForProvingScreen.tsx      | 517 ++++++++++--------
 .../verification/ProvingScreenRouter.tsx      |   8 +-
 app/src/utils/devUtils.ts                     |   2 +-
 12 files changed, 1067 insertions(+), 254 deletions(-)
 create mode 100644 app/src/components/proof-request/BottomActionBar.tsx
 create mode 100644 app/src/components/proof-request/ConnectedWalletBadge.tsx
 create mode 100644 app/src/components/proof-request/DisclosureItem.tsx
 create mode 100644 app/src/components/proof-request/ProofMetadataBar.tsx
 create mode 100644 app/src/components/proof-request/ProofRequestCard.tsx
 create mode 100644 app/src/components/proof-request/ProofRequestHeader.tsx
 create mode 100644 app/src/components/proof-request/designTokens.ts
 create mode 100644 app/src/components/proof-request/index.ts

diff --git a/app/src/components/documents/IDSelectorSheet.tsx b/app/src/components/documents/IDSelectorSheet.tsx
index 72fc549b0..2bef5b520 100644
--- a/app/src/components/documents/IDSelectorSheet.tsx
+++ b/app/src/components/documents/IDSelectorSheet.tsx
@@ -127,32 +127,13 @@ export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
             })}
           </ScrollView>
 
-          {/* Footer Buttons */}
-          <XStack gap={12} marginTop="$4" paddingBottom={bottomPadding}>
-            <Button
-              flex={1}
-              backgroundColor={white}
-              borderWidth={1}
-              borderColor={slate300}
-              borderRadius={8}
-              height={52}
-              onPress={onDismiss}
-              testID={`${testID}-dismiss-button`}
-            >
-              <Text
-                fontFamily={dinot}
-                fontSize={16}
-                fontWeight="500"
-                color={black}
-              >
-                Dismiss
-              </Text>
-            </Button>
+          {/* Footer Button */}
+          <XStack marginTop="$4" paddingBottom={bottomPadding}>
             <Button
               flex={1}
               backgroundColor={canApprove ? blue600 : slate300}
-              borderRadius={8}
-              height={52}
+              borderRadius={4}
+              height={48}
               onPress={onApprove}
               disabled={!canApprove}
               opacity={canApprove ? 1 : 0.5}
@@ -160,7 +141,7 @@ export const IDSelectorSheet: React.FC<IDSelectorSheetProps> = ({
             >
               <Text
                 fontFamily={dinot}
-                fontSize={16}
+                fontSize={18}
                 fontWeight="500"
                 color={white}
               >
diff --git a/app/src/components/proof-request/BottomActionBar.tsx b/app/src/components/proof-request/BottomActionBar.tsx
new file mode 100644
index 000000000..762f134aa
--- /dev/null
+++ b/app/src/components/proof-request/BottomActionBar.tsx
@@ -0,0 +1,155 @@
+// 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 React from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  StyleSheet,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text, View, XStack } from 'tamagui';
+
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import {
+  proofRequestColors,
+  sfSymbols,
+} from '@/components/proof-request/designTokens';
+
+export interface BottomActionBarProps {
+  selectedDocumentName: string;
+  onDocumentSelectorPress: () => void;
+  onApprovePress: () => void;
+  approveDisabled?: boolean;
+  approving?: boolean;
+  testID?: string;
+}
+
+/**
+ * Bottom action bar with document selector and approve button.
+ * Matches Figma design 15234:9322.
+ */
+export const BottomActionBar: React.FC<BottomActionBarProps> = ({
+  selectedDocumentName,
+  onDocumentSelectorPress,
+  onApprovePress,
+  approveDisabled = false,
+  approving = false,
+  testID = 'bottom-action-bar',
+}) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      backgroundColor={proofRequestColors.white}
+      paddingHorizontal={10}
+      paddingTop={10}
+      paddingBottom={Math.max(insets.bottom, 20) + 10}
+      testID={testID}
+    >
+      <XStack gap={10}>
+        {/* Document Selector Button */}
+        <Pressable
+          onPress={onDocumentSelectorPress}
+          style={({ pressed }) => [
+            styles.documentButton,
+            pressed && styles.documentButtonPressed,
+          ]}
+          testID={`${testID}-document-selector`}
+        >
+          <XStack
+            flex={1}
+            alignItems="center"
+            justifyContent="space-between"
+            paddingHorizontal={10}
+            paddingVertical={12}
+          >
+            <Text
+              fontFamily={dinot}
+              fontSize={18}
+              color={proofRequestColors.black}
+              flex={1}
+              numberOfLines={1}
+            >
+              {selectedDocumentName}
+            </Text>
+            <Text
+              fontSize={17}
+              fontWeight="700"
+              color={proofRequestColors.black}
+              fontFamily={Platform.OS === 'ios' ? 'SF Pro' : undefined}
+            >
+              {sfSymbols.chevronUpDown}
+            </Text>
+          </XStack>
+        </Pressable>
+
+        {/* Approve Button */}
+        <Pressable
+          onPress={onApprovePress}
+          disabled={approveDisabled || approving}
+          style={({ pressed }) => [
+            styles.approveButton,
+            (approveDisabled || approving) && styles.approveButtonDisabled,
+            pressed &&
+              !approveDisabled &&
+              !approving &&
+              styles.approveButtonPressed,
+          ]}
+          testID={`${testID}-approve`}
+        >
+          <View
+            flex={1}
+            alignItems="center"
+            justifyContent="center"
+            paddingHorizontal={10}
+            paddingVertical={12}
+          >
+            {approving ? (
+              <ActivityIndicator
+                color={proofRequestColors.white}
+                size="small"
+              />
+            ) : (
+              <Text
+                fontFamily={dinot}
+                fontSize={18}
+                color={proofRequestColors.white}
+                textAlign="center"
+              >
+                Approve
+              </Text>
+            )}
+          </View>
+        </Pressable>
+      </XStack>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  documentButton: {
+    flex: 1,
+    backgroundColor: proofRequestColors.white,
+    borderWidth: 1,
+    borderColor: proofRequestColors.slate200,
+    borderRadius: 4,
+  },
+  documentButtonPressed: {
+    opacity: 0.7,
+  },
+  approveButton: {
+    flex: 1,
+    backgroundColor: proofRequestColors.blue600,
+    borderRadius: 4,
+  },
+  approveButtonDisabled: {
+    opacity: 0.5,
+  },
+  approveButtonPressed: {
+    opacity: 0.8,
+  },
+});
diff --git a/app/src/components/proof-request/ConnectedWalletBadge.tsx b/app/src/components/proof-request/ConnectedWalletBadge.tsx
new file mode 100644
index 000000000..e948ac85b
--- /dev/null
+++ b/app/src/components/proof-request/ConnectedWalletBadge.tsx
@@ -0,0 +1,112 @@
+// 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 React from 'react';
+import { Platform, Pressable } from 'react-native';
+import { Text, View, XStack } from 'tamagui';
+
+import { plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import {
+  proofRequestColors,
+  sfSymbols,
+} from '@/components/proof-request/designTokens';
+
+export interface ConnectedWalletBadgeProps {
+  address: string;
+  userIdType?: string;
+  onToggle?: () => void;
+  testID?: string;
+}
+
+/**
+ * Blue badge showing connected wallet address.
+ * Matches Figma design 15234:9267.
+ */
+export const ConnectedWalletBadge: React.FC<ConnectedWalletBadgeProps> = ({
+  address,
+  userIdType,
+  onToggle,
+  testID = 'connected-wallet-badge',
+}) => {
+  const label = userIdType === 'hex' ? 'Connected Wallet' : 'Connected ID';
+
+  const content = (
+    <XStack
+      backgroundColor={proofRequestColors.blue600}
+      paddingLeft={10}
+      paddingRight={20}
+      paddingVertical={12}
+      borderRadius={4}
+      alignItems="center"
+      gap={10}
+      testID={testID}
+    >
+      {/* Label with icon */}
+      <XStack
+        backgroundColor={proofRequestColors.blue700}
+        paddingHorizontal={6}
+        paddingVertical={4}
+        borderRadius={3}
+        alignItems="center"
+        gap={6}
+      >
+        <Text
+          fontSize={11}
+          fontWeight="600"
+          color={proofRequestColors.white}
+          fontFamily={Platform.OS === 'ios' ? 'SF Pro' : undefined}
+        >
+          {sfSymbols.wallet}
+        </Text>
+        <Text
+          fontFamily={plexMono}
+          fontSize={12}
+          color={proofRequestColors.white}
+          textTransform="uppercase"
+        >
+          {label}
+        </Text>
+      </XStack>
+
+      {/* Address */}
+      <View flex={1}>
+        <Text
+          fontFamily={plexMono}
+          fontSize={12}
+          color={proofRequestColors.white}
+          textAlign="right"
+          testID={`${testID}-address`}
+        >
+          {address}
+        </Text>
+      </View>
+    </XStack>
+  );
+
+  if (onToggle) {
+    return (
+      <Pressable onPress={onToggle} testID={`${testID}-pressable`}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+};
+
+/**
+ * Truncates a wallet address for display.
+ * @example truncateAddress("0x1234567890abcdef1234567890abcdef12345678") // "0x12..5678"
+ */
+export function truncateAddress(
+  address: string,
+  startChars = 4,
+  endChars = 4,
+): string {
+  if (address.length <= startChars + endChars + 2) {
+    return address;
+  }
+  return `${address.slice(0, startChars)}..${address.slice(-endChars)}`;
+}
diff --git a/app/src/components/proof-request/DisclosureItem.tsx b/app/src/components/proof-request/DisclosureItem.tsx
new file mode 100644
index 000000000..1ac919898
--- /dev/null
+++ b/app/src/components/proof-request/DisclosureItem.tsx
@@ -0,0 +1,95 @@
+// 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 React from 'react';
+import { Platform, Pressable } from 'react-native';
+import { Text, View, XStack } from 'tamagui';
+
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import {
+  proofRequestColors,
+  sfSymbols,
+} from '@/components/proof-request/designTokens';
+
+export interface DisclosureItemProps {
+  text: string;
+  verified?: boolean;
+  onInfoPress?: () => void;
+  isLast?: boolean;
+  testID?: string;
+}
+
+/**
+ * Individual disclosure row with green checkmark and optional info button.
+ * Matches Figma design 15234:9267.
+ */
+export const DisclosureItem: React.FC<DisclosureItemProps> = ({
+  text,
+  verified = true,
+  onInfoPress,
+  isLast = false,
+  testID = 'disclosure-item',
+}) => {
+  return (
+    <XStack
+      paddingVertical={16}
+      alignItems="center"
+      gap={10}
+      borderBottomWidth={isLast ? 0 : 1}
+      borderBottomColor={proofRequestColors.slate200}
+      testID={testID}
+    >
+      {/* Status Icon */}
+      <View width={25} alignItems="center" justifyContent="center">
+        <Text
+          fontSize={9}
+          fontWeight="600"
+          color={
+            verified
+              ? proofRequestColors.emerald500
+              : proofRequestColors.slate400
+          }
+          fontFamily={Platform.OS === 'ios' ? 'SF Pro' : undefined}
+        >
+          {sfSymbols.filledCircle}
+        </Text>
+      </View>
+
+      {/* Disclosure Text */}
+      <View flex={1}>
+        <Text
+          fontFamily={dinot}
+          fontSize={12}
+          color={proofRequestColors.slate900}
+          textTransform="uppercase"
+          letterSpacing={0.48}
+          testID={`${testID}-text`}
+        >
+          {text}
+        </Text>
+      </View>
+
+      {/* Info Button */}
+      {onInfoPress && (
+        <Pressable
+          onPress={onInfoPress}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          testID={`${testID}-info-button`}
+        >
+          <View width={25} alignItems="center" justifyContent="center">
+            <Text
+              fontSize={16}
+              fontWeight="700"
+              color={proofRequestColors.blue500}
+              fontFamily={Platform.OS === 'ios' ? 'SF Pro' : undefined}
+            >
+              {sfSymbols.infoCircle}
+            </Text>
+          </View>
+        </Pressable>
+      )}
+    </XStack>
+  );
+};
diff --git a/app/src/components/proof-request/ProofMetadataBar.tsx b/app/src/components/proof-request/ProofMetadataBar.tsx
new file mode 100644
index 000000000..d8c8275b1
--- /dev/null
+++ b/app/src/components/proof-request/ProofMetadataBar.tsx
@@ -0,0 +1,95 @@
+// 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 React from 'react';
+import { Platform } from 'react-native';
+import { Text, View, XStack } from 'tamagui';
+
+import { plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import {
+  proofRequestColors,
+  sfSymbols,
+} from '@/components/proof-request/designTokens';
+
+export interface ProofMetadataBarProps {
+  timestamp: string;
+  testID?: string;
+}
+
+/**
+ * Gray metadata bar showing "PROOFS REQUESTED" label and timestamp.
+ * Matches Figma design 15234:9267.
+ */
+export const ProofMetadataBar: React.FC<ProofMetadataBarProps> = ({
+  timestamp,
+  testID = 'proof-metadata-bar',
+}) => {
+  return (
+    <View
+      backgroundColor={proofRequestColors.slate200}
+      paddingVertical={6}
+      alignItems="center"
+      justifyContent="center"
+      borderBottomWidth={1}
+      borderBottomColor={proofRequestColors.slate200}
+      testID={testID}
+    >
+      <XStack gap={6} alignItems="center">
+        {/* Document icon */}
+        <Text
+          fontSize={14}
+          fontWeight="700"
+          color={proofRequestColors.slate400}
+          fontFamily={Platform.OS === 'ios' ? 'SF Pro' : undefined}
+        >
+          {sfSymbols.document}
+        </Text>
+
+        <Text
+          fontFamily={plexMono}
+          fontSize={12}
+          color={proofRequestColors.slate400}
+          textTransform="uppercase"
+        >
+          Proofs Requested
+        </Text>
+
+        <Text
+          fontFamily={plexMono}
+          fontSize={12}
+          color={proofRequestColors.slate400}
+        >
+          •
+        </Text>
+
+        <Text
+          fontFamily={plexMono}
+          fontSize={12}
+          color={proofRequestColors.slate400}
+          testID={`${testID}-timestamp`}
+        >
+          {timestamp}
+        </Text>
+      </XStack>
+    </View>
+  );
+};
+
+/**
+ * Formats a Date object to match the Figma timestamp format.
+ * @example formatTimestamp(new Date()) // "4/7/2025 11:44 AM"
+ */
+export function formatTimestamp(date: Date): string {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const displayHours = hours % 12 || 12;
+  const displayMinutes = minutes.toString().padStart(2, '0');
+
+  return `${month}/${day}/${year} ${displayHours}:${displayMinutes} ${ampm}`;
+}
diff --git a/app/src/components/proof-request/ProofRequestCard.tsx b/app/src/components/proof-request/ProofRequestCard.tsx
new file mode 100644
index 000000000..f72408ed3
--- /dev/null
+++ b/app/src/components/proof-request/ProofRequestCard.tsx
@@ -0,0 +1,108 @@
+// 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 React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import { ScrollView } from 'react-native';
+import { Text, View } from 'tamagui';
+
+import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import {
+  proofRequestColors,
+  proofRequestSpacing,
+} from '@/components/proof-request/designTokens';
+import {
+  formatTimestamp,
+  ProofMetadataBar,
+} from '@/components/proof-request/ProofMetadataBar';
+import { ProofRequestHeader } from '@/components/proof-request/ProofRequestHeader';
+
+export interface ProofRequestCardProps {
+  logoSource: ImageSourcePropType | null;
+  appName: string;
+  appUrl: string | null;
+  documentType?: string;
+  timestamp?: Date;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+/**
+ * Main card container for proof request screens.
+ * Combines header, metadata bar, and content section.
+ * Matches Figma design 15234:9267.
+ */
+export const ProofRequestCard: React.FC<ProofRequestCardProps> = ({
+  logoSource,
+  appName,
+  appUrl,
+  documentType = 'Passport',
+  timestamp = new Date(),
+  children,
+  testID = 'proof-request-card',
+}) => {
+  // Build request message with highlighted app name and document type
+  const requestMessage = (
+    <>
+      <Text color={proofRequestColors.white} fontFamily={dinot}>
+        {appName}
+      </Text>
+      <Text color={proofRequestColors.slate400} fontFamily={dinot}>
+        {
+          ' is requesting access to the following information from your verified '
+        }
+      </Text>
+      <Text color={proofRequestColors.white} fontFamily={dinot}>
+        {documentType}
+      </Text>
+      <Text color={proofRequestColors.slate400} fontFamily={dinot}>
+        .
+      </Text>
+    </>
+  );
+
+  return (
+    <View flex={1} paddingVertical={20} paddingHorizontal={20} testID={testID}>
+      <View
+        borderRadius={proofRequestSpacing.borderRadius}
+        borderWidth={1}
+        borderColor={proofRequestColors.slate200}
+        overflow="hidden"
+        flex={1}
+      >
+        {/* Black Header */}
+        <ProofRequestHeader
+          logoSource={logoSource}
+          appName={appName}
+          appUrl={appUrl}
+          requestMessage={requestMessage}
+          testID={`${testID}-header`}
+        />
+
+        {/* Metadata Bar */}
+        <ProofMetadataBar
+          timestamp={formatTimestamp(timestamp)}
+          testID={`${testID}-metadata`}
+        />
+
+        {/* White Content Area */}
+        <View
+          flex={1}
+          backgroundColor={proofRequestColors.slate100}
+          padding={proofRequestSpacing.cardPadding}
+          borderBottomLeftRadius={proofRequestSpacing.borderRadius}
+          borderBottomRightRadius={proofRequestSpacing.borderRadius}
+        >
+          <ScrollView
+            showsVerticalScrollIndicator={true}
+            contentContainerStyle={{ flexGrow: 1 }}
+          >
+            {children}
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/app/src/components/proof-request/ProofRequestHeader.tsx b/app/src/components/proof-request/ProofRequestHeader.tsx
new file mode 100644
index 000000000..107e19b1c
--- /dev/null
+++ b/app/src/components/proof-request/ProofRequestHeader.tsx
@@ -0,0 +1,97 @@
+// 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 React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import { Image, Text, View, YStack } from 'tamagui';
+
+import {
+  advercase,
+  dinot,
+  plexMono,
+} from '@selfxyz/mobile-sdk-alpha/constants/fonts';
+
+import { proofRequestColors } from '@/components/proof-request/designTokens';
+
+export interface ProofRequestHeaderProps {
+  logoSource: ImageSourcePropType | null;
+  appName: string;
+  appUrl: string | null;
+  requestMessage: React.ReactNode;
+  testID?: string;
+}
+
+/**
+ * Black header section for proof request screens.
+ * Displays app logo, name, URL, and request description.
+ * Matches Figma design 15234:9267.
+ */
+export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
+  logoSource,
+  appName,
+  appUrl,
+  requestMessage,
+  testID = 'proof-request-header',
+}) => {
+  return (
+    <View
+      backgroundColor={proofRequestColors.black}
+      padding={30}
+      gap={20}
+      testID={testID}
+    >
+      {/* Logo and App Info Row */}
+      <View flexDirection="row" alignItems="center" gap={20}>
+        {logoSource && (
+          <View
+            width={50}
+            height={50}
+            borderRadius={3}
+            overflow="hidden"
+            testID={`${testID}-logo`}
+          >
+            <Image
+              source={logoSource}
+              width={50}
+              height={50}
+              objectFit="contain"
+            />
+          </View>
+        )}
+        <YStack>
+          <Text
+            fontFamily={advercase}
+            fontSize={28}
+            color={proofRequestColors.white}
+            letterSpacing={1}
+            testID={`${testID}-app-name`}
+          >
+            {appName}
+          </Text>
+          {appUrl && (
+            <Text
+              fontFamily={plexMono}
+              fontSize={12}
+              color={proofRequestColors.zinc500}
+              testID={`${testID}-app-url`}
+            >
+              {appUrl}
+            </Text>
+          )}
+        </YStack>
+      </View>
+
+      {/* Request Description */}
+      <Text
+        fontFamily={dinot}
+        fontSize={16}
+        color={proofRequestColors.slate400}
+        lineHeight={24}
+        testID={`${testID}-request-message`}
+      >
+        {requestMessage}
+      </Text>
+    </View>
+  );
+};
diff --git a/app/src/components/proof-request/designTokens.ts b/app/src/components/proof-request/designTokens.ts
new file mode 100644
index 000000000..7280cd355
--- /dev/null
+++ b/app/src/components/proof-request/designTokens.ts
@@ -0,0 +1,52 @@
+// 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.
+
+/**
+ * Design tokens for proof request components.
+ * Extracted from Figma design 15234:9267 and 15234:9322.
+ */
+
+export const proofRequestColors = {
+  // Base colors
+  black: '#000000',
+  white: '#FFFFFF',
+
+  // Slate palette
+  slate100: '#F8FAFC',
+  slate200: '#E2E8F0',
+  slate400: '#94A3B8',
+  slate500: '#71717A',
+  slate900: '#0F172A',
+
+  // Blue palette
+  blue500: '#3B82F6',
+  blue600: '#2563EB',
+  blue700: '#1D4ED8',
+
+  // Status colors
+  emerald500: '#10B981',
+
+  // Zinc palette
+  zinc500: '#71717A',
+} as const;
+
+export const proofRequestSpacing = {
+  cardPadding: 20,
+  headerPadding: 30,
+  itemPadding: 16,
+  borderRadius: 10,
+  borderRadiusSmall: 4,
+} as const;
+
+/**
+ * SF Symbols for proof request UI.
+ * These render as icons on iOS and need fallback on Android.
+ */
+export const sfSymbols = {
+  filledCircle: '􀀁', // Green checkmark circle
+  infoCircle: '􀅴', // Blue info circle
+  chevronUpDown: '􀆏', // Dropdown chevron
+  wallet: '􀟿', // Wallet icon
+  document: '􀥅', // Document icon
+} as const;
diff --git a/app/src/components/proof-request/index.ts b/app/src/components/proof-request/index.ts
new file mode 100644
index 000000000..a5aa4f4f9
--- /dev/null
+++ b/app/src/components/proof-request/index.ts
@@ -0,0 +1,51 @@
+// 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 { BottomActionBarProps } from '@/components/proof-request/BottomActionBar';
+
+// Metadata bar
+export type { ConnectedWalletBadgeProps } from '@/components/proof-request/ConnectedWalletBadge';
+
+export type { DisclosureItemProps } from '@/components/proof-request/DisclosureItem';
+
+// Header section
+export type { ProofMetadataBarProps } from '@/components/proof-request/ProofMetadataBar';
+
+/**
+ * Proof Request Component Library
+ *
+ * Shared components for proof request preview and proving screens.
+ * These components implement the Figma designs 15234:9267 and 15234:9322.
+ */
+// Main card component
+export type { ProofRequestCardProps } from '@/components/proof-request/ProofRequestCard';
+export type { ProofRequestHeaderProps } from '@/components/proof-request/ProofRequestHeader';
+
+export { BottomActionBar } from '@/components/proof-request/BottomActionBar';
+
+// Bottom action bar
+export {
+  ConnectedWalletBadge,
+  truncateAddress,
+} from '@/components/proof-request/ConnectedWalletBadge';
+
+export { DisclosureItem } from '@/components/proof-request/DisclosureItem';
+
+// Connected wallet badge
+export {
+  ProofMetadataBar,
+  formatTimestamp,
+} from '@/components/proof-request/ProofMetadataBar';
+
+// Disclosure item
+export { ProofRequestCard } from '@/components/proof-request/ProofRequestCard';
+
+export { ProofRequestHeader } from '@/components/proof-request/ProofRequestHeader';
+
+// Design tokens
+export {
+  proofRequestColors,
+  proofRequestSpacing,
+  sfSymbols,
+} from '@/components/proof-request/designTokens';
diff --git a/app/src/screens/verification/DocumentSelectorForProvingScreen.tsx b/app/src/screens/verification/DocumentSelectorForProvingScreen.tsx
index 0fa723782..c46daf577 100644
--- a/app/src/screens/verification/DocumentSelectorForProvingScreen.tsx
+++ b/app/src/screens/verification/DocumentSelectorForProvingScreen.tsx
@@ -9,20 +9,16 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  ActivityIndicator,
-  Image,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { ActivityIndicator, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text, View, YStack } from 'tamagui';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
+import type { Country3LetterCode } from '@selfxyz/common/constants';
+import { countryCodes } from '@selfxyz/common/constants';
 import { commonNames } from '@selfxyz/common/constants/countries';
+import type { SelfAppDisclosureConfig } from '@selfxyz/common/utils/appType';
 import { formatEndpoint } from '@selfxyz/common/utils/scope';
 import type {
   DocumentCatalog,
@@ -30,23 +26,26 @@ import type {
   IDDocument,
 } from '@selfxyz/common/utils/types';
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
-import {
-  black,
-  blue600,
-  slate300,
-  slate500,
-  white,
-} from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import { blue600, white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
 import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 import type { IDSelectorState } from '@/components/documents';
-import { IDSelectorItem, isDisabledState } from '@/components/documents';
+import { IDSelectorSheet, isDisabledState } from '@/components/documents';
+import {
+  BottomActionBar,
+  ConnectedWalletBadge,
+  DisclosureItem,
+  ProofRequestCard,
+  proofRequestColors,
+  truncateAddress,
+} from '@/components/proof-request';
 import type { RootStackParamList } from '@/navigation';
 import { usePassport } from '@/providers/passportDataProvider';
 import {
   checkDocumentExpiration,
   getDocumentAttributes,
 } from '@/utils/documentAttributes';
+import { formatUserId } from '@/utils/formatUserId';
 
 /**
  * Converts a 3-letter country code to its full country name
@@ -94,6 +93,22 @@ function getDocumentDisplayName(
   return isMock ? `Developer ${metadata.documentType}` : metadata.documentType;
 }
 
+/**
+ * Gets the document type display name for the proof request message.
+ */
+function getDocumentTypeName(category: string | undefined): string {
+  switch (category) {
+    case 'passport':
+      return 'Passport';
+    case 'id_card':
+      return 'ID Card';
+    case 'aadhaar':
+      return 'Aadhaar';
+    default:
+      return 'Document';
+  }
+}
+
 function determineDocumentState(
   metadata: DocumentMetadata,
   documentData: IDDocument | undefined,
@@ -123,6 +138,95 @@ function determineDocumentState(
   return 'verified';
 }
 
+/**
+ * Converts a list of strings to a sentence with "nor" conjunctions.
+ */
+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)}`;
+}
+
+/**
+ * Converts country codes to a readable sentence.
+ */
+function countriesToSentence(countries: Country3LetterCode[]): string {
+  return listToString(countries.map(country => countryCodes[country]));
+}
+
+/**
+ * Generates disclosure items from the selfApp disclosure config.
+ */
+function getDisclosureItems(
+  disclosures: SelfAppDisclosureConfig,
+): Array<{ key: string; text: string }> {
+  const ORDERED_KEYS: Array<keyof SelfAppDisclosureConfig> = [
+    'issuing_state',
+    'name',
+    'passport_number',
+    'nationality',
+    'date_of_birth',
+    'gender',
+    'expiry_date',
+    'ofac',
+    'excludedCountries',
+    'minimumAge',
+  ] as const;
+
+  const items: Array<{ key: string; text: string }> = [];
+
+  for (const key of ORDERED_KEYS) {
+    const isEnabled = disclosures[key];
+    if (!isEnabled || (Array.isArray(isEnabled) && isEnabled.length === 0)) {
+      continue;
+    }
+
+    let text = '';
+    switch (key) {
+      case 'ofac':
+        text = 'Not on the OFAC list';
+        break;
+      case 'excludedCountries':
+        text = `Not a citizen of: ${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:
+        continue;
+    }
+    items.push({ key, text });
+  }
+
+  return items;
+}
+
 const DocumentSelectorForProvingScreen: React.FC = () => {
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -145,8 +249,10 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
   const abortControllerRef = useRef<AbortController | null>(null);
 
+  // Memoized values from selfApp
   const logoSource = useMemo(() => {
     if (!selfApp?.logoBase64) {
       return null;
@@ -172,6 +278,21 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
     return formatEndpoint(selfApp.endpoint);
   }, [selfApp?.endpoint]);
 
+  const disclosures = useMemo(
+    () => (selfApp?.disclosures as SelfAppDisclosureConfig) || {},
+    [selfApp?.disclosures],
+  );
+
+  const disclosureItems = useMemo(
+    () => getDisclosureItems(disclosures),
+    [disclosures],
+  );
+
+  const formattedUserId = useMemo(
+    () => formatUserId(selfApp?.userId, selfApp?.userIdType),
+    [selfApp?.userId, selfApp?.userIdType],
+  );
+
   const pickInitialDocument = useCallback(
     (
       catalog: DocumentCatalog,
@@ -289,21 +410,27 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
   const canContinue =
     !!selectedDocument && !isDisabledState(selectedDocument.state);
 
-  const handleSelect = (documentId: string) => {
-    const document = documents.find(doc => doc.id === documentId);
-    if (!document || isDisabledState(document.state)) {
-      return;
-    }
-    setSelectedDocumentId(documentId);
-  };
+  // Get document type for the proof request message
+  const selectedDocumentType = useMemo(() => {
+    if (!selectedDocumentId) return 'Document';
+    const metadata = documentCatalog.documents.find(
+      d => d.id === selectedDocumentId,
+    );
+    return getDocumentTypeName(metadata?.documentCategory);
+  }, [selectedDocumentId, documentCatalog.documents]);
 
-  const handleContinue = async () => {
+  const handleSelect = useCallback((documentId: string) => {
+    setSelectedDocumentId(documentId);
+  }, []);
+
+  const handleApprove = async () => {
     if (!selectedDocumentId || !canContinue || submitting) {
       return;
     }
 
     setSubmitting(true);
     setError(null);
+    setSheetOpen(false);
     try {
       await setSelectedDocument(selectedDocumentId);
       navigation.navigate('Prove');
@@ -315,111 +442,155 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
     }
   };
 
-  return (
-    <View style={styles.container}>
-      {/* Compact Header */}
-      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
-        <View style={styles.headerRow}>
-          {logoSource ? (
-            <Image
-              source={logoSource}
-              style={styles.logo}
-              resizeMode="contain"
-              testID="document-selector-logo"
-            />
-          ) : null}
-          <View style={styles.headerTextContainer}>
-            <Text style={styles.appName} numberOfLines={1}>
-              {selfApp?.appName || 'Self'}
-            </Text>
-            {url ? (
-              <Text
-                style={styles.appUrl}
-                numberOfLines={1}
-                testID="document-selector-app-url"
-              >
-                {url}
-              </Text>
-            ) : null}
-          </View>
-        </View>
-        <Text style={styles.headerDescription}>
-          Select an ID to prove your information
+  // Loading state
+  if (loading) {
+    return (
+      <View
+        flex={1}
+        backgroundColor={proofRequestColors.white}
+        alignItems="center"
+        justifyContent="center"
+        paddingTop={insets.top}
+        testID="document-selector-loading-container"
+      >
+        <ActivityIndicator color={blue600} size="large" />
+        <Text
+          fontFamily={dinot}
+          fontSize={16}
+          color={proofRequestColors.slate500}
+          marginTop={16}
+          testID="document-selector-loading"
+        >
+          Loading documents...
         </Text>
       </View>
+    );
+  }
 
-      {/* Main Content - Document List */}
-      <View style={styles.content}>
-        <Text style={styles.sectionTitle}>Select an ID</Text>
-        {loading ? (
-          <View style={styles.statusContainer}>
-            <ActivityIndicator color={blue600} size="small" />
-            <Text style={styles.statusText} testID="document-selector-loading">
-              Loading documents...
-            </Text>
-          </View>
-        ) : error ? (
-          <View style={styles.statusContainer}>
-            <Text style={styles.statusText} testID="document-selector-error">
-              {error}
-            </Text>
-            <Pressable
-              onPress={loadDocuments}
-              style={[styles.actionButton, styles.retryButton]}
-              testID="document-selector-retry"
-            >
-              <Text style={styles.retryButtonText}>Retry</Text>
-            </Pressable>
-          </View>
-        ) : documents.length === 0 ? (
-          <View style={styles.statusContainer}>
-            <Text style={styles.statusText} testID="document-selector-empty">
-              No documents found. Please scan a document first.
-            </Text>
-          </View>
-        ) : (
-          <ScrollView
-            style={styles.scrollView}
-            showsVerticalScrollIndicator={true}
-            contentContainerStyle={styles.list}
-            testID="document-selector-list"
-          >
-            {documents.map(doc => (
-              <IDSelectorItem
-                key={doc.id}
-                documentName={doc.name}
-                state={doc.state}
-                onPress={() => handleSelect(doc.id)}
-                testID={`document-selector-item-${doc.id}`}
-              />
-            ))}
-          </ScrollView>
-        )}
-      </View>
-
-      {/* Footer Button */}
+  // Error state
+  if (error) {
+    return (
       <View
-        style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 16) }]}
+        flex={1}
+        backgroundColor={proofRequestColors.white}
+        alignItems="center"
+        justifyContent="center"
+        paddingTop={insets.top}
+        gap={16}
       >
-        <Pressable
-          onPress={handleContinue}
-          disabled={!canContinue || submitting}
-          style={({ pressed }) => [
-            styles.continueButton,
-            {
-              backgroundColor: canContinue && !submitting ? blue600 : slate300,
-              opacity: canContinue && !submitting ? (pressed ? 0.8 : 1) : 0.5,
-            },
-          ]}
-          testID="document-selector-continue"
+        <Text
+          fontFamily={dinot}
+          fontSize={16}
+          color={proofRequestColors.slate500}
+          textAlign="center"
+          testID="document-selector-error"
         >
-          {submitting ? (
-            <ActivityIndicator color={white} size="small" />
-          ) : (
-            <Text style={styles.continueButtonText}>Continue to Proof</Text>
-          )}
-        </Pressable>
+          {error}
+        </Text>
+        <View
+          paddingHorizontal={24}
+          paddingVertical={12}
+          borderRadius={8}
+          borderWidth={1}
+          borderColor={proofRequestColors.slate200}
+          onPress={loadDocuments}
+          pressStyle={{ opacity: 0.7 }}
+          testID="document-selector-retry"
+        >
+          <Text
+            fontFamily={dinot}
+            fontSize={16}
+            color={proofRequestColors.slate500}
+          >
+            Retry
+          </Text>
+        </View>
       </View>
+    );
+  }
+
+  // Empty state
+  if (documents.length === 0) {
+    return (
+      <View
+        flex={1}
+        backgroundColor={proofRequestColors.white}
+        alignItems="center"
+        justifyContent="center"
+        paddingTop={insets.top}
+      >
+        <Text
+          fontFamily={dinot}
+          fontSize={16}
+          color={proofRequestColors.slate500}
+          textAlign="center"
+          paddingHorizontal={40}
+          testID="document-selector-empty"
+        >
+          No documents found. Please scan a document first.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Main Content - Proof Request Card */}
+      <ProofRequestCard
+        logoSource={logoSource}
+        appName={selfApp?.appName || 'Self'}
+        appUrl={url}
+        documentType={selectedDocumentType}
+        testID="document-selector-card"
+      >
+        {/* Connected Wallet Badge */}
+        {formattedUserId && (
+          <ConnectedWalletBadge
+            address={
+              selfApp?.userIdType === 'hex'
+                ? truncateAddress(selfApp?.userId || '')
+                : formattedUserId
+            }
+            userIdType={selfApp?.userIdType}
+            testID="document-selector-wallet-badge"
+          />
+        )}
+
+        {/* Disclosure Items */}
+        <YStack marginTop={formattedUserId ? 16 : 0}>
+          {disclosureItems.map((item, index) => (
+            <DisclosureItem
+              key={item.key}
+              text={item.text}
+              verified={true}
+              isLast={index === disclosureItems.length - 1}
+              testID={`document-selector-disclosure-${item.key}`}
+            />
+          ))}
+        </YStack>
+      </ProofRequestCard>
+
+      {/* Bottom Action Bar */}
+      <BottomActionBar
+        selectedDocumentName={selectedDocument?.name || 'Select ID'}
+        onDocumentSelectorPress={() => setSheetOpen(true)}
+        onApprovePress={handleApprove}
+        approveDisabled={!canContinue}
+        approving={submitting}
+        testID="document-selector-action-bar"
+      />
+
+      {/* ID Selector Sheet */}
+      <IDSelectorSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        documents={documents}
+        selectedId={selectedDocumentId}
+        onSelect={handleSelect}
+        onDismiss={() => setSheetOpen(false)}
+        onApprove={handleApprove}
+        testID="document-selector-sheet"
+      />
     </View>
   );
 };
@@ -429,106 +600,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: white,
   },
-  header: {
-    backgroundColor: black,
-    paddingHorizontal: 20,
-    paddingBottom: 16,
-  },
-  headerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  headerTextContainer: {
-    flex: 1,
-    marginLeft: 12,
-  },
-  logo: {
-    width: 40,
-    height: 40,
-  },
-  appName: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: white,
-    fontFamily: dinot,
-  },
-  appUrl: {
-    fontSize: 12,
-    color: slate300,
-    fontFamily: dinot,
-    marginTop: 2,
-  },
-  headerDescription: {
-    fontSize: 14,
-    color: slate300,
-    fontFamily: dinot,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 20,
-    paddingTop: 20,
-  },
-  sectionTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: black,
-    fontFamily: dinot,
-    marginBottom: 16,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  list: {
-    paddingBottom: 16,
-  },
-  statusContainer: {
-    flex: 1,
-    gap: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  statusText: {
-    fontSize: 16,
-    color: slate500,
-    textAlign: 'center',
-    fontFamily: dinot,
-  },
-  actionButton: {
-    borderRadius: 8,
-    height: 52,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-  },
-  retryButton: {
-    borderWidth: 1,
-    borderColor: slate300,
-    backgroundColor: white,
-  },
-  retryButtonText: {
-    fontSize: 16,
-    color: slate500,
-    fontFamily: dinot,
-  },
-  footer: {
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    backgroundColor: white,
-    borderTopWidth: 1,
-    borderTopColor: slate300,
-  },
-  continueButton: {
-    borderRadius: 8,
-    height: 52,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  continueButtonText: {
-    fontSize: 16,
-    color: white,
-    fontFamily: dinot,
-  },
 });
 
 export { DocumentSelectorForProvingScreen };
diff --git a/app/src/screens/verification/ProvingScreenRouter.tsx b/app/src/screens/verification/ProvingScreenRouter.tsx
index 5eb112151..8178e2594 100644
--- a/app/src/screens/verification/ProvingScreenRouter.tsx
+++ b/app/src/screens/verification/ProvingScreenRouter.tsx
@@ -28,17 +28,13 @@ import {
 } from '@/utils/documentAttributes';
 
 /**
- * Determines if a document is valid for selection (not mock, not expired).
+ * Determines if a document is valid for selection (not expired).
+ * Mock documents are valid for testing with staging environments.
  */
 function isValidDocument(
   metadata: DocumentMetadata,
   documentData: IDDocument | undefined,
 ): boolean {
-  // Mock documents are not valid
-  if (metadata.mock) {
-    return false;
-  }
-
   // Check if expired
   if (documentData) {
     try {
diff --git a/app/src/utils/devUtils.ts b/app/src/utils/devUtils.ts
index 1bd470b67..57eceba0b 100644
--- a/app/src/utils/devUtils.ts
+++ b/app/src/utils/devUtils.ts
@@ -8,4 +8,4 @@
  * Use this constant instead of checking __DEV__ directly throughout the codebase.
  */
 export const IS_DEV_MODE = typeof __DEV__ !== 'undefined' && __DEV__;
-export const IS_EUCLID_ENABLED = false; //IS_DEV_MODE; // just in case we forgot to turn it off before pushing to prod.
+export const IS_EUCLID_ENABLED = true; // Enabled for proof request UI redesign