rework space context

apps/events/src/components/create-events.tsx

@@ -1,6 +1,6 @@
 import { getSmartAccountWalletClient } from '@/lib/smart-account';
 import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
-import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { publishOps } from '@graphprotocol/hypergraph-react';
 import { Button } from './ui/button';
 
 const createEvents = async ({
@@ -69,9 +69,7 @@ const createEvents = async ({
   }
 };
 
-export const CreateEvents = () => {
-  const space = useHypergraphSpace();
-
+export const CreateEvents = ({ space }: { space: string }) => {
   return (
     <div>
       <Button

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

@@ -1,6 +1,6 @@
 import { getSmartAccountWalletClient } from '@/lib/smart-account';
 import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
-import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { publishOps } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Card, CardContent } from './ui/card';
@@ -66,9 +66,8 @@ const createPropertiesAndTypesEvent = async ({
   };
 };
 
-export const CreatePropertiesAndTypesEvent = () => {
+export const CreatePropertiesAndTypesEvent = ({ space }: { space: string }) => {
   const [mapping, setMapping] = useState<string>('');
-  const space = useHypergraphSpace();
 
   return (
     <div>

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

@@ -1,6 +1,6 @@
 import { getSmartAccountWalletClient } from '@/lib/smart-account';
 import { type GeoSmartAccount, Graph, type Op } from '@graphprotocol/grc-20';
-import { publishOps, useHypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { publishOps } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { Button } from './ui/button';
 import { Card, CardContent } from './ui/card';
@@ -70,6 +70,7 @@ const createPropertiesAndTypesTodos = async ({
     walletClient: smartAccountWalletClient,
     space,
     name: 'Create properties and types',
+    network: 'TESTNET',
   });
   return {
     result,
@@ -84,9 +85,8 @@ const createPropertiesAndTypesTodos = async ({
   };
 };
 
-export const CreatePropertiesAndTypesTodos = () => {
+export const CreatePropertiesAndTypesTodos = ({ space }: { space: string }) => {
   const [mapping, setMapping] = useState<string>('');
-  const space = useHypergraphSpace();
 
   return (
     <div>
@@ -113,6 +113,7 @@ export const CreatePropertiesAndTypesTodos = () => {
             websitePropertyId,
             amountPropertyId,
           } = await createPropertiesAndTypesTodos({
+            // @ts-expect-error - TODO: fix the types error
             smartAccountWalletClient,
             space,
           });

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

@@ -1,7 +1,6 @@
 import { store } from '@graphprotocol/hypergraph';
-import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { useSelector } from '@xstate/store/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { Button } from './ui/button';
 
@@ -10,13 +9,6 @@ export function DevTool({ spaceId }: { spaceId: string }) {
 
   const spaces = useSelector(store, (state) => state.context.spaces);
   const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-
-  useEffect(() => {
-    if (!isConnecting) {
-      subscribeToSpace({ spaceId });
-    }
-  }, [isConnecting, subscribeToSpace, spaceId]);
 
   const space = spaces.find((space) => space.id === spaceId);
 
@@ -39,7 +31,6 @@ export function DevTool({ spaceId }: { spaceId: string }) {
           <p>Keys:</p>
           <pre className="text-xs">{JSON.stringify(space.keys)}</pre>
           <br />
-          <h3>Last update clock: {space.lastUpdateClock}</h3>
           <h3>Updates in flight</h3>
           <ul className="text-xs">
             {updatesInFlight.map((updateInFlight) => {

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

@@ -1,19 +1,13 @@
 import { getSmartAccountWalletClient } from '@/lib/smart-account';
 import { Id } from '@graphprotocol/grc-20';
-import {
-  _generateDeleteOps,
-  publishOps,
-  useCreateEntity,
-  useHypergraphSpace,
-  useQuery,
-} from '@graphprotocol/hypergraph-react';
+import { _generateDeleteOps, publishOps, useCreateEntity, useQuery, useSpace } 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 TodosPublic = () => {
-  const space = useHypergraphSpace();
+  const { id: spaceId } = useSpace({ mode: 'public' });
   const {
     data: dataPublic,
     isLoading: isLoadingPublic,
@@ -54,11 +48,12 @@ export const TodosPublic = () => {
               if (!smartAccountWalletClient) {
                 throw new Error('Missing smartAccountWalletClient');
               }
-              const ops = await _generateDeleteOps({ id: todo.id, space });
+              const ops = await _generateDeleteOps({ id: todo.id, space: spaceId });
               const result = await publishOps({
                 ops,
+                // @ts-expect-error - TODO: fix the types error
                 walletClient: smartAccountWalletClient,
-                space,
+                space: spaceId,
                 name: 'Delete Todo',
               });
               console.log('result', result);
@@ -89,8 +84,9 @@ export const TodosPublic = () => {
           console.log('ops', ops);
           const result = await publishOps({
             ops,
+            // @ts-expect-error - TODO: fix the types error
             walletClient: smartAccountWalletClient,
-            space,
+            space: spaceId,
             name: 'Create Todo',
           });
           console.log('result', result);

apps/events/src/components/todos.tsx

@@ -3,6 +3,7 @@ import {
   useDeleteEntity,
   useQuery,
   useRemoveRelation,
+  useSpace,
   useUpdateEntity,
 } from '@graphprotocol/hypergraph-react';
 import { useEffect, useState } from 'react';
@@ -14,6 +15,7 @@ import { Input } from './ui/input';
 export const Todos = () => {
   const { data: todos } = useQuery(Todo, { mode: 'private', include: { assignees: {} } });
   const { data: users } = useQuery(User, { mode: 'private' });
+  const { ready: spaceReady } = useSpace({ mode: 'private' });
   const createEntity = useCreateEntity(Todo);
   const updateEntity = useUpdateEntity(Todo);
   const deleteEntity = useDeleteEntity();
@@ -28,6 +30,10 @@ export const Todos = () => {
     });
   }, [users]);
 
+  if (!spaceReady) {
+    return <div>Loading space...</div>;
+  }
+
   const userOptions = users.map((user) => ({ value: user.id, label: user.name }));
   return (
     <>

apps/events/src/components/todos2.tsx

@@ -6,8 +6,8 @@ import {
   publishOps,
   useCreateEntity,
   useDeleteEntity,
-  useHypergraphSpace,
   useQuery,
+  useSpace,
   useUpdateEntity,
 } from '@graphprotocol/hypergraph-react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -34,7 +34,7 @@ export const Todos2 = () => {
     isError: isErrorUsers,
     // preparePublish: preparePublishUsers,
   } = useQuery(User, { mode: 'private' });
-  const space = useHypergraphSpace();
+  const { ready: spaceReady, id: spaceId } = useSpace({ mode: 'private' });
   const createTodo = useCreateEntity(Todo2);
   const updateTodo = useUpdateEntity(Todo2);
   const createUser = useCreateEntity(User);
@@ -57,6 +57,10 @@ export const Todos2 = () => {
 
   const userOptions = dataUsers.map((user) => ({ value: user.id, label: user.name }));
 
+  if (!spaceReady) {
+    return <div>Loading space...</div>;
+  }
+
   return (
     <>
       <div className="flex flex-row gap-4 items-center">
@@ -231,7 +235,7 @@ export const Todos2 = () => {
                     ops,
                     // @ts-expect-error - TODO: fix the types error
                     walletClient: smartAccountWalletClient,
-                    space,
+                    space: spaceId,
                     name: 'Update users and todos',
                   });
                   console.log('publishOpsResult', publishOpsResult);

apps/events/src/components/users.tsx

@@ -1,4 +1,4 @@
-import { useCreateEntity, useQuery } from '@graphprotocol/hypergraph-react';
+import { useCreateEntity, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { User } from '../schema.js';
 import { Button } from './ui/button.js';
@@ -7,9 +7,14 @@ import { UserEntry } from './user-entry.js';
 
 export const Users = () => {
   const { data: users } = useQuery(User, { mode: 'private' });
-  const createEntity = useCreateEntity(User);
+  const { ready: spaceReady } = useSpace({ mode: 'private' });
+  const createEntity = useCreateEntity(User, { space: '1c954768-7e14-4f0f-9396-0fe9dcd55fe8' });
   const [newUserName, setNewUserName] = useState('');
 
+  if (!spaceReady) {
+    return <div>Loading space...</div>;
+  }
+
   return (
     <>
       <h1 className="text-2xl font-bold">Users</h1>

apps/events/src/components/users/users-public.tsx

@@ -1,11 +1,11 @@
 import { getSmartAccountWalletClient } from '@/lib/smart-account';
-import { _generateDeleteOps, publishOps, useHypergraphSpace, useQuery } from '@graphprotocol/hypergraph-react';
+import { _generateDeleteOps, publishOps, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
 import { User } from '../../schema';
 import { Spinner } from '../spinner';
 import { Button } from '../ui/button';
 
 export const UsersPublic = () => {
-  const space = useHypergraphSpace();
+  const { id: spaceId } = useSpace({ mode: 'public' });
   const { data: dataPublic, isLoading: isLoadingPublic, isError: isErrorPublic } = useQuery(User, { mode: 'public' });
 
   return (
@@ -26,11 +26,12 @@ export const UsersPublic = () => {
               if (!smartAccountWalletClient) {
                 throw new Error('Missing smartAccountWalletClient');
               }
-              const ops = await _generateDeleteOps({ id: user.id, space });
+              const ops = await _generateDeleteOps({ id: user.id, space: spaceId });
               const result = await publishOps({
                 ops,
+                // @ts-expect-error - TODO: fix the types error
                 walletClient: smartAccountWalletClient,
-                space,
+                space: spaceId,
                 name: 'Delete User',
               });
               console.log('result', result);

apps/events/src/routes/playground.lazy.tsx

@@ -14,8 +14,8 @@ function RouteComponent() {
       <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
         <h1 className="text-2xl font-bold">Playground</h1>
         <Playground />
-        <CreatePropertiesAndTypesEvent />
-        <CreateEvents />
+        <CreatePropertiesAndTypesEvent space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
+        <CreateEvents space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
       </div>
     </HypergraphSpaceProvider>
   );

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

@@ -1,39 +1,22 @@
 import { SpaceChat } from '@/components/SpaceChat';
-import { store } from '@graphprotocol/hypergraph';
-import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
-import { useSelector } from '@xstate/store/react';
-import { useEffect } from 'react';
 
 export const Route = createFileRoute('/space/$spaceId/chat')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
   const { spaceId } = Route.useParams();
-  const spaces = useSelector(store, (state) => state.context.spaces);
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting) {
-      subscribeToSpace({ spaceId });
-    }
-  }, [isConnecting, subscribeToSpace, spaceId]);
-
-  const space = spaces.find((space) => space.id === spaceId);
+  const { isConnecting } = useHypergraphApp();
 
   if (isConnecting) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
   }
 
-  if (!space) {
-    return <div className="flex justify-center items-center h-screen">Space not found</div>;
-  }
-
   return (
     <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
-      <HypergraphSpaceProvider space={spaceId}>
-        <SpaceChat spaceId={spaceId} />
-      </HypergraphSpaceProvider>
+      <SpaceChat spaceId={spaceId} />
     </div>
   );
 }

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

@@ -4,37 +4,23 @@ import { TodosReadOnly } from '@/components/todos-read-only';
 import { TodosReadOnlyFilter } from '@/components/todos-read-only-filter';
 import { Button } from '@/components/ui/button';
 import { Users } from '@/components/users';
-import { store } from '@graphprotocol/hypergraph';
 import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
-import { useSelector } from '@xstate/store/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export const Route = createFileRoute('/space/$spaceId/')({
   component: Space,
 });
 
 function Space() {
   const { spaceId } = Route.useParams();
-  const spaces = useSelector(store, (state) => state.context.spaces);
-  const { subscribeToSpace, isConnecting } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting) {
-      subscribeToSpace({ spaceId });
-    }
-  }, [isConnecting, subscribeToSpace, spaceId]);
+  const { isConnecting } = useHypergraphApp();
   const [show2ndTodos, setShow2ndTodos] = useState(false);
 
-  const space = spaces.find((space) => space.id === spaceId);
-
   if (isConnecting) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
   }
 
-  if (!space) {
-    return <div className="flex justify-center items-center h-screen">Space not found</div>;
-  }
-
   return (
     <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
       <HypergraphSpaceProvider space={spaceId}>

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

@@ -1,34 +1,19 @@
 import { TodosPublic } from '@/components/todo/todos-public';
-import { store } from '@graphprotocol/hypergraph';
 import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
-import { useSelector } from '@xstate/store/react';
-import { useEffect } from 'react';
 
 export const Route = createFileRoute('/space/$spaceId/playground')({
   component: PlaygroundRouteComponent,
 });
 
 function PlaygroundRouteComponent() {
   const { spaceId } = Route.useParams();
-  const spaces = useSelector(store, (state) => state.context.spaces);
-  const { subscribeToSpace, isConnecting, isLoadingSpaces } = useHypergraphApp();
-  useEffect(() => {
-    if (!isConnecting) {
-      subscribeToSpace({ spaceId });
-    }
-  }, [isConnecting, subscribeToSpace, spaceId]);
-
-  const space = spaces.find((space) => space.id === spaceId);
+  const { isConnecting, isLoadingSpaces } = useHypergraphApp();
 
   if (isConnecting || isLoadingSpaces[spaceId]) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
   }
 
-  if (!space) {
-    return <div className="flex justify-center items-center h-screen">Space not found</div>;
-  }
-
   return (
     <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
       <HypergraphSpaceProvider space={spaceId}>