chore: address clunky Prove screen button feedback #1578
Conversation
📝 WalkthroughWalkthroughProveScreen.tsx updates scroll handling: it computes an Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e5f7d2b142
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/src/screens/verification/ProveScreen.tsx (1)
220-262: Remove console logging ofselectedAppand addresses (likely PII/session identifiers).
These logs can leak user identifiers/session IDs/endpoints and wallet/points addresses into device logs/remote log collectors. As per coding guidelines, avoid logging sensitive data in**/*.{ts,tsx}.Proposed fix
diff --git a/app/src/screens/verification/ProveScreen.tsx b/app/src/screens/verification/ProveScreen.tsx @@ useEffect(() => { - console.log('useEffect selectedApp', selectedApp); if (!selectedApp || selectedApp.selfDefinedData) { return; } @@ if (isWhitelisted) { - console.log( - 'enhancing app with whitelisted points address', - address, - ); selfClient.getSelfAppState().setSelfApp({ ...currentApp, selfDefinedData: address.toLowerCase(), }); }
🤖 Fix all issues with AI agents
In @app/src/screens/verification/ProveScreen.tsx:
- Around line 18-19: In the ProveScreen component remove the console.log calls
that print the full selectedApp object (references to selectedApp around where
it's used in the component) so sessionId, userId, endpoint, disclosures and
other PII are not emitted; if you need runtime visibility, log only
non-sensitive fields or sanitized/redacted values (e.g., app name or a boolean
flag) instead of printing selectedApp wholesale.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/screens/verification/ProveScreen.tsx
🧰 Additional context used
📓 Path-based instructions (22)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{js,jsx,ts,tsx}: NEVER log sensitive data including PII (names, DOB, passport numbers, addresses), credentials, tokens, API keys, private keys, or session identifiers.
ALWAYS redact/mask sensitive fields in logs using consistent patterns (e.g.,***-***-1234for passport numbers,J*** D***for names).
Files:
app/src/screens/verification/ProveScreen.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use React Navigation withcreateStaticNavigationfor type-safe navigation in React Native applications.
Implement platform-specific handling withPlatform.OS === 'ios' ? 'iOS' : 'Android'checks before platform-specific code in React Native.
Initialize native modules withinitializeNativeModules()before any native operations in React Native.
Implement lazy loading for screens usingReact.lazy()in React Native applications.
Implement custom modal system withuseModalhook and callback registry in React Native.
Integrate haptic feedback usinguseHapticNavigationhook in React Native navigation.
Use platform-specific initial routes: web uses 'Home', mobile uses 'Splash' in React Navigation.
Use Zustand for global state management in React Native applications.
Use custom hooks for complex state (useModal,useHapticNavigation) instead of inline logic.
Use AsyncStorage for simple data, SQLite for complex data, and Keychain for sensitive data in React Native.
Use@/alias for src imports and@tests/alias for test imports in TypeScript/JavaScript files.
Use conditional rendering with Platform.OS for platform-specific code in React Native.
Use Tamagui for UI components in React Native applications.
Do not log sensitive data in production, including identity verification and passport information.
Use Keychain for secure storage of sensitive data in React Native.
Implement proper cleanup of sensitive data after use.
Implement certificate validation for passport data verification.
Always use try-catch for async operations in React Native and TypeScript code.
Implement graceful degradation when native modules fail in React Native.
Provide user-friendly error messages in UI and error handlers.
Lazy load screens and components to optimize bundle size in React Native.
Prevent memory leaks in native modules in React Native.
Files:
app/src/screens/verification/ProveScreen.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Implement comprehensive error boundaries in React components.
Files:
app/src/screens/verification/ProveScreen.tsx
**/*.{tsx,jsx,ts,js}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper cleanup in useEffect and component unmount hooks in React.
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,ofac,verification,identity}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
**/{compliance,ofac,verification,identity}/**/*.{ts,tsx,js,py}: Implement three-tier OFAC verification system: Passport Number Check (direct passport validation), Name + DOB Check (full name with exact date of birth), and Name + Year Check (name with year of birth, defaulting to Jan-01)
Apply Jaro–Winkler fuzzy matching algorithm with ≥0.92 threshold for OFAC name verification
Validate passport numbers by removing whitespace/punctuation and performing country-specific format validation
Protect all PII by committing via domain-separated hashes using Poseidon hash function with 'ofac-v1' domain separator
Implement per-issuer salt for additional privacy in OFAC hash commitments, with unique salt per issuing country
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,ofac,verification,identity,utils}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Normalize names using case-folding, Unicode NFKC normalization, and diacritics removal for OFAC matching
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,ofac,verification,identity,age}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Use ISO 8601 format (YYYY-MM-DD) for all date inputs in compliance verification
Files:
app/src/screens/verification/ProveScreen.tsx
**/{age,verification,identity,compliance}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Implement age verification with day-level precision for 'olderThan' checks accepting ISO 8601 date inputs
Files:
app/src/screens/verification/ProveScreen.tsx
**/{circuits,age,verification,zk,proof}/**/*.{circom,ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Implement zero-knowledge proof of age without disclosing actual date of birth
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,country,verification,identity}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
**/{compliance,country,verification,identity}/**/*.{ts,tsx,js,py}: Implement forbidden country validation using Bloom filter with false positive rate ≤1e-6
Validate country codes in ISO 3166-1 alpha-3 format for forbidden country checks
Files:
app/src/screens/verification/ProveScreen.tsx
**/{circuits,country,verification,zk,proof}/**/*.{circom,ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Implement zero-knowledge proof of country non-inclusion without revealing actual country code
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,country,verification}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Implement graceful degradation for country validation when filter is unavailable
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,verification,identity,age,country}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
**/{compliance,verification,identity,age,country}/**/*.{ts,tsx,js,py}: Use UTC timestamps only for all compliance verification operations
Allow ±5 minutes clock drift tolerance in timestamp validation for compliance checks
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,verification,proof}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Enforce 24-hour verification window with drift adjustment for compliance proof validity
Files:
app/src/screens/verification/ProveScreen.tsx
**/{mobile,client,app,time,verification}/**/*.{ts,tsx,js,swift,kt}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Use server-signed time tokens or chain block timestamps for trusted time in mobile clients, do not trust device wall-clock alone
Files:
app/src/screens/verification/ProveScreen.tsx
**/{mobile,client,app,proof,zk}/**/*.{ts,tsx,js,swift,kt}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
**/{mobile,client,app,proof,zk}/**/*.{ts,tsx,js,swift,kt}: Include trusted time anchor in proof generation and verify time anchor authenticity before proof generation in mobile implementations
Achieve proof generation in <60 seconds on mid-tier mobile devices
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,verification,proof,zk,identity,age,country}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Maintain peak memory usage below 300MB for compliance verification operations
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,verification,service,api}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
**/{compliance,verification,service,api}/**/*.{ts,tsx,js,py}: Make all network calls idempotent with exponential backoff retry logic
Implement exponential backoff with jitter for compliance verification retry logic
Files:
app/src/screens/verification/ProveScreen.tsx
**/{compliance,audit,log,verification}/**/*.{ts,tsx,js,py}
📄 CodeRabbit inference engine (.cursor/rules/compliance-verification.mdc)
Maintain privacy-preserving audit logs for compliance verification operations
Files:
app/src/screens/verification/ProveScreen.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (app/AGENTS.md)
Ensure
yarn typespasses (TypeScript validation) before creating a PR
Files:
app/src/screens/verification/ProveScreen.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (app/AGENTS.md)
app/**/*.{ts,tsx,js,jsx}: Ensure web build succeeds withyarn webbefore creating a PR
Do not include sensitive data in logs - avoid logging PII, credentials, and tokens
Usereact-native-dotenvfor environment configuration via@envimport
Confirm no sensitive data exposed before PR merge
Files:
app/src/screens/verification/ProveScreen.tsx
app/src/**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
app/src/**/*.{ts,tsx,js,jsx}: Review React Native TypeScript code for:
- Component architecture and reusability
- State management patterns
- Performance optimizations
- TypeScript type safety
- React hooks usage and dependencies
- Navigation patterns
Files:
app/src/screens/verification/ProveScreen.tsx
🧠 Learnings (13)
📓 Common learnings
Learnt from: seshanthS
Repo: selfxyz/self PR: 1497
File: app/src/screens/verification/ProveScreen.tsx:125-161
Timestamp: 2025-12-13T18:00:46.963Z
Learning: In app/src/screens/verification/ProveScreen.tsx: The document expiration check using checkDocumentExpiration() is UX-only to prevent wasted gas and provide better user experience. The authoritative expiration validation is enforced in the circuits and smart contracts using trusted time sources (block timestamps), not device clock.
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Implement lazy loading for screens using `React.lazy()` in React Native applications.
📚 Learning: 2025-12-13T18:00:46.963Z
Learnt from: seshanthS
Repo: selfxyz/self PR: 1497
File: app/src/screens/verification/ProveScreen.tsx:125-161
Timestamp: 2025-12-13T18:00:46.963Z
Learning: In app/src/screens/verification/ProveScreen.tsx: The document expiration check using checkDocumentExpiration() is UX-only to prevent wasted gas and provide better user experience. The authoritative expiration validation is enforced in the circuits and smart contracts using trusted time sources (block timestamps), not device clock.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:07:28.188Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{compliance,verification,proof}/**/*.{ts,tsx,js,py} : Enforce 24-hour verification window with drift adjustment for compliance proof validity
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Implement lazy loading for screens using `React.lazy()` in React Native applications.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-09-11T19:41:16.601Z
Learnt from: aaronmgdr
Repo: selfxyz/self PR: 1055
File: app/src/components/homeScreen/idCard.tsx:6-6
Timestamp: 2025-09-11T19:41:16.601Z
Learning: The React Native app in selfxyz/self does not implement responsive layouts for orientation changes. The codebase consistently uses Dimensions.get('window') rather than useWindowDimensions(), indicating that orientation handling is not a priority or architectural pattern in this project.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Tamagui for UI components in React Native applications.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use React Navigation with `createStaticNavigation` for type-safe navigation in React Native applications.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Implement custom modal system with `useModal` hook and callback registry in React Native.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use Zustand for global state management in React Native applications.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Integrate haptic feedback using `useHapticNavigation` hook in React Native navigation.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-11-25T14:06:55.970Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T14:06:55.970Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Implement graceful degradation when native modules fail in React Native.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-12-25T19:18:22.033Z
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/test-memory-optimization.mdc:0-0
Timestamp: 2025-12-25T19:18:22.033Z
Learning: Applies to **/__tests__/**/*.{ts,tsx,js,jsx} : Never use `require('react-native')` in test files; use ES6 `import` statements instead to avoid nested require() calls that cause out-of-memory errors in CI/CD pipelines
Applied to files:
app/src/screens/verification/ProveScreen.tsx
📚 Learning: 2025-08-23T02:02:02.556Z
Learnt from: transphorm
Repo: selfxyz/self PR: 942
File: app/vite.config.ts:170-0
Timestamp: 2025-08-23T02:02:02.556Z
Learning: In the selfxyz/self React Native app, devTools from '@/navigation/devTools' are intentionally shipped to production builds for testing purposes, not excluded as is typical in most applications.
Applied to files:
app/src/screens/verification/ProveScreen.tsx
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: test
- GitHub Check: type-check
- GitHub Check: android-build-test
- GitHub Check: e2e-ios
- GitHub Check: analyze-android
🔇 Additional comments (3)
app/src/screens/verification/ProveScreen.tsx (3)
142-165: Scroll-state init can “lock in”hasScrolledToBottom=trueif content grows after first measurement.
Because initialization runs once and may sethasScrolledToBottom(true)when content appears short, later content-height growth won’t re-require scrolling (potentially enabling Verify early).Proposed mitigation (only auto-enable when measurements stabilize)
diff --git a/app/src/screens/verification/ProveScreen.tsx b/app/src/screens/verification/ProveScreen.tsx @@ useEffect(() => { @@ - // Only auto-enable if content is short enough that no scrolling is needed - if (isContentShorterThanScrollView) { - setHasScrolledToBottom(true); - } + // Only auto-enable if content is short enough that no scrolling is needed. + // Delay one frame to reduce the chance we "lock in" before layout settles. + const raf = requestAnimationFrame(() => { + if (isContentShorterThanScrollView) { + setHasScrolledToBottom(true); + } + hasInitializedScrollStateRef.current = true; + }); @@ - // Mark as initialized so we don't override user's scroll state later - hasInitializedScrollStateRef.current = true; + return () => cancelAnimationFrame(raf); }, [ isContentShorterThanScrollView, scrollViewContentHeight, scrollViewHeight, ]);
171-176: Session reset looks right.
ResettinghasInitializedScrollStateRef+hasScrolledToBottomonselectedApp.sessionIdchange should prevent “carry-over” between sessions.
315-326: Measurement callbacks are now clean and stable.
Keeping these callbacks referentially stable is good for ScrollView perf (and avoids unnecessary rerenders in children).
transphorm
deleted the
justin/chore-address-clunky-ios-proving-feedback
branch
* save button transition improvements * fix offset jump * add platform specific scroll offset padding * use dynamic sizing instead * fix scrolling logic
Description
A brief description of the changes, what and how is being changed.
Tested
Explain how the change has been tested (for example by manual testing, unit tests etc) or why it's not necessary (for example version bump).
How to QA
How can the change be tested in a repeatable manner?
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.