From bc963c9caf9829aa0d36a12a3444c4ebe7411748 Mon Sep 17 00:00:00 2001 From: jimenezz22 Date: Wed, 25 Jun 2025 16:24:09 -0600 Subject: [PATCH 1/2] [FEAT] Add routes for react docs --- .../react/bindings/contracts-bindings.md | 3 + .../react/bindings/models-bindings.md | 3 + .../react/controller-connector.md | 3 + .../pages/integrations/react/dojo-config.md | 3 + client/pages/integrations/react/main.md | 3 + client/pages/integrations/react/manifest.md | 3 + .../{react.md => react/overview.md} | 0 .../integrations/react/starknet-provider.md | 3 + client/routes.ts | 101 +++++++++++++----- 9 files changed, 96 insertions(+), 26 deletions(-) create mode 100644 client/pages/integrations/react/bindings/contracts-bindings.md create mode 100644 client/pages/integrations/react/bindings/models-bindings.md create mode 100644 client/pages/integrations/react/controller-connector.md create mode 100644 client/pages/integrations/react/dojo-config.md create mode 100644 client/pages/integrations/react/main.md create mode 100644 client/pages/integrations/react/manifest.md rename client/pages/integrations/{react.md => react/overview.md} (100%) create mode 100644 client/pages/integrations/react/starknet-provider.md diff --git a/client/pages/integrations/react/bindings/contracts-bindings.md b/client/pages/integrations/react/bindings/contracts-bindings.md new file mode 100644 index 0000000..97768b7 --- /dev/null +++ b/client/pages/integrations/react/bindings/contracts-bindings.md @@ -0,0 +1,3 @@ +# React Integration - Contracts Bindings + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react/bindings/models-bindings.md b/client/pages/integrations/react/bindings/models-bindings.md new file mode 100644 index 0000000..18105aa --- /dev/null +++ b/client/pages/integrations/react/bindings/models-bindings.md @@ -0,0 +1,3 @@ +# React Integration - Models Bindings + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react/controller-connector.md b/client/pages/integrations/react/controller-connector.md new file mode 100644 index 0000000..bbeb73d --- /dev/null +++ b/client/pages/integrations/react/controller-connector.md @@ -0,0 +1,3 @@ +# React Integration - Controller Connector + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react/dojo-config.md b/client/pages/integrations/react/dojo-config.md new file mode 100644 index 0000000..4a33d51 --- /dev/null +++ b/client/pages/integrations/react/dojo-config.md @@ -0,0 +1,3 @@ +# React Integration - Dojo Config + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react/main.md b/client/pages/integrations/react/main.md new file mode 100644 index 0000000..bcd851e --- /dev/null +++ b/client/pages/integrations/react/main.md @@ -0,0 +1,3 @@ +# React Integration - Main + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react/manifest.md b/client/pages/integrations/react/manifest.md new file mode 100644 index 0000000..63e3c2e --- /dev/null +++ b/client/pages/integrations/react/manifest.md @@ -0,0 +1,3 @@ +# React Integration - Manifest + +Under development... \ No newline at end of file diff --git a/client/pages/integrations/react.md b/client/pages/integrations/react/overview.md similarity index 100% rename from client/pages/integrations/react.md rename to client/pages/integrations/react/overview.md diff --git a/client/pages/integrations/react/starknet-provider.md b/client/pages/integrations/react/starknet-provider.md new file mode 100644 index 0000000..85b2a0c --- /dev/null +++ b/client/pages/integrations/react/starknet-provider.md @@ -0,0 +1,3 @@ +# React Integration - Starknet Provider + +Under development... \ No newline at end of file diff --git a/client/routes.ts b/client/routes.ts index 4f74af8..6ae4ae6 100644 --- a/client/routes.ts +++ b/client/routes.ts @@ -130,32 +130,81 @@ const config: Sidebar = [ ], }, { - text: "Dojo Integrations", - collapsed: true, - items: [ - { - text: "React", - link: "/integrations/react", - }, - { - text: "Unity", - link: "/integrations/unity", - }, - { - text: "AI Agents", - items: [ - { - text: "Daydreams", - link: "/integrations/ai/daydreams", - }, - { - text: "Eliza", - link: "/integrations/ai/eliza", - }, - ], - }, - ], - }, + text: "Dojo Integrations", + collapsed: true, + items: [ + { + text: "React", + collapsed: true, + items: [ + { + text: "Overview", + link: "/integrations/react/overview", + }, + { + text: "Configuration", + items: [ + { + text: "Dojo Config", + link: "/integrations/react/dojo-config", + }, + { + text: "Manifest", + link: "/integrations/react/manifest", + }, + { + text: "Main Setup", + link: "/integrations/react/main", + }, + ], + }, + { + text: "Providers", + items: [ + { + text: "Starknet Provider", + link: "/integrations/react/starknet-provider", + }, + { + text: "Controller Connector", + link: "/integrations/react/controller-connector", + }, + ], + }, + { + text: "Data Bindings", + items: [ + { + text: "Contracts Bindings", + link: "/integrations/react/bindings/contracts-bindings", + }, + { + text: "Models Bindings", + link: "/integrations/react/bindings/models-bindings", + }, + ], + }, + ], + }, + { + text: "Unity", + link: "/integrations/unity", + }, + { + text: "AI Agents", + items: [ + { + text: "Daydreams", + link: "/integrations/ai/daydreams", + }, + { + text: "Eliza", + link: "/integrations/ai/eliza", + }, + ], + }, + ], +}, { text: "Dojo Use Cases", collapsed: true, From 8f80172153a66e63afc8313a8add3767f95c6189 Mon Sep 17 00:00:00 2001 From: jimenezz22 Date: Wed, 25 Jun 2025 22:46:01 -0600 Subject: [PATCH 2/2] [FEAT] Add React Integration Overview --- client/pages/integrations/react/overview.md | 59 ++++++++++++++++++++- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/client/pages/integrations/react/overview.md b/client/pages/integrations/react/overview.md index 4413d06..3aa8098 100644 --- a/client/pages/integrations/react/overview.md +++ b/client/pages/integrations/react/overview.md @@ -1,3 +1,58 @@ -# React Integration +# React Integration Overview -Under development... +Welcome to the React integration section of Dojo By Example! This comprehensive guide will walk you through building production-ready onchain games using React and the Dojo framework. + +## What You'll Learn + +This section covers everything needed to integrate Dojo with React applications, from initial setup to advanced patterns. You'll discover how to build seamless gaming experiences that feel like traditional web apps while leveraging the power of blockchain technology. + +### 🏗️ **Core Architecture** + +Learn how Dojo's architecture enables smooth React integration: + +- **Main Setup** - Bootstrap your React app with proper Dojo SDK initialization +- **Provider Configuration** - Set up the provider hierarchy for Starknet and Dojo connectivity +- **Configuration Management** - Handle multi-network deployments with environment-based switching + +### 🔌 **Auto-Generated Bindings** + +Discover how Dojo automatically creates TypeScript interfaces from your Cairo contracts: + +- **Models Bindings** - Type-safe interfaces for your game entities and data structures +- **Contracts Bindings** - Auto-generated client functions for seamless contract interactions + +### 🎮 **Gaming-First UX** + +Implement controller integration that prioritizes player experience: + +- **Controller Connector** - Cartridge Controller integration for frictionless gaming +- **Session Policies** - Enable uninterrupted gameplay without transaction popups +- **Manifest Management** - Handle deployment configurations across different networks + +## Key Benefits + +**⚡ Type Safety** - Full TypeScript integration from Cairo contracts to React components + +**🎯 Gaming UX** - Controller integration designed specifically for gaming applications + +**🔄 Auto-Generation** - Contract changes automatically update your frontend types + +**🌐 Multi-Network** - Seamless switching between localhost, testnet, and mainnet + +**🏗️ Production Ready** - Patterns and configurations tested in real gaming applications + +## Getting Started + +Each section builds upon the previous one, so we recommend following them in order: + +1. **Overview** (you are here) - Understanding the integration landscape +2. **Main Setup** - Application initialization and bootstrap process +3. **Configuration** - Core configuration files and environment management +4. **Providers** - Starknet and wallet connectivity setup +5. **Data Bindings** - Working with auto-generated types and contract functions + +By the end of this section, you'll have a complete understanding of how to build robust, type-safe React applications that integrate seamlessly with Dojo smart contracts, providing players with an exceptional gaming experience. + +--- + +*Ready to dive in? Let's start with [Main Setup](/integrations/react/main) to see how it all comes together!*