create space (#540)

Author: nikgraf

.changeset/plain-eggs-joke.md

@@ -0,0 +1,6 @@
+---
+"@graphprotocol/hypergraph-react": patch
+---
+
+add privy auth based createSpace hooks
+  

apps/privy-login-example/src/routes/index.tsx

@@ -1,5 +1,10 @@
 import { store } from '@graphprotocol/hypergraph';
-import { useHypergraphApp, useSpaces } from '@graphprotocol/hypergraph-react';
+import {
+  useHypergraphApp,
+  _usePrivyAuthCreatePrivateSpace as usePrivyAuthCreatePrivateSpace,
+  _usePrivyAuthCreatePublicSpace as usePrivyAuthCreatePublicSpace,
+  useSpaces,
+} from '@graphprotocol/hypergraph-react';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
@@ -18,24 +23,20 @@ function Index() {
   const { data: publicSpaces } = useSpaces({ mode: 'public' });
   const { data: privateSpaces } = useSpaces({ mode: 'private' });
   const [spaceName, setSpaceName] = useState('');
+  const { createPrivateSpace, isLoading: isCreatingPrivateSpace } = usePrivyAuthCreatePrivateSpace();
+  const { createPublicSpace, isLoading: isCreatingPublicSpace } = usePrivyAuthCreatePublicSpace();
 
   const accountInboxes = useSelector(store, (state) => state.context.accountInboxes);
-  const {
-    createSpace,
-    listInvitations,
-    invitations,
-    acceptInvitation,
-    createAccountInbox,
-    getOwnAccountInboxes,
-    isConnecting,
-  } = useHypergraphApp();
+  const { listInvitations, invitations, acceptInvitation, createAccountInbox, getOwnAccountInboxes, isConnecting } =
+    useHypergraphApp();
 
   useEffect(() => {
     if (!isConnecting) {
       listInvitations();
       getOwnAccountInboxes();
     }
   }, [isConnecting, listInvitations, getOwnAccountInboxes]);
+  const [spaceType, setSpaceType] = useState<'private' | 'public'>('private');
 
   if (isConnecting) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;
@@ -76,15 +77,23 @@ function Index() {
       </div>
       <div className="flex flex-row gap-2 justify-between items-center">
         <Input value={spaceName} onChange={(e) => setSpaceName(e.target.value)} />
+        <select
+          className="c-input shrink-0"
+          value={spaceType}
+          onChange={(e) => setSpaceType(e.target.value as 'private' | 'public')}
+        >
+          <option value="private">Private</option>
+          <option value="public">Public</option>
+        </select>
         <Button
-          disabled={true} // disabled until we have delegation for creating a space
+          disabled={isCreatingPrivateSpace || isCreatingPublicSpace}
           onClick={async (event) => {
             event.preventDefault();
-            // const smartSessionClient = await getSmartSessionClient();
-            // if (!smartSessionClient) {
-            //   throw new Error('Missing smartSessionClient');
-            // }
-            createSpace({ name: spaceName });
+            if (spaceType === 'private') {
+              await createPrivateSpace({ name: spaceName });
+            } else {
+              await createPublicSpace({ name: spaceName });
+            }
             setSpaceName('');
           }}
         >

packages/hypergraph-react/src/HypergraphAppContext.tsx

@@ -116,6 +116,7 @@ export type HypergraphAppCtx = {
     redirectFn: (url: URL) => void;
   }): void;
   processConnectAuthSuccess(params: { storage: Identity.Storage; ciphertext: string; nonce: string }): void;
+  syncServerUri: string;
 };
 
 export const HypergraphAppContext = createContext<HypergraphAppCtx>({
@@ -200,6 +201,7 @@ export const HypergraphAppContext = createContext<HypergraphAppCtx>({
   processConnectAuthSuccess() {
     throw new Error('processConnectAuthSuccess is missing');
   },
+  syncServerUri: '',
 });
 
 export function useHypergraphApp() {
@@ -1553,6 +1555,7 @@ export function HypergraphAppProvider({
         ensureSpaceInbox: ensureSpaceInboxForContext,
         redirectToConnect: redirectToConnectForContext,
         processConnectAuthSuccess: processConnectAuthSuccessForContext,
+        syncServerUri,
       }}
     >
       <QueryClientProvider client={queryClient}>

packages/hypergraph-react/src/hooks/use-privy-auth-create-private-space.ts

@@ -0,0 +1,101 @@
+import { Key, type Messages, SpaceEvents, SpaceInfo, Utils } from '@graphprotocol/hypergraph';
+import * as Effect from 'effect/Effect';
+import { useState } from 'react';
+import { useHypergraphApp, useHypergraphAuth } from '../HypergraphAppContext.js';
+
+type CreatePrivateSpaceParams = {
+  name: string;
+};
+
+export const usePrivyAuthCreatePrivateSpace = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { privyIdentity } = useHypergraphAuth();
+  const { syncServerUri, listSpaces } = useHypergraphApp();
+
+  const createPrivateSpace = async ({ name }: CreatePrivateSpaceParams) => {
+    const accountAddress = privyIdentity?.accountAddress;
+    if (!accountAddress) {
+      setIsLoading(false);
+      throw new Error('No account address found');
+    }
+    const encryptionPrivateKey = privyIdentity?.encryptionPrivateKey;
+    const encryptionPublicKey = privyIdentity?.encryptionPublicKey;
+    const signaturePrivateKey = privyIdentity?.signaturePrivateKey;
+    const signaturePublicKey = privyIdentity?.signaturePublicKey;
+    if (!encryptionPrivateKey || !encryptionPublicKey || !signaturePrivateKey || !signaturePublicKey) {
+      setIsLoading(false);
+      throw new Error('No keys found');
+    }
+    const privyIdentityToken = privyIdentity?.privyIdentityToken;
+    if (!privyIdentityToken) {
+      setIsLoading(false);
+      throw new Error('No Privy identity token found');
+    }
+    setIsLoading(true);
+
+    try {
+      const spaceId = Utils.generateId();
+
+      const spaceEvent = await Effect.runPromise(
+        SpaceEvents.createSpace({
+          author: {
+            accountAddress,
+            encryptionPublicKey,
+            signaturePrivateKey,
+            signaturePublicKey,
+          },
+          spaceId,
+        }),
+      );
+      const result = Key.createKey({
+        privateKey: Utils.hexToBytes(encryptionPrivateKey),
+        publicKey: Utils.hexToBytes(encryptionPublicKey),
+      });
+
+      const { infoContent, signature } = SpaceInfo.encryptAndSignSpaceInfo({
+        accountAddress,
+        name,
+        secretKey: Utils.bytesToHex(result.key),
+        signaturePrivateKey,
+        spaceId,
+      });
+
+      const message: Messages.RequestConnectCreateSpaceEvent = {
+        type: 'connect-create-space-event',
+        accountAddress,
+        event: spaceEvent,
+        spaceId: spaceEvent.transaction.id,
+        keyBox: {
+          accountAddress,
+          ciphertext: Utils.bytesToHex(result.keyBoxCiphertext),
+          nonce: Utils.bytesToHex(result.keyBoxNonce),
+          authorPublicKey: encryptionPublicKey,
+          id: Utils.generateId(),
+        },
+        infoContent: Utils.bytesToHex(infoContent),
+        infoSignature: signature,
+        name,
+      };
+
+      const response = await fetch(`${syncServerUri}/connect/spaces`, {
+        headers: {
+          'privy-id-token': privyIdentityToken,
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify(message),
+      });
+      const data = await response.json();
+      if (data.space) {
+        listSpaces(); // list spaces to update the list of private spaces
+      } else {
+        throw new Error('Failed to create space');
+      }
+      return data.space;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { createPrivateSpace, isLoading };
+};

packages/hypergraph-react/src/hooks/use-privy-auth-create-public-space.ts

@@ -0,0 +1,36 @@
+import { Graph } from '@graphprotocol/grc-20';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useHypergraphAuth } from '../HypergraphAppContext.js';
+
+type CreatePublicSpaceParams = {
+  name: string;
+};
+
+export const usePrivyAuthCreatePublicSpace = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const queryClient = useQueryClient();
+  const { privyIdentity } = useHypergraphAuth();
+
+  const createPublicSpace = async ({ name }: CreatePublicSpaceParams) => {
+    const accountAddress = privyIdentity?.accountAddress;
+    if (!accountAddress) {
+      throw new Error('No account address found');
+    }
+    try {
+      setIsLoading(true);
+      const { id } = await Graph.createSpace({
+        editorAddress: accountAddress,
+        name,
+        network: 'TESTNET',
+      });
+      queryClient.invalidateQueries({ queryKey: ['hypergraph-public-spaces'] });
+      setIsLoading(false);
+      return id;
+    } catch (error) {
+      setIsLoading(false);
+      throw error;
+    }
+  };
+  return { createPublicSpace, isLoading };
+};

packages/hypergraph-react/src/hooks/use-spaces.ts

@@ -35,7 +35,7 @@ export const useSpaces = (params: { mode: 'public' | 'private' }) => {
   const accountAddress = identityAccountAddress ? identityAccountAddress : privyIdentityAccountAddress;
 
   const publicResult = useQuery({
-    queryKey: ['hypergraph-spaces', params.mode],
+    queryKey: ['hypergraph-public-spaces', params.mode],
     queryFn: async () => {
       const result = await request<PublicSpacesQueryResult>(
         `${Graph.TESTNET_API_ORIGIN}/graphql`,

packages/hypergraph-react/src/index.ts

@@ -10,6 +10,8 @@ export { useCreateEntity } from './hooks/use-create-entity.js';
 export { useDeleteEntity } from './hooks/use-delete-entity.js';
 export { useEntity } from './hooks/use-entity.js';
 export { useHardDeleteEntity } from './hooks/use-hard-delete-entity.js';
+export { usePrivyAuthCreatePrivateSpace as _usePrivyAuthCreatePrivateSpace } from './hooks/use-privy-auth-create-private-space.js';
+export { usePrivyAuthCreatePublicSpace as _usePrivyAuthCreatePublicSpace } from './hooks/use-privy-auth-create-public-space.js';
 export { useQuery } from './hooks/use-query.js';
 export { useRemoveRelation } from './hooks/use-remove-relation.js';
 export { useSpace } from './hooks/use-space.js';