Public graph integration

apps/events/package.json

@@ -11,18 +11,22 @@
     "@automerge/automerge": "^v2.2.9-alpha.3",
     "@automerge/automerge-repo": "^2.0.0-alpha.14",
     "@automerge/automerge-repo-react-hooks": "^2.0.0-alpha.14",
+    "@graphprotocol/grc-20": "^0.10.0",
     "@graphprotocol/hypergraph": "workspace:*",
     "@graphprotocol/hypergraph-react": "workspace:*",
     "@noble/hashes": "^1.7.0",
     "@privy-io/react-auth": "^2.0.3",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.1",
+    "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-router": "^1.97.1",
     "@xstate/store": "^2.6.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "effect": "^3.12.4",
+    "effect": "^3.14.12",
+    "framer-motion": "^12.5.0",
+    "graphql-request": "^7.1.2",
     "isomorphic-ws": "^5.0.0",
     "lucide-react": "^0.471.1",
     "react": "^19.0.0",

apps/events/src/components/create-properties-and-types.tsx

@@ -0,0 +1,89 @@
+import { getSmartAccountWalletClient } from '@/lib/smart-account';
+import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
+import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+
+const createPropertiesAndTypes = async ({
+  smartAccountWalletClient,
+  space,
+}: { smartAccountWalletClient: GeoSmartAccount; space: string }) => {
+  const ops: Array<Op> = [];
+  const { id: checkedPropertyId, ops: createCheckedPropertyOps } = Graph.createProperty({
+    type: 'CHECKBOX',
+    name: 'Checked',
+  });
+  ops.push(...createCheckedPropertyOps);
+
+  const { id: userId, ops: createUserOps } = Graph.createType({
+    name: 'User',
+  });
+  ops.push(...createUserOps);
+
+  const { id: assigneesRelationTypeId, ops: createAssigneesRelationTypeOps } = Graph.createProperty({
+    type: 'RELATION',
+    name: 'Assignees',
+    relationValueTypes: [userId],
+  });
+  ops.push(...createAssigneesRelationTypeOps);
+
+  const { id: todoTypeId, ops: createTodoTypeOps } = Graph.createType({
+    name: 'Todo',
+    properties: [checkedPropertyId, assigneesRelationTypeId],
+  });
+  ops.push(...createTodoTypeOps);
+
+  const result = await publishOps({ ops, walletClient: smartAccountWalletClient, space });
+  return { result, todoTypeId, checkedPropertyId, userId, assigneesRelationTypeId };
+};
+
+export const CreatePropertiesAndTypes = () => {
+  const [mapping, setMapping] = useState<string>('');
+  const space = useHypergraphSpace();
+
+  return (
+    <div>
+      {mapping && (
+        <Card>
+          <CardContent>
+            <pre>{mapping}</pre>
+          </CardContent>
+        </Card>
+      )}
+      <Button
+        onClick={async () => {
+          const smartAccountWalletClient = await getSmartAccountWalletClient();
+          if (!smartAccountWalletClient) {
+            throw new Error('Missing smartAccountWalletClient');
+          }
+          const { todoTypeId, checkedPropertyId, userId, assigneesRelationTypeId } = await createPropertiesAndTypes({
+            smartAccountWalletClient,
+            space,
+          });
+
+          const newMapping = `Todo2: {
+  typeIds: [Id.Id('${todoTypeId}')],
+  properties: {
+    name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+    checked: Id.Id('${checkedPropertyId}'),
+  },
+  relations: {
+    assignees: Id.Id('${assigneesRelationTypeId}'),
+  },
+},
+User: {
+  typeIds: [Id.Id('${userId}')],
+  properties: {
+    name: Id.Id('LuBWqZAu6pz54eiJS5mLv8'),
+  },
+}
+`;
+          setMapping(newMapping);
+        }}
+      >
+        Create properties and types
+      </Button>
+    </div>
+  );
+};

apps/events/src/components/dev-tool.tsx

