Update doc deps

docs/docs/configuration.md

@@ -0,0 +1,21 @@
+# Configuration
+
+Controller provides several configuration options related to chains, sessions, and theming.
+
+## ControllerOptions
+
+```typescript
+export type ControllerOptions = {
+    policies?: Policy[];
+    rpc?: string;
+    propagateSessionErrors?: boolean;
+    theme?: string;
+    colorMode?: ColorMode;
+};
+```
+
+-   **policies** (`Policy[]`): An array of policies defining permissions for session keys.
+-   **rpc** (`string`): The URL of the RPC for Slot deployments.
+-   **theme** (`string`): The theme name for the wallet interface. See the [Theming](./theming.md) section for details on how to add and configure custom themes.
+-   **propagateSessionErrors** (`boolean`): Whether to propagate transaction errors back to the caller.
+-   **colorMode** (`"light"` \| `"dark"`): The color mode of the interface.

docs/docs/examples/rust.md

@@ -1,10 +1,7 @@
-* * *
-
-title: Using Controller in Rust
-
-## sidebar_position: 2
-
-## Using Controller in Rust
+---
+title: Rust
+sidebar_position: 2
+---
 
 ### Installation
 
@@ -40,8 +37,9 @@ Initialize the controller with necessary parameters:
 async fn main() {
     // Create a signer (replace with your own private key)
     let owner = Signer::Starknet(SigningKey::from_secret_scalar(FieldElement::from_hex_be("0xYourPrivateKey").unwrap()));
+
     // Initialize the provider (replace with your RPC URL)
-    let provider = Provider::try_from("https://api.cartridge.gg/x/starknet/sepolia").unwrap();
+    let provider = Provider::try_from("http://localhost:5050").unwrap();
     let chain_id = provider.chain_id().await.unwrap();
 
     // Create a new Controller instance
@@ -50,7 +48,7 @@ async fn main() {
         "your_app_id".to_string(),
         username.clone(),
         FieldElement::from_hex_be("0xYourClassHash").unwrap(), // Class hash
-        "https://api.cartridge.gg/x/starknet/sepolia".parse().unwrap(), // RPC URL
+        "http://localhost:5050".parse().unwrap(), // RPC URL
         owner.clone(),
         FieldElement::from_hex_be("0xYourControllerAddress").unwrap(), // Controller address
         chain_id,

docs/docs/examples/starknet-react.md

@@ -1,29 +1,162 @@
 ---
-title: Using starknet-react
+title: starknet-react
 sidebar_position: 1
 ---
 
+### Installation
+
+Install the necessary packages:
 
 ```sh
+# Using npm
+npm install @cartridge/connector @cartridge/controller @starknet-react/core starknet
+
+# Using yarn
 yarn add @cartridge/connector @cartridge/controller @starknet-react/core starknet
+
+# Using pnpm
+pnpm add @cartridge/connector @cartridge/controller @starknet-react/core starknet
+```
+
+### Setting Up the Connector
+
+Import the `ControllerConnector` and create an instance:
+
+```typescript
+import ControllerConnector from "@cartridge/connector";
+
+const connector = new ControllerConnector();
 ```
 
-```ts
+### Configuring the Connector
+
+You can customize the `ControllerConnector` by providing configuration options during instantiation. The `ControllerConnector` accepts an options object of type `ControllerOptions` that allows you to configure various settings such as policies, RPC URLs, theme, and more.
+
+Here's an example:
+
+```typescript
 import ControllerConnector from "@cartridge/connector";
-const connector = new CartridgeConnector()
+import { Policy } from "@cartridge/controller";
+
+// Define policies for sessions
+const policies: Policy[] = [
+  {
+    selector: {
+      target: "0xYourContractAddress",
+      function: "incrementCounter",
+    },
+    description: "Allows incrementing the counter",
+  },
+];
+
+// Create the connector with configuration options
+const connector = new ControllerConnector({
+  rpc: "https://your-custom-rpc-url",
+  policies: policies,
+  starterPackId: "your-starter-pack-id",
+  theme: "default",
+  colorMode: "dark",
+  propagateSessionErrors: true,
+});
+```
+
+#### Customizing the Wallet Interface
+
+You can customize the appearance of the wallet interface by specifying `theme` and `colorMode`.
+
+Example:
+
+```typescript
+const connector = new ControllerConnector({
+  theme: "my-custom-theme",
+  colorMode: "light",
+});
+```
 
-...
-<StarknetProvider autoConnect connectors={[connector]}>
-    ...
-</StarknetProvider>
-...
+### Integrating with `StarknetProvider`
+
+Wrap your application with the `StarknetProvider` and pass the connector:
+
+```typescript
+import { StarknetProvider } from "@starknet-react/core";
+
+function App() {
+  return (
+    <StarknetProvider autoConnect connectors={[connector]}>
+      {/* Your components */}
+    </StarknetProvider>
+  );
+}
+```
+
+### Connecting a Wallet
+
+Use the `useConnect` and `useAccount` hooks to manage wallet connections:
+
+```typescript
+import { useConnect, useAccount } from "@starknet-react/core";
+
+function ConnectWallet() {
+  const { connect, connectors } = useConnect();
+  const { address } = useAccount();
+  const controllerConnector = connectors[0];
+
+  return (
+    <div>
+      {address ? (
+        <p>Connected: {address}</p>
+      ) : (
+        <button onClick={() => connect({ connector: controllerConnector })}>
+          Connect Wallet
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+### Performing Transactions
+
+Execute transactions using the `account` object:
+
+```typescript
+import { useAccount } from "@starknet-react/core";
+
+function IncrementCounter() {
+  const { account } = useAccount();
+
+  const onIncrement = async () => {
+    await account.execute([
+      {
+        contractAddress: "0xYourContractAddress",
+        entrypoint: "incrementCounter",
+        calldata: ["0x1"],
+      },
+    ]);
+  };
+
+  return <button onClick={onIncrement}>Increment Counter</button>;
+}
 ```
 
-## Session creation
+### Accessing Account Details
+
+Retrieve the connected account's address and username:
+
+```typescript
+import { useAccount } from "@starknet-react/core";
+
+function AccountInfo() {
+  const { account, address } = useAccount();
+
+  // Assuming the account object has a method to get the username
+  const username = account ? account.username : null;
 
-```ts
-const connector = new CartridgeConnector([{
-    target: "0xdead",
-    method: "have_turn",
-}])
+  return (
+    <div>
+      <p>Account Address: {address}</p>
+      {username && <p>Username: {username}</p>}
+    </div>
+  );
+}
 ```

docs/docs/getting-started.md

@@ -1,11 +1,8 @@
 ---
 title: Getting Started
 sidebar_position: 0
-slug: /getting-started
 ---
 
-Cartridge Controller is a gaming specific smart contract wallet plugin that enables seamless player onboarding and game interactions while maintaining compatibility with other wallets that implement the plugin account architecture (e.g. Argent).
-
 Controller implements a standard account interface and can be integrated the same way as existing wallets.
 
 ```sh
@@ -21,20 +18,12 @@ const account = controller.connect();
 account.execute({ ... });
 ```
 
-## Preapproving interactions
+## Examples
 
-Catridge Controller supports requesting preapproval for a set of `policies`. When a policy is preapproved, games can perform the interaction seamlessly without requesting approval from the player each time. Policys are requested during connection. Executing transactions follows the same pattern and controller will take care of requesting player approval only when necessary.
+For more detailed examples of how to use Cartridge Controller in different environments, please check out our examples:
 
-```ts
-// Using the controller directly.
-const controller = new Controller([{
-    target: "0xdead",
-    method: "have_turn",
-}]);
-
-// Using starknet-react connector
-const connector = new CartridgeConnector([{
-    target: "0xdead",
-    method: "have_turn",
-}])
-```
+1.  [Using starknet-react](./examples/starknet-react.md): Learn how to integrate Cartridge Controller with the popular `starknet-react` library for React applications.
+
+2.  [Using Rust](./examples/rust.md): Explore how to use Cartridge Controller in a Rust environment, including setup and basic operations.
+
+These examples provide step-by-step guidance on setting up the controller, configuring it, and performing common operations in different programming environments. They should help you get started quickly with integrating Cartridge Controller into your project.

docs/docs/overview.md

@@ -0,0 +1,32 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+![Cartridge Controller Overview](./img/controller.png)
+
+Cartridge Controller is a gaming-specific smart contract wallet designed to provide seamless player onboarding and game interactions while maintaining compatibility with other wallets that implement the plugin account architecture.
+
+## Key Features
+
+### Simple & Secure
+
+-   Utilizes Passkeys and Starter Packs for effortless player onboarding
+-   Provides self-custodial embedded wallets tailored for your game
+
+### Designed for Fun
+
+-   Implements session keys, allowing players to focus on gameplay
+-   Securely authorizes games to submit transactions on behalf of users
+-   Leverages the Cartridge Paymaster to cover execution costs
+
+### Customizable
+
+-   Adapts to your game's needs
+-   Customize look and feel through themes
+-   Dynamically render assets, quests, and player activity
+
+### Identity and Reputation
+
+-   Offers a portable identity for players across games
+-   Enables quest completion, achievement earning, and reputation accrual

docs/docs/sessions.md

@@ -0,0 +1,34 @@
+# Sessions and Policies
+
+Catridge Controller supports requesting preapproval for a set of `policies`. When a policy is preapproved, games can perform the interaction seamlessly without requesting approval from the player each time. Policys are requested during connection. Executing transactions follows the same pattern and controller will take care of requesting player approval only when necessary.
+
+#### Defining Policies
+
+Policies allow your application to define permissions that can be pre-approved by the user. This enables seamless interaction without requiring user approval for each transaction that matches a policy.
+
+```typescript
+const policies: Policy[] = [
+  {
+    selector: {
+      target: "0xYourContractAddress",
+      method: "incrementCounter",
+    },
+    description: "Allows incrementing the counter",
+  },
+  {
+    selector: {
+      target: "0xAnotherContractAddress",
+      method: "transferTokens",
+    },
+    description: "Allows transferring tokens",
+  },
+];
+```
+
+```ts
+// Using the controller directly.
+const controller = new Controller(policies);
+
+// Using starknet-react connector
+const connector = new CartridgeConnector(policies)
+```

docs/docs/theming.md

@@ -0,0 +1,22 @@
+# Theming
+
+This guide provides a comprehensive overview of how to create and apply custom themes to the controller.
+
+## Creating a Theme
+
+To create a theme, teams should commit the theme to [`packages/keychain/public/whitelabel`](https://github.com/cartridge-gg/controller/tree/main/packages/keychain/public/whitelabel) with the icon and banner included. The theme should conform to the `ControllerTheme` type:
+
+```ts
+type ControllerTheme = {
+    id: string;
+    name: string;
+    icon: string;
+    cover: string;
+    colors: {
+        primary?: string;
+        primaryForeground?: string;
+    };
+};
+```
+
+See an example here: <https://github.com/cartridge-gg/controller/pull/421/files>

docs/docusaurus.config.js

@@ -1,7 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -85,8 +84,8 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Cartridge Gaming Company.`,
       },
       prism: {
-        theme: darkCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: prismThemes.dracula,
+        additionalLanguages: ["rust"],
       },
       colorMode: {
         defaultMode: "dark",