connect cleanup

apps/connect/src/components/create-space.tsx

@@ -92,11 +92,14 @@ export function CreateSpace() {
   };
 
   return (
-    <>
-      <Input value={spaceName} onChange={(e) => setSpaceName(e.target.value)} />
-      <Button className="home-button" onClick={createSpace} disabled={isLoading}>
-        Create Space {isLoading ? <Spinner /> : null}
-      </Button>
-    </>
+    <div className="flex flex-col gap-2">
+      <span className="text-xs text-gray-500">Create a new space</span>
+      <div className="flex flex-row gap-2 items-center">
+        <Input value={spaceName} onChange={(e) => setSpaceName(e.target.value)} />
+        <Button className="home-button" onClick={createSpace} disabled={isLoading}>
+          Create Space {isLoading ? <Spinner /> : null}
+        </Button>
+      </div>
+    </div>
   );
 }

apps/connect/src/components/spaces.tsx

@@ -1,53 +1,30 @@
-import { useIdentityToken } from '@privy-io/react-auth';
-import { useQuery } from '@tanstack/react-query';
+import { useSpaces } from '@/hooks/use-spaces';
 
 export function Spaces() {
-  const { identityToken } = useIdentityToken();
-
-  const { isPending, error, data } = useQuery<{
-    spaces: {
-      id: string;
-      name: string;
-      appIdentities: { address: string; appId: string }[];
-      keyBoxes: {
-        id: string;
-        ciphertext: string;
-        nonce: string;
-        authorPublicKey: string;
-      }[];
-    }[];
-  }>({
-    queryKey: ['spaces'],
-    queryFn: async () => {
-      if (!identityToken) return;
-      const response = await fetch(`${import.meta.env.VITE_HYPERGRAPH_SYNC_SERVER_ORIGIN}/connect/spaces`, {
-        headers: { 'privy-id-token': identityToken },
-      });
-      return await response.json();
-    },
-  });
+  const { isPending, error, data } = useSpaces();
 
   if (isPending) return 'Loading spaces …';
 
   if (error) return `An error has occurred: ${error.message}`;
 
   return (
-    <>
-      {data.spaces.map((space) => (
-        <div key={space.id}>
-          <h2>
-            {space.name} ({space.id})
-            <br />
-            ---------
-            <br />
-            {space.appIdentities.map((appIdentity) => (
-              <div key={appIdentity.address}>
-                {appIdentity.appId} ({appIdentity.address})
-              </div>
-            ))}
-          </h2>
-        </div>
-      ))}
-    </>
+    <div>
+      <h2 className="font-bold mb-2 mt-2">Spaces</h2>
+      <ul className="space-y-4">
+        {data.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>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }

apps/connect/src/hooks/use-spaces.ts

@@ -0,0 +1,55 @@
+import { getAppInfoByIds } from '@/lib/get-app-info-by-ids';
+import { useIdentityToken } from '@privy-io/react-auth';
+import { useQuery } from '@tanstack/react-query';
+
+type SpaceData = {
+  id: string;
+  name: string;
+  appIdentities: { address: string; appId: string }[];
+  apps: { name: string; id: string }[];
+  keyBoxes: {
+    id: string;
+    ciphertext: string;
+    nonce: string;
+    authorPublicKey: string;
+  }[];
+};
+
+export const useSpaces = () => {
+  const { identityToken } = useIdentityToken();
+
+  return useQuery<SpaceData[]>({
+    queryKey: ['spaces'],
+    queryFn: async () => {
+      if (!identityToken) return [];
+      const response = await fetch(`${import.meta.env.VITE_HYPERGRAPH_SYNC_SERVER_ORIGIN}/connect/spaces`, {
+        headers: { 'privy-id-token': identityToken },
+      });
+      const data = await response.json();
+      const appIds = new Set<string>();
+      for (const space of data.spaces) {
+        for (const appIdentity of space.appIdentities) {
+          appIds.add(appIdentity.appId);
+        }
+      }
+      const appInfo = await getAppInfoByIds(Array.from(appIds));
+      const spaces = data.spaces.map((space: SpaceData) => {
+        const spaceAppIds = new Set<string>();
+        for (const appIdentity of space.appIdentities) {
+          spaceAppIds.add(appIdentity.appId);
+        }
+        return {
+          ...space,
+          apps: Array.from(spaceAppIds).map((appId) => {
+            return {
+              // @ts-expect-error - need to improve appInfo typing
+              name: appInfo[appId]?.name ?? 'Unknown',
+              id: appId,
+            };
+          }),
+        };
+      });
+      return spaces;
+    },
+  });
+};

apps/connect/src/lib/get-app-info-by-ids.ts

@@ -0,0 +1,11 @@
+const apps = {
+  '93bb8907-085a-4a0e-83dd-62b0dc98e793': {
+    name: 'Todos',
+  },
+};
+
+export const getAppInfoByIds = async (appIds: string[]) => {
+  // sleep for 1 second
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return apps;
+};