improve auth structure and add necessary auth/identity fixes

apps/events/src/components/auth.tsx

@@ -1,6 +1,5 @@
 import { Identity } from '@graphprotocol/hypergraph';
 import { PrivyProvider, usePrivy, useWallets } from '@privy-io/react-auth';
-import { useRouter } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 
 function DoGraphLogin() {
@@ -47,7 +46,8 @@ function Auth({ children }: { children: React.ReactNode }) {
           {children}
         </Identity.GraphLogin>
       ) : (
-        children
+        // @ts-expect-error signer is not required should be fixed in GraphLogin
+        <Identity.GraphLogin storage={localStorage}>{children}</Identity.GraphLogin>
       )}
     </>
   );
@@ -75,16 +75,3 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     </PrivyProvider>
   );
 }
-
-export function RequireAuth({ children }: { children: React.ReactNode }) {
-  const { authenticated } = usePrivy();
-  const { authenticated: graphAuthenticated } = Identity.useGraphLogin();
-  const router = useRouter();
-  if (!authenticated || !graphAuthenticated) {
-    router.navigate({
-      to: '/login',
-    });
-    return <div />;
-  }
-  return <>{children}</>;
-}

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

@@ -0,0 +1,70 @@
+import { store, useGraphFramework, useSelector } from '@graphprotocol/hypergraph';
+import { useEffect, useState } from 'react';
+import { Button } from './ui/button';
+
+export function DevTool({ spaceId }: { spaceId: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const spaces = useSelector(store, (state) => state.context.spaces);
+  const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
+  const { subscribeToSpace, isLoading } = useGraphFramework();
+
+  useEffect(() => {
+    if (!isLoading) {
+      subscribeToSpace({ spaceId });
+    }
+  }, [isLoading, subscribeToSpace, spaceId]);
+
+  const space = spaces.find((space) => space.id === spaceId);
+
+  return (
+    <>
+      <div className="flex flex-row gap-2">
+        <Button
+          onClick={(event) => {
+            event.preventDefault();
+            setIsOpen(!isOpen);
+          }}
+        >
+          Hypergraph DevTool
+        </Button>
+      </div>
+      {isOpen && !space && <div>Space not found</div>}
+      {isOpen && space && (
+        <>
+          <h3>Space id: {space.id}</h3>
+          <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) => {
+              return (
+                <li key={updateInFlight} className="border border-gray-300">
+                  {updateInFlight}
+                </li>
+              );
+            })}
+          </ul>
+          <hr />
+          <h3>State</h3>
+          <div className="text-xs">
+            <pre>{JSON.stringify(space.state, null, 2)}</pre>
+          </div>
+          <hr />
+          <h3>Events</h3>
+          <ul className="text-xs">
+            {space.events.map((event) => {
+              return (
+                <li key={event.transaction.id} className="border border-gray-300">
+                  <pre>{JSON.stringify(event, null, 2)}</pre>
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
+    </>
+  );
+}

apps/events/src/components/todos-app.tsx → apps/events/src/components/todos.tsx

@@ -6,16 +6,16 @@ import { Todo } from '../schema';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
-export const TodosApp = () => {
+export const Todos = () => {
   const todos = Schema.useQuery(Todo);
   const createEntity = Schema.useCreateEntity(Todo);
   const updateEntity = Schema.useUpdateEntity(Todo);
   const deleteEntity = Schema.useDeleteEntity();
   const [newTodoTitle, setNewTodoTitle] = useState('');
 
   return (
-    <div>
-      <h1>Todos</h1>
+    <>
+      <h1 className="text-2xl font-bold">Todos</h1>
       <div className="flex flex-row gap-2">
         <Input type="text" value={newTodoTitle} onChange={(e) => setNewTodoTitle(e.target.value)} />
         <Button
@@ -38,6 +38,6 @@ export const TodosApp = () => {
           <Button onClick={() => deleteEntity(todo.id)}>Delete</Button>
         </div>
       ))}
-    </div>
+    </>
   );
 };

apps/events/src/lib/availableAccounts.ts

@@ -0,0 +1,33 @@
+export const availableAccounts: Array<{
+  accountId: string;
+  signaturePublicKey: string;
+  signaturePrivateKey: string;
+  encryptionPrivateKey: string;
+  encryptionPublicKey: string;
+  sessionToken: string;
+}> = [
+  {
+    accountId: '0x098B742F2696AFC37724887cf999e1cFdB8f4b55',
+    signaturePublicKey: '0x0262701b2eb1b6b37ad03e24445dfcad1b91309199e43017b657ce2604417c12f5',
+    signaturePrivateKey: '0x88bb6f20de8dc1787c722dc847f4cf3d00285b8955445f23c483d1237fe85366',
+    encryptionPrivateKey: '0xbbf164a93b0f78a85346017fa2673cf367c64d81b1c3d6af7ad45e308107a812',
+    encryptionPublicKey: '0x595e1a6b0bb346d83bc382998943d2e6d9210fd341bc8b9f41a7229eede27240',
+    sessionToken: '0xdeadbeef1',
+  },
+  {
+    accountId: '0x560436B2d3EE2d464D2756b7ebd6880CC5146614',
+    signaturePublicKey: '0x03bf5d2a1badf15387b08a007d1a9a13a9bfd6e1c56f681e251514d9ba10b57462',
+    signaturePrivateKey: '0x1eee32d3bc202dcb5d17c3b1454fb541d2290cb941860735408f1bfe39e7bc15',
+    encryptionPrivateKey: '0xb32478dc6f40482127a09d0f1cabbf45dc83ebce638d6246f5552191009fda2c',
+    encryptionPublicKey: '0x0f4e22dc85167597af85cba85988770cd77c25d317f2b14a1f49a54efcbfae3f',
+    sessionToken: '0xdeadbeef2',
+  },
+  {
+    accountId: '0xd909b84c934f24F7c65dfa51be6b11e4c6eabB47',
+    signaturePublicKey: '0x0351460706cf386282d9b6ebee2ccdcb9ba61194fd024345e53037f3036242e6a2',
+    signaturePrivateKey: '0x434518a2c9a665a7c20da086232c818b6c1592e2edfeecab29a40cf5925ca8fe',
+    encryptionPrivateKey: '0xaaf71397e44fc57b42eaad5b0869d1e0247b4a7f2fe9ec5cc00dec3815849e7a',
+    encryptionPublicKey: '0xd494144358a610604c4ab453b442d014f2843772eed19be155dd9fc55fe8a332',
+    sessionToken: '0xdeadbeef3',
+  },
+];

apps/events/src/routeTree.gen.ts

@@ -13,7 +13,6 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as PlaygroundImport } from './routes/playground'
 import { Route as IndexImport } from './routes/index'
 import { Route as SpaceSpaceIdImport } from './routes/space/$spaceId'
 
@@ -29,12 +28,6 @@ const LoginLazyRoute = LoginLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/login.lazy').then((d) => d.Route))
 
-const PlaygroundRoute = PlaygroundImport.update({
-  id: '/playground',
-  path: '/playground',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
@@ -58,13 +51,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/playground': {
-      id: '/playground'
-      path: '/playground'
-      fullPath: '/playground'
-      preLoaderRoute: typeof PlaygroundImport
-      parentRoute: typeof rootRoute
-    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -86,45 +72,40 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/playground': typeof PlaygroundRoute
   '/login': typeof LoginLazyRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/playground' | '/login' | '/space/$spaceId'
+  fullPaths: '/' | '/login' | '/space/$spaceId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/playground' | '/login' | '/space/$spaceId'
-  id: '__root__' | '/' | '/playground' | '/login' | '/space/$spaceId'
+  to: '/' | '/login' | '/space/$spaceId'
+  id: '__root__' | '/' | '/login' | '/space/$spaceId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  PlaygroundRoute: typeof PlaygroundRoute
   LoginLazyRoute: typeof LoginLazyRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  PlaygroundRoute: PlaygroundRoute,
   LoginLazyRoute: LoginLazyRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRoute,
 }
@@ -140,17 +121,13 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/playground",
         "/login",
         "/space/$spaceId"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/playground": {
-      "filePath": "playground.tsx"
-    },
     "/login": {
       "filePath": "login.lazy.tsx"
     },