Migrate web view screen and components to sdk #1293
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds WebView support across app and SDK: new WebView screen, top NavBar and bottom Footer components, navigation type additions and wiring, TypeScript ambient declarations for webview/safe-area/icons, and peer/dependency updates including react-native-webview. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Navigator as App Navigation
participant WVScreen as App WebViewScreen
participant SDKWVS as SDK WebViewScreen
participant WebView
participant NavBar as WebViewNavBar
participant Footer as WebViewFooter
User->>Navigator: Navigate to WebView(url, title, share...)
Navigator->>WVScreen: mount with params
WVScreen->>SDKWVS: render (safeArea, handlers, params)
SDKWVS->>WebView: load URL
WebView-->>SDKWVS: navigation state events
SDKWVS-->>WVScreen: propagate state (canGoBack/canGoForward, title, url)
WVScreen->>NavBar: provide title, back/open callbacks
WVScreen->>Footer: provide goBack/goForward/reload callbacks
rect rgba(100,180,150,0.15)
User->>NavBar: tap back/open/share
NavBar->>WVScreen: onBack/onOpenExternal/onShare
User->>Footer: tap back/reload/forward
Footer->>WVScreen: onGoBack/onReload/onGoForward
end
rect rgba(200,160,120,0.12)
WVScreen->>WebView: goBack()/reload()/goForward()
WebView-->>WVScreen: updated navigation state
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Multiple coordinated changes spanning app navigation types, new UI/screen implementations, SDK public surface expansion, and new ambient typings — requires tracing runtime behavior, navigation and back-handling, and validating type/ambient declarations. Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
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/shared/ComingSoonScreen.tsx (1)
49-66: Guard against unmapped country codes to avoid "undefined" in UIIf the code isn’t in countryCodes, name becomes undefined and leaks to the UI. Fall back to "Unknown" before returning.
Apply:
- const name = - countryCodes[normalizedCountryCode as keyof typeof countryCodes]; + const name = + countryCodes[normalizedCountryCode as keyof typeof countryCodes] ?? undefined; + + if (!name) { + return { + countryName: 'Unknown', + countryCode: 'Unknown', + documentTypeText: docType, + }; + }
🧹 Nitpick comments (4)
app/src/navigation/index.tsx (1)
28-28: Avoid duplicating WebView param types across modules.You import
WebViewScreenParamshere, whileSharedRoutesParamList.WebView(in navigation/types.ts) repeats the same shape. Prefer a single source of truth (e.g., defineWebViewParamsin navigation/types.ts and import it in both the screen and here), to prevent drift.Also applies to: 74-75
app/src/navigation/types.ts (1)
7-19: Consolidate WebView params to one exported type.This repeats the shape also used by
WebViewScreenParams. Export a singleWebViewParamshere and reuse it in both the screen and navigation to avoid divergence.app/src/components/WebViewFooter.tsx (1)
13-21: Remove unused onOpenInBrowser prop or implement an actionProp is accepted and passed from the screen but ignored here; either drop it from the interface or add an “Open in browser” button for consistency.
Apply (to remove):
export interface WebViewFooterProps { canGoBack: boolean; canGoForward: boolean; onGoBack: () => void; onGoForward: () => void; onReload: () => void; - onOpenInBrowser: () => void; } @@ export const WebViewFooter: React.FC<WebViewFooterProps> = ({ canGoBack, canGoForward, onGoBack, onGoForward, onReload, - onOpenInBrowser: _onOpenInBrowser, }) => {Also applies to: 25-32
app/src/components/NavBar/WebViewNavBar.tsx (1)
16-24: Either render a Share action or remove share propsThe component exposes onSharePress/isShareDisabled but doesn’t render a Share button, leading to dead props and confusion. Add a share icon button (respecting isShareDisabled), or drop the props from the interface.
Example (add button next to external):
isOpenExternalDisabled?: boolean; } @@ export const WebViewNavBar: React.FC<WebViewNavBarProps> = ({ title, onBackPress, + onSharePress, + isShareDisabled, onOpenExternalPress, isOpenExternalDisabled, }) => { @@ - {/* Right: Open External Button */} + {/* Right: Share + Open External Buttons */} + <Button + unstyled + disabled={isShareDisabled} + accessibilityRole="button" + accessibilityLabel="Share" + hitSlop={{ top: 20, bottom: 20, left: 10, right: 10 }} + icon={<ExternalLink size={24} color={black} opacity={isShareDisabled ? 0.3 : 1} />} + onPress={() => { + buttonTap(); + onSharePress?.(); + }} + /> <Button unstyled disabled={isOpenExternalDisabled} hitSlop={{ top: 20, bottom: 20, left: 10, right: 20 }}Alternatively, remove onSharePress/isShareDisabled from the interface and all call sites.
Also applies to: 26-80
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
app/ios/Podfile.lockis excluded by!**/*.lockyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
app/package.json(1 hunks)app/src/components/NavBar/WebViewNavBar.tsx(1 hunks)app/src/components/WebViewFooter.tsx(1 hunks)app/src/navigation/index.tsx(3 hunks)app/src/navigation/shared.ts(1 hunks)app/src/navigation/types.ts(1 hunks)app/src/screens/account/settings/SettingsScreen.tsx(4 hunks)app/src/screens/shared/ComingSoonScreen.tsx(2 hunks)app/src/screens/shared/WebViewScreen.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
app/package.json
📄 CodeRabbit inference engine (.cursor/rules/mobile-sdk-migration.mdc)
Expose a 'test:build' script in the app's package.json that builds deps, types, performs bundle analysis, and runs tests
Files:
app/package.json
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use Yarn only for package management (yarn install/add/remove); do not use npm or pnpm in scripts
Files:
app/package.json
**/*.{js,ts,tsx,jsx,sol,nr}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{js,ts,tsx,jsx,sol,nr}: 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/navigation/shared.tsapp/src/screens/shared/WebViewScreen.tsxapp/src/screens/account/settings/SettingsScreen.tsxapp/src/components/WebViewFooter.tsxapp/src/navigation/types.tsapp/src/components/NavBar/WebViewNavBar.tsxapp/src/screens/shared/ComingSoonScreen.tsxapp/src/navigation/index.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (app/AGENTS.md)
Type checking must pass before PRs (yarn types)
Files:
app/src/navigation/shared.tsapp/src/screens/shared/WebViewScreen.tsxapp/src/screens/account/settings/SettingsScreen.tsxapp/src/components/WebViewFooter.tsxapp/src/navigation/types.tsapp/src/components/NavBar/WebViewNavBar.tsxapp/src/screens/shared/ComingSoonScreen.tsxapp/src/navigation/index.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/navigation/shared.tsapp/src/screens/shared/WebViewScreen.tsxapp/src/screens/account/settings/SettingsScreen.tsxapp/src/components/WebViewFooter.tsxapp/src/navigation/types.tsapp/src/components/NavBar/WebViewNavBar.tsxapp/src/screens/shared/ComingSoonScreen.tsxapp/src/navigation/index.tsx
🧠 Learnings (3)
📚 Learning: 2025-09-22T11:10:22.019Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursorrules:0-0
Timestamp: 2025-09-22T11:10:22.019Z
Learning: Applies to src/navigation/**/*.{js,ts,tsx,jsx} : Platform-specific initial routes: web uses 'Home', mobile uses 'Splash'.
Applied to files:
app/src/navigation/shared.tsapp/src/navigation/index.tsx
📚 Learning: 2025-09-22T11:10:22.019Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursorrules:0-0
Timestamp: 2025-09-22T11:10:22.019Z
Learning: Applies to src/**/*.{js,ts,tsx,jsx} : Use `react-navigation/native` with `createStaticNavigation` for type-safe navigation in React Native.
Applied to files:
app/src/navigation/shared.ts
📚 Learning: 2025-08-23T02:02:02.556Z
Learnt from: transphorm
PR: selfxyz/self#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/navigation/index.tsx
🧬 Code graph analysis (6)
app/src/navigation/shared.ts (2)
app/src/navigation/types.ts (1)
SharedRoutesParamList(7-19)app/src/screens/shared/WebViewScreen.tsx (1)
WebViewScreen(41-204)
app/src/screens/shared/WebViewScreen.tsx (5)
app/src/navigation/types.ts (1)
SharedRoutesParamList(7-19)packages/mobile-sdk-demo/tests/mocks/react-native.ts (3)
Platform(14-25)ActivityIndicator(5-5)StyleSheet(27-29)packages/mobile-sdk-alpha/src/constants/colors.ts (3)
white(59-59)charcoal(15-15)slate200(35-35)app/src/components/NavBar/WebViewNavBar.tsx (1)
WebViewNavBar(26-80)app/src/components/WebViewFooter.tsx (1)
WebViewFooter(25-86)
app/src/components/WebViewFooter.tsx (1)
packages/mobile-sdk-alpha/src/constants/colors.ts (3)
slate50(41-41)black(8-8)slate400(39-39)
app/src/components/NavBar/WebViewNavBar.tsx (3)
app/src/mocks/react-native-safe-area-context.js (1)
useSafeAreaInsets(44-46)packages/mobile-sdk-alpha/src/constants/colors.ts (1)
black(8-8)packages/mobile-sdk-demo/tests/mocks/react-native.ts (1)
StyleSheet(27-29)
app/src/screens/shared/ComingSoonScreen.tsx (1)
app/src/navigation/types.ts (1)
SharedRoutesParamList(7-19)
app/src/navigation/index.tsx (1)
app/src/screens/shared/WebViewScreen.tsx (1)
WebViewScreenParams(26-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). (7)
- GitHub Check: type-check
- GitHub Check: analyze-ios
- GitHub Check: build-deps
- GitHub Check: analyze-android
- GitHub Check: e2e-ios
- GitHub Check: android-build-test
- GitHub Check: e2e-ios
🔇 Additional comments (3)
app/package.json (1)
148-148: WebView dep addition looks compatible with RN 0.76.9.No issues from a dependency standpoint. Ensure pods are updated in CI after merging (install-app:setup already covers this).
app/src/screens/account/settings/SettingsScreen.tsx (1)
231-235: Key generation guard is sound.Using the route string when available and falling back to index avoids collisions. Looks good.
app/src/navigation/shared.ts (1)
23-29: Typed sharedScreens map LGTM.Good use of mapped types to keep screen-to-param alignment and options typed.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/mobile-sdk-alpha/package.json (1)
105-105: Replacenpm runwithyarnin the prepublishOnly script.Per coding guidelines, only Yarn should be used for package management. The
npm runcommands must be replaced withyarn.- "prepublishOnly": "npm run build && npm run typecheck && npm run validate:exports && npm run validate:pkg", + "prepublishOnly": "yarn build && yarn typecheck && yarn validate:exports && yarn validate:pkg",
🧹 Nitpick comments (6)
packages/mobile-sdk-alpha/package.json (1)
159-161: Consider tightening peer dependency versions for production reliability.Using wildcard versions (
"*") for critical runtime dependencies likereact-native-webviewandreact-native-safe-area-contextis permissive and may lead to compatibility issues. For an alpha SDK, this is acceptable, but consider pinning to known-good major versions (e.g.,"^5.0.0"or"^13.0.0") in a future release to improve stability.packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts (1)
5-14: Consider expanding type declarations for complete safe-area-context API.The current declarations only cover
useSafeAreaInsetsandEdgeInsets. If other exports fromreact-native-safe-area-contextare needed (likeSafeAreaProvider,SafeAreaView,initialWindowMetrics), consider adding them to prevent import errors.declare module 'react-native-safe-area-context' { import type { ComponentType, ReactNode } from 'react'; export interface EdgeInsets { top: number; right: number; bottom: number; left: number; } export function useSafeAreaInsets(): EdgeInsets; export interface SafeAreaProviderProps { children: ReactNode; initialMetrics?: { insets: EdgeInsets; frame: { x: number; y: number; width: number; height: number }; } | null; } export const SafeAreaProvider: ComponentType<SafeAreaProviderProps>; export const SafeAreaView: ComponentType<any>; }packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx (2)
16-23: Remove unusedcanGoBackprop.The
canGoBackprop is defined in the interface but never used in the component implementation. Remove it or implement back/close button conditional logic based on this prop.export interface WebViewNavBarProps { title?: string; - canGoBack?: boolean; onBackPress: () => void; onOpenExternalPress?: () => void; isOpenExternalDisabled?: boolean; safeAreaTop?: number; }
46-49: Consider memoizing button press handlers for performance.The anonymous function wrapper for
onBackPresscreates a new function on every render. For better performance, useuseCallbackto memoize these handlers.const handleBackPress = useCallback(() => { buttonTap(); onBackPress(); }, [onBackPress]); // Then use: <Button onPress={handleBackPress} // ... />Also applies to: 71-74
packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts (1)
36-44: Clarify purpose of duplicate WebViewNavigation declaration.The
WebViewNavigationinterface is declared twice - once in the main module (lines 9-15) and again in 'react-native-webview/lib/WebViewTypes' (lines 36-44). If this is intentional for compatibility with different import paths, consider adding a comment explaining why. Otherwise, remove the duplicate.packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx (1)
93-107: Remove unused prop passed to WebViewNavBar.Line 103 passes
canGoBack={stackCanGoBack}toWebViewNavBar, but the component does not accept or use this prop (seeWebViewNavBarPropsinterface inWebViewNavBar.tsx). React will ignore it, but it adds confusion.Apply this diff if the prop is not needed:
<WebViewNavBar title={derivedTitle} - canGoBack={stackCanGoBack} onBackPress={handleGoBack} onOpenExternalPress={handleOpenExternal} safeAreaTop={safeAreaTop} />
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (12)
app/src/navigation/index.tsx(3 hunks)app/src/screens/shared/WebViewScreen.tsx(1 hunks)packages/mobile-sdk-alpha/.eslintrc.cjs(1 hunks)packages/mobile-sdk-alpha/package.json(1 hunks)packages/mobile-sdk-alpha/src/components/index.ts(2 hunks)packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx(1 hunks)packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx(1 hunks)packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx(1 hunks)packages/mobile-sdk-alpha/src/index.ts(1 hunks)packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts(1 hunks)packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts(1 hunks)packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/src/navigation/index.tsx
🧰 Additional context used
📓 Path-based instructions (9)
packages/mobile-sdk-alpha/src/index.ts
📄 CodeRabbit inference engine (.cursor/rules/mobile-sdk-migration.mdc)
Re-export new SDK modules via packages/mobile-sdk-alpha/src/index.ts
Files:
packages/mobile-sdk-alpha/src/index.ts
packages/mobile-sdk-alpha/**/*.{ts,tsx}
📄 CodeRabbit inference engine (packages/mobile-sdk-alpha/AGENTS.md)
packages/mobile-sdk-alpha/**/*.{ts,tsx}: Use strict TypeScript type checking across the codebase
Follow ESLint TypeScript-specific rules
Avoid introducing circular dependencies
Files:
packages/mobile-sdk-alpha/src/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsxpackages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.tspackages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.tspackages/mobile-sdk-alpha/src/components/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsxpackages/mobile-sdk-alpha/src/types/react-native-webview.d.tspackages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx
**/*.{js,ts,tsx,jsx,sol,nr}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{js,ts,tsx,jsx,sol,nr}: 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:
packages/mobile-sdk-alpha/src/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsxpackages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.tspackages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.tspackages/mobile-sdk-alpha/src/components/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsxpackages/mobile-sdk-alpha/src/types/react-native-webview.d.tspackages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsxapp/src/screens/shared/WebViewScreen.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/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsxpackages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.tspackages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.tspackages/mobile-sdk-alpha/src/components/index.tspackages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsxpackages/mobile-sdk-alpha/src/types/react-native-webview.d.tspackages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (app/AGENTS.md)
Type checking must pass before PRs (yarn types)
Files:
app/src/screens/shared/WebViewScreen.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/shared/WebViewScreen.tsx
packages/mobile-sdk-alpha/package.json
📄 CodeRabbit inference engine (.cursor/rules/mobile-sdk-migration.mdc)
packages/mobile-sdk-alpha/package.json: Expose a 'test:build' script in the SDK's package.json that runs build, test, types, and lint
Enable tree shaking for the SDK (e.g., ensure 'sideEffects' is correctly set in package.json and exports are ESM-friendly)
Files:
packages/mobile-sdk-alpha/package.json
packages/mobile-sdk-alpha/**/package.json
📄 CodeRabbit inference engine (packages/mobile-sdk-alpha/AGENTS.md)
packages/mobile-sdk-alpha/**/package.json: Ensure package exports are properly configured
Verify package conditions are valid (e.g., exports conditions)
Files:
packages/mobile-sdk-alpha/package.json
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use Yarn only for package management (yarn install/add/remove); do not use npm or pnpm in scripts
Files:
packages/mobile-sdk-alpha/package.json
🧠 Learnings (12)
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/src/index.ts : Re-export new SDK modules via packages/mobile-sdk-alpha/src/index.ts
Applied to files:
packages/mobile-sdk-alpha/src/index.tspackages/mobile-sdk-alpha/src/components/index.ts
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/*.{ts,tsx} : Follow ESLint TypeScript-specific rules
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjs
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/package.json : Ensure package exports are properly configured
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjspackages/mobile-sdk-alpha/package.json
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/{**/*.test.{ts,tsx},**/__tests__/**/*.{ts,tsx}} : Use actual imports from selfxyz/mobile-sdk-alpha in tests
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjs
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/*.{ts,tsx} : Avoid introducing circular dependencies
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjspackages/mobile-sdk-alpha/package.json
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/package.json : Enable tree shaking for the SDK (e.g., ensure 'sideEffects' is correctly set in package.json and exports are ESM-friendly)
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjspackages/mobile-sdk-alpha/package.json
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/*.{ts,tsx} : Use strict TypeScript type checking across the codebase
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjs
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/package.json : Verify package conditions are valid (e.g., exports conditions)
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjspackages/mobile-sdk-alpha/package.json
📚 Learning: 2025-08-25T14:25:57.586Z
Learnt from: aaronmgdr
PR: selfxyz/self#951
File: app/src/providers/authProvider.web.tsx:17-18
Timestamp: 2025-08-25T14:25:57.586Z
Learning: The selfxyz/mobile-sdk-alpha/constants/analytics import path is properly configured with SDK exports, Metro aliases, and TypeScript resolution. Import changes from @/consts/analytics to this path are part of valid analytics migration, not TypeScript resolution issues.
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjs
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/{**/*.test.{ts,tsx},**/__tests__/**/*.{ts,tsx}} : Do NOT mock selfxyz/mobile-sdk-alpha in tests (avoid jest.mock('selfxyz/mobile-sdk-alpha') and replacing real functions with mocks)
Applied to files:
packages/mobile-sdk-alpha/.eslintrc.cjs
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Update the app to consume the mobile-sdk-alpha package and replace local modules with SDK imports
Applied to files:
packages/mobile-sdk-alpha/package.json
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/README.md : Document new/updated SDK modules and usage in packages/mobile-sdk-alpha/README.md
Applied to files:
packages/mobile-sdk-alpha/package.json
🧬 Code graph analysis (5)
packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx (5)
app/src/screens/shared/WebViewScreen.tsx (1)
WebViewScreen(27-55)packages/mobile-sdk-alpha/src/constants/colors.ts (3)
white(59-59)charcoal(15-15)slate200(35-35)packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx (1)
WebViewNavBar(25-78)packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts (3)
WebView(33-33)WebViewNavigation(9-15)WebViewNavigation(37-43)packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx (1)
WebViewFooter(27-76)
packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts (1)
app/src/mocks/react-native-safe-area-context.js (1)
useSafeAreaInsets(44-46)
packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx (3)
packages/mobile-sdk-alpha/src/index.ts (2)
buttonTap(100-100)dinot(97-97)packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts (2)
X(18-18)ExternalLink(16-16)packages/mobile-sdk-alpha/src/constants/colors.ts (1)
black(8-8)
packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx (4)
packages/mobile-sdk-alpha/src/components/index.ts (5)
WebViewFooterProps(6-6)WebViewFooter(47-47)Button(17-17)YStack(54-54)XStack(51-51)packages/mobile-sdk-alpha/src/index.ts (3)
WebViewFooterProps(88-88)WebViewFooter(87-87)buttonTap(100-100)packages/mobile-sdk-alpha/src/constants/colors.ts (3)
slate50(41-41)black(8-8)slate400(39-39)packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts (3)
ArrowLeft(14-14)RotateCcw(17-17)ArrowRight(15-15)
app/src/screens/shared/WebViewScreen.tsx (3)
packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx (3)
WebViewScreenProps(21-26)WebViewScreen(30-152)WebViewScreenParams(16-19)app/src/navigation/types.ts (1)
SharedRoutesParamList(7-19)app/src/mocks/react-native-safe-area-context.js (1)
useSafeAreaInsets(44-46)
🪛 GitHub Actions: Mobile SDK CI
packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx
[error] 7-7: Failed to resolve import "@tamagui/lucide-icons" from WebViewFooter.tsx. Does the file exist?
⏰ 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). (8)
- GitHub Check: type-check
- GitHub Check: android-build-test
- GitHub Check: e2e-ios
- GitHub Check: build-deps
- GitHub Check: android-e2e
- GitHub Check: ios-e2e
- GitHub Check: analyze-android
- GitHub Check: analyze-ios
🔇 Additional comments (8)
packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts (1)
1-19: LGTM - Minimal type declarations for icon library.The ambient module declaration provides basic typing for the lucide-icons used in WebView components. The
IconPropsinterface covers essential properties (size, color, opacity) needed for the UI.packages/mobile-sdk-alpha/src/index.ts (2)
80-81: LGTM - SdkEvents export added.The
SdkEventsexport from types/events is properly positioned after the QRCodeScreen export.
85-94: LGTM - WebView components properly exported.The WebView component exports follow SDK conventions with proper type/value separation and grouped exports. All necessary prop types are included for external consumption.
app/src/screens/shared/WebViewScreen.tsx (2)
21-21: LGTM - Safe default URL.Using
https://self.xyzas the default URL is secure and appropriate for the organization's domain.
27-54: Wrapper correctly adapts navigation props to SDK component.The wrapper properly:
- Maps React Navigation props to SDK's navigation-agnostic interface
- Provides safe-area insets from the hook
- Computes
stackCanGoBackfrom navigation state- Delegates all WebView logic to the SDK component
Security note: The actual WebView implementation in the SDK component (packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx) should be reviewed for URL validation, origin whitelisting, and secure navigation handling as flagged in previous reviews.
packages/mobile-sdk-alpha/src/components/index.ts (1)
6-8: LGTM - WebView component exports properly structured.The exports follow the established pattern in this file:
- Type exports grouped at the top
- Component exports grouped with descriptive comment
- All necessary WebView types and components are included
Also applies to: 46-49
packages/mobile-sdk-alpha/.eslintrc.cjs (1)
67-73: No issues found — ignored modules are properly declared as dependencies.All three modules in the ESLint ignore list (
react-native-webview,react-native-safe-area-context,@tamagui/lucide-icons) are correctly declared as dependencies in package.json. The configuration is sound.packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx (1)
27-76: ****The
onOpenInBrowserprop is not dead code. The architecture intentionally separates concerns:WebViewNavBarimplements the "open in browser" button (with ExternalLink icon), whileWebViewFooterhandles navigation controls (back/forward/reload). Both components receivehandleOpenExternal, but only the NavBar invokes it—by design. The underscore prefix (_onOpenInBrowser) is a standard TypeScript pattern to suppress unused variable warnings for intentionally unused parameters. The parent component correctly passes the callback; the Footer's non-use is architecturally sound.Likely an incorrect or invalid review comment.
|
@shazarre @aaronmgdr here is a wip pr to migrate the web view screen over to the sdk. there are some build errors and the navbar top padding is off. |
|
closing for now |
Summary by CodeRabbit
New Features
Chores