use space name for spaces list (#234)

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>

apps/server/src/handlers/getSpace.ts

@@ -65,6 +65,7 @@ export const getSpace = async ({ spaceId, accountAddress }: Params) => {
 
   return {
     id: space.id,
+    name: space.name,
     events: space.events.map((wrapper) => JSON.parse(wrapper.event)),
     keyBoxes,
     inboxes: space.inboxes.map((inbox) => ({

packages/hypergraph-react/src/HypergraphAppContext.tsx

@@ -380,6 +380,7 @@ export function HypergraphAppProvider({
               store.send({
                 type: 'setSpaceFromList',
                 spaceId: space.id,
+                name: space.name,
               });
             });
             break;
@@ -432,6 +433,7 @@ export function HypergraphAppProvider({
 
             store.send({
               type: 'setSpace',
+              name: response.name,
               spaceId: response.id,
               updates: response.updates as Messages.Updates,
               events: response.events as Array<SpaceEvents.SpaceEvent>,

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,
     }),
   ),
 });
@@ -347,6 +348,7 @@ export type ResponseAccountInbox = Schema.Schema.Type<typeof ResponseAccountInbo
 export const ResponseSpace = Schema.Struct({
   type: Schema.Literal('space'),
   id: Schema.String,
+  name: Schema.String,
   events: Schema.Array(SpaceEvent),
   keyBoxes: Schema.Array(KeyBoxWithKeyId),
   updates: Schema.optional(Updates),

packages/hypergraph/src/store-connect.ts

@@ -127,6 +127,7 @@ type StoreEvent =
   | {
       type: 'setSpace';
       spaceId: string;
+      name: string;
       updates?: Updates;
       events: SpaceEvent[];
       inboxes?: SpaceInboxStorageEntry[];

packages/hypergraph/src/store.ts

@@ -43,6 +43,7 @@ export type AccountInboxStorageEntry = {
 
 export type SpaceStorageEntry = {
   id: string;
+  name: string;
   events: SpaceEvent[];
   state: SpaceState | undefined;
   keys: { id: string; key: string }[];
@@ -89,7 +90,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 }
@@ -126,6 +127,7 @@ type StoreEvent =
   | {
       type: 'setSpace';
       spaceId: string;
+      name: string;
       updates?: Updates;
       events: SpaceEvent[];
       inboxes?: SpaceInboxStorageEntry[];
@@ -180,7 +182,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;
       }
@@ -198,6 +200,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 ?? [],
@@ -220,6 +223,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
           ...context.spaces,
           {
             id: event.spaceId,
+            name: event.name,
             events: [],
             state: undefined,
             keys: [],
@@ -408,6 +412,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
       context,
       event: {
         spaceId: string;
+        name: string;
         updates?: Updates;
         inboxes?: SpaceInboxStorageEntry[];
         events: SpaceEvent[];
@@ -425,6 +430,7 @@ export const store: Store<StoreContext, StoreEvent, GenericEventObject> = create
         result.handle.doneLoading();
 
         const newSpace: SpaceStorageEntry = {
+          name: event.name,
           id: event.spaceId,
           events: event.events,
           state: event.spaceState,