feat: focus onboarding on setting up an Alby Hub#3576
Merged
Conversation
Rework the wallet-connection path screen to split by user state instead of product: 'Don't have a wallet yet?' leads new users to set up an Alby Hub (getalby.com/alby-hub#download), while 'Already have a wallet?' keeps the existing connector grid. The Alby Account OAuth path is demoted from a primary button to a secondary text link, but stays fully reachable so existing account users can still connect.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe connector path screen now promotes Alby Hub with an external download link, moves Alby account connection into a footer prompt, and changes the connect trigger to a hyperlink. Locale files update the related ChangesConnector Path Redesign
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
reneaaron
marked this pull request as ready for review
June 30, 2026 13:41
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@src/app/screens/connectors/ChooseConnectorPath/index.tsx`:
- Around line 20-42: The ChooseConnectorPath screen is now reading new
choose_path translation keys, but the locale updates removed those entries for
non-English users. Restore/backfill the choose_path.albyhub.*,
choose_path.alby.prompt, and choose_path.alby.connect keys in the translation
JSON files used by react-i18next so the ChooseConnectorPath component continues
to render localized onboarding copy instead of missing-key text.
- Around line 22-25: Mark the Alby Hub image in ChooseConnectorPath as
decorative by adding an empty alt attribute to the existing img element. Update
the image in the connector picker UI so screen readers ignore the asset and do
not announce the raw filename; keep the change scoped to the img rendered in
this component.
In `@src/i18n/locales/en/translation.json`:
- Around line 55-57: The copy in the translation entry for the first-run Alby
Account screen has a typo in the description text (“Ideal If”). Update the
string in the translation object containing title, description, and connect so
the description uses the correct phrasing, keeping the existing keys and overall
message intact.
In `@src/i18n/locales/fr/translation.json`:
- Around line 35-40: The French locale is missing keys that ConnectAlby and
ChooseConnectorPath still use, causing those screens to fall back to English.
Restore the removed French translations under the choose_path and related footer
CTA entries in translation.json so the existing lookups in ConnectAlby/index.tsx
and ChooseConnectorPath/index.tsx continue to resolve in French until the UI
replacements are landed.
🪄 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
Run ID: 84400136-df9d-4f0f-81a9-fdeb4b3c36f7
📒 Files selected for processing (29)
src/app/screens/connectors/ChooseConnectorPath/index.tsxsrc/app/screens/connectors/ConnectAlby/index.tsxsrc/i18n/locales/cs/translation.jsonsrc/i18n/locales/da/translation.jsonsrc/i18n/locales/de/translation.jsonsrc/i18n/locales/el/translation.jsonsrc/i18n/locales/en/translation.jsonsrc/i18n/locales/es/translation.jsonsrc/i18n/locales/fa/translation.jsonsrc/i18n/locales/fi/translation.jsonsrc/i18n/locales/fr/translation.jsonsrc/i18n/locales/hi/translation.jsonsrc/i18n/locales/id/translation.jsonsrc/i18n/locales/it/translation.jsonsrc/i18n/locales/ja/translation.jsonsrc/i18n/locales/mr/translation.jsonsrc/i18n/locales/pl/translation.jsonsrc/i18n/locales/pt/translation.jsonsrc/i18n/locales/pt_BR/translation.jsonsrc/i18n/locales/ro/translation.jsonsrc/i18n/locales/ru/translation.jsonsrc/i18n/locales/si/translation.jsonsrc/i18n/locales/sl/translation.jsonsrc/i18n/locales/sv/translation.jsonsrc/i18n/locales/ta/translation.jsonsrc/i18n/locales/th/translation.jsonsrc/i18n/locales/uk/translation.jsonsrc/i18n/locales/zh_Hans/translation.jsonsrc/i18n/locales/zh_Hant/translation.json
Comment on lines
+20
to
+42
| title={t("albyhub.title")} | ||
| icon={ | ||
| <img | ||
| src={ | ||
| theme === "dark" | ||
| ? "assets/icons/alby_dark.svg" | ||
| : "assets/icons/alby_light.svg" | ||
| } | ||
| src="assets/icons/albyhub.svg" | ||
| className="w-10 h-10 rounded-md" | ||
| /> | ||
| } | ||
| description={t("alby.description")} | ||
| actions={<ConnectAlby />} | ||
| description={t("albyhub.description")} | ||
| actions={ | ||
| <a | ||
| href="https://getalby.com/alby-hub#download" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="flex flex-1" | ||
| > | ||
| <Button | ||
| tabIndex={-1} | ||
| label={t("albyhub.get_started")} | ||
| flex | ||
| primary | ||
| /> | ||
| </a> | ||
| } |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Backfill the new choose_path keys before switching this screen.
This UI now depends on choose_path.albyhub.*, choose_path.alby.prompt, and choose_path.alby.connect, while the locale batch shown in this PR empties/removes the related choose_path entries in non-English files. That turns the first-run onboarding copy into fallback/missing-key text for localized users.
As per coding guidelines, "All user-facing strings must go through react-i18next. Translations live in src/i18n/locales/<lang>/translation.json."
Also applies to: 74-77
🤖 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 `@src/app/screens/connectors/ChooseConnectorPath/index.tsx` around lines 20 -
42, The ChooseConnectorPath screen is now reading new choose_path translation
keys, but the locale updates removed those entries for non-English users.
Restore/backfill the choose_path.albyhub.*, choose_path.alby.prompt, and
choose_path.alby.connect keys in the translation JSON files used by
react-i18next so the ChooseConnectorPath component continues to render localized
onboarding copy instead of missing-key text.
Source: Coding guidelines
Comment on lines
55
to
+57
| "title": "Alby Account", | ||
| "description": "Ideal If you would like to enjoy apps while staying in control of your bitcoin.", | ||
| "connect": "Continue with Alby Account" | ||
| "connect": "Connect it", |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Fix the Ideal If typo.
This ships on the first-run screen.
✏️ Proposed fix
- "description": "Ideal If you would like to enjoy apps while staying in control of your bitcoin.",
+ "description": "Ideal if you would like to enjoy apps while staying in control of your bitcoin.",📝 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.
Suggested change
| "title": "Alby Account", | |
| "description": "Ideal If you would like to enjoy apps while staying in control of your bitcoin.", | |
| "connect": "Continue with Alby Account" | |
| "connect": "Connect it", | |
| "title": "Alby Account", | |
| "description": "Ideal if you would like to enjoy apps while staying in control of your bitcoin.", | |
| "connect": "Connect it", |
🤖 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 `@src/i18n/locales/en/translation.json` around lines 55 - 57, The copy in the
translation entry for the first-run Alby Account screen has a typo in the
description text (“Ideal If”). Update the string in the translation object
containing title, description, and connect so the description uses the correct
phrasing, keeping the existing keys and overall message intact.
Comment on lines
35
to
+40
| "choose_path": { | ||
| "alby": { | ||
| "title": "Compte Alby", | ||
| "connect": "Continuer avec un compte Alby", | ||
| "description": "Idéal si vous souhaitez profiter des applications tout en gardant le contrôle de votre bitcoin." | ||
| }, | ||
| "other": { | ||
| "title": "Apportez votre propre portefeuille", | ||
| "description": "Idéal si vous disposez déjà d'un wallet ou de votre propre nœud Lightning.", | ||
| "connect": "Sélectionnez votre wallet" | ||
| }, | ||
| "other": {}, |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the French keys until replacements land.
Line 35-40 removes strings that src/app/screens/connectors/ConnectAlby/index.tsx and src/app/screens/connectors/ChooseConnectorPath/index.tsx still render, so this locale now falls back to English for the footer CTA and the “other wallet” card. That keeps the screen working, but it regresses the French UX into a mixed-language onboarding flow.
🤖 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 `@src/i18n/locales/fr/translation.json` around lines 35 - 40, The French locale
is missing keys that ConnectAlby and ChooseConnectorPath still use, causing
those screens to fall back to English. Restore the removed French translations
under the choose_path and related footer CTA entries in translation.json so the
existing lookups in ConnectAlby/index.tsx and ChooseConnectorPath/index.tsx
continue to resolve in French until the UI replacements are landed.
Member
|
tACk |
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
2 participants
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.
Describe the changes you have made in this PR
Reworks the extension's first-run wallet-connection screen (
ChooseConnectorPath) to focus new users on getting an Alby Hub rather than connecting an Alby Account.Post–Alby Cloud, connecting an Alby Account no longer yields a working wallet on its own (you still need a hub), so leading onboarding with "Continue with Alby Account" dead-ended the majority of new installs. This reframes the screen around the question a new user can actually answer about themselves:
https://getalby.com/alby-hub#downloadto set up an Alby Hub.No connector logic changed — this is an onboarding IA + copy change.
Type of change
feat: New feature (non-breaking change which adds functionality)How has this been tested?
Built the Chrome extension (
yarn build:chrome), loaded it unpacked, and verified the onboarding screen renders, the "Get Started" link points atgetalby.com/alby-hub#download, "Connect" opens the connector grid, and the Alby Account link still triggers the OAuth flow.yarn lint-level prettier checks pass on the changed files.Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Localization