Ng/connect fixes (#257)

Author: nikgraf

apps/connect/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@base-ui-components/react": "1.0.0-beta.0",
+    "@graphprotocol/grc-20": "^0.21.2",
     "@graphprotocol/hypergraph": "workspace:*",
     "@graphprotocol/hypergraph-react": "workspace:*",
     "@privy-io/react-auth": "^2.13.0",

apps/connect/src/components/CreateSpaceCard.tsx

@@ -1,5 +1,6 @@
 import { Loading } from '@/components/ui/Loading';
 import { cn } from '@/lib/utils';
+import { Graph } from '@graphprotocol/grc-20';
 import { Key, type Messages, SpaceEvents, SpaceInfo, StoreConnect, Utils } from '@graphprotocol/hypergraph';
 import { useIdentityToken } from '@privy-io/react-auth';
 import { useQueryClient } from '@tanstack/react-query';
@@ -12,12 +13,36 @@ interface CreateSpaceCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 export function CreateSpaceCard({ className, ...props }: CreateSpaceCardProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [spaceName, setSpaceName] = useState('');
+  const [spaceType, setSpaceType] = useState<'private' | 'public'>('private');
   const { identityToken } = useIdentityToken();
   const accountAddress = useSelector(StoreConnect.store, (state) => state.context.accountAddress);
   const keys = useSelector(StoreConnect.store, (state) => state.context.keys);
   const queryClient = useQueryClient();
 
-  const createSpace = async () => {
+  const createPublicSpace = async () => {
+    if (!accountAddress) {
+      alert('Missing account address');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await Graph.createSpace({
+        editorAddress: accountAddress,
+        name: spaceName,
+        network: 'TESTNET',
+      });
+    } catch (error) {
+      alert('Failed to create space');
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+      queryClient.invalidateQueries({ queryKey: ['public-spaces'] });
+    }
+  };
+
+  const createPrivateSpace = async () => {
     setIsLoading(true);
     if (!accountAddress || !keys || !identityToken) {
       console.error('Missing required fields', {
@@ -84,7 +109,7 @@ export function CreateSpaceCard({ className, ...props }: CreateSpaceCardProps) {
       });
       const data = await response.json();
       if (data.space) {
-        queryClient.invalidateQueries({ queryKey: ['spaces'] });
+        queryClient.invalidateQueries({ queryKey: ['private-spaces'] });
         setSpaceName('');
       } else {
         throw new Error('Failed to create space');
@@ -97,10 +122,24 @@ export function CreateSpaceCard({ className, ...props }: CreateSpaceCardProps) {
     }
   };
 
+  const createSpace = async () => {
+    if (spaceType === 'private') {
+      await createPrivateSpace();
+    } else {
+      await createPublicSpace();
+    }
+  };
+
   return (
     <div className={cn('c-card', className)} {...props}>
       <h2 className="c-card-title">Create a new space</h2>
-      <form className="flex gap-2">
+      <form
+        className="flex gap-2"
+        onSubmit={(event) => {
+          event.preventDefault();
+          createSpace();
+        }}
+      >
         <input
           type="text"
           placeholder="My cool space"
@@ -109,7 +148,15 @@ export function CreateSpaceCard({ className, ...props }: CreateSpaceCardProps) {
           required
           className="c-input grow"
         />
-        <button type="submit" disabled={isLoading} onClick={createSpace} className="c-button shrink-0">
+        <select
+          className="c-input min-w-22"
+          value={spaceType}
+          onChange={(e) => setSpaceType(e.target.value as 'private' | 'public')}
+        >
+          <option value="private">Private</option>
+          <option value="public">Public</option>
+        </select>
+        <button type="submit" disabled={isLoading} className="c-button shrink-0">
           Create Space
           {isLoading ? <Loading hideLabel /> : null}
         </button>

apps/connect/src/routes/authenticate.tsx

@@ -575,7 +575,7 @@ function AuthenticateComponent() {
                 <CreateSpaceCard className="lg:col-2" />
                 <div className="relative min-h-80 lg:col-2">
                   <SpacesCard
-                    spaces={privateSpacesData ?? []}
+                    spaces={[...(privateSpacesData ?? []), ...(publicSpacesData ?? [])]}
                     status={
                       privateSpacesPending
                         ? 'loading'

apps/events/src/components/create-properties-and-types-event.tsx

@@ -102,13 +102,15 @@ export const CreatePropertiesAndTypesEvent = ({ space }: { space: string }) => {
     name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
   },
   relations: {
-      sponsors: Id.Id('${sponsorsRelationTypeId}'),
+    sponsors: Id.Id('${sponsorsRelationTypeId}'),
   },
 },
 Company: {
   typeIds: [Id.Id('${companyTypeId}')],
   properties: {
     name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+  },
+  relations: {
     jobOffers: Id.Id('${jobOffersRelationTypeId}'),
   },
 },

apps/events/src/mapping.ts

@@ -3,30 +3,31 @@ import type { Mapping } from '@graphprotocol/hypergraph';
 
 export const mapping: Mapping = {
   Event: {
-    typeIds: [Id.Id('6b8dbe76-389f-4bde-acdd-db9d5e387882')],
+    typeIds: [Id.Id('407d9e8a-c703-4fb4-830d-98c758c8564e')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
     },
     relations: {
-      sponsors: Id.Id('d8e4ea54-cb8c-4dca-9c2b-64dbbbe78397'),
+      sponsors: Id.Id('a7ac80a6-d3d9-4b04-9b9f-ead1723af09f'),
     },
   },
   Company: {
-    typeIds: [Id.Id('e8932986-67a9-4fff-89a6-07f03973014c')],
+    typeIds: [Id.Id('b0220a78-9205-4e5e-9bf1-c03ee0791e23')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
     },
     relations: {
-      jobOffers: Id.Id('96beadca-0846-4e56-9628-c196f7f3c4cd'),
+      jobOffers: Id.Id('7ca8063c-3664-479b-912d-1b3b86af2bf4'),
     },
   },
   JobOffer: {
-    typeIds: [Id.Id('a107c081-3089-4a94-8208-6a10775557d2')],
+    typeIds: [Id.Id('99e1733b-661d-4edb-a253-98ff4b7747d0')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
-      salary: Id.Id('20d18713-5352-4e1f-987c-d853bf9f8831'),
+      salary: Id.Id('5ecfb4e5-09eb-437d-9c3c-e9e7395d52aa'),
     },
   },
+
   // Todo2: {
   //   typeIds: [Id.Id('LJuM8ju67mCv78FhAiK9k9')],
   //   properties: {

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

@@ -10,12 +10,12 @@ export const Route = createLazyFileRoute('/playground')({
 
 function RouteComponent() {
   return (
-    <HypergraphSpaceProvider space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8">
+    <HypergraphSpaceProvider space="d9814a82-8dab-4d02-86d2-9d413f7dc336">
       <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
         <h1 className="text-2xl font-bold">Playground</h1>
         <Playground />
-        <CreatePropertiesAndTypesEvent space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
-        <CreateEvents space="1c954768-7e14-4f0f-9396-0fe9dcd55fe8" />
+        <CreatePropertiesAndTypesEvent space="d9814a82-8dab-4d02-86d2-9d413f7dc336" />
+        <CreateEvents space="d9814a82-8dab-4d02-86d2-9d413f7dc336" />
       </div>
     </HypergraphSpaceProvider>
   );