feat(wallet): add Cartridge support and surface all installed Starknet wallets#53
feat(wallet): add Cartridge support and surface all installed Starknet wallets#53davedumto wants to merge 2 commits into
Conversation
…t wallets Integrate the Cartridge ControllerConnector alongside the existing useInjectedConnectors discovery so the wallet picker lists every Starknet wallet the user has installed (Argent X, Braavos, and any other get-starknet-compatible wallet) in addition to Cartridge. - Add @cartridge/connector and @cartridge/controller as dependencies (pinned to 0.8.0 for compatibility with @starknet-react/core 3.7.x). - Configure ControllerConnector once at module scope to avoid re-instantiation on every render. - Mark argent() and braavos() as recommended so they still surface prominently in the starknetkit picker even when not yet installed. Closes Fundable-Protocol#34
|
@davedumto is attempting to deploy a commit to the Fundable Team on Vercel. A member of the Team first needs to authorize it. |
|
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)
📝 WalkthroughWalkthroughAdds Cartridge connector dependencies and configures a module-scoped Cartridge ControllerConnector; WalletProvider now auto-discovers injected Starknet connectors (Argent, Braavos), appends the Cartridge connector, memoizes the list, and passes it to StarknetConfig. ChangesCartridge Wallet Integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/providers/wallet-provider.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. 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: 1
🤖 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/providers/wallet-provider.tsx`:
- Line 35: The non-deterministic setting order: "random" in the connectors
configuration (in the WalletProvider / connectors setup) causes SSR hydration
mismatches; change order to a deterministic value such as "alphabetical" or
"recommended" (e.g., order: "alphabetical") in the connectors/options object, or
move any randomization to run only on the client after hydration (e.g., perform
random shuffle in a useEffect and update the client-only state), ensuring the
initial server-rendered order matches the client during hydration.
🪄 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: f2d9d4a0-42d3-4cd3-b97d-3434355cfbfa
⛔ Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
package.jsonsrc/providers/wallet-provider.tsx
…n mismatch order: "random" produces different connector sequences on server vs. client, causing React hydration warnings and UI flash. Switched to "alphabetical" for a deterministic, SSR-safe order. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
Summary
Adds Cartridge wallet support to the Starknet wallet picker and ensures every wallet the user has installed (Argent X, Braavos, and any other
get-starknet-compatible browser wallet) shows up in the connect modal, not just a hard-coded subset.Closes #34
Changes
src/providers/wallet-provider.tsxControllerConnectorfrom@cartridge/connector/controller, configured once at module scope (so it isn't re-instantiated on every render).useInjectedConnectorsso the picker continues to auto-discover every installed Starknet wallet, withargent()andbraavos()markedincludeRecommended: "always"so they still surface even when the user hasn't installed them yet.useMemoso the array identity is stable across renders.package.json+ lockfiles@cartridge/connectorand@cartridge/controllerpinned to0.8.0. (Newer 0.9.x / 0.10.x+ releases declare a peer dep on@starknet-react/core@4.xbeta; this project is on^3.7.2, so0.8.0is the latest version that's peer-compatible.)pnpm-lock.yamlandpackage-lock.jsonare updated since both are tracked onmain.Why this approach
The previous attempt (#50) replaced the dynamic
useInjectedConnectorsdiscovery with a hard-coded[argent(), braavos(), injected({ id: "injected" }), controller]list. That works for the named wallets but loses auto-discovery of every other Starknet wallet the user might have installed - which is exactly what the issue asks for. KeepinguseInjectedConnectorsand appending Cartridge satisfies both requirements with the smallest surface-area change.Testing notes
next buildcompiles successfully; it only fails on a pre-existing@typescript-eslint/no-explicit-anyerror insrc/components/molecules/LineChart.tsxthat is already red onmain(unrelated to this PR).pnpm installresolves cleanly; remaining peer warnings (starknetkit->@argent/x-ui,react-native, etc.) are pre-existing onmain.Checklist
ConnectWalletButton,setWalletState)Summary by CodeRabbit
New Features
Chores