implement prepare publish (create only)

apps/events/src/components/events/events.tsx

@@ -0,0 +1,77 @@
+import {
+  preparePublish,
+  publishOps,
+  useCreateEntity,
+  useHypergraphApp,
+  useQuery,
+  useSpaces,
+} from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+import { Event } from '../../schema';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+export const Events = () => {
+  const { data: eventsLocalData } = useQuery(Event, { mode: 'private' });
+  const createEvent = useCreateEntity(Event);
+  const { getSmartSessionClient } = useHypergraphApp();
+  const { data: spaces } = useSpaces({ mode: 'public' });
+  const [selectedSpace, setSelectedSpace] = useState<string>('');
+
+  const handlePublish = async (event: Event) => {
+    if (!selectedSpace) {
+      alert('No space selected');
+      return;
+    }
+    const { ops } = await preparePublish({ entity: event, publicSpace: selectedSpace });
+    const smartSessionClient = await getSmartSessionClient();
+    if (!smartSessionClient) {
+      throw new Error('Missing smartSessionClient');
+    }
+    const publishResult = await publishOps({
+      ops,
+      space: selectedSpace,
+      name: 'Publish Event',
+      walletClient: smartSessionClient,
+    });
+    console.log(publishResult, ops);
+  };
+
+  return (
+    <>
+      <h2 className="text-2xl font-bold">Events (Local)</h2>
+      {eventsLocalData.map((event) => (
+        <div key={event.id} className="flex flex-row items-center gap-2">
+          <h2>{event.name}</h2>
+          <div className="text-xs">{event.id}</div>
+          <select
+            value={selectedSpace}
+            onChange={(e) => setSelectedSpace(e.target.value)}
+            className="border border-gray-300 rounded-md p-2"
+          >
+            <option value="">Select a space</option>
+            {spaces?.map((space) => (
+              <option key={space.id} value={space.id}>
+                {space.name}
+              </option>
+            ))}
+          </select>
+          <Button variant="secondary" size="sm" onClick={() => handlePublish(event)}>
+            Publish
+          </Button>
+        </div>
+      ))}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target as HTMLFormElement);
+          const name = formData.get('name') as string;
+          createEvent({ name });
+        }}
+      >
+        <Input type="text" name="name" />
+        <Button type="submit">Create Event</Button>
+      </form>
+    </>
+  );
+};

apps/events/src/components/todo/todos-public.tsx

@@ -1,13 +1,4 @@
-import { Id } from '@graphprotocol/grc-20';
-import {
-  _generateDeleteOps,
-  publishOps,
-  useCreateEntity,
-  _useGenerateCreateOps as useGenerateCreateOps,
-  useHypergraphApp,
-  useQuery,
-  useSpace,
-} from '@graphprotocol/hypergraph-react';
+import { _generateDeleteOps, publishOps, useHypergraphApp, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
 import { Todo2 } from '../../schema';
 import { Spinner } from '../spinner';
 import { Button } from '../ui/button';
@@ -24,9 +15,6 @@ export const TodosPublic = () => {
     include: { assignees: {} },
   });
 
-  const createTodo = useCreateEntity(Todo2);
-  const generateCreateOps = useGenerateCreateOps(Todo2);
-
   return (
     <>
       <div className="flex flex-row gap-4 items-center">
@@ -69,36 +57,6 @@ export const TodosPublic = () => {
           </Button>
         </div>
       ))}
-      <Button
-        onClick={async () => {
-          const smartSessionClient = await getSmartSessionClient();
-          if (!smartSessionClient) {
-            throw new Error('Missing smartSessionClient');
-          }
-          const userId = Id.Id('8zPJjTGLBDPtUcj6q2tghg');
-          const todo = createTodo({
-            name: 'New Todo 22',
-            checked: false,
-            assignees: [userId],
-            due: new Date('2025-08-20'),
-            amount: 200,
-            point: [12.34, 56.78],
-            website: new URL('https://example.com'),
-          });
-          console.log('todo', todo);
-          const { ops } = generateCreateOps(todo);
-          console.log('ops', ops);
-          const result = await publishOps({
-            ops,
-            walletClient: smartSessionClient,
-            space: spaceId,
-            name: 'Create Todo',
-          });
-          console.log('result', result);
-        }}
-      >
-        Create
-      </Button>
     </>
   );
 };

apps/events/src/routeTree.gen.ts

