Merge pull request #103 from graphprotocol/chris.whited/feat-react-pkg

feat(react package): move react usage out of @graphprotocol/hypergraph and into own @graphprotocol/hypergraph-react

Author: nikgraf

apps/events/package.json

@@ -12,12 +12,14 @@
     "@automerge/automerge-repo": "^2.0.0-alpha.14",
     "@automerge/automerge-repo-react-hooks": "^2.0.0-alpha.14",
     "@graphprotocol/hypergraph": "workspace:*",
+    "@graphprotocol/hypergraph-react": "workspace:*",
     "@noble/hashes": "^1.7.0",
     "@privy-io/react-auth": "^2.0.3",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@tanstack/react-router": "^1.97.1",
+    "@xstate/store": "^2.6.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "effect": "^3.12.4",

apps/events/src/Boot.tsx

@@ -1,7 +1,8 @@
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 
-import { Identity } from '@graphprotocol/hypergraph';
+import { Auth } from '@graphprotocol/hypergraph-react';
 import { PrivyProvider } from '@privy-io/react-auth';
+
 import { routeTree } from './routeTree.gen';
 
 // Create a new router instance
@@ -32,9 +33,9 @@ export function Boot() {
         },
       }}
     >
-      <Identity.GraphLogin storage={localStorage}>
+      <Auth.HypergraphAuthProvider storage={localStorage}>
         <RouterProvider router={router} />
-      </Identity.GraphLogin>
+      </Auth.HypergraphAuthProvider>
     </PrivyProvider>
   );
 }

apps/events/src/components/dev-tool.tsx

@@ -1,19 +1,22 @@
-import { store, useGraphFramework, useSelector } from '@graphprotocol/hypergraph';
+import { store } from '@graphprotocol/hypergraph';
+import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
+
 import { Button } from './ui/button';
 
 export function DevTool({ spaceId }: { spaceId: string }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const spaces = useSelector(store, (state) => state.context.spaces);
   const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
-  const { subscribeToSpace, isLoading } = useGraphFramework();
+  const { subscribeToSpace, loading } = Hypergraph.useHypergraphApp();
 
   useEffect(() => {
-    if (!isLoading) {
+    if (!loading) {
       subscribeToSpace({ spaceId });
     }
-  }, [isLoading, subscribeToSpace, spaceId]);
+  }, [loading, subscribeToSpace, spaceId]);
 
   const space = spaces.find((space) => space.id === spaceId);
 

apps/events/src/components/logout.tsx

