Cleanup

apps/events/package.json

@@ -20,6 +20,7 @@
     "@automerge/automerge": "^v2.2.9-alpha.3",
     "@automerge/automerge-repo": "^2.0.0-alpha.14",
     "@automerge/automerge-repo-react-hooks": "^2.0.0-alpha.14",
+    "@graphprotocol/graph-framework": "workspace:*",
     "@noble/hashes": "^1.5.0",
     "@privy-io/react-auth": "^1.88.4",
     "@radix-ui/react-avatar": "^1.1.1",
@@ -28,12 +29,10 @@
     "@tanstack/react-router": "^1.62.1",
     "@xmtp/react-sdk": "^9.0.0",
     "@xmtp/xmtp-js": "^13.0.0",
-    "@xstate/store": "^2.6.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "effect": "^3.10.19",
     "ethers": "^6.13.3",
-    "@graphprotocol/graph-framework": "workspace:*",
     "isomorphic-ws": "^5.0.0",
     "lucide-react": "^0.441.0",
     "react": "^18.3.1",

apps/events/src/routes/playground.tsx

@@ -1,9 +1,8 @@
 import { RepoContext } from '@automerge/automerge-repo-react-hooks';
 import { createFileRoute } from '@tanstack/react-router';
-import { useSelector } from '@xstate/store/react';
 import { useState } from 'react';
 
-import { GraphFramework, store, useGraphFramework } from '@graphprotocol/graph-framework';
+import { GraphFramework, store, useGraphFramework, useSelector } from '@graphprotocol/graph-framework';
 
 import { AutomergeApp } from '@/components/automerge-app';
 import { DebugInvitations } from '@/components/debug-invitations';

apps/events/tailwind.config.js

@@ -1,3 +1,5 @@
+import tailwindcssAnimate from 'tailwindcss-animate';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['class'],
@@ -53,5 +55,5 @@ export default {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [tailwindcssAnimate],
 };

packages/graph-framework/src/core.tsx

@@ -2,6 +2,7 @@ import * as automerge from '@automerge/automerge';
 import { uuid } from '@automerge/automerge';
 import { type AutomergeUrl, type DocHandle, Repo } from '@automerge/automerge-repo';
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils';
+import { useSelector as useSelectorStore } from '@xstate/store/react';
 import { Effect, Exit } from 'effect';
 import * as Schema from 'effect/Schema';
 import { createContext, useContext, useEffect, useState } from 'react';
@@ -23,7 +24,6 @@ import type { SpaceEvent, SpaceState } from '@graph-framework/space-events';
 import { acceptInvitation, applyEvent, createInvitation, createSpace } from '@graph-framework/space-events';
 import { generateId } from '@graph-framework/utils';
 
-import { useSelector } from '@xstate/store/react';
 import { assertExhaustive } from './assertExhaustive.js';
 import type { SpaceStorageEntry } from './store.js';
 import { store } from './store.js';
@@ -82,11 +82,9 @@ const GraphFrameworkContext = createContext<{
 export function GraphFramework({ children, accountId }: Props) {
   const [websocketConnection, setWebsocketConnection] = useState<WebSocket>();
   const [repo] = useState<Repo>(() => new Repo({}));
-  const [invitations, setInvitations] = useState<Invitation[]>([]);
   const [automergeHandle] = useState<DocHandle<unknown>>(() => repo.find(hardcodedUrl));
-  const storeState = useSelector(store, (state) => state.context);
-  const spaces = storeState.spaces;
-
+  const spaces = useSelectorStore(store, (state) => state.context.spaces);
+  const invitations = useSelectorStore(store, (state) => state.context.invitations);
   // Create a stable WebSocket connection that only depends on accountId
   useEffect(() => {
     const websocketConnection = new WebSocket(`ws://localhost:3030/?accountId=${accountId}`);
@@ -266,7 +264,10 @@ export function GraphFramework({ children, accountId }: Props) {
             break;
           }
           case 'list-invitations': {
-            setInvitations(response.invitations.map((invitation) => invitation));
+            store.send({
+              type: 'setInvitations',
+              invitations: response.invitations.map((invitation) => invitation),
+            });
             break;
           }
           case 'update-confirmed': {
@@ -499,3 +500,5 @@ export function GraphFramework({ children, accountId }: Props) {
 export const useGraphFramework = () => {
   return useContext(GraphFrameworkContext);
 };
+
+export const useSelector = useSelectorStore;

packages/graph-framework/src/store.ts

@@ -1,4 +1,4 @@
-import type { Updates } from '@graph-framework/messages';
+import type { Invitation, Updates } from '@graph-framework/messages';
 import type { SpaceEvent, SpaceState } from '@graph-framework/space-events';
 import { createStore } from '@xstate/store';
 
@@ -15,20 +15,28 @@ export type SpaceStorageEntry = {
 interface StoreContext {
   spaces: SpaceStorageEntry[];
   updatesInFlight: string[];
+  invitations: Invitation[];
   encryptionPrivateKey: string;
   automergeDocumentId: string;
 }
 
 const initialStoreContext: StoreContext = {
   spaces: [],
   updatesInFlight: [],
+  invitations: [],
   encryptionPrivateKey: '',
   automergeDocumentId: '',
 };
 
 export const store = createStore({
   context: initialStoreContext,
   on: {
+    setInvitations: (context, event: { invitations: Invitation[] }) => {
+      return {
+        ...context,
+        invitations: event.invitations,
+      };
+    },
     setAutomergeDocumentId: (context, event: { automergeDocumentId: string }) => {
       return {
         ...context,