Update Controller

README.md

@@ -189,6 +189,84 @@ You have to paste the endpoint and body in the API platform and click on the `Se
 ![rpc-version](./packages/nextjs/public/rpc-version.png)
 </details>
 
+## Test Controller Connector with Ngrok
+
+To ensure the proper functioning of the Cartridge Controller, make sure you're using `@cartridge/connector` version `0.5.5`.
+
+Ngrok is a tool that is a tool that allows you expose a local server to the internet securely. Since the Controller connector requires HTTPS for testing, Ngrok simplifies the process by providing a secure URL for your app.
+
+### 1. Install Ngrok
+
+**For macOS**:
+
+Install Ngrok using Homebrew:
+
+```sh
+brew install ngrok
+```
+
+**For Windows**:
+
+Install Ngrok using Chocolatey:
+
+```sh
+choco install ngrok
+```
+
+**For Linux**:
+
+Install Ngrok using Apt:
+
+```sh
+curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
+	| sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
+	&& echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
+	| sudo tee /etc/apt/sources.list.d/ngrok.list \
+	&& sudo apt update \
+	&& sudo apt install ngrok
+```
+
+Or Download from Ngrok's Website:
+
+Visit the [Ngrok download page](https://download.ngrok.com) to download the agent for your platform.
+
+Alternatively, refer to the [Setup & Installation page in your Ngrok dashboard](https://dashboard.ngrok.com/get-started/setup) for platform-specific instructions.
+
+### 2. Connect Your Account
+
+To use Ngrok, you need an Ngrok account. If you don’t have one, [sign up for free](https://dashboard.ngrok.com/signup).
+
+- Retrieve your [Ngrok authtoken](https://dashboard.ngrok.com/get-started/your-authtoken) from the dashboard.
+
+- Run the following command to connect your Ngrok agent to your account:
+
+```sh
+ngrok config add-authtoken <TOKEN>
+```
+
+Replace `<TOKEN>` with the authtoken you copied.
+
+### 3. Start Ngrok and Put Your App Online
+
+- Start ngrok by running:
+
+```sh
+ngrok http http://localhost:8080
+```
+
+Replace `http://localhost:8080` with the URL and port where your application is running. For
+
+example:
+
+- If your app listens on port `3000`, use `http://localhost:3000`.
+
+### 4. Access Your App Online
+
+Once Ngrok is running, you’ll see details in your terminal, including a Forwarding URL.
+
+- Open the forwarding URL in your browser to view your app.
+- Ngrok provides a valid HTTPS certificate automatically, so your app is secure and ready for testing.
+
 ## **What's next**
 
 - Edit your smart contract `YourContract.cairo` in `packages/snfoundry/contracts/src`
@@ -231,4 +309,4 @@ remotePatterns: [
 
 We welcome contributions to Scaffold-Stark!
 
-Please see [CONTRIBUTING.MD](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-Stark.
+Please see [CONTRIBUTING.MD](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-Stark.

packages/nextjs/package.json

@@ -16,6 +16,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@cartridge/connector": "^0.5.7",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/themes": "2.0.3",

packages/nextjs/scaffold.config.ts

@@ -11,7 +11,7 @@ export type ScaffoldConfig = {
 };
 
 const scaffoldConfig = {
-  targetNetworks: [chains.devnet],
+  targetNetworks: [chains.sepolia],
   // Only show the Burner Wallet when running on devnet
   onlyLocalBurnerWallet: false,
   rpcProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL || "",

packages/nextjs/services/web3/connectors.tsx

@@ -3,6 +3,7 @@ import { getTargetNetworks } from "~~/utils/scaffold-stark";
 import { BurnerConnector } from "@scaffold-stark/stark-burner";
 import scaffoldConfig from "~~/scaffold.config";
 import { LAST_CONNECTED_TIME_LOCALSTORAGE_KEY } from "~~/utils/Constants";
+import { controllerInstance } from "~~/utils/scaffold-stark/controller";
 
 const targetNetworks = getTargetNetworks();
 
@@ -32,6 +33,12 @@ function getConnectors() {
     connectors.push(burnerConnector as unknown as InjectedConnector);
   }
 
+  if (
+    !targetNetworks.some((network) => (network.network as string) === "devnet")
+  ) {
+    connectors.push(controllerInstance);
+  }
+
   return connectors.sort(() => Math.random() - 0.5).map(withDisconnectWrapper);
 }
 

packages/nextjs/utils/scaffold-stark/controller.ts

@@ -0,0 +1,29 @@
+"use client";
+import ControllerConnector from "@cartridge/connector/controller";
+import { Chain, mainnet, sepolia } from "@starknet-react/chains";
+import { InjectedConnector } from "@starknet-react/core";
+import { constants } from "starknet";
+
+function controllerProvider(chain: Chain) {
+  switch (chain) {
+    case mainnet:
+      return { nodeUrl: "https://api.cartridge.gg/x/starknet/mainnet" };
+    case sepolia:
+      return { nodeUrl: "https://api.cartridge.gg/x/starknet/sepolia" };
+    default:
+      return { nodeUrl: "https://api.cartridge.gg/x/starknet/sepolia" };
+  }
+}
+
+export const controllerInstance = new ControllerConnector({
+  // Usamos los IDs de cadena oficiales de Starknet
+  defaultChainId: constants.StarknetChainId.SN_SEPOLIA, // o .SN_MAIN para mainnet
+  chains: [
+    {
+      rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia",
+    },
+    {
+      rpcUrl: "https://api.cartridge.gg/x/starknet/mainnet",
+    },
+  ],
+}) as never as InjectedConnector;