Fix webview tunnel flow entry routing, layout, and onboarding navigation by Tranquil-Flow · Pull Request #1956 · selfxyz/self

Tranquil-Flow · 2026-04-10T05:05:49Z

Summary

Handle both / and /index.html entry paths so native WebView launches with ?verificationId=... reach the tunnel flow
Remove maxWidth: 430 from root container for edge-to-edge rendering in Android WebView
Center loading verification title in ProviderLaunchScreen
Route onboarding seed-phrase users to /onboarding/recovery-phrase instead of the settings variant
Wire onSkip on tunnel tour step 4 so "Skip for now" advances the flow
Fix pre-existing test failures: missing euclid mock exports, vi.mock hoisting issue, duplicate LocationDisplay element queries, and returnTo test expectations matching actual code behavior

Test plan

yarn nice passes (lint, format, types)
yarn build succeeds
Full test suite: 151/151 tests pass across 15 files (zero failures)

Summary by CodeRabbit

New Features
- Implemented entry route handling with verification-based navigation to guide users through onboarding flows.
- Added skip functionality to tour step 4.
- Updated seed phrase selection to navigate to recovery phrase screen.
UI/Style
- Removed layout width constraints for improved responsiveness.
- Enhanced loading screen text centering.

The root container had maxWidth: 430 and centered margin, which caused white side bars when the Android native shell loaded the webview edge-to-edge. Removing the constraint lets the app fill the full WebView viewport.

… is present The native shell loads index.html?verificationId=... but only / was registered as an entry route, so the wildcard redirect stripped query params and the app fell back to non-tunnel onboarding. Register both / and /index.html as entry paths via a shared entryRoute utility, redirecting to /tunnel/tour/1 when a verificationId is present. Add unit tests covering SDK launch and plain browser entry.

The Euclid Title component renders inline, so textAlign on the wrapper alone did not visually center the label. Add display: block to the Title style and textAlign: center on the wrapper div.

The seed phrase button in SocialSignOnMethodPickerScreen was routing to /settings/recovery-phrase, which has the wrong back/continue behavior for onboarding context. Navigate to /onboarding/recovery-phrase instead, preserving prompt-mock query state. Add a regression test for this path.

LaunchTour4Screen was missing the onSkip prop, making "Skip for now" a no-op. Pass onSkip={onNext} so it behaves like the primary action and advances the flow.

settingsScreens.test.tsx: Use vi.hoisted() for mockDocumentStore to avoid temporal dead zone from vi.mock hoisting. Switch expectLocation to getAllByTestId to handle multiple LocationDisplay elements when navigating to routes that also render LocationDisplay. recoverySupportScreens.test.tsx: Add missing borderRadius and RecoveryPhrase exports to the euclid mock so RecoveryPhraseScreen can render. Update returnTo tests to match actual behavior where SecretPhraseInputScreen navigates directly to the returnTo path, skipping the intermediate success screen.

vercel · 2026-04-10T05:05:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
self-webview-app	Ready	Preview, Comment	Apr 10, 2026 5:08am

coderabbitai · 2026-04-10T05:06:10Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 07104e77-9b57-4572-acbb-973b61036b1f

📥 Commits

Reviewing files that changed from the base of the PR and between b9c5b4a and b70656b.

📒 Files selected for processing (10)

packages/webview-app/src/App.tsx
packages/webview-app/src/main.tsx
packages/webview-app/src/screens/onboarding/ProviderLaunchScreen.tsx
packages/webview-app/src/screens/onboarding/SocialSignOnMethodPickerScreen.tsx
packages/webview-app/src/screens/tunnel/TourScreen.tsx
packages/webview-app/src/utils/entryRoute.test.ts
packages/webview-app/src/utils/entryRoute.ts
packages/webview-app/tests/screens/account/settingsScreens.test.tsx
packages/webview-app/tests/screens/onboarding/registrationPrompts.test.tsx
packages/webview-app/tests/screens/recovery/recoverySupportScreens.test.tsx

📝 Walkthrough

Walkthrough

The pull request introduces entry-route handling for the webview application, adding route utilities and an EntryRoute component that conditionally redirects based on URL query parameters. Several UI adjustments and navigation updates are included, along with test infrastructure changes to support the new routing logic.

Changes

Cohort / File(s)	Summary
Entry Route Utilities `packages/webview-app/src/utils/entryRoute.ts`, `packages/webview-app/src/utils/entryRoute.test.ts`	New utility module exporting `ENTRY_ROUTE_PATHS` and `getEntryRedirectPath` function that checks for `verificationId` query parameter and returns redirect path. Includes tests validating the redirect behavior.
App Routing `packages/webview-app/src/App.tsx`	Replaced single root route with dynamically generated entry routes using `ENTRY_ROUTE_PATHS`. New `EntryRoute` component inspects URL search parameters and conditionally navigates or renders `HomeScreen`.
Layout and UI Adjustments `packages/webview-app/src/main.tsx`, `packages/webview-app/src/screens/onboarding/ProviderLaunchScreen.tsx`	Removed width constraints from root wrapper to enable full-width layout. Enhanced loading UI centering in `ProviderLaunchScreen` with explicit text alignment.
Navigation Updates `packages/webview-app/src/screens/onboarding/SocialSignOnMethodPickerScreen.tsx`, `packages/webview-app/src/screens/tunnel/TourScreen.tsx`	Updated seed phrase navigation to route to `/onboarding/recovery-phrase` with query parameters. Added `onSkip` prop wiring to tour step 4.
Test Infrastructure `packages/webview-app/tests/screens/account/settingsScreens.test.tsx`, `packages/webview-app/tests/screens/onboarding/registrationPrompts.test.tsx`, `packages/webview-app/tests/screens/recovery/recoverySupportScreens.test.tsx`	Updated test mocks and expectations to align with new routing behavior. Modified mock setup patterns and assertion logic for multiple rendered elements.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: fixing webview tunnel entry routing, layout constraints, and onboarding navigation flows.
Description check	✅ Passed	The description covers all substantial changes with a clear summary and comprehensive test plan showing all tests pass, meeting the template requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/webview-tunnel-flow-fixes

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tranquil-Flow added 6 commits April 10, 2026 14:41

Remove max-width constraint from webview root container

bc29667

The root container had maxWidth: 430 and centered margin, which caused white side bars when the Android native shell loaded the webview edge-to-edge. Removing the constraint lets the app fill the full WebView viewport.

Center loading verification title in ProviderLaunchScreen

a0f3c0c

The Euclid Title component renders inline, so textAlign on the wrapper alone did not visually center the label. Add display: block to the Title style and textAlign: center on the wrapper div.

Wire onSkip on tunnel tour step 4

9a56437

LaunchTour4Screen was missing the onSkip prop, making "Skip for now" a no-op. Pass onSkip={onNext} so it behaves like the primary action and advances the flow.

vercel Bot deployed to Preview – self-webview-app April 10, 2026 05:08 View deployment

Navigation Menu

Uh oh!

Fix webview tunnel flow entry routing, layout, and onboarding navigation - #1956

Fix webview tunnel flow entry routing, layout, and onboarding navigation#1956
Tranquil-Flow wants to merge 6 commits into
devfrom
fix/webview-tunnel-flow-fixes

Tranquil-Flow commented Apr 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

Tranquil-Flow commented Apr 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

vercel Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Tranquil-Flow commented Apr 10, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Apr 10, 2026 •

edited

Loading

coderabbitai Bot commented Apr 10, 2026 •

edited

Loading