Refactor ProveScreen to ProofRequestCard layout and preserve scroll position

app/src/components/proof-request/BottomVerifyBar.tsx

@@ -0,0 +1,49 @@
+// 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { View } from 'tamagui';
+
+import { HeldPrimaryButtonProveScreen } from '@selfxyz/mobile-sdk-alpha/components';
+
+import { proofRequestColors } from '@/components/proof-request/designTokens';
+
+export interface BottomVerifyBarProps {
+  onVerify: () => void;
+  selectedAppSessionId: string | undefined | null;
+  hasScrolledToBottom: boolean;
+  isReadyToProve: boolean;
+  isDocumentExpired: boolean;
+  testID?: string;
+}
+
+export const BottomVerifyBar: React.FC<BottomVerifyBarProps> = ({
+  onVerify,
+  selectedAppSessionId,
+  hasScrolledToBottom,
+  isReadyToProve,
+  isDocumentExpired,
+  testID = 'bottom-verify-bar',
+}) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      backgroundColor={proofRequestColors.white}
+      paddingHorizontal={16}
+      paddingTop={12}
+      paddingBottom={Math.max(insets.bottom, 12) + 12}
+      testID={testID}
+    >
+      <HeldPrimaryButtonProveScreen
+        onVerify={onVerify}
+        selectedAppSessionId={selectedAppSessionId}
+        hasScrolledToBottom={hasScrolledToBottom}
+        isReadyToProve={isReadyToProve}
+        isDocumentExpired={isDocumentExpired}
+      />
+    </View>
+  );
+};

app/src/components/proof-request/ProofRequestCard.tsx

@@ -3,7 +3,13 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import type {
+  ImageSourcePropType,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView as ScrollViewType,
+} from 'react-native';
 import { ScrollView } from 'react-native';
 import { Text, View } from 'tamagui';
 
@@ -27,6 +33,11 @@ export interface ProofRequestCardProps {
   timestamp?: Date;
   children?: React.ReactNode;
   testID?: string;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollViewRef?: React.RefObject<ScrollViewType>;
+  onContentSizeChange?: (width: number, height: number) => void;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  initialScrollOffset?: number;
 }
 
 /**
@@ -42,6 +53,11 @@ export const ProofRequestCard: React.FC<ProofRequestCardProps> = ({
   timestamp = new Date(),
   children,
   testID = 'proof-request-card',
+  onScroll,
+  scrollViewRef,
+  onContentSizeChange,
+  onLayout,
+  initialScrollOffset,
 }) => {
   // Build request message with highlighted app name and document type
   const requestMessage = (
@@ -96,8 +112,18 @@ export const ProofRequestCard: React.FC<ProofRequestCardProps> = ({
           borderBottomRightRadius={proofRequestSpacing.borderRadius}
         >
           <ScrollView
+            ref={scrollViewRef}
             showsVerticalScrollIndicator={true}
             contentContainerStyle={{ flexGrow: 1 }}
+            onScroll={onScroll}
+            scrollEventThrottle={16}
+            onContentSizeChange={onContentSizeChange}
+            onLayout={onLayout}
+            contentOffset={
+              typeof initialScrollOffset === 'number'
+                ? { x: 0, y: initialScrollOffset }
+                : undefined
+            }
           >
             {children}
           </ScrollView>

app/src/components/proof-request/ProofRequestHeader.tsx

@@ -34,6 +34,8 @@ export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
   requestMessage,
   testID = 'proof-request-header',
 }) => {
+  const hasLogo = logoSource !== null;
+
   return (
     <View
       backgroundColor={proofRequestColors.black}
@@ -70,14 +72,18 @@ export const ProofRequestHeader: React.FC<ProofRequestHeaderProps> = ({
             {appName}
           </Text>
           {appUrl && (
-            <Text
-              fontFamily={plexMono}
-              fontSize={12}
-              color={proofRequestColors.zinc500}
-              testID={`${testID}-app-url`}
-            >
-              {appUrl}
-            </Text>
+            <View marginRight={hasLogo ? 50 : 0}>
+              <Text
+                fontFamily={plexMono}
+                fontSize={12}
+                color={proofRequestColors.zinc500}
+                testID={`${testID}-app-url`}
+                numberOfLines={1}
+                ellipsizeMode="middle"
+              >
+                {appUrl}
+              </Text>
+            </View>
           )}
         </YStack>
       </View>

app/src/components/proof-request/index.ts

@@ -3,6 +3,7 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 export type { BottomActionBarProps } from '@/components/proof-request/BottomActionBar';
+export type { BottomVerifyBarProps } from '@/components/proof-request/BottomVerifyBar';
 
 // Metadata bar
 export type { ConnectedWalletBadgeProps } from '@/components/proof-request/ConnectedWalletBadge';
@@ -28,6 +29,7 @@ export type { WalletAddressModalProps } from '@/components/proof-request/WalletA
 
 // Icons
 export { BottomActionBar } from '@/components/proof-request/BottomActionBar';
+export { BottomVerifyBar } from '@/components/proof-request/BottomVerifyBar';
 
 // Bottom action bar
 export {

app/src/navigation/index.tsx

@@ -151,7 +151,11 @@ export type RootStackParamList = Omit<
   ProofHistoryDetail: {
     data: ProofHistory;
   };
-  Prove: undefined;
+  Prove:
+    | {
+        scrollOffset?: number;
+      }
+    | undefined;
   ProvingScreenRouter: undefined;
   DocumentSelectorForProving: undefined;
 

app/src/navigation/verification.ts

@@ -47,7 +47,7 @@ const verificationScreens = {
   Prove: {
     screen: ProveScreen,
     options: {
-      title: 'Request Proof',
+      title: 'Proof Requested',
       headerStyle: {
         backgroundColor: black,
       },

app/src/screens/verification/DocumentSelectorForProvingScreen.tsx

@@ -9,13 +9,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 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';
@@ -45,6 +44,7 @@ import {
 } from '@/components/proof-request';
 import type { RootStackParamList } from '@/navigation';
 import { usePassport } from '@/providers/passportDataProvider';
+import { getDisclosureItems } from '@/utils/disclosureUtils';
 import { formatUserId } from '@/utils/formatUserId';
 
 /**
@@ -128,95 +128,6 @@ 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>>();
@@ -241,6 +152,7 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [walletModalOpen, setWalletModalOpen] = useState(false);
   const abortControllerRef = useRef<AbortController | null>(null);
+  const scrollOffsetRef = useRef(0);
 
   // Memoized values from selfApp
   const logoSource = useMemo(() => {
@@ -423,7 +335,7 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
     setSheetOpen(false);
     try {
       await setSelectedDocument(selectedDocumentId);
-      navigation.navigate('Prove');
+      navigation.navigate('Prove', { scrollOffset: scrollOffsetRef.current });
     } catch (selectionError) {
       console.error('Failed to set selected document:', selectionError);
       setError('Failed to select document. Please try again.');
@@ -432,6 +344,13 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
     }
   };
 
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+    },
+    [],
+  );
+
   // Loading state
   if (loading) {
     return (
@@ -528,6 +447,7 @@ const DocumentSelectorForProvingScreen: React.FC = () => {
         appName={selfApp?.appName || 'Self'}
         appUrl={url}
         documentType={selectedDocumentType}
+        onScroll={handleScroll}
         testID="document-selector-card"
       >
         {/* Connected Wallet Badge */}