listing public spaces (#235)

Author: nikgraf

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,

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,

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

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>
   );
 }

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) {

packages/hypergraph-react/src/hooks/use-spaces.ts

@@ -0,0 +1,48 @@
+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';
+
+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' }) => {
+  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,
+      });
+      return result?.spaces
+        ? result.spaces.map((space) => ({
+            id: space.id,
+            name: space.entity.name,
+            spaceAddress: space.spaceAddress,
+          }))
+        : [];
+    },
+  });
+};

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';

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;

packages/hypergraph/src/connect/identity-encryption.ts

@@ -228,5 +228,6 @@ export const decryptAppIdentity = async (
     signaturePrivateKey,
     address: appIdentityAddress,
     addressPrivateKey: appIdentityAddressPrivateKey,
+    accountAddress,
   };
 };

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,