chore: Fix app tamagui types #965
Conversation
WalkthroughRefactors Tamagui layout usage by replacing XStack/YStack with Stack across components, screens, and layouts. Updates NavBarProps to extend StackProps. Adds a “Simulate MRZ Detection” button in the SDK PassportCameraScreen that invokes onMRZDetected with a hard-coded payload. No other logic or API signatures changed. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant PCS as SDK PassportCameraScreen
participant App as Parent Consumer
U->>PCS: Tap "Simulate MRZ Detection"
note over PCS: New interaction added
PCS->>App: onMRZDetected({mrzData, validation:true...})
alt App handles success
App-->>U: Proceed with MRZ flow
else App handles failure
App-->>U: Show error
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (25)
app/src/screens/home/ProofHistoryDetailScreen.tsx (3)
201-226: Missing horizontal layout after XStack → Stack; elements will stack verticallyThis row (status icon, label, right-aligned date) needs flexDirection="row" to match prior XStack behavior. Without it, layout degrades and “marginLeft='auto'” won’t work.
Apply:
- <Stack alignItems="center" gap={8}> + <Stack alignItems="center" gap={8} flexDirection="row">
252-286: Wallet banner inner row needs flexDirection="row"Icon/label/address were previously inline; now they’ll stack. Restore horizontal flow.
- <Stack + <Stack backgroundColor={isEthereumAddress ? blue700 : slate100} paddingVertical={4} paddingHorizontal={6} borderRadius={4} - alignItems="center" + alignItems="center" + flexDirection="row" gap={8} >
291-323: Disclosure list items should be rowsStatus dot, label, and info icon need a row container; otherwise they render as a column and the UI regresses.
- <Stack + <Stack key={index} backgroundColor={slate100} paddingVertical={16} paddingHorizontal={10} borderRadius={12} - alignItems="center" + alignItems="center" + flexDirection="row" >app/src/screens/passport/PassportCameraScreen.tsx (1)
155-167: Icon + copy block lost horizontal layoutThis stack was previously an XStack (icon left, text right). Add flexDirection="row" to avoid vertical stacking and preserve design.
- <Stack gap="$6" alignSelf="flex-start" alignItems="flex-start"> + <Stack gap="$6" alignSelf="flex-start" alignItems="flex-start" flexDirection="row">app/src/components/NavBar/BaseNavBar.tsx (1)
14-18: NavBar container needs explicit row direction after XStack → Stack to avoid vertical stackingWithout flexDirection="row", LeftAction/Title/RightAction will render in a column on many screens.
- <Stack + <Stack + flexDirection="row" backgroundColor={backgroundColor} flexGrow={1} - justifyContent="flex-start" + justifyContent="flex-start" alignItems="center" {...props} >Also applies to: 99-107
app/src/components/NavBar/HomeNavBar.tsx (1)
25-69: Avoid logging sensitive clipboard tokens and API responsesConsole logs can leak tokens/PII to device logs and crash reporters. Remove or gate behind DEV and redact values.
- const content = await Clipboard.getString(); - console.log('Consume token content:', content); + const content = await Clipboard.getString(); + if (__DEV__) console.log('Consume token content present:', Boolean(content)); @@ - console.log('Consume token response:', response); - const result = await response.json(); - console.log('Consume token result:', result); + const result = await response.json(); + if (__DEV__) console.log('Consume token status:', result?.status); @@ - console.log('Consume token selfApp:', selfApp); + if (__DEV__) console.log('Consumed token -> session set'); @@ - console.log('Clipboard content is not a UUID'); + if (__DEV__) console.log('Clipboard content is not a UUID');Also applies to: 36-46, 39-41, 49-55, 56-66
app/src/screens/dev/DevSettingsScreen.tsx (2)
176-188: Fix layout: add flexDirection="row" in Select.Trigger contentWithout flexDirection="row", the label and chevron stack vertically inside the button. Add row direction and center alignment to preserve the original XStack semantics.
- <Stack + <Stack width="100%" justifyContent="space-between" + flexDirection="row" + alignItems="center" paddingVertical="$3" paddingLeft="$4" paddingRight="$1.5" >
320-331: Fix layout: add flexDirection="row" in list row buttonsSame issue here: content will stack vertically without row direction. Align center for consistent hit targets.
- <Stack + <Stack width="100%" justifyContent="space-between" + flexDirection="row" + alignItems="center" paddingVertical="$3" paddingLeft="$4" paddingRight="$1.5" >app/src/screens/dev/MockDataScreen.tsx (2)
470-516: Bug: Age decrement button disables on wrong state; fix and restore row layout
- disabled checks expiryYears instead of age; users can set negative ages.
- Layout should be a horizontal row like before.
- <Stack - alignItems="center" - gap="$2" - justifyContent="space-between" - > + <Stack + alignItems="center" + gap="$2" + justifyContent="space-between" + flexDirection="row" + > <Button height="$3.5" width="$6" backgroundColor="white" justifyContent="center" borderColor={slate200} borderWidth={1} onPress={() => { buttonTap(); setAge(age - 1); trackEvent(MockDataEvents.DECREASE_AGE); }} - disabled={expiryYears <= 0} + disabled={age <= 0} >
520-566: Restore horizontal layout for “Passport Expires In” controlsWithout flexDirection="row", the minus, value, and plus controls won’t render as a single row.
- <Stack - alignItems="center" - gap="$2" - justifyContent="space-between" - > + <Stack + alignItems="center" + gap="$2" + justifyContent="space-between" + flexDirection="row" + >app/src/components/Mnemonic.tsx (1)
57-68: Security: copying mnemonic to clipboard is risky—clear it after a short TTLMobile clipboards are globally readable; leaving a seed there is unsafe. Clear the clipboard after a short duration and consider showing a warning.
const copyToClipboardOrReveal = useCallback(async () => { confirmTap(); if (!revealWords) { // TODO: container jumps when words are revealed on android await onRevealWords?.(); setHasViewedRecoveryPhrase(true); return setRevealWords(previous => !previous); } - Clipboard.setString(words.join(' ')); + Clipboard.setString(words.join(' ')); setCopied(true); - setTimeout(() => setCopied(false), 2500); + setTimeout(() => setCopied(false), 2500); + // Clear clipboard after 30s to reduce exposure window + setTimeout(() => { + try { + Clipboard.setString(''); + } catch {} + }, 30000); }, [onRevealWords, revealWords, setHasViewedRecoveryPhrase, words]);Optionally gate copying behind an “I understand the risk” confirmation.
app/src/screens/prove/ProveScreen.tsx (2)
277-307: Missing flexDirection causes vertical stacking where a row is expected.
The address line should render text + eye icon horizontally; without flexDirection="row" it stacks vertically.Apply:
- <Stack alignItems="center" justifyContent="space-between"> + <Stack alignItems="center" justifyContent="space-between" flexDirection="row">
1-1: Critical: Define missing domain types before proceedingOur grep check shows that two required project-wide contracts are not present in the codebase, and the third needs field verification:
IdentityCommitment – not found anywhere. Per spec, you must define this type with:
• commitment (Poseidon hash)
• nullifier (domain-separated)
• timestamp (UTC seconds)
• version (circuit version)
• documentType ('passport' | 'eu_id_card')DSCKeyCommitment – not found anywhere. Per spec, you must define this type with:
• publicKeyHash (Poseidon hash)
• certificateChain (array of hashes)
• revocationStatus (boolean)
• issuer (ISO country code)VerificationConfig – located at
sdk/core/src/types/types.ts:11. Confirm it includes all required fields:
• circuitVersion (semver)
• complianceRules (array)
• timeWindow (seconds, up to 24 h)
• clockDrift (±5 min)
• trustAnchors
• revocationRoots
• timeSource (e.g., NTP)
• nullifierScope (domain separation)Please add the missing interfaces/types in the appropriate
*.tsmodule(s) and verify thatVerificationConfigfully matches the spec.app/src/screens/home/ProofHistoryScreen.tsx (1)
225-237: Multiple rows now stack vertically due to XStack→Stack without flexDirection.
Cards will break layout (logo, text, badges) unless flexDirection="row" is set on these containers.Apply:
- <Stack alignItems="center"> + <Stack alignItems="center" flexDirection="row"> ... - <Stack + <Stack + flexDirection="row" backgroundColor={blue100} paddingVertical={2} paddingHorizontal={8} borderRadius={4} alignItems="center" > ... - <Stack + <Stack + flexDirection="row" backgroundColor={blue100} paddingVertical={2} paddingHorizontal={8} borderRadius={4} alignItems="center" marginLeft={4} > ... - <Stack + <Stack + flexDirection="row" paddingVertical={2} paddingHorizontal={8} borderRadius={4} alignItems="center" marginLeft={4} >Also applies to: 247-256, 258-275, 276-293
packages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsx (1)
15-35: Gate the simulator button to dev-only (avoid shipping debug UI in SDK)Shipping a “Simulate MRZ Detection” button in the SDK can leak test UI to integrators. Gate behind DEV (or a prop).
Apply this diff:
- <Button - onPress={() => - onMRZDetected({ - passportNumber: 'L898902C3', - dateOfBirth: '740812', - dateOfExpiry: '120415', - issuingCountry: 'UTO', - documentType: 'P', - validation: { - format: true, - passportNumberChecksum: true, - dateOfBirthChecksum: true, - dateOfExpiryChecksum: true, - compositeChecksum: true, - overall: true, - }, - }) - } - > - Simulate MRZ Detection - </Button> + {__DEV__ && ( + <Button + testID="simulate-mrz" + onPress={() => + onMRZDetected({ + passportNumber: 'L898902C3', + dateOfBirth: '740812', + dateOfExpiry: '120415', + issuingCountry: 'UTO', + documentType: 'P', + validation: { + format: true, + passportNumberChecksum: true, + dateOfBirthChecksum: true, + dateOfExpiryChecksum: true, + compositeChecksum: true, + overall: true, + }, + }) + } + > + Simulate MRZ Detection + </Button> + )}If you prefer a prop, I can draft showSimulator?: boolean and default it to false.
app/src/components/Disclosures.tsx (1)
110-122: Row layout regression: restore horizontal flow for icon + textReplacing XStack with Stack changed flexDirection from row→column. This will stack the checkmark above the text instead of side-by-side.
Apply:
- <Stack - gap={10} + <Stack + flexDirection="row" + alignItems="center" + gap={10} borderBottomColor={slate200} borderBottomWidth={1} paddingVertical={22} paddingHorizontal={10} >app/src/components/NavBar/ProgressNavBar.tsx (2)
63-85: Header row layout broken (vertical stacking)This row used to be XStack (row). After switching to Stack, children will stack vertically unless flexDirection is set.
Apply:
- <Stack width="100%" alignItems="center"> + <Stack width="100%" alignItems="center" flexDirection="row"> <Stack width={50} justifyContent="flex-start"> <NavBar.LeftAction component={ options.headerBackTitle || (canGoBack() ? 'back' : undefined) } onPress={() => { buttonTap(); goBack(); }} {...(options.headerTitleStyle as ViewStyle)} /> </Stack> - <Stack flex={1} justifyContent="center" alignItems="center"> + <Stack flex={1} justifyContent="center" alignItems="center"> <NavBar.Title {...(options.headerTitleStyle as ViewStyle)}> {props.options.title} </NavBar.Title> </Stack> <Stack width={50} /> </Stack>
94-110: Progress segments stacking verticallyThe segments container also relied on horizontal layout. Without flexDirection="row", the progress bar renders incorrectly.
Apply:
- <Stack width="100%" height={4} gap={4}> + <Stack width="100%" height={4} gap={4} flexDirection="row" alignItems="center"> {segments.map((step, index) => ( <Stack key={step} flex={1} height={5} backgroundColor={step <= currentStep ? cyan300 : slate200} borderRadius={0} borderTopLeftRadius={index === 0 ? 4 : 0} borderBottomLeftRadius={index === 0 ? 4 : 0} borderTopRightRadius={index === segments.length - 1 ? 4 : 0} borderBottomRightRadius={index === segments.length - 1 ? 4 : 0} overflow="hidden" /> ))} </Stack>app/src/screens/dev/DevFeatureFlagsScreen.tsx (3)
272-293: Missing row direction may break header layout (buttons vs. timestamp).Without flexDirection="row", space-between applies vertically.
Apply:
- <Stack justifyContent="space-between" alignItems="center"> + <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
345-366: Flag item rows likely need horizontal layout.Label and control will stack without row direction.
Apply:
- <Stack justifyContent="space-between" alignItems="center"> + <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
140-163: Debounce timers can leak on unmount (stale state in cleanup).Cleanup uses initial debounceTimers due to empty deps; timers may fire after unmount.
Apply:
- const debouncedSave = useCallback( + const debouncedSave = useCallback( (flagKey: string, type: 'string' | 'number') => { - if (debounceTimers[flagKey]) { - clearTimeout(debounceTimers[flagKey]); - } + const existing = debounceTimersRef.current[flagKey]; + if (existing) clearTimeout(existing); // Set a new timer const timer = setTimeout(() => { handleSaveTextFlag(flagKey, type); - setDebounceTimers(prev => { - const newTimers = { ...prev }; - delete newTimers[flagKey]; - return newTimers; - }); + delete debounceTimersRef.current[flagKey]; }, 500); // 500ms debounce delay - - setDebounceTimers(prev => ({ - ...prev, - [flagKey]: timer, - })); + debounceTimersRef.current[flagKey] = timer; }, - [debounceTimers, handleSaveTextFlag], + [handleSaveTextFlag], );- useEffect(() => { - return () => { - Object.values(debounceTimers).forEach(timer => { - if (timer) { - clearTimeout(timer); - } - }); - }; - // only clean up on unmount - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + useEffect(() => { + return () => { + Object.values(debounceTimersRef.current).forEach(clearTimeout); + }; + }, []);Add outside the ranges:
-import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react';- const [debounceTimers, setDebounceTimers] = useState< - Record<string, NodeJS.Timeout> - >({}); + const debounceTimersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>( + {}, + );Also applies to: 181-192
app/src/components/FeedbackModal.tsx (2)
95-106: Header (title/close) needs horizontal layout.Ensure these align side-by-side.
Apply:
- <Stack justifyContent="space-between" alignItems="center"> + <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
109-126: Category chips won’t wrap as intended without row direction.flexWrap requires a row to lay out horizontally.
Apply:
- <Stack gap="$2" flexWrap="wrap"> + <Stack flexDirection="row" gap="$2" flexWrap="wrap">app/src/screens/dev/MockDataScreenDeepLink.tsx (1)
101-116: Multiple info rows likely need horizontal alignment.Label/value pairs will stack without row direction.
Apply:
- <Stack alignItems="center" justifyContent="space-between"> + <Stack flexDirection="row" alignItems="center" justifyContent="space-between">Repeat the same change for each of the following blocks:
- Name row (Lines 101-116)
- Surname row (Lines 116-131)
- Birth Date row (Lines 131-146)
- Gender row (Lines 147-162)
- Nationality row (Lines 163-185)
Also applies to: 116-131, 131-146, 147-162, 163-185
app/src/screens/settings/ManageDocumentsScreen.tsx (1)
223-249: Inner cluster (selector + text) should be a row.Prevents selector button and labels from stacking.
Apply:
- <Stack alignItems="center" gap="$3" flex={1}> + <Stack flexDirection="row" alignItems="center" gap="$3" flex={1}>
🧹 Nitpick comments (1)
packages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsx (1)
11-12: Use gap with Stack (space may not be supported on Stack)On some Tamagui versions, space is only on XStack/YStack. Prefer gap for Stack to avoid silent spacing loss.
Apply this diff:
- <Stack space="$4" padding="$4"> + <Stack gap="$4" padding="$4">
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (40)
app/src/components/Disclosures.tsx(7 hunks)app/src/components/FeedbackModal.tsx(7 hunks)app/src/components/FeedbackModalScreen.tsx(3 hunks)app/src/components/Mnemonic.tsx(6 hunks)app/src/components/NavBar/BaseNavBar.tsx(2 hunks)app/src/components/NavBar/HomeNavBar.tsx(3 hunks)app/src/components/NavBar/ProgressNavBar.tsx(5 hunks)app/src/components/buttons/PrimaryButtonLongHold.web.tsx(2 hunks)app/src/layouts/SimpleScrolledTitleLayout.tsx(2 hunks)app/src/screens/dev/DevFeatureFlagsScreen.tsx(7 hunks)app/src/screens/dev/DevPrivateKeyScreen.tsx(4 hunks)app/src/screens/dev/DevSettingsScreen.tsx(12 hunks)app/src/screens/dev/MockDataScreen.tsx(26 hunks)app/src/screens/dev/MockDataScreenDeepLink.tsx(8 hunks)app/src/screens/home/DisclaimerScreen.tsx(3 hunks)app/src/screens/home/HomeScreen.tsx(4 hunks)app/src/screens/home/ProofHistoryDetailScreen.tsx(9 hunks)app/src/screens/home/ProofHistoryScreen.tsx(8 hunks)app/src/screens/misc/DeferredLinkingInfoScreen.tsx(3 hunks)app/src/screens/misc/LaunchScreen.tsx(5 hunks)app/src/screens/misc/LoadingScreen.tsx(3 hunks)app/src/screens/misc/ModalScreen.tsx(3 hunks)app/src/screens/passport/NFCMethodSelectionScreen.tsx(5 hunks)app/src/screens/passport/PassportCameraScreen.tsx(4 hunks)app/src/screens/passport/PassportNFCScanScreen.tsx(3 hunks)app/src/screens/passport/PassportNFCTroubleScreen.tsx(4 hunks)app/src/screens/passport/UnsupportedPassportScreen.tsx(4 hunks)app/src/screens/prove/ProveScreen.tsx(6 hunks)app/src/screens/prove/ViewFinderScreen.tsx(3 hunks)app/src/screens/recovery/AccountRecoveryChoiceScreen.tsx(4 hunks)app/src/screens/recovery/AccountRecoveryScreen.tsx(3 hunks)app/src/screens/recovery/AccountVerifiedSuccessScreen.tsx(3 hunks)app/src/screens/recovery/RecoverWithPhraseScreen.tsx(5 hunks)app/src/screens/settings/CloudBackupScreen.tsx(4 hunks)app/src/screens/settings/ManageDocumentsScreen.tsx(10 hunks)app/src/screens/settings/PassportDataInfoScreen.tsx(4 hunks)app/src/screens/settings/SettingsScreen.tsx(5 hunks)packages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsx(2 hunks)packages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsx(2 hunks)packages/mobile-sdk-alpha/src/components/screens/QRCodeScreen.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/technical-specification.mdc)
**/*.{ts,tsx}: Define IdentityCommitment with fields: commitment (Poseidon hash), nullifier (domain-separated), timestamp (UTC number), version (circuit version), documentType ('passport' | 'eu_id_card')
Define DSCKeyCommitment with fields: publicKeyHash (Poseidon hash), certificateChain (hashes), revocationStatus (boolean), issuer (country code)
Define VerificationConfig with fields: circuitVersion (semver), complianceRules array, timeWindow (seconds, 24h), clockDrift (±5 min), trustAnchors, revocationRoots, timeSource (NTP), nullifierScope (domain separation)
Files:
app/src/screens/recovery/AccountRecoveryChoiceScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/QRCodeScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsxapp/src/screens/settings/CloudBackupScreen.tsxapp/src/components/NavBar/HomeNavBar.tsxapp/src/screens/misc/LoadingScreen.tsxapp/src/screens/dev/MockDataScreen.tsxapp/src/components/Mnemonic.tsxpackages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsxapp/src/screens/passport/PassportCameraScreen.tsxapp/src/components/NavBar/BaseNavBar.tsxapp/src/screens/recovery/AccountVerifiedSuccessScreen.tsxapp/src/screens/settings/PassportDataInfoScreen.tsxapp/src/screens/recovery/RecoverWithPhraseScreen.tsxapp/src/screens/passport/PassportNFCScanScreen.tsxapp/src/components/FeedbackModal.tsxapp/src/screens/misc/DeferredLinkingInfoScreen.tsxapp/src/screens/dev/DevPrivateKeyScreen.tsxapp/src/screens/dev/DevSettingsScreen.tsxapp/src/components/buttons/PrimaryButtonLongHold.web.tsxapp/src/screens/dev/DevFeatureFlagsScreen.tsxapp/src/screens/home/HomeScreen.tsxapp/src/screens/home/ProofHistoryScreen.tsxapp/src/screens/home/DisclaimerScreen.tsxapp/src/screens/settings/ManageDocumentsScreen.tsxapp/src/screens/recovery/AccountRecoveryScreen.tsxapp/src/components/FeedbackModalScreen.tsxapp/src/screens/dev/MockDataScreenDeepLink.tsxapp/src/screens/misc/LaunchScreen.tsxapp/src/screens/home/ProofHistoryDetailScreen.tsxapp/src/components/Disclosures.tsxapp/src/screens/prove/ViewFinderScreen.tsxapp/src/screens/settings/SettingsScreen.tsxapp/src/screens/misc/ModalScreen.tsxapp/src/components/NavBar/ProgressNavBar.tsxapp/src/screens/passport/PassportNFCTroubleScreen.tsxapp/src/screens/passport/NFCMethodSelectionScreen.tsxapp/src/screens/prove/ProveScreen.tsxapp/src/screens/passport/UnsupportedPassportScreen.tsxapp/src/layouts/SimpleScrolledTitleLayout.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/recovery/AccountRecoveryChoiceScreen.tsxapp/src/screens/settings/CloudBackupScreen.tsxapp/src/components/NavBar/HomeNavBar.tsxapp/src/screens/misc/LoadingScreen.tsxapp/src/screens/dev/MockDataScreen.tsxapp/src/components/Mnemonic.tsxapp/src/screens/passport/PassportCameraScreen.tsxapp/src/components/NavBar/BaseNavBar.tsxapp/src/screens/recovery/AccountVerifiedSuccessScreen.tsxapp/src/screens/settings/PassportDataInfoScreen.tsxapp/src/screens/recovery/RecoverWithPhraseScreen.tsxapp/src/screens/passport/PassportNFCScanScreen.tsxapp/src/components/FeedbackModal.tsxapp/src/screens/misc/DeferredLinkingInfoScreen.tsxapp/src/screens/dev/DevPrivateKeyScreen.tsxapp/src/screens/dev/DevSettingsScreen.tsxapp/src/components/buttons/PrimaryButtonLongHold.web.tsxapp/src/screens/dev/DevFeatureFlagsScreen.tsxapp/src/screens/home/HomeScreen.tsxapp/src/screens/home/ProofHistoryScreen.tsxapp/src/screens/home/DisclaimerScreen.tsxapp/src/screens/settings/ManageDocumentsScreen.tsxapp/src/screens/recovery/AccountRecoveryScreen.tsxapp/src/components/FeedbackModalScreen.tsxapp/src/screens/dev/MockDataScreenDeepLink.tsxapp/src/screens/misc/LaunchScreen.tsxapp/src/screens/home/ProofHistoryDetailScreen.tsxapp/src/components/Disclosures.tsxapp/src/screens/prove/ViewFinderScreen.tsxapp/src/screens/settings/SettingsScreen.tsxapp/src/screens/misc/ModalScreen.tsxapp/src/components/NavBar/ProgressNavBar.tsxapp/src/screens/passport/PassportNFCTroubleScreen.tsxapp/src/screens/passport/NFCMethodSelectionScreen.tsxapp/src/screens/prove/ProveScreen.tsxapp/src/screens/passport/UnsupportedPassportScreen.tsxapp/src/layouts/SimpleScrolledTitleLayout.tsx
packages/mobile-sdk-alpha/**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
packages/mobile-sdk-alpha/**/*.{ts,tsx,js,jsx}: Review alpha mobile SDK code for:
- API consistency with core SDK
- Platform-neutral abstractions
- Performance considerations
- Clear experimental notes or TODOs
Files:
packages/mobile-sdk-alpha/src/components/screens/QRCodeScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsx
🧠 Learnings (5)
📚 Learning: 2025-08-26T14:49:11.148Z
Learnt from: shazarre
PR: selfxyz/self#936
File: app/src/screens/passport/PassportNFCScanScreen.tsx:28-31
Timestamp: 2025-08-26T14:49:11.148Z
Learning: SelfClientProvider is wrapped in app/App.tsx, providing context for useSelfClient() hook usage throughout the React Native app navigation stacks.
Applied to files:
app/src/screens/recovery/AccountRecoveryChoiceScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsxapp/src/screens/settings/PassportDataInfoScreen.tsx
📚 Learning: 2025-08-26T14:49:11.148Z
Learnt from: shazarre
PR: selfxyz/self#936
File: app/src/screens/passport/PassportNFCScanScreen.tsx:28-31
Timestamp: 2025-08-26T14:49:11.148Z
Learning: The main App.tsx file is located at app/App.tsx (not in app/src), and it properly wraps the entire app with SelfClientProvider at the top of the provider hierarchy, enabling useSelfClient() hook usage throughout all navigation screens.
Applied to files:
app/src/screens/recovery/AccountRecoveryChoiceScreen.tsxpackages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsx
📚 Learning: 2025-08-24T18:52:25.765Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursorrules:0-0
Timestamp: 2025-08-24T18:52:25.765Z
Learning: Applies to src/navigation/**/*.{ts,tsx} : Use react-navigation/native with createStaticNavigation for type-safe navigation
Applied to files:
app/src/screens/settings/CloudBackupScreen.tsxapp/src/screens/misc/LoadingScreen.tsxapp/src/components/NavBar/BaseNavBar.tsxapp/src/screens/dev/DevSettingsScreen.tsxapp/src/screens/settings/ManageDocumentsScreen.tsxapp/src/screens/settings/SettingsScreen.tsxapp/src/screens/misc/ModalScreen.tsxapp/src/components/NavBar/ProgressNavBar.tsx
📚 Learning: 2025-08-24T18:52:25.765Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursorrules:0-0
Timestamp: 2025-08-24T18:52:25.765Z
Learning: Applies to src/**/screens/**/*.{ts,tsx} : Lazy load screens using React.lazy()
Applied to files:
app/src/screens/misc/LoadingScreen.tsx
📚 Learning: 2025-08-24T18:52:25.766Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursorrules:0-0
Timestamp: 2025-08-24T18:52:25.766Z
Learning: Use custom hooks for complex state (useModal, useHapticNavigation)
Applied to files:
app/src/components/buttons/PrimaryButtonLongHold.web.tsxapp/src/screens/settings/ManageDocumentsScreen.tsxapp/src/components/FeedbackModalScreen.tsx
🧬 Code graph analysis (28)
packages/mobile-sdk-alpha/src/components/screens/QRCodeScreen.tsx (2)
packages/mobile-sdk-alpha/src/index.ts (2)
QRCodeScreen(74-74)ScreenProps(43-43)packages/mobile-sdk-alpha/src/types/ui.ts (1)
ScreenProps(43-46)
packages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsx (2)
packages/mobile-sdk-alpha/src/index.ts (2)
PassportCameraScreen(72-72)PassportCameraProps(43-43)packages/mobile-sdk-alpha/src/types/ui.ts (1)
PassportCameraProps(48-50)
app/src/screens/misc/LoadingScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/dev/MockDataScreen.tsx (4)
app/src/utils/fonts.ts (2)
dinot(6-6)plexMono(7-7)app/src/utils/colors.ts (6)
white(57-57)zinc400(61-61)black(8-8)slate500(41-41)borderColor(13-13)separatorColor(27-27)app/src/utils/haptic/index.ts (1)
selectionChange(15-15)common/src/constants/constants.ts (1)
countryCodes(310-561)
packages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsx (3)
app/src/screens/MainScreen.tsx (3)
Platform(106-115)event(128-130)setSelectedTab(527-530)app/App.tsx (1)
App(15-46)app/src/screens/AppScreen.tsx (1)
useUserStore(16-106)
app/src/screens/recovery/AccountVerifiedSuccessScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/settings/PassportDataInfoScreen.tsx (2)
app/src/components/typography/Caption.tsx (1)
Caption(10-23)app/src/utils/colors.ts (2)
black(8-8)slate200(33-33)
app/src/components/FeedbackModal.tsx (1)
app/src/components/typography/Caption.tsx (1)
Caption(10-23)
app/src/screens/misc/DeferredLinkingInfoScreen.tsx (3)
app/src/components/typography/Title.tsx (1)
Title(10-29)app/src/utils/colors.ts (1)
white(57-57)app/src/layouts/ExpandableBottomLayout.tsx (1)
ExpandableBottomLayout(158-163)
app/src/screens/dev/DevPrivateKeyScreen.tsx (2)
app/App.tsx (1)
App(15-46)app/src/screens/MainScreen.tsx (1)
scanningMessage(46-765)
app/src/components/buttons/PrimaryButtonLongHold.web.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/dev/DevFeatureFlagsScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/home/HomeScreen.tsx (3)
app/src/utils/colors.ts (2)
black(8-8)amber500(7-7)app/src/utils/constants.ts (1)
extraYPadding(5-5)app/src/components/typography/Caption.tsx (1)
Caption(10-23)
app/src/screens/home/ProofHistoryScreen.tsx (2)
app/src/components/typography/BodyText.ts (1)
BodyText(9-11)app/src/utils/colors.ts (4)
black(8-8)slate300(35-35)blue100(9-9)blue600(10-10)
app/src/screens/home/DisclaimerScreen.tsx (3)
app/src/components/typography/SubHeader.tsx (1)
SubHeader(9-17)app/src/utils/colors.ts (1)
white(57-57)app/src/layouts/ExpandableBottomLayout.tsx (1)
ExpandableBottomLayout(158-163)
app/src/screens/settings/ManageDocumentsScreen.tsx (2)
app/src/utils/colors.ts (2)
textBlack(55-55)white(57-57)app/src/utils/constants.ts (1)
extraYPadding(5-5)
app/src/components/FeedbackModalScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/dev/MockDataScreenDeepLink.tsx (4)
app/src/utils/colors.ts (1)
white(57-57)app/src/utils/constants.ts (1)
extraYPadding(5-5)app/src/components/typography/Title.tsx (1)
Title(10-29)app/src/components/typography/BodyText.ts (1)
BodyText(9-11)
app/src/screens/misc/LaunchScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/home/ProofHistoryDetailScreen.tsx (1)
app/src/utils/colors.ts (4)
white(57-57)black(8-8)blue100(9-9)slate100(31-31)
app/src/components/Disclosures.tsx (1)
app/src/screens/ProveScreen.tsx (1)
key(200-209)
app/src/screens/prove/ViewFinderScreen.tsx (1)
app/src/screens/MainScreen.tsx (1)
scanningMessage(46-765)
app/src/screens/misc/ModalScreen.tsx (2)
app/App.tsx (1)
App(15-46)app/src/screens/MainScreen.tsx (1)
scanningMessage(46-765)
app/src/components/NavBar/ProgressNavBar.tsx (2)
app/src/components/NavBar/BaseNavBar.tsx (1)
NavBar(128-133)app/src/utils/colors.ts (1)
white(57-57)
app/src/screens/passport/PassportNFCTroubleScreen.tsx (1)
app/App.tsx (1)
App(15-46)
app/src/screens/prove/ProveScreen.tsx (2)
app/App.tsx (1)
App(15-46)app/src/screens/ProveScreen.tsx (1)
key(200-209)
app/src/screens/passport/UnsupportedPassportScreen.tsx (3)
app/App.tsx (1)
App(15-46)app/src/screens/MainScreen.tsx (1)
text(460-462)app/src/screens/AppScreen.tsx (1)
useUserStore(16-106)
app/src/layouts/SimpleScrolledTitleLayout.tsx (3)
app/src/components/typography/Title.tsx (1)
Title(10-29)app/src/components/buttons/SecondaryButton.tsx (1)
SecondaryButton(12-32)app/src/components/buttons/PrimaryButton.tsx (1)
PrimaryButton(12-32)
⏰ 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). (6)
- GitHub Check: build-android
- GitHub Check: build-ios
- GitHub Check: test
- GitHub Check: e2e-ios
- GitHub Check: analyze-android
- GitHub Check: analyze-ios
🔇 Additional comments (40)
app/src/screens/recovery/AccountVerifiedSuccessScreen.tsx (2)
7-7: Import migration to Stack looks goodNo functional risk; aligns with the project-wide layout primitive migration.
37-51: Vertical layout preserved after YStack → StackDefault flexDirection remains column, so spacing/alignment behavior is unchanged here.
packages/mobile-sdk-alpha/src/components/screens/QRCodeScreen.tsx (1)
10-18: UI behavior unchanged; API remains consistentStack + space/padding usage is fine. onSuccess/onFailure wiring is intact.
app/src/screens/misc/DeferredLinkingInfoScreen.tsx (3)
6-6: Import migration to Stack looks goodConsistent with the rest of the PR.
22-25: Top section layout OKUsing Stack with flex={1} and bottom padding retains original intent; no behavioral risk.
27-46: Bottom section migration OKGap and alignment tokens preserved; navigation remains unchanged.
app/src/screens/home/ProofHistoryDetailScreen.tsx (1)
145-156: Top-level container migration is safeNo row semantics here; column default is appropriate.
app/src/screens/passport/PassportCameraScreen.tsx (1)
151-152: Outer bottom section migration OKColumn stack with centered alignment matches original vertical flow.
packages/mobile-sdk-alpha/src/components/screens/NFCScannerScreen.tsx (1)
6-6: LGTM: YStack → Stack preserves column layout hereDefault column direction matches previous YStack behavior; space/padding remain intact.
Also applies to: 28-34
app/src/screens/misc/LoadingScreen.tsx (1)
9-9: LGTM: YStack → Stack keeps vertical layout; no functional changeProps maintain the same structure; safe refactor.
Also applies to: 164-205
app/src/screens/home/HomeScreen.tsx (1)
7-7: Stack migration keeps column semantics — LGTMNo horizontal layout expected here; replacing YStack with Stack and styling Card via styled(Stack) looks correct.
Also applies to: 86-120, 149-158
app/src/screens/recovery/AccountRecoveryScreen.tsx (1)
6-6: Safe swap to Stack — no behavior changeThese sections remain vertically stacked; the migration is sound.
Also applies to: 40-61
app/src/screens/recovery/RecoverWithPhraseScreen.tsx (1)
8-8: Stack migration looks correct for vertical layoutsImports and wrappers preserve existing behavior; no medium+ risks spotted.
Also applies to: 85-90, 112-125, 133-134
app/src/screens/settings/PassportDataInfoScreen.tsx (1)
90-116: Root container migration — OKVertical stacking and padding semantics are unchanged; safe refactor.
app/src/screens/passport/UnsupportedPassportScreen.tsx (1)
139-156: LGTM: layout swap preserves semanticsThe migration to Stack retains centering and spacing; dynamic flag rendering path remains unchanged and safe-guarded.
app/src/screens/prove/ProveScreen.tsx (1)
19-19: Import swap to Stack looks good.
No issues found with the Tamagui import change.app/src/screens/home/ProofHistoryScreen.tsx (2)
376-405: Container swap to Stack is fine.
No behavior change; vertical layout preserved.
1-1: Audit missingflexDirectionin<Stack>components
Our repo-wide grep surfaced ~85<Stack>usages across 40+ files that set alignment, gaps, icons, images, or text but never explicitly declareflexDirection. Since<Stack>defaults to column, any intended horizontal layouts here will silently regress. Please review each case and addflexDirection="row"where a row layout is intended.
Notable files/screens to inspect (non-exhaustive):
app/src/screens/settings/ManageDocumentsScreen.tsxapp/src/screens/settings/CloudBackupScreen.tsxapp/src/screens/home/ProofHistoryScreen.tsx&ProofHistoryDetailScreen.tsxapp/src/screens/prove/ProveScreen.tsx&ViewFinderScreen.tsxapp/src/screens/recovery/AccountRecoveryScreen.tsx&AccountRecoveryChoiceScreen.tsxapp/src/screens/misc/ModalScreen.tsx- Navigation components under
app/src/components/NavBar/- Dev-tool screens under
app/src/screens/dev/- Core component:
app/src/components/Mnemonic.tsxTo re-run the search yourself:
rg -n --glob '*.tsx' '<Stack[^>]*>' -C2 \ | rg -nP '(alignItems|marginLeft|CheckSquare2|Wallet|XCircle|Image|Text)' \ | rg -nPv 'flexDirection\s*=\s*"(row|column)"'Ensure any horizontal groupings explicitly set
flexDirection="row"to avoid layout regressions.app/src/screens/dev/DevPrivateKeyScreen.tsx (1)
6-6: Layout refactor to Stack looks correct.
Vertical flow preserved; no functional changes.Also applies to: 58-107
app/src/screens/prove/ViewFinderScreen.tsx (1)
138-156: Potential unintended layout change (row → column).
The QR icon and text now stack vertically; original UX likely had them side-by-side. Confirm intent; if unintentional, add row direction.If you want the original horizontal layout:
- <Stack gap="$6" alignSelf="flex-start" alignItems="flex-start"> + <Stack gap="$6" alignSelf="flex-start" alignItems="center" flexDirection="row">app/src/components/buttons/PrimaryButtonLongHold.web.tsx (1)
8-8: LGTM: YStack→Stack for overlay is safe.
Absolute positioning and animation semantics unchanged.Also applies to: 62-76
app/src/screens/settings/CloudBackupScreen.tsx (2)
6-6: Stack import migration looks goodImporting Stack from tamagui aligns with the PR goal.
116-166: Layout swap to Stack preserves intentBoth containers use vertical flow and gap; no behavioral changes expected.
app/src/screens/home/DisclaimerScreen.tsx (3)
8-8: Switched to Stack import — OKMatches repository-wide migration.
41-44: Top section Stack looks correctFlex and padding mirror previous YStack behavior.
46-66: Bottom section Stack conversion is fineGap-based spacing is consistent and safe.
app/src/layouts/SimpleScrolledTitleLayout.tsx (5)
8-8: Import update to Stack/ScrollView — OKNo API surface change.
38-42: Header container migration is soundPadding uses safe area; no layout regressions expected.
43-46: Content wrapper Stack is fineKeeps prior spacing semantics.
48-51: Footer wrapper Stack is fineNo behavior change.
58-61: Dismiss anchor Stack is fineSafe-area padding preserved.
packages/mobile-sdk-alpha/src/components/screens/PassportCameraScreen.tsx (1)
5-5: Import set is appropriateButton/Stack/Text usage matches the component body.
app/src/screens/misc/ModalScreen.tsx (4)
6-6: Stack import added — OKPrepares for layout migration.
109-109: Container gap migration is fine40px vertical rhythm retained.
114-120: Title/description Stack OKVertical spacing preserved.
120-130: Buttons Stack OKNo behavioral changes; callbacks intact.
app/src/screens/passport/PassportNFCTroubleScreen.tsx (1)
76-89: LGTM on Stack migration; vertical layout semantics preservedSwapping YStack→Stack here maintains column flow and spacing; no behavior or type regressions spotted.
Also applies to: 91-104
app/src/screens/misc/LaunchScreen.tsx (1)
37-45: LGTM on layout refactorUsing Stack in place of YStack retains column layout and spacing; no functional changes introduced.
Also applies to: 62-104
app/src/components/Disclosures.tsx (1)
45-95: LGTM on container migrationTop-level wrapper swap to Stack is safe for vertical list rendering.
app/src/screens/passport/NFCMethodSelectionScreen.tsx (1)
145-156: LGTM on Stack usage and interactivityCards remain pressable with pressStyle; state, navigation, and inputs unchanged. No perf or type concerns spotted.
Also applies to: 160-174, 177-201
| <Stack alignItems="center" justifyContent="space-between"> | ||
| <LogoInversed /> | ||
| {modalParams.preventDismiss ? null : ( | ||
| <ModalClose onPress={onClose} /> | ||
| )} | ||
| </XStack> | ||
| <YStack gap={20}> | ||
| </Stack> |
There was a problem hiding this comment.
Header row needs flexDirection="row".
Logo and close icon should be on one line.
Apply:
- <Stack alignItems="center" justifyContent="space-between">
+ <Stack flexDirection="row" alignItems="center" justifyContent="space-between">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Stack alignItems="center" justifyContent="space-between"> | |
| <LogoInversed /> | |
| {modalParams.preventDismiss ? null : ( | |
| <ModalClose onPress={onClose} /> | |
| )} | |
| </XStack> | |
| <YStack gap={20}> | |
| </Stack> | |
| <Stack flexDirection="row" alignItems="center" justifyContent="space-between"> | |
| <LogoInversed /> | |
| {modalParams.preventDismiss ? null : ( | |
| <ModalClose onPress={onClose} /> | |
| )} | |
| </Stack> |
🤖 Prompt for AI Agents
In app/src/components/FeedbackModalScreen.tsx around lines 108 to 113, the
header Stack is missing an explicit flexDirection set to "row", so the
LogoInversed and ModalClose can stack vertically; update the Stack props to
include flexDirection="row" (or direction="row" if using your UI lib's prop
name) so the logo and close icon render on the same horizontal line, preserving
the existing alignItems and justifyContent values.
| import React from 'react'; | ||
| import { useSafeAreaInsets } from 'react-native-safe-area-context'; | ||
| import { Button, XStack } from 'tamagui'; | ||
| import { Button, Stack } from 'tamagui'; |
There was a problem hiding this comment.
RightAction wrapper requires row direction; otherwise icons stack vertically
Ensure the settings and clipboard icons remain side-by-side.
- <Stack alignItems="center" gap={10}>
+ <Stack flexDirection="row" alignItems="center" gap={10}>Also applies to: 100-117
🤖 Prompt for AI Agents
In app/src/components/NavBar/HomeNavBar.tsx around line 7 (and also for the icon
group at lines 100-117), the wrapper around the settings and clipboard icons
needs an explicit horizontal layout; set the container (RightAction/Stack) to
use row direction (e.g., add direction="row" or style={{ flexDirection: 'row'
}}) and include a small gap/space prop so the two icons render side-by-side
instead of stacking vertically; apply the same change to the other instance at
lines 100-117.
| import type { TextStyle, ViewStyle } from 'tamagui'; | ||
| import { XStack, YStack } from 'tamagui'; | ||
| import { Stack } from 'tamagui'; | ||
| import type { |
There was a problem hiding this comment.
Incorrect type imports for TextStyle/ViewStyle
TextStyle and ViewStyle are React Native types, not exported by tamagui. Importing from tamagui will break type-checking.
Apply:
-import type { TextStyle, ViewStyle } from 'tamagui';
+import type { TextStyle, ViewStyle } from 'react-native';
import { Stack } from 'tamagui';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import type { TextStyle, ViewStyle } from 'tamagui'; | |
| import { XStack, YStack } from 'tamagui'; | |
| import { Stack } from 'tamagui'; | |
| import type { | |
| import type { TextStyle, ViewStyle } from 'react-native'; | |
| import { Stack } from 'tamagui'; | |
| import type { |
🤖 Prompt for AI Agents
In app/src/components/NavBar/ProgressNavBar.tsx around lines 7 to 9, the file
incorrectly imports TextStyle and ViewStyle from 'tamagui' (these are React
Native types). Replace that import so TextStyle and ViewStyle are imported from
'react-native' instead, keeping other tamagui imports unchanged; ensure the
import uses 'import type' to avoid runtime imports.
| XStack, | ||
| YStack, | ||
| } from 'tamagui'; | ||
| import { Button, Input, ScrollView, Stack, Switch, Text } from 'tamagui'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Repo-wide types: verify required interfaces are defined.
Per guidelines, ensure IdentityCommitment, DSCKeyCommitment, and VerificationConfig are present somewhere in the codebase.
Run:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching required type definitions..."
rg -nP -C2 --type ts --type tsx '^(export\s+)?(interface|type)\s+IdentityCommitment\b'
rg -nP -C2 --type ts --type tsx '^(export\s+)?(interface|type)\s+DSCKeyCommitment\b'
rg -nP -C2 --type ts --type tsx '^(export\s+)?(interface|type)\s+VerificationConfig\b'
echo "If missing, add them to a shared types module and export."Length of output: 223
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching for IdentityCommitment..."
rg -nP -C2 '^(export\s+)?(interface|type)\s+IdentityCommitment\b' -g '*.ts' -g '*.tsx'
echo "Searching for DSCKeyCommitment..."
rg -nP -C2 '^(export\s+)?(interface|type)\s+DSCKeyCommitment\b' -g '*.ts' -g '*.tsx'
echo "Searching for VerificationConfig..."
rg -nP -C2 '^(export\s+)?(interface|type)\s+VerificationConfig\b' -g '*.ts' -g '*.tsx'Length of output: 189
Define missing types: IdentityCommitment, DSCKeyCommitment, and VerificationConfig
Our search across all .ts/.tsx files did not locate these interfaces—per the technical specification they must be defined in a shared types module and exported for use throughout the app.
Please add definitions matching the spec, for example in src/types/index.ts:
// src/types/index.ts
/** Represents a user’s identity commitment on‐chain */
export interface IdentityCommitment {
/** Poseidon hash of the identity data */
commitment: string;
/** Domain-separated nullifier */
nullifier: string;
/** Unix timestamp (UTC) */
timestamp: number;
/** Circuit version (semver) */
version: string;
/** Type of document used */
documentType: 'passport' | 'eu_id_card';
}
/** Represents a DSC key commitment and its revocation status */
export interface DSCKeyCommitment {
/** Poseidon hash of the public key */
publicKeyHash: string;
/** Array of certificate chain hashes */
certificateChain: string[];
/** Whether this key has been revoked */
revocationStatus: boolean;
/** Issuer country code */
issuer: string;
}
/** Configuration for on-chain verification circuits */
export interface VerificationConfig {
/** Circuit version (semver) */
circuitVersion: string;
/** List of compliance rule identifiers */
complianceRules: string[];
/** Time window in seconds (max 24h) */
timeWindow: number;
/** Allowed clock drift in seconds (±5 min) */
clockDrift: number;
/** Trusted root anchor hashes */
trustAnchors: string[];
/** Revocation root hashes */
revocationRoots: string[];
/** Time source (e.g., 'NTP') */
timeSource: string;
/** Domain separation scope for nullifiers */
nullifierScope: string;
}• Create or update your shared types module (e.g. src/types/index.ts)
• Export these interfaces and import them wherever needed in the app
🤖 Prompt for AI Agents
In app/src/screens/dev/DevFeatureFlagsScreen.tsx around line 6: the types
IdentityCommitment, DSCKeyCommitment, and VerificationConfig are missing; create
a shared types module (e.g. src/types/index.ts) and add exported interfaces
matching the spec (fields and types as described in the review comment:
IdentityCommitment with commitment, nullifier, timestamp, version, documentType;
DSCKeyCommitment with publicKeyHash, certificateChain, revocationStatus, issuer;
VerificationConfig with circuitVersion, complianceRules, timeWindow, clockDrift,
trustAnchors, revocationRoots, timeSource, nullifierScope), export them from
that module, then update imports in this file and any other files to import
these types from src/types.
| import { Adapt, Button, Select, Sheet, Stack, Text } from 'tamagui'; | ||
| import { useNavigation } from '@react-navigation/native'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Confirm required type definitions exist (repo-wide check)
Per coding guidelines, ensure IdentityCommitment, DSCKeyCommitment, and VerificationConfig are defined somewhere under src or common packages. If missing, add them in a shared types module.
Run to verify:
🏁 Script executed:
#!/bin/bash
# Verify required interfaces exist and include key fields
set -euo pipefail
echo "Searching for required type interfaces…"
rg -nP --glob '!node_modules' '\binterface\s+IdentityCommitment\b' -C2 || true
rg -nP --glob '!node_modules' '\binterface\s+DSCKeyCommitment\b' -C2 || true
rg -nP --glob '!node_modules' '\binterface\s+VerificationConfig\b' -C2 || true
echo
echo "Quick field presence checks (heuristic)…"
rg -nP --glob '!node_modules' 'interface\s+IdentityCommitment[\s\S]*?\{[\s\S]*?\bcommitment\b[\s\S]*?\bnullifier\b[\s\S]*?\btimestamp\b[\s\S]*?\bversion\b[\s\S]*?\bdocumentType\b[\s\S]*?\}' -U || echo "IdentityCommitment: missing or incomplete"
rg -nP --glob '!node_modules' 'interface\s+DSCKeyCommitment[\s\S]*?\{[\s\S]*?\bpublicKeyHash\b[\s\S]*?\bcertificateChain\b[\s\S]*?\brevocationStatus\b[\s\S]*?\bissuer\b[\s\S]*?\}' -U || echo "DSCKeyCommitment: missing or incomplete"
rg -nP --glob '!node_modules' 'interface\s+VerificationConfig[\s\S]*?\{[\s\S]*?\bcircuitVersion\b[\s\S]*?\bcomplianceRules\b[\s\S]*?\btimeWindow\b[\s\S]*?\bclockDrift\b[\s\S]*?\btrustAnchors\b[\s\S]*?\brevocationRoots\b[\s\S]*?\btimeSource\b[\s\S]*?\bnullifierScope\b[\s\S]*?\}' -U || echo "VerificationConfig: missing or incomplete"Length of output: 1384
Add Missing Shared Type Definitions
It looks like the key interfaces for our identity and verification flows aren’t defined anywhere in the repo. These types are critical for type safety across the app and must live in a shared types module (e.g. src/types/identity.ts or packages/common/src/types/verification.ts). Please add the following interfaces with at least these fields:
• IdentityCommitment
- commitment: Poseidon hash
- nullifier: domain-separated value
- timestamp: UTC number
- version: circuit version
- documentType: 'passport' | 'eu_id_card'
• DSCKeyCommitment
- publicKeyHash: Poseidon hash
- certificateChain: array of hashes
- revocationStatus: boolean
- issuer: country code
• VerificationConfig
- circuitVersion: semver string
- complianceRules: array
- timeWindow: number (seconds)
- clockDrift: number (± seconds)
- trustAnchors: array
- revocationRoots: array
- timeSource: string (e.g. 'NTP')
- nullifierScope: string (domain-separated)
Locations to update:
- Create or update
src/types/identity.ts(or equivalent common package) - Ensure these interfaces are exported for use in screens like
DevSettingsScreen.tsx
Once added, import from the shared module instead of relying on ad-hoc declarations in individual screens.
🤖 Prompt for AI Agents
In app/src/screens/dev/DevSettingsScreen.tsx around lines 9-10, the review
points out missing shared type definitions used by identity and verification
flows; create a new shared types module (e.g., src/types/identity.ts or
packages/common/src/types/verification.ts), define and export the interfaces
IdentityCommitment (commitment: Poseidon hash, nullifier: domain-separated
value, timestamp: number (UTC ms/seconds as repo convention), version: string,
documentType: 'passport' | 'eu_id_card'), DSCKeyCommitment (publicKeyHash:
Poseidon hash, certificateChain: string[] of hashes, revocationStatus: boolean,
issuer: string country code), and VerificationConfig (circuitVersion: semver
string, complianceRules: any[] or typed array as needed, timeWindow: number
(seconds), clockDrift: number, trustAnchors: string[], revocationRoots:
string[], timeSource: string, nullifierScope: string); export these types and
update DevSettingsScreen.tsx to import them from the shared module instead of
using ad-hoc declarations.
| <Stack gap={64} alignItems="center" justifyContent="space-between"> | ||
| <Separator flexGrow={1} /> | ||
| <Caption>OR</Caption> | ||
| <Separator flexGrow={1} /> | ||
| </XStack> | ||
| </Stack> | ||
| <SecondaryButton |
There was a problem hiding this comment.
Ensure horizontal “OR” group renders in a row
After replacing XStack with Stack, this group needs flexDirection="row" to place separators on the same line.
Use:
- <Stack gap={64} alignItems="center" justifyContent="space-between">
+ <Stack
+ gap={64}
+ alignItems="center"
+ justifyContent="space-between"
+ flexDirection="row"
+ >
<Separator flexGrow={1} />
<Caption>OR</Caption>
<Separator flexGrow={1} />
</Stack>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Stack gap={64} alignItems="center" justifyContent="space-between"> | |
| <Separator flexGrow={1} /> | |
| <Caption>OR</Caption> | |
| <Separator flexGrow={1} /> | |
| </XStack> | |
| </Stack> | |
| <SecondaryButton | |
| <Stack | |
| gap={64} | |
| alignItems="center" | |
| justifyContent="space-between" | |
| flexDirection="row" | |
| > | |
| <Separator flexGrow={1} /> | |
| <Caption>OR</Caption> | |
| <Separator flexGrow={1} /> | |
| </Stack> | |
| <SecondaryButton |
🤖 Prompt for AI Agents
In app/src/screens/recovery/AccountRecoveryChoiceScreen.tsx around lines 136 to
141, the Stack used to render the horizontal "OR" group was changed from XStack
and now needs an explicit row direction; update the Stack props to set
flexDirection="row" so the two Separator components and the Caption render on
the same horizontal line (i.e., add flexDirection="row" to the Stack
declaration).
| <Stack alignItems="center" justifyContent="center"> | ||
| <Keyboard height={25} width={40} color={slate500} /> | ||
| <View paddingLeft={12}> | ||
| <Description>Enter recovery phrase</Description> | ||
| </View> | ||
| </XStack> | ||
| </Stack> |
There was a problem hiding this comment.
SecondaryButton content should be horizontal (icon + text)
Without flexDirection="row", the icon and label stack vertically.
Patch:
- <Stack alignItems="center" justifyContent="center">
+ <Stack alignItems="center" justifyContent="center" flexDirection="row">
<Keyboard height={25} width={40} color={slate500} />
<View paddingLeft={12}>
<Description>Enter recovery phrase</Description>
</View>
</Stack>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Stack alignItems="center" justifyContent="center"> | |
| <Keyboard height={25} width={40} color={slate500} /> | |
| <View paddingLeft={12}> | |
| <Description>Enter recovery phrase</Description> | |
| </View> | |
| </XStack> | |
| </Stack> | |
| <Stack alignItems="center" justifyContent="center" flexDirection="row"> | |
| <Keyboard height={25} width={40} color={slate500} /> | |
| <View paddingLeft={12}> | |
| <Description>Enter recovery phrase</Description> | |
| </View> | |
| </Stack> |
🤖 Prompt for AI Agents
In app/src/screens/recovery/AccountRecoveryChoiceScreen.tsx around lines 146 to
151, the Stack wrapping the Keyboard icon and Description lacks a horizontal
layout so the icon and label stack vertically; add flexDirection="row" (or
style={{flexDirection: 'row'}}) to the Stack component so the icon and text
render side-by-side, keeping alignItems="center" and justifyContent="center".
| alignItems="center" | ||
| justifyContent="space-between" | ||
| marginBottom="$2" | ||
| > | ||
| <XStack alignItems="center" gap="$3" flex={1}> | ||
| <Stack alignItems="center" gap="$3" flex={1}> |
There was a problem hiding this comment.
Document card header should be a row.
Title cluster and delete button need horizontal spacing.
Apply:
- <Stack
- alignItems="center"
- justifyContent="space-between"
- marginBottom="$2"
- >
+ <Stack
+ flexDirection="row"
+ alignItems="center"
+ justifyContent="space-between"
+ marginBottom="$2"
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| alignItems="center" | |
| justifyContent="space-between" | |
| marginBottom="$2" | |
| > | |
| <XStack alignItems="center" gap="$3" flex={1}> | |
| <Stack alignItems="center" gap="$3" flex={1}> | |
| <Stack | |
| flexDirection="row" | |
| alignItems="center" | |
| justifyContent="space-between" | |
| marginBottom="$2" | |
| > | |
| <Stack alignItems="center" gap="$3" flex={1}> |
🤖 Prompt for AI Agents
In app/src/screens/settings/ManageDocumentsScreen.tsx around lines 219-223, the
document card header is currently stacked vertically; change it to a horizontal
row so the title cluster and delete button sit side-by-side with proper spacing.
Replace the vertical Stack with a horizontal container (e.g., set
flexDirection="row" or use an HStack), keep alignItems="center", set
justifyContent="space-between" (or give the title cluster flex={1} and the
delete button no flex), and ensure a horizontal gap (gap="$3" or marginLeft on
the button) is applied so there is consistent spacing between the title cluster
and delete button.
| <Stack> | ||
| <Stack paddingVertical="$4" justifyContent="space-between"> | ||
| <Caption size="large">{label}</Caption> | ||
| <Caption color={black} size="large"> | ||
| {value} | ||
| </Caption> | ||
| </XStack> | ||
| </Stack> | ||
| <Separator borderColor={slate200} /> | ||
| </YStack> | ||
| </Stack> | ||
| ); |
There was a problem hiding this comment.
Fix layout regression: InfoRow must be a row to space label/value
Without flexDirection="row", label and value stack vertically; justifyContent="space-between" won’t apply as intended.
Apply:
- <Stack>
- <Stack paddingVertical="$4" justifyContent="space-between">
+ <Stack>
+ <Stack
+ paddingVertical="$4"
+ justifyContent="space-between"
+ flexDirection="row"
+ alignItems="center"
+ >
<Caption size="large">{label}</Caption>
<Caption color={black} size="large">
{value}
</Caption>
</Stack>
<Separator borderColor={slate200} />
</Stack>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Stack> | |
| <Stack paddingVertical="$4" justifyContent="space-between"> | |
| <Caption size="large">{label}</Caption> | |
| <Caption color={black} size="large"> | |
| {value} | |
| </Caption> | |
| </XStack> | |
| </Stack> | |
| <Separator borderColor={slate200} /> | |
| </YStack> | |
| </Stack> | |
| ); | |
| <Stack> | |
| <Stack | |
| paddingVertical="$4" | |
| justifyContent="space-between" | |
| flexDirection="row" | |
| alignItems="center" | |
| > | |
| <Caption size="large">{label}</Caption> | |
| <Caption color={black} size="large"> | |
| {value} | |
| </Caption> | |
| </Stack> | |
| <Separator borderColor={slate200} /> | |
| </Stack> | |
| ); |
🤖 Prompt for AI Agents
In app/src/screens/settings/PassportDataInfoScreen.tsx around lines 51 to 60,
the inner Stack is missing a row layout so the label and value stack vertically;
add flexDirection="row" (and optionally alignItems="center") to that inner Stack
so the label and value are laid out horizontally and
justifyContent="space-between" works as intended.
| <Stack gap={32}> | ||
| {social.map(([Icon, href], i) => ( | ||
| <SocialButton key={i} Icon={Icon} href={href} /> | ||
| ))} | ||
| </XStack> | ||
| </Stack> | ||
| <BodyText color={amber500} fontSize={15}> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Restore horizontal layout for social icons
This was previously an XStack row. Add flexDirection="row" and appropriate spacing so icons render inline.
- <Stack gap={32}>
+ <Stack gap={32} flexDirection="row" alignItems="center" justifyContent="center" flexWrap="wrap">
{social.map(([Icon, href], i) => (
<SocialButton key={i} Icon={Icon} href={href} />
))}
</Stack>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Stack gap={32}> | |
| {social.map(([Icon, href], i) => ( | |
| <SocialButton key={i} Icon={Icon} href={href} /> | |
| ))} | |
| </XStack> | |
| </Stack> | |
| <BodyText color={amber500} fontSize={15}> | |
| <Stack gap={32} flexDirection="row" alignItems="center" justifyContent="center" flexWrap="wrap"> | |
| {social.map(([Icon, href], i) => ( | |
| <SocialButton key={i} Icon={Icon} href={href} /> | |
| ))} | |
| </Stack> |
🤖 Prompt for AI Agents
In app/src/screens/settings/SettingsScreen.tsx around lines 266 to 271, the
social icon group was accidentally rendered as a vertical Stack; change it back
to a horizontal layout by setting the container Stack (or replacing with XStack
if available) to use flexDirection="row" and add an appropriate horizontal gap
(e.g. gap or columnGap) so the icons render inline with spacing; keep the
existing map and SocialButton usage and only adjust the container props to
horizontal layout and spacing.
|
oof need to take another stab at this. need to flexDirection row to XStack converted components so they render the same |
|
ok not sure what's going but no longer seeing the typing issues that I saw previously. don't want to commit spurious code so closing this pr @seshanthS @aaronmgdr |
fixes warnings from
yarn typesbuilt the app and it displays as expected
Summary by CodeRabbit
New Features
Refactor
Style