use space name for spaces list

Author: nikgraf

apps/events/src/routes/index.tsx

@@ -75,6 +75,7 @@ function Index() {
       <div className="flex flex-row gap-2 justify-between items-center">
         <Input value={spaceName} onChange={(e) => setSpaceName(e.target.value)} />
         <Button
+          disabled={true} // disabled until we have delegation for creating a space
           onClick={async (event) => {
             event.preventDefault();
             // const smartAccountWalletClient = await getSmartAccountWalletClient();
@@ -96,7 +97,7 @@ function Index() {
               <Link to="/space/$spaceId" params={{ spaceId: space.id }}>
                 <Card>
                   <CardHeader>
-                    <CardTitle>{space.id}</CardTitle>
+                    <CardTitle>{space.name}</CardTitle>
                   </CardHeader>
                 </Card>
               </Link>

packages/hypergraph-react/src/HypergraphAppContext.tsx

@@ -373,6 +373,7 @@ export function HypergraphAppProvider({
               store.send({
                 type: 'setSpaceFromList',
                 spaceId: space.id,
+                name: space.name,
               });
             });
             break;

packages/hypergraph/src/messages/types.ts

@@ -277,6 +277,7 @@ export const ResponseListSpaces = Schema.Struct({
   spaces: Schema.Array(
     Schema.Struct({
       id: Schema.String,
+      name: Schema.String,
     }),
   ),
 });

packages/hypergraph/src/store.ts

@@ -42,6 +42,7 @@ export type AccountInboxStorageEntry = {
 
 export type SpaceStorageEntry = {
   id: string;
+  name: string;
   events: SpaceEvent[];
   state: SpaceState | undefined;
   keys: { id: string; key: string }[];
@@ -85,7 +86,7 @@ type StoreEvent =
   | { type: 'reset' }
   | { type: 'addUpdateInFlight'; updateId: string }
   | { type: 'removeUpdateInFlight'; updateId: string }
-  | { type: 'setSpaceFromList'; spaceId: string }
+  | { type: 'setSpaceFromList'; spaceId: string; name: string }
   | { type: 'applyEvent'; spaceId: string; event: SpaceEvent; state: SpaceState }
   | { type: 'updateConfirmed'; spaceId: string; clock: number }
   | { type: 'applyUpdate'; spaceId: string; firstUpdateClock: number; lastUpdateClock: number }
@@ -170,7 +171,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
         updatesInFlight: context.updatesInFlight.filter((id) => id !== event.updateId),
       };
     },
-    setSpaceFromList: (context, event: { spaceId: string }) => {
+    setSpaceFromList: (context, event: { spaceId: string; name: string }) => {
       if (!context.repo) {
         return context;
       }
@@ -188,6 +189,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
             if (existingSpace.id === event.spaceId) {
               const newSpace: SpaceStorageEntry = {
                 id: existingSpace.id,
+                name: existingSpace.name,
                 events: existingSpace.events ?? [],
                 state: existingSpace.state,
                 keys: existingSpace.keys ?? [],
@@ -210,6 +212,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
           ...context.spaces,
           {
             id: event.spaceId,
+            name: event.name,
             events: [],
             state: undefined,
             keys: [],