Concepts

Generating Bindings

Dojo clients are based on a single C interface, which can be found in dojo.c. This interface is then wrapped and consumed within dojo.js.

Autogen Components based on your world

From your project define the recs bindings by (replace the parameters with appropriate information):

npx @dojoengine/core <PATH TO MANIFEST> <PATH TO GENERATE COMPONENTS> <RPC URL> <WORLD ADDRESS>

This will output a file like:

/* Autogenerated file. Do not edit manually. */
 
import { defineComponent, Type as RecsType, World } from "@dojoengine/recs";
 
export type ContractComponents = Awaited<
  ReturnType<typeof defineContractComponents>
>;
 
export function defineContractComponents(world: World) {
  return {
    DirectionsAvailable: (() => {
      return defineComponent(
        world,
        { player: RecsType.BigInt, directions: RecsType.StringArray },
        {
          metadata: {
            name: "DirectionsAvailable",
            types: ["contractaddress"],
            customTypes: [],
          },
        }
      );
    })(),
    Moves: (() => {
      return defineComponent(
        world,
        {
          player: RecsType.BigInt,
          remaining: RecsType.Number,
          last_direction: RecsType.Number,
        },
        {
          metadata: {
            name: "Moves",
            types: ["contractaddress", "u8", "enum"],
            customTypes: ["Direction"],
          },
        }
      );
    })(),
    Position: (() => {
      return defineComponent(
        world,
        {
          player: RecsType.BigInt,
          vec: { x: RecsType.Number, y: RecsType.Number },
        },
        {
          metadata: {
            name: "Position",
            types: ["contractaddress", "u32", "u32"],
            customTypes: ["Vec2"],
          },
        }
      );
    })(),
  };
}

For complete example see the basic react app React-App

World Syncing with Torii

Torii automatically syncs your world with the following:

 
// client
const toriiClient = await torii.createClient([], {
    rpcUrl: config.rpcUrl,
    toriiUrl: config.toriiUrl,
    relayUrl: "",
    worldAddress: config.manifest.world.address || "",
});
 
// sync entities
await getSyncEntities(toriiClient, contractComponents as any, []);

This will open a subscription to torii and sync all changes.