@@ -1,10 +1,10 @@
-import { Identity } from '@graphprotocol/hypergraph';
+import { Auth } from '@graphprotocol/hypergraph-react';
 import { usePrivy } from '@privy-io/react-auth';
 import { useRouter } from '@tanstack/react-router';
 import { Button } from './ui/button';
 
 export function Logout() {
-  const { logout: graphLogout } = Identity.useGraphLogin();
+  const { logout: graphLogout } = Auth.useHypergraphAuth();
   const { logout: privyLogout } = usePrivy();
   const router = useRouter();
   const disconnectWallet = async () => {

apps/events/src/components/todos.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react';
 
-import { Schema } from '@graphprotocol/hypergraph';
+import { Space } from '@graphprotocol/hypergraph-react';
 
 import { Todo } from '../schema';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
 export const Todos = () => {
-  const todos = Schema.useQuery(Todo);
-  const createEntity = Schema.useCreateEntity(Todo);
-  const updateEntity = Schema.useUpdateEntity(Todo);
-  const deleteEntity = Schema.useDeleteEntity();
+  const todos = Space.useQueryEntities(Todo);
+  const createEntity = Space.useCreateEntity(Todo);
+  const updateEntity = Space.useUpdateEntity(Todo);
+  const deleteEntity = Space.useDeleteEntity();
   const [newTodoTitle, setNewTodoTitle] = useState('');
 
   return (
@@ -27,13 +27,13 @@ export const Todos = () => {
           Create Todo
         </Button>
       </div>
-      {todos.map((todo) => (
+      {(todos ?? []).map((todo) => (
         <div key={todo.id} className="flex flex-row items-center gap-2">
           <h2>{todo.name}</h2>
           <input
             type="checkbox"
             checked={todo.completed}
-            onChange={(e) => updateEntity(todo.id, { completed: e.target.checked })}
+            onChange={(e) => updateEntity({ id: todo.id, data: { completed: e.target.checked } })}
           />
           <Button onClick={() => deleteEntity(todo.id)}>Delete</Button>
         </div>

apps/events/src/routes/__root.tsx

@@ -1,11 +1,12 @@
 import { Logout } from '@/components/logout';
-import { GraphFramework, Identity } from '@graphprotocol/hypergraph';
+import { Auth, Hypergraph } from '@graphprotocol/hypergraph-react';
 import { Link, Outlet, createRootRoute, useLayoutEffect, useRouter } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 export const Route = createRootRoute({
   component: () => {
-    const { authenticated, getIdentity, getSessionToken } = Identity.useGraphLogin();
+    const { authenticated, getIdentity, getSessionToken } = Auth.useHypergraphAuth();
+
     const graphIdentity = getIdentity();
     const loggedInSessionToken = getSessionToken();
 
@@ -44,7 +45,7 @@ export const Route = createRootRoute({
           <hr />
 
           {authenticated && graphIdentity && loggedInSessionToken ? (
-            <GraphFramework
+            <Hypergraph.HypergraphAppProvider
               accountId={graphIdentity.accountId}
               sessionToken={loggedInSessionToken}
               encryptionPublicKey={graphIdentity.encryptionPublicKey}
@@ -53,7 +54,7 @@ export const Route = createRootRoute({
               signaturePublicKey={graphIdentity.signaturePublicKey}
             >
               <Outlet />
-            </GraphFramework>
+            </Hypergraph.HypergraphAppProvider>
           ) : (
             <Outlet />
           )}

apps/events/src/routes/index.tsx

@@ -1,26 +1,31 @@
-import { store, useGraphFramework, useSelector } from '@graphprotocol/hypergraph';
+import { store } from '@graphprotocol/hypergraph';
+import { Hypergraph } from '@graphprotocol/hypergraph-react';
 import { Link, createFileRoute } from '@tanstack/react-router';
+import { useSelector } from '@xstate/store/react';
+import { useEffect } from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { useEffect } from 'react';
 
 export const Route = createFileRoute('/')({
   component: Index,
 });
 
 function Index() {
   const spaces = useSelector(store, (state) => state.context.spaces);
-  const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, isLoading } = useGraphFramework();
+  const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, loading } =
+    Hypergraph.useHypergraphApp();
+
+  console.log('Home page', { loading });
 
   useEffect(() => {
-    if (!isLoading) {
+    if (!loading) {
       listSpaces();
       listInvitations();
     }
-  }, [listSpaces, listInvitations, isLoading]);
+  }, [listSpaces, listInvitations, loading]);
 
-  if (isLoading) {
+  if (loading) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
   }
 

apps/events/src/routes/login.lazy.tsx

@@ -1,21 +1,23 @@
-import { Button } from '@/components/ui/button';
-import { availableAccounts } from '@/lib/availableAccounts';
-import { Identity } from '@graphprotocol/hypergraph';
+import type { Identity } from '@graphprotocol/hypergraph';
+import { Auth } from '@graphprotocol/hypergraph-react';
 import { usePrivy, useWallets } from '@privy-io/react-auth';
 import { createLazyFileRoute, useRouter } from '@tanstack/react-router';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { createWalletClient, custom } from 'viem';
 import { mainnet } from 'viem/chains';
 
+import { Button } from '@/components/ui/button';
+import { availableAccounts } from '@/lib/availableAccounts';
+
 export const Route = createLazyFileRoute('/login')({
   component: () => <Login />,
 });
 
 function Login() {
   const { ready: privyReady, login: privyLogin, signMessage, authenticated: privyAuthenticated } = usePrivy();
   const { ready: walletsReady, wallets } = useWallets();
-  const { setIdentityAndSessionToken, login: hypergraphLogin } = Identity.useGraphLogin();
+  const { setIdentityAndSessionToken, login: hypergraphLogin } = Auth.useHypergraphAuth();
   const { navigate } = useRouter();
   const [hypergraphLoginStarted, setHypergraphLoginStarted] = useState(false);
 

apps/events/src/routes/space/$spaceId.tsx

@@ -1,11 +1,14 @@
-import { Schema, store, useGraphFramework, useSelector } from '@graphprotocol/hypergraph';
+import { store } from '@graphprotocol/hypergraph';
+import { Hypergraph, Space as HypergraphSpace } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
+import { useSelector } from '@xstate/store/react';
 
 import { DevTool } from '@/components/dev-tool';
 import { Todos } from '@/components/todos';
 import { Button } from '@/components/ui/button';
 import { availableAccounts } from '@/lib/availableAccounts';
 import { useEffect } from 'react';
+import { getAddress } from 'viem';
 
 export const Route = createFileRoute('/space/$spaceId')({
   component: Space,
@@ -14,16 +17,16 @@ export const Route = createFileRoute('/space/$spaceId')({
 function Space() {
   const { spaceId } = Route.useParams();
   const spaces = useSelector(store, (state) => state.context.spaces);
-  const { subscribeToSpace, inviteToSpace, isLoading } = useGraphFramework();
+  const { subscribeToSpace, inviteToSpace, loading } = Hypergraph.useHypergraphApp();
   useEffect(() => {
-    if (!isLoading) {
+    if (!loading) {
       subscribeToSpace({ spaceId });
     }
-  }, [isLoading, subscribeToSpace, spaceId]);
+  }, [loading, subscribeToSpace, spaceId]);
 
   const space = spaces.find((space) => space.id === spaceId);
 
-  if (isLoading) {
+  if (loading) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
   }
 
@@ -33,7 +36,7 @@ function Space() {
 
   return (
     <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
-      <Schema.SpacesProvider defaultSpace={space.id}>
+      <HypergraphSpace.HypergraphSpaceProvider defaultSpaceId={space.id} spaces={[space.id]}>
         <Todos />
         <h3 className="text-xl font-bold">Invite people</h3>
         <div className="flex flex-row gap-2">
@@ -44,7 +47,7 @@ function Space() {
                 onClick={() => {
                   inviteToSpace({
                     space,
-                    invitee,
+                    invitee: { accountId: getAddress(invitee.accountId) },
                   });
                 }}
               >
@@ -56,7 +59,7 @@ function Space() {
         <div className="mt-12">
           <DevTool spaceId={spaceId} />
         </div>
-      </Schema.SpacesProvider>
+      </HypergraphSpace.HypergraphSpaceProvider>
     </div>
   );
 }

apps/events/src/schema.ts

@@ -1,7 +1,7 @@
 import { Schema } from '@graphprotocol/hypergraph';
 
-export class Todo extends Schema.Model.Class<Todo>('Todo')({
-  id: Schema.Model.Generated(Schema.Types.Text),
-  name: Schema.Types.Text,
-  completed: Schema.Types.Checkbox,
+export class Todo extends Schema.Class<Todo>('Todo')({
+  id: Schema.Generated(Schema.Text),
+  name: Schema.Text,
+  completed: Schema.Checkbox,
 }) {}