diff --git a/apps/events/src/Boot.tsx b/apps/events/src/Boot.tsx
index 70149a8c..d5d4a2e3 100644
--- a/apps/events/src/Boot.tsx
+++ b/apps/events/src/Boot.tsx
@@ -1,6 +1,6 @@
import { RouterProvider, createRouter } from '@tanstack/react-router';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { HypergraphAppProvider } from '@graphprotocol/hypergraph-react';
import { PrivyProvider } from '@privy-io/react-auth';
import { routeTree } from './routeTree.gen';
@@ -33,9 +33,9 @@ export function Boot() {
},
}}
>
-
+
-
+
);
}
diff --git a/apps/events/src/components/dev-tool.tsx b/apps/events/src/components/dev-tool.tsx
index 4d65ea8f..539e5071 100644
--- a/apps/events/src/components/dev-tool.tsx
+++ b/apps/events/src/components/dev-tool.tsx
@@ -1,5 +1,5 @@
import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
import { useSelector } from '@xstate/store/react';
import { useEffect, useState } from 'react';
@@ -10,7 +10,7 @@ export function DevTool({ spaceId }: { spaceId: string }) {
const spaces = useSelector(store, (state) => state.context.spaces);
const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
- const { subscribeToSpace, loading } = Hypergraph.useHypergraphApp();
+ const { subscribeToSpace, loading } = useHypergraphApp();
useEffect(() => {
if (!loading) {
diff --git a/apps/events/src/components/logout.tsx b/apps/events/src/components/logout.tsx
index e23566c3..9942cacb 100644
--- a/apps/events/src/components/logout.tsx
+++ b/apps/events/src/components/logout.tsx
@@ -1,10 +1,10 @@
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } 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 } = Hypergraph.useHypergraphApp();
+ const { logout: graphLogout } = useHypergraphApp();
const { logout: privyLogout } = usePrivy();
const router = useRouter();
const disconnectWallet = async () => {
diff --git a/apps/events/src/components/todos.tsx b/apps/events/src/components/todos.tsx
index f4db85c9..50bfa0ef 100644
--- a/apps/events/src/components/todos.tsx
+++ b/apps/events/src/components/todos.tsx
@@ -1,14 +1,14 @@
-import { Space } from '@graphprotocol/hypergraph-react';
+import { useCreateEntity, useDeleteEntity, useQueryEntities, useUpdateEntity } from '@graphprotocol/hypergraph-react';
import { useState } from 'react';
import { Todo } from '../schema';
import { Button } from './ui/button';
import { Input } from './ui/input';
export const Todos = () => {
- const todos = Space.useQueryEntities(Todo);
- const createEntity = Space.useCreateEntity(Todo);
- const updateEntity = Space.useUpdateEntity(Todo);
- const deleteEntity = Space.useDeleteEntity();
+ const todos = useQueryEntities(Todo);
+ const createEntity = useCreateEntity(Todo);
+ const updateEntity = useUpdateEntity(Todo);
+ const deleteEntity = useDeleteEntity();
const [newTodoTitle, setNewTodoTitle] = useState('');
return (
diff --git a/apps/events/src/routes/__root.tsx b/apps/events/src/routes/__root.tsx
index 409a64b0..287ad96d 100644
--- a/apps/events/src/routes/__root.tsx
+++ b/apps/events/src/routes/__root.tsx
@@ -1,12 +1,11 @@
import { Logout } from '@/components/logout';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphAuth } 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 = Hypergraph.useAuthenticated();
- const graphIdentity = Hypergraph.useHypergraphIdentity();
+ const { authenticated, identity } = useHypergraphAuth();
const router = useRouter();
@@ -33,7 +32,7 @@ export const Route = createRootRoute({
{authenticated ? (
- {graphIdentity?.accountId.substring(0, 6)}
+ {identity?.accountId.substring(0, 6)}
diff --git a/apps/events/src/routes/index.tsx b/apps/events/src/routes/index.tsx
index 164baf73..ffcf4192 100644
--- a/apps/events/src/routes/index.tsx
+++ b/apps/events/src/routes/index.tsx
@@ -1,5 +1,5 @@
import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
import { Link, createFileRoute } from '@tanstack/react-router';
import { useSelector } from '@xstate/store/react';
import { useEffect } from 'react';
@@ -13,8 +13,7 @@ export const Route = createFileRoute('/')({
function Index() {
const spaces = useSelector(store, (state) => state.context.spaces);
- const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, loading } =
- Hypergraph.useHypergraphApp();
+ const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, loading } = useHypergraphApp();
console.log('Home page', { loading });
diff --git a/apps/events/src/routes/login.lazy.tsx b/apps/events/src/routes/login.lazy.tsx
index 3a167b92..423ba08c 100644
--- a/apps/events/src/routes/login.lazy.tsx
+++ b/apps/events/src/routes/login.lazy.tsx
@@ -1,5 +1,5 @@
import type { Identity } from '@graphprotocol/hypergraph';
-import { Hypergraph } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
import { usePrivy, useWallets } from '@privy-io/react-auth';
import { createLazyFileRoute, useRouter } from '@tanstack/react-router';
import { Loader2 } from 'lucide-react';
@@ -17,7 +17,7 @@ export const Route = createLazyFileRoute('/login')({
function Login() {
const { ready: privyReady, login: privyLogin, signMessage, authenticated: privyAuthenticated } = usePrivy();
const { ready: walletsReady, wallets } = useWallets();
- const { setIdentityAndSessionToken, login: hypergraphLogin } = Hypergraph.useHypergraphApp();
+ const { setIdentityAndSessionToken, login: hypergraphLogin } = useHypergraphApp();
const { navigate } = useRouter();
const [hypergraphLoginStarted, setHypergraphLoginStarted] = useState(false);
diff --git a/apps/events/src/routes/space/$spaceId.tsx b/apps/events/src/routes/space/$spaceId.tsx
index 124d6d90..9cc26434 100644
--- a/apps/events/src/routes/space/$spaceId.tsx
+++ b/apps/events/src/routes/space/$spaceId.tsx
@@ -1,5 +1,5 @@
import { store } from '@graphprotocol/hypergraph';
-import { Hypergraph, Space as HypergraphSpace } from '@graphprotocol/hypergraph-react';
+import { HypergraphSpaceProvider, useHypergraphApp } from '@graphprotocol/hypergraph-react';
import { createFileRoute } from '@tanstack/react-router';
import { useSelector } from '@xstate/store/react';
@@ -17,7 +17,7 @@ export const Route = createFileRoute('/space/$spaceId')({
function Space() {
const { spaceId } = Route.useParams();
const spaces = useSelector(store, (state) => state.context.spaces);
- const { subscribeToSpace, inviteToSpace, loading } = Hypergraph.useHypergraphApp();
+ const { subscribeToSpace, inviteToSpace, loading } = useHypergraphApp();
useEffect(() => {
if (!loading) {
subscribeToSpace({ spaceId });
@@ -36,7 +36,7 @@ function Space() {
return (
-
+
Invite people
@@ -59,7 +59,7 @@ function Space() {
-
+
);
}
diff --git a/packages/hypergraph-react/src/HypergraphAppContext.tsx b/packages/hypergraph-react/src/HypergraphAppContext.tsx
index 7e5fb011..eb3b3837 100644
--- a/packages/hypergraph-react/src/HypergraphAppContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphAppContext.tsx
@@ -76,14 +76,9 @@ export function useHypergraphApp() {
return useContext(HypergraphAppContext);
}
-export function useAuthenticated() {
- return useSelectorStore(store, (state) => state.context.authenticated);
-}
-export function useHypergraphAccountId() {
- return useSelectorStore(store, (state) => state.context.accountId);
-}
-export function useHypergraphIdentity() {
- const accountId = useHypergraphAccountId();
+export function useHypergraphAuth() {
+ const authenticated = useSelectorStore(store, (state) => state.context.authenticated);
+ const accountId = useSelectorStore(store, (state) => state.context.accountId);
const keys = useSelectorStore(store, (state) => state.context.keys);
const identity: Identity.Identity | null =
accountId && keys
@@ -95,10 +90,7 @@ export function useHypergraphIdentity() {
signaturePrivateKey: keys.signaturePrivateKey,
}
: null;
- return identity;
-}
-export function useHypergraphSessionToken() {
- return useSelectorStore(store, (state) => state.context.sessionToken);
+ return { authenticated, identity };
}
export type HypergraphAppProviderProps = Readonly<{
diff --git a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
index e56ab0df..2fc6b7da 100644
--- a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
@@ -24,7 +24,7 @@ export function useHypergraph() {
return context as HypergraphContext;
}
-export function HypergraphProvider({ space, children }: { space: string; children: ReactNode }) {
+export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {
const repo = useRepo();
const ref = useRef(undefined);
diff --git a/packages/hypergraph-react/src/index.ts b/packages/hypergraph-react/src/index.ts
index b8206a03..9d0b9aba 100644
--- a/packages/hypergraph-react/src/index.ts
+++ b/packages/hypergraph-react/src/index.ts
@@ -1,2 +1,13 @@
-export * as Hypergraph from './HypergraphAppContext.js';
-export * as Space from './HypergraphSpaceContext.js';
+export {
+ HypergraphAppProvider,
+ useHypergraphApp,
+ useHypergraphAuth,
+} from './HypergraphAppContext.js';
+export {
+ HypergraphSpaceProvider,
+ useCreateEntity,
+ useDeleteEntity,
+ useQueryEntities,
+ useQueryEntity,
+ useUpdateEntity,
+} from './HypergraphSpaceContext.js';
diff --git a/packages/hypergraph-react/test/HypergraphAppContext.test.tsx b/packages/hypergraph-react/test/HypergraphAppContext.test.tsx
index d94c0597..7e0ae54c 100644
--- a/packages/hypergraph-react/test/HypergraphAppContext.test.tsx
+++ b/packages/hypergraph-react/test/HypergraphAppContext.test.tsx
@@ -4,7 +4,7 @@ import { cleanup, renderHook } from '@testing-library/react';
import React from 'react';
import { afterEach, describe, expect, it } from 'vitest';
-import { HypergraphAppProvider, useAuthenticated, useHypergraphAccountId } from '../src/HypergraphAppContext.js';
+import { HypergraphAppProvider, useHypergraphAuth } from '../src/HypergraphAppContext.js';
afterEach(() => {
cleanup();
@@ -29,9 +29,8 @@ describe('HypergraphAppContext', () => {
{children}
);
- const { result: authenticatedResult } = renderHook(() => useAuthenticated(), { wrapper });
- expect(authenticatedResult.current).toEqual(false);
- const { result: accountIdResult } = renderHook(() => useHypergraphAccountId(), { wrapper });
- expect(accountIdResult.current).toBeNull();
+ const { result: authenticatedResult } = renderHook(() => useHypergraphAuth(), { wrapper });
+ expect(authenticatedResult.current.authenticated).toEqual(false);
+ expect(authenticatedResult.current.identity).toBeNull();
});
});
diff --git a/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx b/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx
index fb1c7007..6a0db360 100644
--- a/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx
+++ b/packages/hypergraph-react/test/HypergraphSpaceContext.test.tsx
@@ -1,13 +1,13 @@
-import '@testing-library/jest-dom/vitest';
import { type AnyDocumentId, Repo } from '@automerge/automerge-repo';
import { RepoContext } from '@automerge/automerge-repo-react-hooks';
import { Entity, Utils } from '@graphprotocol/hypergraph';
+import '@testing-library/jest-dom/vitest';
import { act, cleanup, renderHook, waitFor } from '@testing-library/react';
// biome-ignore lint/style/useImportType:
import React from 'react';
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import {
- HypergraphProvider,
+ HypergraphSpaceProvider,
useCreateEntity,
useDeleteEntity,
useQueryEntities,
@@ -42,7 +42,7 @@ describe('HypergraphSpaceContext', () => {
let repo = new Repo({});
let wrapper = ({ children }: Readonly<{ children: React.ReactNode }>) => (
- {children}
+ {children}
);
@@ -54,7 +54,7 @@ describe('HypergraphSpaceContext', () => {
wrapper = ({ children }: Readonly<{ children: React.ReactNode }>) => (
- {children}
+ {children}
);
});