allow to create public spaces

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', {
@@ -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'