skills.rest
shariqazeem
shariqazeemCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

controller-react

Integrate Cartridge Controller into React apps for popup-free Starknet authentication.

1|Updated Mar 7, 2026
Search Tags:#react#wallet-connection#cartridge#starknet#starknet-react#session-key#controller-connector
One-click install
npx skills add https://github.com/shariqazeem/Prophecy-Roguelite --skill controller-react-shariqazeem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: controller-react
Source: https://github.com/shariqazeem/Prophecy-Roguelite/tree/main/.agents/skills/controller-react
Command: npx skills add https://github.com/shariqazeem/Prophecy-Roguelite --skill controller-react-shariqazeem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Integrating Cartridge Controller into React applications removes wallet popup friction and streamlines Starknet authentication and transaction signing by providing session-key based connectors, configurable session policies, and provider integration for instant, in-app transactions.

Core Features & Use Cases

  • Provider & Connector Setup: Create a ControllerConnector outside React components, define SessionPolicies, and configure a jsonRpcProvider with chains (including local Katana) for seamless provider routing.
  • Wallet UI & Hooks: Use starknet-react hooks like useConnect, useAccount, and useDisconnect to build ConnectWallet components that surface address, username, and dynamic auth flows for external providers.
  • Transaction Execution & Observability: Execute multi-call transactions via account.execute, surface transaction links via an explorer, and use external wallet helpers to wait for confirmations or switch chains.
  • Developer Experience: Support HTTPS local development with mkcert in Vite, and run hybrid dev modes that mix local keychain with production APIs for testing.
  • Use Case: Ideal for Web3 React/Next.js dApps and games that require popup-free session keys, fast in-app transactions, and flexible auth options (metamask, phantom, walletconnect, etc.).

Quick Start

Create a ControllerConnector with session policies, register it in StarknetConfig with a jsonRpcProvider and Katana chain, and implement a ConnectWallet component that uses connect and account.execute to submit transactions.

Frequently Asked Questions about controller-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable popup-free wallet authentication in my React Starknet dApp?▼

Popup-free Starknet authentication in React is achieved by integrating Cartridge Controller session keys. You create a ControllerConnector outside your components, define session policies, and configure a jsonRpcProvider to enable instant in-app transaction signing without recurring wallet popups.

Can I use starknet-react hooks to manage external wallet connections alongside Cartridge Controller?▼

Yes, starknet-react hooks like useConnect, useAccount, and useDisconnect manage external wallet connections alongside Cartridge Controller. You can build ConnectWallet components that surface address, username, and dynamic auth flows for external providers like metamask, phantom, and walletconnect.

How do I configure a local Katana chain for Starknet React development?▼

To configure a local Katana chain for Starknet React development, you define the chain within your jsonRpcProvider setup. You can run hybrid dev modes mixing local keychain with production APIs, and support HTTPS local development using mkcert in Vite.

What is the best way to execute multi-call transactions in a Starknet React application?▼

The best way to execute multi-call transactions in a Starknet React application is using account.execute via starknet-react hooks. You can surface transaction links via an explorer and use external wallet helpers to wait for confirmations or switch chains.

Does Cartridge Controller work with Next.js projects for Starknet session keys?▼

Yes, Cartridge Controller works with both React and Next.js projects using starknet-react. It provides session-key based connectors and configurable session policies to streamline Starknet authentication and transaction signing for Web3 dApps and games.

Why do I need to create a ControllerConnector outside my React components?▼

Creating a ControllerConnector outside React components ensures stable session-key based connector instantiation across re-renders. This pattern prevents state loss and maintains seamless provider routing when configuring jsonRpcProvider chains and session policies in your dApp.

Related Skills

Explore More Software Engineering Skills→
caseymanoscaseymanos

local-ssl

Automates creation and trust of local SSL certificates for development environments.

Community
Advanced
vikrant-projectvikrant-project
2

evm

Query EVM-compatible blockchain data for wallets, tokens, transactions, and gas prices.

Community
Advanced
cyoteecyotee

wagmi-react-connect

Connect crypto wallets in React using wagmi hooks for session management.

Community
Intermediate
shariqazeemshariqazeem
1

controller-native

Integrate Cartridge Controller session authentication and local transaction signing into native mobile apps.

Community
Advanced