Add Cartridge controller (#524)

change/@starknet-react-chains-6cff9d60-4b51-4d9f-9970-5ab722cec095.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add details about controller, add new providers for cartridge and slot, improve docs around controller",
+  "packageName": "@starknet-react/chains",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@starknet-react-core-a5326e27-2902-41a3-9439-03dedb8486d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add details about controller, add new providers for cartridge and slot, improve docs around controller",
+  "packageName": "@starknet-react/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@starknet-react-kakarot-84d8c637-c0fb-4193-a873-621b68fe05c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "none",
+  "packageName": "@starknet-react/kakarot",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@starknet-react-typescript-config-f85b58bf-fa13-449e-9a3d-2dc3ceea15e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "none",
+  "packageName": "@starknet-react/typescript-config",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/create-starknet-734b3cbb-795d-4b2a-904a-e0f9cc731e2f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "none",
+  "packageName": "create-starknet",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

docs/package.json

@@ -12,6 +12,7 @@
     "format": "biome format components --write"
   },
   "dependencies": {
+    "@cartridge/connector": "^0.5.0-alpha.2",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",

docs/pages/docs/getting-started.mdx

@@ -124,9 +124,62 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
+
 ### Using hooks
 
 You can now use the Starknet React hooks from any component wrapped by the root
 provider!
 
-::::
+### Using the Cartridge Controller
+
+The Cartridge Controller wallet is supported however, you need to install the
+`@cartridge/connector` package.
+
+:::code-group
+
+```bash [npm]
+npm i @cartridge/connector
+```
+
+```bash [pnpm]
+pnpm i @cartridge/connector
+```
+
+:::
+
+```tsx twoslash
+"use client";
+import React, { useCallback } from "react";
+
+import { sepolia, mainnet } from "@starknet-react/chains";
+import {
+  StarknetConfig,
+  publicProvider,
+  argent,
+  braavos,
+  useInjectedConnectors,
+  voyager,
+  Connector,
+  jsonRpcProvider,
+  cartridgeProvider
+} from "@starknet-react/core";
+
+import { ControllerConnector } from "@cartridge/connector";
+
+const cartridgeConnector = new ControllerConnector({
+  rpc: cartridgeProvider().nodeUrl,
+});
+
+export function StarknetProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <StarknetConfig
+      chains={[mainnet, sepolia]}
+      provider={cartridgeProvider()}
+      connectors={[cartridgeConnector as never as Connector]}
+      explorer={voyager}
+    >
+      {children}
+    </StarknetConfig>
+  );
+}
+```

docs/pages/docs/providers.mdx

@@ -107,3 +107,24 @@ import { reddioProvider } from "@starknet-react/core";
 const apiKey = "your-api-key";
 const provider = reddioProvider({ apiKey });
 ```
+
+### Cartridge
+
+Cartridge offers a Starknet RPC provider.
+
+```ts twoslash
+import { cartridgeProvider } from "@starknet-react/core";
+
+const provider = cartridgeProvider();
+```
+
+### Slot
+
+Create a Slot project from the [CLI](https://github.com/cartridge-gg/slot).
+
+```ts twoslash
+import { slotProvider } from "@starknet-react/core";
+
+const projectId = "your-project-id";
+const provider = slotProvider({ projectId });
+```

docs/pages/docs/wallets.mdx

@@ -60,3 +60,55 @@ const connectors = [
   braavos()
 ];
 ```
+
+### Cartridge Controller
+
+The Cartridge Controller wallet is supported however, you need to install the
+`@cartridge/connector` package. 
+
+The Controller enables seamless use of Session Keys.
+
+```bash
+pnpm i @cartridge/connector
+```
+
+```tsx twoslash
+import React, { useCallback } from "react";
+import { ControllerConnector } from "@cartridge/connector";
+import { Connector } from "@starknet-react/core";
+
+const rpc = useCallback(() => {
+  return { nodeUrl: 'https://api.cartridge.gg/x/starknet/mainnet' };
+}, []);
+
+// Without Session Keys
+const connectors = [
+  new ControllerConnector({
+    rpc: rpc().nodeUrl,
+  }) as never as Connector,
+];
+```
+
+
+```tsx twoslash
+import React, { useCallback } from "react";
+import { ControllerConnector } from "@cartridge/connector";
+import { Connector } from "@starknet-react/core";
+
+const rpc = useCallback(() => {
+  return { nodeUrl: 'https://api.cartridge.gg/x/starknet/mainnet' };
+}, []);
+
+// With Session Keys // [!code focus]
+const connectors = [// [!code focus]
+  new ControllerConnector({// [!code focus] 
+    rpc: rpc().nodeUrl, // [!code focus]
+    policies:[ // [!code focus]
+      { // [!code focus]
+        target: "0x3f96056436be253753351fe689110ced7d53f5db3fd98f13df3f19058311b95", // [!code focus]
+        method: "create", // [!code focus]
+      }, // [!code focus]
+    ], // [!code focus] 
+  }) as never as Connector,// [!code focus]
+];// [!code focus]
+```

packages/chains/src/index.ts

@@ -2,3 +2,4 @@ export type { Address, Chain, NativeCurrency, RpcUrls } from "./types";
 
 export { devnet } from "./devnet";
 export { mainnet, sepolia } from "./starknet";
+export { getSlotChain } from "./slot";

packages/chains/src/slot.ts

@@ -0,0 +1,25 @@
+import type { Chain } from "./types";
+
+export function getSlotChain(projectId: string) {
+  return {
+    id: BigInt(projectId),
+    network: `slot-${projectId}`,
+    name: `${projectId}`,
+    nativeCurrency: {
+      address:
+        "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    testnet: true,
+    rpcUrls: {
+      default: {
+        http: [],
+      },
+      public: {
+        http: [`https://api.cartridge.gg/x/${projectId}/katana`],
+      },
+    },
+  } as const satisfies Chain;
+}

packages/chains/src/starknet.ts

@@ -39,6 +39,9 @@ export const mainnet = {
     reddio: {
       http: ["https://starknet-mainnet.reddio.com"],
     },
+    cartridge: {
+      http: ["https://api.cartridge.gg/x/starknet/mainnet"],
+    },
     default: {
       http: [],
     },
@@ -83,6 +86,9 @@ export const sepolia = {
     reddio: {
       http: ["https://starknet-sepolia.reddio.com"],
     },
+    cartridge: {
+      http: ["https://api.cartridge.gg/x/starknet/sepolia"],
+    },
     default: {
       http: [],
     },

packages/core/src/providers/cartridge.ts

@@ -0,0 +1,12 @@
+import { jsonRpcProvider } from "./jsonrpc";
+
+/** Configure the Cartridge provider. */
+export function cartridgeProvider() {
+  return jsonRpcProvider({
+    rpc: (chain) => {
+      const nodeUrl = chain.rpcUrls["cartridge"]?.http[0];
+      if (!nodeUrl) return null;
+      return { nodeUrl };
+    },
+  });
+}

packages/core/src/providers/slot.ts

@@ -0,0 +1,19 @@
+import { getSlotChain } from "@starknet-react/chains";
+import { jsonRpcProvider } from "./jsonrpc";
+
+/** Arguments for `slotProvider`. */
+export type SlotProviderArgs = {
+  /** The name of your slot instance. */
+  projectId: string;
+};
+
+/** Configure the Slot provider using the provided Project ID. */
+export function slotProvider({ projectId }: SlotProviderArgs) {
+  return jsonRpcProvider({
+    rpc: () => {
+      const chain = getSlotChain(projectId);
+      const nodeUrl = chain.rpcUrls.public.http[0];
+      return { nodeUrl };
+    },
+  });
+}