Controller React

What it does

This skill, controller-react, enables AI agents to integrate Cartridge Controller functionality with React applications using the starknet-react library. It allows for dynamic adjustment of frontend UI elements based on real-time data streams and user interactions by defining session policies that govern contract method calls within a StarkNet environment. The integration requires setting up a connector outside of React components to manage these policies.

When to use it

• Building interactive dashboards where UI elements change based on token approval status.
• Creating applications requiring dynamic authorization flows managed through smart contracts.
• Developing frontend interfaces that interact with StarkNet contracts and require controlled method execution.
• Integrating Cartridge Controller's session policies for secure and controlled interactions within a React application.

Key capabilities

• Integration of Cartridge Controller with starknet-react.
• Definition of SessionPolicies to control contract methods (e.g., approve, transfer).
• Setup of a ControllerConnector outside of React components for managing policies.
• Support for local development using the Katana test network.

Example prompts

• "Integrate Cartridge Controller with my React app to allow users to approve token spending."
• "Set up session policies in my React application to control access to specific StarkNet contract methods."
• "Connect my frontend to the Katana testnet and use Cartridge Controller for managing user interactions."

Tips & gotchas

• Connector Placement: The ControllerConnector must be created outside of any React components.
• Katana Configuration: For local development using Katana, ensure your katana.toml file is configured with paymaster = true.
• Dependencies: Requires installation of @cartridge/connector, @cartridge/controller, @starknet-react/core, @starknet-react/chains, and vite-plugin-mkcert.