select private and public spaces

pcarranzav · pcarranzav · commit 7eb42f9b150f · 2025-06-23T10:32:36.000-03:00
diff --git a/apps/connect/package.json b/apps/connect/package.json
@@ -21,6 +21,7 @@
     "clsx": "^2.1.1",
     "effect": "^3.16.3",
     "framer-motion": "^12.10.1",
+    "graphql-request": "^7.2.0",
     "lucide-react": "^0.508.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/apps/connect/src/components/spaces.tsx b/apps/connect/src/components/spaces.tsx
@@ -1,7 +1,7 @@
-import { useSpaces } from '@/hooks/use-spaces';
+import { usePrivateSpaces } from '@/hooks/use-private-spaces';
 
 export function Spaces() {
-  const { isPending, error, data } = useSpaces();
+  const { isPending, error, data } = usePrivateSpaces();
 
   return (
     <div>
diff --git a/apps/connect/src/hooks/use-private-spaces.ts b/apps/connect/src/hooks/use-private-spaces.ts
@@ -1,7 +1,7 @@
 import { getAppInfoByIds } from '@/lib/get-app-info-by-ids';
 import { Connect } from '@graphprotocol/hypergraph';
 import { useIdentityToken } from '@privy-io/react-auth';
-import { useQuery } from '@tanstack/react-query';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 
 type SpaceData = {
   id: string;
@@ -16,11 +16,11 @@ type SpaceData = {
   }[];
 };
 
-export const useSpaces = () => {
+export const usePrivateSpaces = (): UseQueryResult<SpaceData[], Error> => {
   const { identityToken } = useIdentityToken();
 
   return useQuery<SpaceData[]>({
-    queryKey: ['spaces'],
+    queryKey: ['private-spaces'],
     queryFn: async () => {
       if (!identityToken) return [];
       const accountAddress = Connect.loadAccountAddress(localStorage);
diff --git a/apps/connect/src/hooks/use-public-spaces.ts b/apps/connect/src/hooks/use-public-spaces.ts
@@ -0,0 +1,63 @@
+import { Connect } from '@graphprotocol/hypergraph';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
+import { gql, request } from 'graphql-request';
+
+const publicSpacesQueryDocument = gql`
+query Spaces($accountAddress: String!) {
+  spaces(filter: {
+      member: { is: $accountAddress }
+  }) {
+    id
+    type
+    mainVotingAddress
+    personalAddress
+    entity {
+      name
+    }
+  }
+}
+`;
+
+type SpaceQueryResult = {
+  id: string;
+  type: string;
+  mainVotingAddress: string;
+  personalAddress: string;
+  entity: {
+    name: string;
+  };
+};
+
+type PublicSpacesQueryResult = {
+  spaces: SpaceQueryResult[];
+};
+
+export type PublicSpaceData = {
+  id: string;
+  type: string;
+  mainVotingAddress: string;
+  personalAddress: string;
+  name: string;
+};
+
+export const usePublicSpaces = (url: string): UseQueryResult<PublicSpaceData[], Error> => {
+  return useQuery<PublicSpaceData[]>({
+    queryKey: ['public-spaces'],
+    queryFn: async () => {
+      const accountAddress = Connect.loadAccountAddress(localStorage);
+      if (!accountAddress) return [];
+      const result = await request<PublicSpacesQueryResult>(url, publicSpacesQueryDocument, {
+        accountAddress,
+      });
+      return result?.spaces
+        ? result.spaces.map((space: SpaceQueryResult) => ({
+            id: space.id,
+            name: space.entity.name,
+            type: space.type,
+            mainVotingAddress: space.mainVotingAddress,
+            personalAddress: space.personalAddress,
+          }))
+        : [];
+    },
+  });
+};
diff --git a/apps/connect/src/routes/authenticate.tsx b/apps/connect/src/routes/authenticate.tsx
@@ -1,6 +1,7 @@
 import { CreateSpace } from '@/components/create-space';
 import { Button } from '@/components/ui/button';
-import { useSpaces } from '@/hooks/use-spaces';
+import { usePrivateSpaces } from '@/hooks/use-private-spaces';
+import { type PublicSpaceData, usePublicSpaces } from '@/hooks/use-public-spaces';
 import { Connect, type Identity, Key, type Messages, StoreConnect, Utils } from '@graphprotocol/hypergraph';
 import { GEOGENESIS, GEO_TESTNET } from '@graphprotocol/hypergraph/connect/smart-account';
 import { useIdentityToken, usePrivy, useWallets } from '@privy-io/react-auth';
@@ -137,7 +138,31 @@ function AuthenticateComponent() {
 
   const state = useSelector(componentStore, (state) => state.context);
 
-  const { isPending, error: spacesError, data: spacesData } = useSpaces();
+  const { isPending: privateSpacesPending, error: privateSpacesError, data: privateSpacesData } = usePrivateSpaces();
+  const {
+    isPending: publicSpacesPending,
+    error: publicSpacesError,
+    data: publicSpacesData,
+  } = usePublicSpaces(import.meta.env.VITE_HYPERGRAPH_API_URL);
+
+  const selectedPrivateSpaces = new Set<string>();
+  const selectedPublicSpaces = new Set<string>();
+
+  const handlePrivateSpaceToggle = (spaceId: string, checked: boolean) => {
+    if (checked) {
+      selectedPrivateSpaces.add(spaceId);
+    } else {
+      selectedPrivateSpaces.delete(spaceId);
+    }
+  };
+
+  const handlePublicSpaceToggle = (spaceId: string, checked: boolean) => {
+    if (checked) {
+      selectedPublicSpaces.add(spaceId);
+    } else {
+      selectedPublicSpaces.delete(spaceId);
+    }
+  };
 
   useEffect(() => {
     const run = async () => {
@@ -217,55 +242,57 @@ function AuthenticateComponent() {
       return;
     }
 
-    const spacesInput = spacesData
-      ? spacesData.map((space) => {
-          // TODO: currently without checking we assume all keyboxes exists and we don't create any - we should check if the keyboxes exist and create them if they don't
-          if (space.appIdentities.some((spaceAppIdentity) => spaceAppIdentity.address === appIdentity.address))
-            return {
-              id: space.id,
-              keyBoxes: [],
-            };
-
-          const spaceKeys = space.keyBoxes.map((keyboxData) => {
-            const key = Key.decryptKey({
-              privateKey: Utils.hexToBytes(keys.encryptionPrivateKey),
-              publicKey: Utils.hexToBytes(keyboxData.authorPublicKey),
-              keyBoxCiphertext: Utils.hexToBytes(keyboxData.ciphertext),
-              keyBoxNonce: Utils.hexToBytes(keyboxData.nonce),
+    const privateSpacesInput = privateSpacesData
+      ? privateSpacesData
+          .filter((space) => selectedPrivateSpaces.has(space.id))
+          .map((space) => {
+            // TODO: currently without checking we assume all keyboxes exists and we don't create any - we should check if the keyboxes exist and create them if they don't
+            if (space.appIdentities.some((spaceAppIdentity) => spaceAppIdentity.address === appIdentity.address))
+              return {
+                id: space.id,
+                keyBoxes: [],
+              };
+
+            const spaceKeys = space.keyBoxes.map((keyboxData) => {
+              const key = Key.decryptKey({
+                privateKey: Utils.hexToBytes(keys.encryptionPrivateKey),
+                publicKey: Utils.hexToBytes(keyboxData.authorPublicKey),
+                keyBoxCiphertext: Utils.hexToBytes(keyboxData.ciphertext),
+                keyBoxNonce: Utils.hexToBytes(keyboxData.nonce),
+              });
+              return {
+                id: keyboxData.id,
+                key: key,
+              };
             });
-            return {
-              id: keyboxData.id,
-              key: key,
-            };
-          });
 
-          const keyBoxes = spaceKeys.map((keyData) => {
-            const keyBox = Key.encryptKey({
-              privateKey: Utils.hexToBytes(keys.encryptionPrivateKey),
-              publicKey: Utils.hexToBytes(appIdentity.encryptionPublicKey),
-              key: keyData.key,
+            const keyBoxes = spaceKeys.map((keyData) => {
+              const keyBox = Key.encryptKey({
+                privateKey: Utils.hexToBytes(keys.encryptionPrivateKey),
+                publicKey: Utils.hexToBytes(appIdentity.encryptionPublicKey),
+                key: keyData.key,
+              });
+              return {
+                id: keyData.id,
+                ciphertext: Utils.bytesToHex(keyBox.keyBoxCiphertext),
+                nonce: Utils.bytesToHex(keyBox.keyBoxNonce),
+                authorPublicKey: appIdentity.encryptionPublicKey,
+                accountAddress: accountAddress,
+              };
             });
+
             return {
-              id: keyData.id,
-              ciphertext: Utils.bytesToHex(keyBox.keyBoxCiphertext),
-              nonce: Utils.bytesToHex(keyBox.keyBoxNonce),
-              authorPublicKey: appIdentity.encryptionPublicKey,
-              accountAddress: accountAddress,
+              id: space.id,
+              keyBoxes,
             };
-          });
-
-          return {
-            id: space.id,
-            keyBoxes,
-          };
-        })
+          })
       : [];
 
     const message: Messages.RequestConnectAddAppIdentityToSpaces = {
       type: 'connect-add-app-identity-to-spaces',
       appIdentityAddress: appIdentity.address,
       accountAddress,
-      spacesInput,
+      spacesInput: privateSpacesInput,
     };
 
     // TODO add loading indicator by updating the state
@@ -293,7 +320,8 @@ function AuthenticateComponent() {
         signaturePrivateKey: appIdentity.signaturePrivateKey,
         signaturePublicKey: appIdentity.signaturePublicKey,
         encryptionPublicKey: appIdentity.encryptionPublicKey,
-        spaces: spacesData?.map((space) => ({ id: space.id })) ?? [],
+        privateSpaces: privateSpacesInput?.map((space) => ({ id: space.id })) ?? [],
+        publicSpaces: publicSpacesData?.map((space) => ({ id: space.id })) ?? [],
         expiry: appInfo.expiry,
         sessionToken: appIdentity.sessionToken,
         sessionTokenExpires: appIdentity.sessionTokenExpires.getTime(),
@@ -336,7 +364,8 @@ function AuthenticateComponent() {
       };
 
       const newAppIdentity = Connect.createAppIdentity();
-      // TODO: add spaces and additional actions
+
+      // TODO: add additional actions (must be passed from the app)
       const permissionId = await Connect.createSmartSession(
         walletClient,
         accountAddress,
@@ -345,7 +374,16 @@ function AuthenticateComponent() {
         import.meta.env.VITE_HYPERGRAPH_RPC_URL,
         {
           allowCreateSpace: true,
-          spaces: [],
+          spaces:
+            publicSpacesData
+              ?.filter((space) => selectedPublicSpaces.has(space.id))
+              .map((space) => ({
+                address:
+                  space.type === 'personal'
+                    ? (space.personalAddress as `0x${string}`)
+                    : (space.mainVotingAddress as `0x${string}`),
+                type: space.type as 'personal' | 'public',
+              })) ?? [],
           additionalActions: [],
         },
       );
@@ -472,20 +510,53 @@ function AuthenticateComponent() {
             </div>
             <h2 className="font-bold mb-2 mt-2">Spaces</h2>
             <ul className="space-y-4">
-              {isPending && <p>Loading spaces …</p>}
-              {spacesError && <p>An error has occurred loading spaces: {spacesError.message}</p>}
-              {!isPending && !spacesError && spacesData?.length === 0 && <p>No spaces found</p>}
-              {spacesData?.map((space) => (
-                <li key={space.id}>
-                  <p>{space.name}</p>
-                  <p className="text-xs text-gray-500 mt-2 mb-1">Apps with access to this space</p>
-                  <ul>
-                    {space.apps.map((app) => (
-                      <li key={app.id} className="text-sm">
-                        {app.name}
-                      </li>
-                    ))}
-                  </ul>
+              {privateSpacesPending && <p>Loading private spaces …</p>}
+              {privateSpacesError && <p>An error has occurred loading private spaces: {privateSpacesError.message}</p>}
+              {!privateSpacesPending && !privateSpacesError && privateSpacesData?.length === 0 && (
+                <p>No private spaces found</p>
+              )}
+              {privateSpacesData?.map((space) => (
+                <li key={space.id} className="flex items-center gap-3 p-3 border rounded-lg">
+                  <input
+                    type="checkbox"
+                    id={`private-${space.id}`}
+                    checked={selectedPrivateSpaces.has(space.id)}
+                    onChange={(e) => handlePrivateSpaceToggle(space.id, e.target.checked)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
+                  />
+                  <label htmlFor={`private-${space.id}`} className="flex-1 cursor-pointer">
+                    <p className="font-medium">{space.name}</p>
+                    <p className="text-xs text-gray-500 mt-2 mb-1">Apps with access to this space</p>
+                    <ul>
+                      {space.apps.map((app) => (
+                        <li key={app.id} className="text-sm">
+                          {app.name}
+                        </li>
+                      ))}
+                    </ul>
+                  </label>
+                </li>
+              ))}
+            </ul>
+            <h2 className="font-bold mb-2 mt-2">Public Spaces</h2>
+            <ul className="space-y-4">
+              {publicSpacesPending && <p>Loading public spaces …</p>}
+              {publicSpacesError && <p>An error has occurred loading public spaces: {publicSpacesError.message}</p>}
+              {!publicSpacesPending && !publicSpacesError && publicSpacesData?.length === 0 && (
+                <p>No public spaces found</p>
+              )}
+              {publicSpacesData?.map((space: PublicSpaceData) => (
+                <li key={space.id} className="flex items-center gap-3 p-3 border rounded-lg">
+                  <input
+                    type="checkbox"
+                    id={`public-${space.id}`}
+                    checked={selectedPublicSpaces.has(space.id)}
+                    onChange={(e) => handlePublicSpaceToggle(space.id, e.target.checked)}
+                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
+                  />
+                  <label htmlFor={`public-${space.id}`} className="flex-1 cursor-pointer">
+                    <p className="font-medium">{space.name}</p>
+                  </label>
                 </li>
               ))}
             </ul>
diff --git a/packages/hypergraph-react/src/internal/constants.ts b/packages/hypergraph-react/src/internal/constants.ts
@@ -1,2 +1,2 @@
-export const GEO_API_MAINNET_ENDPOINT = 'https://hypergraph-v2.up.railway.app//graphql';
+export const GEO_API_MAINNET_ENDPOINT = 'https://hypergraph-v2.up.railway.app/graphql';
 export const GEO_API_TESTNET_ENDPOINT = 'https://hypergraph-v2-testnet.up.railway.app/graphql';
diff --git a/packages/hypergraph/src/connect/create-callback-params.ts b/packages/hypergraph/src/connect/create-callback-params.ts
@@ -16,7 +16,8 @@ type CreateAuthUrlParams = {
   encryptionPrivateKey: string;
   sessionToken: string;
   sessionTokenExpires: number;
-  spaces: { id: string }[];
+  privateSpaces: { id: string }[];
+  publicSpaces: { id: string }[];
 };
 
 export const createCallbackParams = ({ nonce, ephemeralPublicKey, ...rest }: CreateAuthUrlParams) => {
diff --git a/packages/hypergraph/src/connect/parse-callback-params.ts b/packages/hypergraph/src/connect/parse-callback-params.ts
@@ -60,7 +60,8 @@ export const parseCallbackParams = ({
       encryptionPrivateKey: data.encryptionPrivateKey,
       sessionToken: data.sessionToken,
       sessionTokenExpires: new Date(data.sessionTokenExpires),
-      spaces: data.spaces,
+      privateSpaces: data.privateSpaces,
+      publicSpaces: data.publicSpaces,
     });
   } catch (error) {
     console.error(error);
diff --git a/packages/hypergraph/src/types.ts b/packages/hypergraph/src/types.ts
@@ -28,7 +28,8 @@ export const ConnectCallbackResult = Schema.Struct({
   encryptionPrivateKey: Schema.String,
   sessionToken: Schema.String,
   sessionTokenExpires: Schema.Date,
-  spaces: Schema.Array(Schema.Struct({ id: Schema.String })),
+  privateSpaces: Schema.Array(Schema.Struct({ id: Schema.String })),
+  publicSpaces: Schema.Array(Schema.Struct({ id: Schema.String })),
 });
 
 export type ConnectCallbackResult = Schema.Schema.Type<typeof ConnectCallbackResult>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-export const GEO_API_MAINNET_ENDPOINT = 'https://hypergraph-v2.up.railway.app//graphql';`
	`1`	`+export const GEO_API_MAINNET_ENDPOINT = 'https://hypergraph-v2.up.railway.app/graphql';`
`2`	`2`	`export const GEO_API_TESTNET_ENDPOINT = 'https://hypergraph-v2-testnet.up.railway.app/graphql';`