feat(wallet): add Cartridge support and display all Starknet wallets#50
feat(wallet): add Cartridge support and display all Starknet wallets#50davedumto wants to merge 5 commits intoFundable-Protocol:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@davedumto is attempting to deploy a commit to the Fundable Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughTwo new dependencies, Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant WalletProvider
participant StarknetConfig
participant Connectors
App ->> WalletProvider: Render with children
WalletProvider ->> Connectors: Define static array (argent, braavos, injected, ControllerConnector)
WalletProvider ->> StarknetConfig: Pass connectors, chains, provider, explorer, children
StarknetConfig ->> App: Provide wallet context to children
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Possibly related issues
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
package.json(1 hunks)src/providers/wallet-provider.tsx(1 hunks)
🔇 Additional comments (5)
package.json (1)
12-13: Dependencies Verified: @cartridge/connector & @cartridge/controller at ^0.9.2Both packages exist on npm, are maintained by the expected authors, and
0.9.2is their latest stable release (dist-taglatest). The caret range^0.9.2correctly tracks patch updates without risking breaking changes.• package.json — lines 12–13
src/providers/wallet-provider.tsx (4)
6-12: Import changes look correct for static connector implementation.The updated imports properly support the transition from dynamic to static connector configuration. All necessary connectors are imported from
@starknet-react/core.
24-34: StarknetConfig integration looks correct.The
StarknetConfigcomponent properly receives the staticconnectorsarray, and all other configuration remains unchanged. This maintains backward compatibility for the provider interface.
36-36: Export statement formatting is consistent.The export statement follows consistent formatting with the rest of the codebase.
13-13: ControllerConnector import path is correctThe
@cartridge/connectorpackage’sexportsfield includes a./controllersubpath (mapping todist/controller.js), so the importimport ControllerConnector from "@cartridge/connector/controller";in
src/providers/wallet-provider.tsxis valid and requires no changes.
src/providers/wallet-provider.tsx
Outdated
| // All supported connectors (excluding 'ready', which is not exported) | ||
| const connectors = [ | ||
| argent(), | ||
| braavos(), | ||
| injected({ id: "injected" }), | ||
| new ControllerConnector(), // Cartridge wallet | ||
| ]; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify ControllerConnector constructor parameters and breaking change impact.
The transition from useInjectedConnectors() to a static array is a significant architectural change. Please verify:
- ControllerConnector configuration: Does the constructor require any parameters (like app name, RPC URL, etc.)?
- Breaking change assessment: The
injected({ id: "injected" })configuration might affect existing wallet connections that relied on the previous dynamic detection.
The static connector array approach provides better control over which wallets are available, which aligns with the PR objective of displaying all major Starknet wallets.
🌐 Web query:
ControllerConnector from @cartridge/connector constructor parameters and configuration options
💡 Result:
The ControllerConnector from @cartridge/connector accepts a configuration object with several parameters that allow you to customize its behavior for integration with Starknet-based applications. The key parameters and configuration options are as follows:
-
policies:
An object defining session policies (permissions) for interacting with smart contracts. Policies specify which contracts and methods can be used, and can include descriptive metadata for each permitted method. This allows for fine-grained session key management, particularly useful for gaming or applications requiring specific delegated permissions[1][7].Example:
const policies = { contracts: { "0x...": { methods: [ { name: "approve", entrypoint: "approve", description: "Approve tokens" }, { name: "transfer", entrypoint: "transfer" } ] } } };
-
rpc:
The Starknet JSON-RPC endpoint to use for the connector. This is the node URL where the connector will send requests. You can explicitly pass different endpoints for networks likemainnetorsepolia, e.g.,'https://api.cartridge.gg/x/starknet/sepolia'[1][4][7]. -
theme (optional):
Some documentation and code suggest there may be support for UI themes (light/dark/custom), but the primary examples do not show this in detail. If supported, it would allow you to adjust the appearance of built-in modal UIs[1]. -
Other parameters:
Documentation focuses primarily onpoliciesandrpc. The code examples do not expose additional documented parameters such as session duration, preferred explorer, or inventory configuration directly withinControllerConnector, but those may be available via props in related UI components[1][4][7].
Example Minimal Configuration
import ControllerConnector from "@cartridge/connector/controller";
const policies = {
contracts: {
"0x049d...": {
methods: [
{ name: "approve", entrypoint: "approve", description: "Approve spending" },
{ name: "transfer", entrypoint: "transfer" }
]
}
}
};
const connector = new ControllerConnector({
policies,
rpc: "https://api.cartridge.gg/x/starknet/sepolia"
});
// Add to StarknetConfig as connector[1][4][7]
Essential Usage Guidelines
-
Instantiate outside React components:
Always create theControllerConnectoroutside of the React component tree to avoid recreation on every render, which can disrupt connection handling[1][7]. -
Session Policies:
Session key features (delegation, gasless txs, method whitelisting) are enabled via thepoliciesparameter[1][7]. -
Provider configuration:
Use with a Starknet JSON-RPC provider (such asjsonRpcProvider()from@starknet-react/core) and specify different node URLs per environment as needed[1][7].
Summary Table
| Parameter | Type | Description | Required |
|---|---|---|---|
| policies | object | Defines contracts/methods permitted by the controller (session delegation/permissions) | No* |
| rpc | string | URL for the Starknet JSON-RPC endpoint used by the controller | Yes |
| theme | string | (If supported) UI theme for built-in modals | No |
* Policies are optional for basic use but required for advanced session key/delegation scenarios.
References
- Direct integration and usage instructions are available in the [Cartridge documentation][1][4][7].
If you need details on a specialized parameter or a specific advanced configuration not included here, please specify, as current official documentation focuses mainly on contract permissioning and RPC setup.
Citations:
- 1: https://docs.cartridge.gg/controller/examples/react
- 2: https://docs.tealium.com/server-side-connectors/criteo-connector/
- 3: https://help.openconnectors.ext.hana.ondemand.com/home/element-builder-setup-configuration-and-parameters
- 4: https://github.com/cartridge-gg/docs/blob/main/src/pages/controller/getting-started.mdx
- 5: https://help.akeneo.com/en_US/sfcc-setting-up-the-connector/sfcc-b2c-how-to-download-and-install-the-connector
- 6: https://docs.constructor.com/docs/integrating-with-constructor-platform-connectors-salesforce-cartridge-sfra-catalog-integration
- 7: https://docs.cartridge.gg/controller/getting-started
- 8: https://forums.atariage.com/topic/347610-6mb-cartridge-diy-options/page/3/
- 9: https://docs.constructor.com/docs/integrating-with-constructor-platform-connectors
- 10: https://github.com/cartridge-gg/docs/blob/main/src/pages/controller/inventory.md
Ensure ControllerConnector Is Instantiated with Required Configuration
The ControllerConnector constructor from @cartridge/connector requires at least an rpc URL (and, for advanced use, an optional policies object). Instantiating it with no arguments will cause runtime failures. In addition, switching from useInjectedConnectors() to a hard-coded injected({ id: "injected" }) may alter how existing wallet sessions are detected and re-connected.
Please update and verify the following in src/providers/wallet-provider.tsx (lines 16–22):
• Instantiate ControllerConnector with a configuration object:
- new ControllerConnector(),
+ new ControllerConnector({
+ rpc: "https://api.cartridge.gg/x/starknet/sepolia",
+ // optional: policies for session delegation
+ // policies: { contracts: { "<contract-address>": { methods: […] } } }
+ }),• Ensure this instantiation occurs outside React render logic to avoid re-creation on every render.
• Test that the static injected({ id: "injected" }) connector replicates the behavior of the former dynamic detection—especially re-attaching to already-connected wallets.
📝 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.
| // All supported connectors (excluding 'ready', which is not exported) | |
| const connectors = [ | |
| argent(), | |
| braavos(), | |
| injected({ id: "injected" }), | |
| new ControllerConnector(), // Cartridge wallet | |
| ]; | |
| // All supported connectors (excluding 'ready', which is not exported) | |
| const connectors = [ | |
| argent(), | |
| braavos(), | |
| injected({ id: "injected" }), | |
| new ControllerConnector({ | |
| rpc: "https://api.cartridge.gg/x/starknet/sepolia", | |
| // optional: policies for session delegation | |
| // policies: { contracts: { "<contract-address>": { methods: […] } } } | |
| }), | |
| ]; |
🤖 Prompt for AI Agents
In src/providers/wallet-provider.tsx around lines 16 to 22, the
ControllerConnector must be instantiated with a configuration object including
at least an rpc URL to prevent runtime errors. Move this instantiation outside
the React render function to avoid recreating it on every render. Also, verify
that replacing useInjectedConnectors() with a static injected({ id: "injected"
}) connector maintains the previous behavior of detecting and reconnecting
existing wallet sessions, adjusting the implementation if necessary to preserve
this functionality.
|
Hi @davedumto How is it going on your end? Any challenges or assistance needed? |
|
Hi there, there are no issues in waiting for it to be merged |
|
Please resolve the conflict so your PR can be merged. |
…o feat/add-cartridge-and-all-wallets
|
hi @Utilitycoder I have fixed the merge conflicts |
|
hey @Utilitycoder please what is the hold up? |
3 participants
🚀 Enhance Wallet Support: Add Cartridge & All Starknet Wallets
Overview
This PR adds support for the Cartridge wallet and ensures that all major wallets supported by Starknet React are available in the wallet connection UI. This enhancement provides users with more choices and better accessibility when interacting with the platform.
What’s Changed
Integrated the
ControllerConnectorfrom@cartridge/connector/controllerinto the wallet provider, enabling users to connect with the Cartridge wallet.The wallet connection interface now includes Argent, Braavos, Injected (browser wallets), and Cartridge, removing previous limitations on wallet options.
Existing wallet connections (Argent, Braavos, Injected) remain fully functional.
The implementation follows the same style and best practices as the existing wallet connectors.
Existing error handling for connection and transaction failures applies to all connectors, including Cartridge.
How This Satisfies the Issue Requirements
Testing
Successfully tested connection
Unable to test due to “access denied” on the Cartridge website and issues running the local keychain. The integration follows official documentation and should work as soon as Cartridge is accessible.
Notes / Blockers
Loom Video of the argent wallet connection
https://www.loom.com/share/9ad38e4b2c1e4707ac79a8a541ccf0f9?sid=61da6982-e480-4848-82b1-8ead0933725f
Thank you for reviewing!
Let me know if you have any questions or need further changes.
Summary by CodeRabbit
New Features
Refactor
Chores