From 2403b288c232eccff75d36b144c7bf2a30605b59 Mon Sep 17 00:00:00 2001
From: Nik Graf <nik@nikgraf.com>
Date: Thu, 19 Jun 2025 14:59:23 +0200
Subject: [PATCH 1/2] listing public spaces

---
 apps/events/src/routes/index.tsx              | 20 ++++++++-
 .../src/HypergraphAppContext.tsx              |  7 ++-
 .../src/HypergraphSpaceContext.tsx            |  9 +---
 .../hypergraph-react/src/hooks/use-spaces.ts  | 45 +++++++++++++++++++
 packages/hypergraph-react/src/index.ts        |  1 +
 5 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 packages/hypergraph-react/src/hooks/use-spaces.ts

diff --git a/apps/events/src/routes/index.tsx b/apps/events/src/routes/index.tsx
index 6bf951b1..f2ca8eac 100644
--- a/apps/events/src/routes/index.tsx
+++ b/apps/events/src/routes/index.tsx
@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { store } from '@graphprotocol/hypergraph';
-import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp, useSpaces } from '@graphprotocol/hypergraph-react';
 import { Link, createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ export const Route = createFileRoute('/')({
 });
 
 function Index() {
+  const { data: publicSpaces } = useSpaces({ mode: 'public' });
   const spaces = useSelector(store, (state) => state.context.spaces);
   const [spaceName, setSpaceName] = useState('');
 
@@ -89,6 +90,8 @@ function Index() {
           Create space
         </Button>
       </div>
+
+      <h2 className="text-lg font-bold">Private Spaces</h2>
       <ul className="flex flex-col gap-2">
         {spaces.length === 0 && <div>No spaces</div>}
         {spaces.map((space) => {
@@ -106,6 +109,21 @@ function Index() {
         })}
       </ul>
 
+      <h2 className="text-lg font-bold">Public Spaces</h2>
+      <ul className="flex flex-col gap-2">
+        {publicSpaces?.map((space) => {
+          return (
+            <li key={space.id}>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{space.name}</CardTitle>
+                </CardHeader>
+              </Card>
+            </li>
+          );
+        })}
+      </ul>
+
       <div className="flex flex-col gap-2">
         <h2 className="text-lg font-bold">Account Inboxes</h2>
         <Button
diff --git a/packages/hypergraph-react/src/HypergraphAppContext.tsx b/packages/hypergraph-react/src/HypergraphAppContext.tsx
index b097f552..c3b6db44 100644
--- a/packages/hypergraph-react/src/HypergraphAppContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphAppContext.tsx
@@ -21,6 +21,7 @@ import {
   Utils,
   store,
 } from '@graphprotocol/hypergraph';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSelector as useSelectorStore } from '@xstate/store/react';
 import { Effect, Exit } from 'effect';
 import * as Schema from 'effect/Schema';
@@ -38,6 +39,8 @@ import type { Address } from 'viem';
 
 const decodeResponseMessage = Schema.decodeUnknownEither(Messages.ResponseMessage);
 
+const queryClient = new QueryClient();
+
 export type HypergraphAppCtx = {
   // auth related
   logout(): void;
@@ -1352,7 +1355,9 @@ export function HypergraphAppProvider({
         ensureSpaceInbox: ensureSpaceInboxForContext,
       }}
     >
-      <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      <QueryClientProvider client={queryClient}>
+        <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      </QueryClientProvider>
     </HypergraphAppContext.Provider>
   );
 }
diff --git a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
index 31bd70e7..a623e692 100644
--- a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
@@ -3,7 +3,6 @@
 import type { AnyDocumentId, DocHandle, Repo } from '@automerge/automerge-repo';
 import { useRepo } from '@automerge/automerge-repo-react-hooks';
 import { Entity, Utils } from '@graphprotocol/hypergraph';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Schema from 'effect/Schema';
 import { type ReactNode, createContext, useContext, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 
@@ -25,8 +24,6 @@ function useHypergraphSpaceInternal() {
   return context as HypergraphContext;
 }
 
-const queryClient = new QueryClient();
-
 export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {
   const repo = useRepo();
   const ref = useRef<HypergraphContext | undefined>(undefined);
@@ -44,11 +41,7 @@ export function HypergraphSpaceProvider({ space, children }: { space: string; ch
     };
   }
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <HypergraphReactContext.Provider value={current}>{children}</HypergraphReactContext.Provider>
-    </QueryClientProvider>
-  );
+  return <HypergraphReactContext.Provider value={current}>{children}</HypergraphReactContext.Provider>;
 }
 
 export function useCreateEntity<const S extends Entity.AnyNoContext>(type: S) {
diff --git a/packages/hypergraph-react/src/hooks/use-spaces.ts b/packages/hypergraph-react/src/hooks/use-spaces.ts
new file mode 100644
index 00000000..dd8a75c2
--- /dev/null
+++ b/packages/hypergraph-react/src/hooks/use-spaces.ts
@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+import { gql, request } from 'graphql-request';
+import { GEO_API_TESTNET_ENDPOINT } from '../internal/constants.js';
+
+const publicSpacesQueryDocument = gql`
+query Spaces($accountAddress: String!) {
+  spaces(filter: {
+      member: { is: $accountAddress }
+  }) {
+    id
+    spaceAddress
+    entity {
+      name
+    }
+  }
+}
+`;
+
+type PublicSpacesQueryResult = {
+  spaces: {
+    id: string;
+    spaceAddress: string;
+    entity: {
+      name: string;
+    };
+  }[];
+};
+
+export const useSpaces = (params: { mode: 'public' }) => {
+  return useQuery({
+    queryKey: ['hypergraph-spaces', params.mode],
+    queryFn: async () => {
+      const result = await request<PublicSpacesQueryResult>(GEO_API_TESTNET_ENDPOINT, publicSpacesQueryDocument, {
+        accountAddress: '0xBE0298aF8D440bEFA78E7e8A538D8ecBFF06bfC7',
+      });
+      return result?.spaces
+        ? result.spaces.map((space) => ({
+            id: space.id,
+            name: space.entity.name,
+            spaceAddress: space.spaceAddress,
+          }))
+        : [];
+    },
+  });
+};
diff --git a/packages/hypergraph-react/src/index.ts b/packages/hypergraph-react/src/index.ts
index 4f81d65a..bcbde17b 100644
--- a/packages/hypergraph-react/src/index.ts
+++ b/packages/hypergraph-react/src/index.ts
@@ -1,5 +1,6 @@
 export { PublishDiff } from './components/publish-diff/publish-diff.js';
 export { createWalletClient } from './create-wallet-client.js';
+export { useSpaces } from './hooks/use-spaces.js';
 export { useExternalAccountInbox } from './hooks/useExternalAccountInbox.js';
 export { useExternalSpaceInbox } from './hooks/useExternalSpaceInbox.js';
 export { useOwnAccountInbox } from './hooks/useOwnAccountInbox.js';

From 3cca8b360df4b5111b209041a3bc09d27c328302 Mon Sep 17 00:00:00 2001
From: Nik Graf <nik@nikgraf.com>
Date: Thu, 19 Jun 2025 15:14:24 +0200
Subject: [PATCH 2/2] allow to list public spaces

---
 apps/connect/src/routes/authenticate.tsx                  | 5 ++++-
 apps/events/src/routes/authenticate-success.tsx           | 1 +
 packages/hypergraph-react/src/hooks/use-spaces.ts         | 5 ++++-
 packages/hypergraph/src/connect/create-callback-params.ts | 1 +
 packages/hypergraph/src/connect/identity-encryption.ts    | 1 +
 packages/hypergraph/src/connect/parse-callback-params.ts  | 1 +
 packages/hypergraph/src/connect/types.ts                  | 1 +
 packages/hypergraph/src/identity/auth-storage.ts          | 5 +++++
 packages/hypergraph/src/store.ts                          | 3 ++-
 packages/hypergraph/src/types.ts                          | 1 +
 10 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/connect/src/routes/authenticate.tsx b/apps/connect/src/routes/authenticate.tsx
index 337eaf5c..358146e9 100644
--- a/apps/connect/src/routes/authenticate.tsx
+++ b/apps/connect/src/routes/authenticate.tsx
@@ -282,10 +282,11 @@ function AuthenticateComponent() {
         nonce: appInfo.appNonce,
         ephemeralPublicKey: appInfo.ephemeralEncryptionPublicKey,
         appIdentityAddress: appIdentity.address,
+        appIdentityAddressPrivateKey: appIdentity.addressPrivateKey,
+        accountAddress: accountAddress,
         encryptionPrivateKey: appIdentity.encryptionPrivateKey,
         signaturePrivateKey: appIdentity.signaturePrivateKey,
         signaturePublicKey: appIdentity.signaturePublicKey,
-        appIdentityAddressPrivateKey: appIdentity.addressPrivateKey,
         encryptionPublicKey: appIdentity.encryptionPublicKey,
         spaces: spacesData?.map((space) => ({ id: space.id })) ?? [],
         expiry: appInfo.expiry,
@@ -364,6 +365,7 @@ function AuthenticateComponent() {
         appIdentity: {
           address: newAppIdentity.address,
           addressPrivateKey: newAppIdentity.addressPrivateKey,
+          accountAddress,
           encryptionPrivateKey: keys.encryptionPrivateKey,
           signaturePrivateKey: keys.signaturePrivateKey,
           encryptionPublicKey: newAppIdentity.encryptionPublicKey,
@@ -420,6 +422,7 @@ function AuthenticateComponent() {
       appIdentity: {
         address: decryptedIdentity.address,
         addressPrivateKey: decryptedIdentity.addressPrivateKey,
+        accountAddress: decryptedIdentity.accountAddress,
         encryptionPrivateKey: decryptedIdentity.encryptionPrivateKey,
         signaturePrivateKey: decryptedIdentity.signaturePrivateKey,
         encryptionPublicKey: decryptedIdentity.encryptionPublicKey,
diff --git a/apps/events/src/routes/authenticate-success.tsx b/apps/events/src/routes/authenticate-success.tsx
index f5ab5e22..674a5d07 100644
--- a/apps/events/src/routes/authenticate-success.tsx
+++ b/apps/events/src/routes/authenticate-success.tsx
@@ -44,6 +44,7 @@ function RouteComponent() {
       setIdentity({
         address: parsedAuthParams.appIdentityAddress,
         addressPrivateKey: parsedAuthParams.appIdentityAddressPrivateKey,
+        accountAddress: parsedAuthParams.accountAddress,
         signaturePublicKey: parsedAuthParams.signaturePublicKey,
         signaturePrivateKey: parsedAuthParams.signaturePrivateKey,
         encryptionPublicKey: parsedAuthParams.encryptionPublicKey,
diff --git a/packages/hypergraph-react/src/hooks/use-spaces.ts b/packages/hypergraph-react/src/hooks/use-spaces.ts
index dd8a75c2..24860138 100644
--- a/packages/hypergraph-react/src/hooks/use-spaces.ts
+++ b/packages/hypergraph-react/src/hooks/use-spaces.ts
@@ -1,4 +1,6 @@
+import { store } from '@graphprotocol/hypergraph/store';
 import { useQuery } from '@tanstack/react-query';
+import { useSelector } from '@xstate/store/react';
 import { gql, request } from 'graphql-request';
 import { GEO_API_TESTNET_ENDPOINT } from '../internal/constants.js';
 
@@ -27,11 +29,12 @@ type PublicSpacesQueryResult = {
 };
 
 export const useSpaces = (params: { mode: 'public' }) => {
+  const accountAddress = useSelector(store, (state) => state.context.identity?.accountAddress);
   return useQuery({
     queryKey: ['hypergraph-spaces', params.mode],
     queryFn: async () => {
       const result = await request<PublicSpacesQueryResult>(GEO_API_TESTNET_ENDPOINT, publicSpacesQueryDocument, {
-        accountAddress: '0xBE0298aF8D440bEFA78E7e8A538D8ecBFF06bfC7',
+        accountAddress,
       });
       return result?.spaces
         ? result.spaces.map((space) => ({
diff --git a/packages/hypergraph/src/connect/create-callback-params.ts b/packages/hypergraph/src/connect/create-callback-params.ts
index 02f17607..2e6bf48f 100644
--- a/packages/hypergraph/src/connect/create-callback-params.ts
+++ b/packages/hypergraph/src/connect/create-callback-params.ts
@@ -8,6 +8,7 @@ type CreateAuthUrlParams = {
   appId: string;
   appIdentityAddress: string;
   appIdentityAddressPrivateKey: string;
+  accountAddress: string;
   signaturePublicKey: string;
   signaturePrivateKey: string;
   encryptionPublicKey: string;
diff --git a/packages/hypergraph/src/connect/identity-encryption.ts b/packages/hypergraph/src/connect/identity-encryption.ts
index 0f332182..7b5d77de 100644
--- a/packages/hypergraph/src/connect/identity-encryption.ts
+++ b/packages/hypergraph/src/connect/identity-encryption.ts
@@ -228,5 +228,6 @@ export const decryptAppIdentity = async (
     signaturePrivateKey,
     address: appIdentityAddress,
     addressPrivateKey: appIdentityAddressPrivateKey,
+    accountAddress,
   };
 };
diff --git a/packages/hypergraph/src/connect/parse-callback-params.ts b/packages/hypergraph/src/connect/parse-callback-params.ts
index 2bad9c08..4e978eeb 100644
--- a/packages/hypergraph/src/connect/parse-callback-params.ts
+++ b/packages/hypergraph/src/connect/parse-callback-params.ts
@@ -52,6 +52,7 @@ export const parseCallbackParams = ({
     return Effect.succeed({
       appIdentityAddress: data.appIdentityAddress,
       appIdentityAddressPrivateKey: data.appIdentityAddressPrivateKey,
+      accountAddress: data.accountAddress,
       signaturePublicKey: data.signaturePublicKey,
       signaturePrivateKey: data.signaturePrivateKey,
       encryptionPublicKey: data.encryptionPublicKey,
diff --git a/packages/hypergraph/src/connect/types.ts b/packages/hypergraph/src/connect/types.ts
index abe3b174..3216c2be 100644
--- a/packages/hypergraph/src/connect/types.ts
+++ b/packages/hypergraph/src/connect/types.ts
@@ -60,6 +60,7 @@ export type PrivateAppIdentity = IdentityKeys & {
   addressPrivateKey: string;
   sessionToken: string;
   sessionTokenExpires: Date;
+  accountAddress: string;
 };
 
 export class InvalidIdentityError {
diff --git a/packages/hypergraph/src/identity/auth-storage.ts b/packages/hypergraph/src/identity/auth-storage.ts
index 3d939148..bdcb94a1 100644
--- a/packages/hypergraph/src/identity/auth-storage.ts
+++ b/packages/hypergraph/src/identity/auth-storage.ts
@@ -4,6 +4,7 @@ import type { Storage } from './types.js';
 export const storeIdentity = (storage: Storage, identity: PrivateAppIdentity) => {
   storage.setItem('hypergraph:app-identity-address', identity.address);
   storage.setItem('hypergraph:app-identity-address-private-key', identity.addressPrivateKey);
+  storage.setItem('hypergraph:app-identity-account-address', identity.accountAddress);
   storage.setItem('hypergraph:signature-public-key', identity.signaturePublicKey);
   storage.setItem('hypergraph:signature-private-key', identity.signaturePrivateKey);
   storage.setItem('hypergraph:encryption-public-key', identity.encryptionPublicKey);
@@ -15,6 +16,7 @@ export const storeIdentity = (storage: Storage, identity: PrivateAppIdentity) =>
 export const loadIdentity = (storage: Storage): PrivateAppIdentity | null => {
   const address = storage.getItem('hypergraph:app-identity-address');
   const addressPrivateKey = storage.getItem('hypergraph:app-identity-address-private-key');
+  const accountAddress = storage.getItem('hypergraph:app-identity-account-address');
   const signaturePublicKey = storage.getItem('hypergraph:signature-public-key');
   const signaturePrivateKey = storage.getItem('hypergraph:signature-private-key');
   const encryptionPublicKey = storage.getItem('hypergraph:encryption-public-key');
@@ -24,6 +26,7 @@ export const loadIdentity = (storage: Storage): PrivateAppIdentity | null => {
   if (
     !address ||
     !addressPrivateKey ||
+    !accountAddress ||
     !signaturePublicKey ||
     !signaturePrivateKey ||
     !encryptionPublicKey ||
@@ -36,6 +39,7 @@ export const loadIdentity = (storage: Storage): PrivateAppIdentity | null => {
   return {
     address,
     addressPrivateKey,
+    accountAddress,
     signaturePublicKey,
     signaturePrivateKey,
     encryptionPublicKey,
@@ -48,6 +52,7 @@ export const loadIdentity = (storage: Storage): PrivateAppIdentity | null => {
 export const wipeIdentity = (storage: Storage) => {
   storage.removeItem('hypergraph:app-identity-address');
   storage.removeItem('hypergraph:app-identity-address-private-key');
+  storage.removeItem('hypergraph:app-identity-account-address');
   storage.removeItem('hypergraph:signature-public-key');
   storage.removeItem('hypergraph:signature-private-key');
   storage.removeItem('hypergraph:encryption-public-key');
diff --git a/packages/hypergraph/src/store.ts b/packages/hypergraph/src/store.ts
index 358256f7..9a9be2c1 100644
--- a/packages/hypergraph/src/store.ts
+++ b/packages/hypergraph/src/store.ts
@@ -489,7 +489,8 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
       return {
         ...context,
         authenticated: true,
-        identity: event.identity,
+        // TODO: remove hard-coded account address and use the one from the identity
+        identity: { ...event.identity, accountAddress: '0xBE0298aF8D440bEFA78E7e8A538D8ecBFF06bfC7' },
       };
     },
     resetAuth: (context) => {
diff --git a/packages/hypergraph/src/types.ts b/packages/hypergraph/src/types.ts
index b367fe64..80f587a6 100644
--- a/packages/hypergraph/src/types.ts
+++ b/packages/hypergraph/src/types.ts
@@ -20,6 +20,7 @@ export type ConnectAuthPayload = Schema.Schema.Type<typeof ConnectAuthPayload>;
 export const ConnectCallbackResult = Schema.Struct({
   appIdentityAddress: Schema.String,
   appIdentityAddressPrivateKey: Schema.String,
+  accountAddress: Schema.String,
   signaturePublicKey: Schema.String,
   signaturePrivateKey: Schema.String,
   encryptionPublicKey: Schema.String,