feat(wallet): Benzo-focused onboarding copy + fit the welcome screen (no scroll) - #89
Merged
Merged
Conversation
…(no scroll) Rewrite the welcome copy to lead with Benzo's features — private, encrypted USDC on Avalanche via zero-knowledge proofs — instead of generic self-custody boilerplate. Compact the layout (tighter padding, cards and type + a 'tight' Pane variant with less top padding since welcome has no back button) so the whole screen fits the phone frame with no vertical scroll. Also reframe the optional-passcode step as an opt-in (it is no longer a no-passkey fallback).
📝 WalkthroughWalkthroughThe onboarding welcome step receives updated feature copy, icons, typography, spacing, and card styling. The internal ChangesOnboarding presentation
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/wallet/src/screens/Onboarding.tsx`:
- Line 164: Add a visible skip-passcode action on the passcode screen and wire
it to the existing handleCreate handler, so users can continue without creating
a passcode. Keep the existing explanatory copy and passcode flow unchanged.
- Line 116: Update the welcome Pane identified by key="welcome" in Onboarding so
it disables vertical scrolling while preserving its fixed phone-frame height; do
not rely on tight, since that only changes padding. Ensure the welcome variant
uses the existing non-scrollable Pane behavior or an equivalent overflow
setting, and keep other onboarding panes unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: fd72ecba-a6ea-46b1-bbcc-4680d4b75d7b
📒 Files selected for processing (1)
apps/wallet/src/screens/Onboarding.tsx
| <AnimatePresence mode="wait"> | ||
| {step === "welcome" && ( | ||
| <Pane key="welcome"> | ||
| <Pane key="welcome" tight> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the onboarding screen and the Pane component to see whether `tight`
# changes scrolling behavior or only padding.
git ls-files 'apps/wallet/src/screens/Onboarding.tsx' 'apps/wallet/src/components/**' 'apps/wallet/src/**/Pane*' 'apps/wallet/src/**/pane*' | sed 's#^`#FILE` #'
echo '--- Onboarding.tsx (excerpt) ---'
cat -n apps/wallet/src/screens/Onboarding.tsx | sed -n '90,150p'
echo '--- Pane matches ---'
rg -n "overflow-y-auto|tight|function Pane|const Pane|export .*Pane" apps/wallet/src -g '!**/dist/**' -g '!**/build/**'Repository: Miny-Labs/benzo-wallet
Length of output: 6437
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# If Pane is in another path, locate it precisely and inspect the implementation.
fd -a -H -t f 'Pane.*|pane.*' apps/wallet/srcRepository: Miny-Labs/benzo-wallet
Length of output: 160
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Read the Pane implementation once located.
pane_file="$(fd -a -H -t f 'Pane.*|pane.*' apps/wallet/src | head -n 1)"
if [ -n "$pane_file" ]; then
echo "PANE_FILE $pane_file"
cat -n "$pane_file" | sed -n '1,220p'
fiRepository: Miny-Labs/benzo-wallet
Length of output: 160
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the Pane implementation and surrounding layout to assess whether the
# welcome screen can overflow on the intended phone-frame container.
cat -n apps/wallet/src/screens/Onboarding.tsx | sed -n '260,310p'
echo '--- App shell ---'
cat -n apps/wallet/src/App.tsx | sed -n '100,140p'Repository: Miny-Labs/benzo-wallet
Length of output: 4184
Welcome pane still scrolls apps/wallet/src/screens/Onboarding.tsx:116,281-284 — tight only changes padding; Pane still sets overflow-y-auto. If the phone-frame is meant to stay fixed-height, make the welcome variant non-scrollable or add a regression test for the smallest supported viewport.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/wallet/src/screens/Onboarding.tsx` at line 116, Update the welcome Pane
identified by key="welcome" in Onboarding so it disables vertical scrolling
while preserving its fixed phone-frame height; do not rely on tight, since that
only changes padding. Ensure the welcome variant uses the existing
non-scrollable Pane behavior or an equivalent overflow setting, and keep other
onboarding panes unchanged.
| <h1 className="font-display mt-5 text-center text-[24px] leading-tight">Set a passcode</h1> | ||
| <p className="mt-2 text-center text-[14px] text-muted max-w-[290px] mx-auto"> | ||
| This device has no passkey, so your wallet keys are encrypted with a passcode you choose. | ||
| Optional: encrypt your wallet with a passcode you enter to unlock. Skip it and your wallet just opens instantly. |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Provide a visible way to skip passcode creation.
This copy says the passcode can be skipped, but the passcode screen exposes no skip CTA; the only escape is the back button, followed by another tap on “Create new wallet.” Add a visible skip action wired to handleCreate, or clarify that users must return to the welcome screen.
Proposed UI addition
<Button full size="lg" onClick={handleCreateWithPasscode} loading={busy} data-testid="create-passcode">
Set passcode & create
</Button>
+ <Button full variant="secondary" size="lg" onClick={handleCreate} loading={busy}>
+ Skip passcode
+ </Button>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/wallet/src/screens/Onboarding.tsx` at line 164, Add a visible
skip-passcode action on the passcode screen and wire it to the existing
handleCreate handler, so users can continue without creating a passcode. Keep
the existing explanatory copy and passcode flow unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two asks
Copy (now leads with what Benzo does)
Fit
Compacted logo/heading/type, card padding + spacing, and added a
tightPanevariant (less top padding — welcome has no back button). Frees ~120px vs. an overflow of ~60–90px, so it sits inside the frame with headroom; the existingoverflow-y-autoonly ever engages now on unusually short viewports.Build ✓ · lint ✓ · 217/217 tests.
Summary by CodeRabbit
Greptile Summary
This PR refreshes the wallet onboarding welcome screen and tightens its layout.
tightPane variant used by the welcome step.Confidence Score: 5/5
This looks safe to merge.
Important Files Changed
tightPane option.Reviews (1): Last reviewed commit: "feat(wallet): Benzo-focused onboarding c..." | Re-trigger Greptile