@@ -10,13 +10,13 @@ export function DevTool({ spaceId }: { spaceId: string }) {
 
   const spaces = useSelector(store, (state) => state.context.spaces);
   const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
-  const { subscribeToSpace, loading } = useHypergraphApp();
+  const { subscribeToSpace, isConnecting } = useHypergraphApp();
 
   useEffect(() => {
-    if (!loading) {
+    if (!isConnecting) {
       subscribeToSpace({ spaceId });
     }
-  }, [loading, subscribeToSpace, spaceId]);
+  }, [isConnecting, subscribeToSpace, spaceId]);
 
   const space = spaces.find((space) => space.id === spaceId);
 

apps/events/src/components/playground.tsx

@@ -0,0 +1,10 @@
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { NewsStory } from '../schema';
+
+export const Playground = () => {
+  const { data: entityData, isLoading, isError } = useQuery(NewsStory, { mode: 'public' });
+
+  console.log({ isLoading, isError, entityData });
+
+  return <pre className="text-xs">{JSON.stringify(entityData, null, 2)}</pre>;
+};

apps/events/src/components/spinner.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
+
+interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'default' | 'primary' | 'secondary' | 'accent' | 'white';
+  className?: string;
+}
+
+export function Spinner({ size = 'md', color = 'primary', className }: SpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4 border-2',
+    md: 'h-6 w-6 border-2',
+    lg: 'h-8 w-8 border-3',
+    xl: 'h-12 w-12 border-4',
+  };
+
+  const colorClasses = {
+    default: 'border-muted-foreground/30 border-t-muted-foreground',
+    primary: 'border-primary/30 border-t-primary',
+    secondary: 'border-secondary/30 border-t-secondary',
+    accent: 'border-accent/30 border-t-accent',
+    white: 'border-white/30 border-t-white',
+  };
+
+  return (
+    <motion.div
+      className={cn('rounded-full animate-spin', sizeClasses[size], colorClasses[color], className)}
+      animate={{ rotate: 360 }}
+      transition={{
+        duration: 1,
+        ease: 'linear',
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { useHardDeleteEntity, useQuery, useUpdateEntity } from '@graphprotocol/hypergraph-react';
+import { Todo2 } from '../../schema';
+import { Button } from '../ui/button';
+
+export const TodosLocal = () => {
+  const updateEntity = useUpdateEntity(Todo2);
+  const hardDeleteEntity = useHardDeleteEntity();
+  const { data: todosLocalData, deleted: deletedTodosLocalData } = useQuery(Todo2, { mode: 'local' });
+
+  return (
+    <>
+      <h2 className="text-2xl font-bold">Todos (Local)</h2>
+      {todosLocalData.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          <div className="text-xs">{todo.id}</div>
+          {todo.assignees.map((assignee) => (
+            <span key={assignee.id} className="border rounded-sm mr-1 p-1">
+              {assignee.name}
+            </span>
+          ))}
+          <input
+            type="checkbox"
+            checked={todo.checked}
+            onChange={(e) => updateEntity(todo.id, { checked: e.target.checked })}
+          />
+          {/* @ts-expect-error */}
+          <div className="text-xs">{todo.__deleted ? 'deleted' : 'not deleted'}</div>
+          {/* @ts-expect-error */}
+          <div className="text-xs">{todo.__version}</div>
+          <Button variant="secondary" size="sm" onClick={() => hardDeleteEntity(todo.id)}>
+            Hard Delete
+          </Button>
+        </div>
+      ))}
+      <h2 className="text-2xl font-bold">Deleted Todos (Local)</h2>
+      {deletedTodosLocalData.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          <div className="text-xs">{todo.id}</div>
+          <Button variant="secondary" size="sm" onClick={() => hardDeleteEntity(todo.id)}>
+            Hard Delete
+          </Button>
+        </div>
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,81 @@
+import { getSmartAccountWalletClient } from '@/lib/smart-account';
+import { Id } from '@graphprotocol/grc-20';
+import {
+  _generateDeleteOps,
+  publishOps,
+  useCreateEntity,
+  useHypergraphSpace,
+  useQuery,
+} from '@graphprotocol/hypergraph-react';
+import { useGenerateCreateOps } from '@graphprotocol/hypergraph-react/internal/use-generate-create-ops';
+import { Todo2 } from '../../schema';
+import { Spinner } from '../spinner';
+import { Button } from '../ui/button';
+
+export const TodosPublicGeo = () => {
+  const space = useHypergraphSpace();
+  const {
+    data: dataPublic,
+    isLoading: isLoadingPublic,
+    isError: isErrorPublic,
+  } = useQuery(Todo2, {
+    mode: 'public',
+    include: { assignees: {} },
+  });
+
+  const createTodo = useCreateEntity(Todo2);
+  const generateCreateOps = useGenerateCreateOps(Todo2);
+
+  return (
+    <>
+      <div className="flex flex-row gap-4 items-center">
+        <h2 className="text-2xl font-bold">Todos (Public Geo)</h2>
+        {isLoadingPublic && <Spinner size="sm" />}
+      </div>
+      {isErrorPublic && <div>Error loading todos</div>}
+      {dataPublic.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          <div className="text-xs">{todo.id}</div>
+          <input type="checkbox" checked={todo.checked} readOnly />
+          {todo.assignees.map((assignee) => (
+            <span key={assignee.id} className="border rounded-sm mr-1 p-1">
+              {assignee.name}
+            </span>
+          ))}
+
+          <Button
+            onClick={async () => {
+              const smartAccountWalletClient = await getSmartAccountWalletClient();
+              if (!smartAccountWalletClient) {
+                throw new Error('Missing smartAccountWalletClient');
+              }
+              const ops = await _generateDeleteOps({ id: todo.id, space });
+              const result = await publishOps({ ops, walletClient: smartAccountWalletClient, space });
+              console.log('result', result);
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      ))}
+      <Button
+        onClick={async () => {
+          const smartAccountWalletClient = await getSmartAccountWalletClient();
+          if (!smartAccountWalletClient) {
+            throw new Error('Missing smartAccountWalletClient');
+          }
+          const userId = Id.Id('8zPJjTGLBDPtUcj6q2tghg');
+          const todo = createTodo({ name: 'New Todo 22', checked: false, assignees: [userId] });
+          console.log('todo', todo);
+          const { ops } = generateCreateOps(todo);
+          console.log('ops', ops);
+          const result = await publishOps({ ops, walletClient: smartAccountWalletClient, space });
+          console.log('result', result);
+        }}
+      >
+        Create
+      </Button>
+    </>
+  );
+};

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

@@ -0,0 +1,45 @@
+import { getSmartAccountWalletClient } from '@/lib/smart-account';
+import {
+  _generateDeleteOps,
+  publishOps,
+  useHypergraphSpace,
+  _useQueryPublicKg as useQueryPublicKg,
+} from '@graphprotocol/hypergraph-react';
+import { Todo2 } from '../../schema';
+import { Spinner } from '../spinner';
+import { Button } from '../ui/button';
+
+export const TodosPublicKg = () => {
+  const space = useHypergraphSpace();
+  const { data: kgPublicData, isLoading: kgPublicIsLoading, isError: kgPublicIsError } = useQueryPublicKg(Todo2);
+
+  return (
+    <>
+      <div className="flex flex-row gap-4 items-center">
+        <h2 className="text-2xl font-bold">Todos (Public KG)</h2>
+        {kgPublicIsLoading && <Spinner size="sm" />}
+      </div>
+      {kgPublicIsError && <div>Error loading todos</div>}
+      {kgPublicData.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          <div className="text-xs">{todo.id}</div>
+          <input type="checkbox" checked={todo.checked} readOnly />
+          <Button
+            onClick={async () => {
+              const smartAccountWalletClient = await getSmartAccountWalletClient();
+              if (!smartAccountWalletClient) {
+                throw new Error('Missing smartAccountWalletClient');
+              }
+              const ops = await _generateDeleteOps({ id: todo.id, space });
+              const result = await publishOps({ ops, walletClient: smartAccountWalletClient, space });
+              console.log('result', result);
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      ))}
+    </>
+  );
+};