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 1 commit 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. |
📝 WalkthroughWalkthroughThis PR integrates Cartridge wallet support into the application's wallet provider. Cartridge connector and controller dependencies are added, then a configured Cartridge connector instance is combined with auto-discovered injected Starknet wallets (Argent and Braavos) into a single memoized connectors list wired into StarknetConfig. ChangesCartridge Wallet Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ 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
| const { connectors: injectedConnectors } = useInjectedConnectors({ | ||
| recommended: [argent(), braavos()], | ||
| includeRecommended: "always", | ||
| order: "random", |
There was a problem hiding this comment.
Random order will cause hydration mismatches in SSR.
The order: "random" option produces different connector sequences on each execution. In Next.js App Router with SSR:
- Server render generates one random order
- Client hydration generates a different random order
- React detects mismatch and logs hydration warnings
- UI flashes as React corrects the DOM
Use order: "alphabetical" or order: "recommended" for deterministic ordering, or implement client-only randomization after initial hydration.
♻️ Suggested fix for deterministic ordering
const { connectors: injectedConnectors } = useInjectedConnectors({
recommended: [argent(), braavos()],
includeRecommended: "always",
- order: "random",
+ order: "alphabetical",
});📝 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.
| order: "random", | |
| const { connectors: injectedConnectors } = useInjectedConnectors({ | |
| recommended: [argent(), braavos()], | |
| includeRecommended: "always", | |
| order: "alphabetical", | |
| }); |
🤖 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/providers/wallet-provider.tsx` at 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.
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