Manifold

Core Concept: A Developer Accelerator for Kadena EVM At its heart, Manifold is a developer accelerator and scaffolding tool hosted as a GitHub repository. Its primary purpose is to eliminate the significant initial friction and complexity developers face when starting a new multi-chain decentralized application (dApp) on Kadena's Chainweb EVM ecosystem. It is not just a collection of code snippets, but an automated system that generates a complete, functional, and customized starter application.

The Problem It Solves Building a dApp, especially a multi-chain one, involves a steep learning curve and substantial boilerplate setup. A developer needs to:

Establish a modern frontend framework (like React).

Configure build tools (like Vite).

Integrate a web3 library (like Ethers.js) and write connection logic for wallets.

Understand the specific network details for each chain (RPC URLs, Chain IDs).

Write, test, and debug foundational multi-chain functions (like cross-chain transfers or balance lookups).

Manifold is designed to automate these five steps, allowing developers to bypass the tedious setup and immediately begin working on their unique business logic.

How It Works: The Generation Process Manifold's core is a Node.js command-line script that runs an interactive setup wizard. This process ensures the generated code is not generic, but tailored to the developer's specific project needs.

Invocation: The developer runs a single command (e.g., npm run setup) within the cloned Manifold repository.

Interactive Configuration: The script then guides the developer through a series of questions:

Use Case Selection: The developer chooses a project type like DeFi, NFT Marketplace, Gaming, or a Cross-chain Bridge. This decision is crucial as it dictates which specialized, ready-made function templates will be included in the final build. For example, selecting "DeFi" will include functions like addLiquidityMultiChain and executeArbitrage.

Chain Selection: The developer specifies how many of Kadena's EVM chains (20 through 24) the application will interact with. The generator uses this to pre-configure the application's network manager and UI, ensuring seamless connectivity to the selected chains.

Function Selection: The developer can opt for a "recommended" set of functions based on their use case or manually select each function they require. This provides a fine-grained level of customization.

The Generated Application: What You Get Once the wizard is complete, Manifold generates a new, self-contained directory (gen_manifold) containing a complete, runnable application.

Technology Stack: It is a modern, production-ready stack featuring React, Vite for fast builds, Ethers.js for blockchain interaction, and Tailwind CSS for professional styling.

User Interface (UI): The generated dApp features a clean, Swagger-style UI. This interface is not just for show; it serves as an interactive testing and documentation environment. Each generated function is displayed with its description, required parameters, and an "Execute" button. This allows developers to test blockchain interactions directly from the browser without writing any extra code.

Custom-Built Core Logic: This is Manifold's key value proposition. The utils and hooks directories are populated with functional, non-trivial JavaScript modules:

useWallet.js: A complete React hook for managing wallet connections (connect, disconnect, switch chain) with MetaMask for the Kadena EVM networks.

networkManager.js: A robust class that handles RPC connections to all selected Kadena EVM chains, abstracting away the complexity of managing multiple providers.

realFunctions.js: A library of the actual multi-chain functions selected during setup (e.g., crossChainTransfer, getChainBalances). These are fully implemented to perform real transactions on the Kadena testnet.

In essence, Manifold transforms a developer's high-level requirements into a low-level, fully-coded, and functional application, effectively bridging the gap between idea and implementation. This dramatically lowers the barrier to entry, making the Kadena EVM ecosystem more accessible and attractive to a wider range of developers.

Core Technology: Node.js Manifold is fundamentally a Node.js script. This is the core technology that makes the entire project possible. Node.js was chosen because it excels at command-line tooling, file system manipulation (creating, deleting, and writing files), and managing external processes (like running npm install). The entire interactive wizard and project generation engine runs within the Node.js runtime environment.

Architectural Structure: A Dual-Component System The project is architecturally divided into two main parts that exist within the same repository:

The Generator Engine: This is the "brain" of Manifold. It's the collection of scripts, including the main executable file you provided, that lives in the parent directory. Its sole responsibility is to ask the developer questions and build the new project. It contains all the logic for user interaction and file creation.

The Code Templates: These are pre-written, componentized pieces of the final application that will be generated. For example, the source code for the React components (FunctionCard.jsx), hooks (useFunctionGenerator.js), and utility files (chainConfig.js) exist as template files within the generator's own src directory.

This separation is key: the generator is the factory, and the templates are the blueprints and parts it uses to assemble the final product.

How It Works: The Internal Mechanics When a developer runs the setup command, the Node.js script executes a series of steps in a precise order.

Command-Line Interaction: The script uses Node.js's built-in readline module. This module is what allows the script to display questions in the terminal (rl.question) and wait for the developer's input. Each await question(...) call pauses the script, captures the typed answer, and stores it in the config object.

Dynamic Content Generation: The most complex part of the engine is generating files dynamically. Manifold doesn't just copy and paste every file. For files that need to be customized based on the developer's choices, it uses JavaScript template literals (the backtick `` strings).

For instance, when creating the App.jsx file or the manifold.config.js file, the script has a large template literal string. Inside this string, it injects the variables captured from the user (e.g., manifoldConfig.selectedChains, useCaseName).

This is how the final generated code is tailored. The script effectively performs a "find and replace" operation, inserting the user's choices into the blueprint before writing the final file to the disk.

File System Manipulation: The script heavily relies on Node.js's fs (File System) and path modules.

fs.existsSync, fs.rmSync, fs.mkdirSync: These commands are used first to check for and delete any old gen_manifold directory and then create a fresh, empty one. This ensures every generation is clean.

fs.writeFileSync: This is used to write the dynamically generated string content (from the template literals) into new files like App.jsx or package.json.

fs.copyFileSync: For static template files that don't need any customization (like FunctionCard.jsx or .eslintrc.cjs), the script simply copies them directly from its own source directory into the target gen_manifold directory. This is more efficient than reading them into a string and writing them back out.

Dependency Management and Finalization: In the final step, the script uses Node.js's child_process module to run execSync('npm install', ...). This command programmatically executes the npm install command within the newly created gen_manifold directory. This is the crucial last step that makes the generated project immediately runnable for the developer. It's the same as the developer cd-ing into the folder and running the command themselves, but automated for convenience.