@@ -22,6 +22,7 @@ import { Route as SpaceSpaceIdIndexImport } from './routes/space/$spaceId/index'
 import { Route as SpaceSpaceIdUsersImport } from './routes/space/$spaceId/users'
 import { Route as SpaceSpaceIdPublicIntegrationImport } from './routes/space/$spaceId/public-integration'
 import { Route as SpaceSpaceIdPlaygroundImport } from './routes/space/$spaceId/playground'
+import { Route as SpaceSpaceIdEventsImport } from './routes/space/$spaceId/events'
 import { Route as SpaceSpaceIdChatImport } from './routes/space/$spaceId/chat'
 
 // Create Virtual Routes
@@ -98,6 +99,12 @@ const SpaceSpaceIdPlaygroundRoute = SpaceSpaceIdPlaygroundImport.update({
   getParentRoute: () => SpaceSpaceIdRoute,
 } as any)
 
+const SpaceSpaceIdEventsRoute = SpaceSpaceIdEventsImport.update({
+  id: '/events',
+  path: '/events',
+  getParentRoute: () => SpaceSpaceIdRoute,
+} as any)
+
 const SpaceSpaceIdChatRoute = SpaceSpaceIdChatImport.update({
   id: '/chat',
   path: '/chat',
@@ -164,6 +171,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SpaceSpaceIdChatImport
       parentRoute: typeof SpaceSpaceIdImport
     }
+    '/space/$spaceId/events': {
+      id: '/space/$spaceId/events'
+      path: '/events'
+      fullPath: '/space/$spaceId/events'
+      preLoaderRoute: typeof SpaceSpaceIdEventsImport
+      parentRoute: typeof SpaceSpaceIdImport
+    }
     '/space/$spaceId/playground': {
       id: '/space/$spaceId/playground'
       path: '/playground'
@@ -199,6 +213,7 @@ declare module '@tanstack/react-router' {
 
 interface SpaceSpaceIdRouteChildren {
   SpaceSpaceIdChatRoute: typeof SpaceSpaceIdChatRoute
+  SpaceSpaceIdEventsRoute: typeof SpaceSpaceIdEventsRoute
   SpaceSpaceIdPlaygroundRoute: typeof SpaceSpaceIdPlaygroundRoute
   SpaceSpaceIdPublicIntegrationRoute: typeof SpaceSpaceIdPublicIntegrationRoute
   SpaceSpaceIdUsersRoute: typeof SpaceSpaceIdUsersRoute
@@ -207,6 +222,7 @@ interface SpaceSpaceIdRouteChildren {
 
 const SpaceSpaceIdRouteChildren: SpaceSpaceIdRouteChildren = {
   SpaceSpaceIdChatRoute: SpaceSpaceIdChatRoute,
+  SpaceSpaceIdEventsRoute: SpaceSpaceIdEventsRoute,
   SpaceSpaceIdPlaygroundRoute: SpaceSpaceIdPlaygroundRoute,
   SpaceSpaceIdPublicIntegrationRoute: SpaceSpaceIdPublicIntegrationRoute,
   SpaceSpaceIdUsersRoute: SpaceSpaceIdUsersRoute,
@@ -226,6 +242,7 @@ export interface FileRoutesByFullPath {
   '/friends/$accountId': typeof FriendsAccountIdRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
   '/space/$spaceId/chat': typeof SpaceSpaceIdChatRoute
+  '/space/$spaceId/events': typeof SpaceSpaceIdEventsRoute
   '/space/$spaceId/playground': typeof SpaceSpaceIdPlaygroundRoute
   '/space/$spaceId/public-integration': typeof SpaceSpaceIdPublicIntegrationRoute
   '/space/$spaceId/users': typeof SpaceSpaceIdUsersRoute
@@ -240,6 +257,7 @@ export interface FileRoutesByTo {
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountId': typeof FriendsAccountIdRoute
   '/space/$spaceId/chat': typeof SpaceSpaceIdChatRoute
+  '/space/$spaceId/events': typeof SpaceSpaceIdEventsRoute
   '/space/$spaceId/playground': typeof SpaceSpaceIdPlaygroundRoute
   '/space/$spaceId/public-integration': typeof SpaceSpaceIdPublicIntegrationRoute
   '/space/$spaceId/users': typeof SpaceSpaceIdUsersRoute
@@ -256,6 +274,7 @@ export interface FileRoutesById {
   '/friends/$accountId': typeof FriendsAccountIdRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
   '/space/$spaceId/chat': typeof SpaceSpaceIdChatRoute
+  '/space/$spaceId/events': typeof SpaceSpaceIdEventsRoute
   '/space/$spaceId/playground': typeof SpaceSpaceIdPlaygroundRoute
   '/space/$spaceId/public-integration': typeof SpaceSpaceIdPublicIntegrationRoute
   '/space/$spaceId/users': typeof SpaceSpaceIdUsersRoute
@@ -273,6 +292,7 @@ export interface FileRouteTypes {
     | '/friends/$accountId'
     | '/space/$spaceId'
     | '/space/$spaceId/chat'
+    | '/space/$spaceId/events'
     | '/space/$spaceId/playground'
     | '/space/$spaceId/public-integration'
     | '/space/$spaceId/users'
@@ -286,6 +306,7 @@ export interface FileRouteTypes {
     | '/account-inbox/$inboxId'
     | '/friends/$accountId'
     | '/space/$spaceId/chat'
+    | '/space/$spaceId/events'
     | '/space/$spaceId/playground'
     | '/space/$spaceId/public-integration'
     | '/space/$spaceId/users'
@@ -300,6 +321,7 @@ export interface FileRouteTypes {
     | '/friends/$accountId'
     | '/space/$spaceId'
     | '/space/$spaceId/chat'
+    | '/space/$spaceId/events'
     | '/space/$spaceId/playground'
     | '/space/$spaceId/public-integration'
     | '/space/$spaceId/users'
@@ -368,6 +390,7 @@ export const routeTree = rootRoute
       "filePath": "space/$spaceId.tsx",
       "children": [
         "/space/$spaceId/chat",
+        "/space/$spaceId/events",
         "/space/$spaceId/playground",
         "/space/$spaceId/public-integration",
         "/space/$spaceId/users",
@@ -378,6 +401,10 @@ export const routeTree = rootRoute
       "filePath": "space/$spaceId/chat.tsx",
       "parent": "/space/$spaceId"
     },
+    "/space/$spaceId/events": {
+      "filePath": "space/$spaceId/events.tsx",
+      "parent": "/space/$spaceId"
+    },
     "/space/$spaceId/playground": {
       "filePath": "space/$spaceId/playground.tsx",
       "parent": "/space/$spaceId"

apps/events/src/routes/space/$spaceId.tsx

@@ -24,6 +24,9 @@ function RouteComponent() {
           >
             Home
           </Link>
+          <Link to={'/space/$spaceId/events'} params={{ spaceId }} className="px-3 py-2 text-sm font-medium rounded-md">
+            Events
+          </Link>
           <Link
             to={'/space/$spaceId/public-integration'}
             params={{ spaceId }}

apps/events/src/routes/space/$spaceId/events.tsx

@@ -0,0 +1,23 @@
+import { Events } from '@/components/events/events';
+import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/space/$spaceId/events')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { spaceId } = Route.useParams();
+  const { isConnecting, isLoadingSpaces } = useHypergraphApp();
+
+  if (isConnecting || isLoadingSpaces[spaceId]) {
+    return <div className="flex justify-center items-center h-screen">Loading …</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
+      <HypergraphSpaceProvider space={spaceId}>
+        <Events />
+      </HypergraphSpaceProvider>
+    </div>
+  );
+}

packages/hypergraph-react/src/index.ts

@@ -25,8 +25,8 @@ export {
 export { generateDeleteOps as _generateDeleteOps } from './internal/generate-delete-ops.js';
 export { useCreateEntityPublic as _useCreateEntityPublic } from './internal/use-create-entity-public.js';
 export { useDeleteEntityPublic as _useDeleteEntityPublic } from './internal/use-delete-entity-public.js';
-export { useGenerateCreateOps as _useGenerateCreateOps } from './internal/use-generate-create-ops.js';
 export { useQueryPublic as _useQueryPublic } from './internal/use-query-public.js';
+export { preparePublish } from './prepare-publish.js';
 export { publishOps } from './publish-ops.js';
 export type * from './types.js';
 export { useQuery } from './use-query.js';

packages/hypergraph-react/src/internal/use-query-public.tsx

@@ -312,7 +312,7 @@ export const parseResult = <S extends Entity.AnyNoContext>(
     });
 
     if (Either.isRight(decodeResult)) {
-      data.push(decodeResult.right);
+      data.push({ ...decodeResult.right, __schema: type });
     } else {
       invalidEntities.push(rawEntity);
     }