+
+ );
+}
+
+function NavigationMenuLink({ className, ...props }: React.ComponentPropsAuthenticating …
;
+}
diff --git a/apps/create-hypergraph-app/template-vite-react/src/routes/explore-public-knowledge.tsx b/apps/create-hypergraph-app/template-vite-react/src/routes/explore-public-knowledge.tsx
new file mode 100644
index 00000000..86476fb7
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/routes/explore-public-knowledge.tsx
@@ -0,0 +1,74 @@
+import { Project } from '@/schema';
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/explore-public-knowledge')({
+ component: ExplorePublicKnowledge,
+});
+
+function ExplorePublicKnowledge() {
+ const { data: projects, isPending } = useQuery(Project, {
+ mode: 'public',
+ space: 'b2565802-3118-47be-91f2-e59170735bac',
+ first: 40,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/apps/create-hypergraph-app/template-vite-react/src/routes/index.tsx b/apps/create-hypergraph-app/template-vite-react/src/routes/index.tsx
new file mode 100644
index 00000000..aeb2f0de
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/routes/index.tsx
@@ -0,0 +1,131 @@
+import { Button } from '@/components/ui/button';
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { Link, createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+ component: Index,
+});
+
+function Index() {
+ const { redirectToConnect } = useHypergraphApp();
+
+ const handleSignIn = () => {
+ redirectToConnect({
+ storage: localStorage,
+ connectUrl: 'https://hypergraph-connect.vercel.app/',
+ successUrl: `${window.location.origin}/authenticate-success`,
+ appId: '93bb8907-085a-4a0e-83dd-62b0dc98e793',
+ redirectFn: (url: URL) => {
+ window.location.href = url.toString();
+ },
+ });
+ };
+
+ return (
+
+
+
+ + Explore Public Knowledge +
++ This page demonstrates how to query public data from a space. No authentication is required. +
+
+ {projects.map((project) => (
+
+
+ {/* Empty state */}
+ {isPending === false && projects.length === 0 && (
+
+ {/* Gradient overlay */}
+
+
+ {/* Content */}
+
+ ))}
+
+ {/* Project icon/avatar */}
+
+
+ {/* Decorative corner accent */}
+
+
+ {project.name.charAt(0).toUpperCase()}
+
+
+ {/* Project name */}
+ + {project.name} +
+
+
+ )}
+
+
+
+ No Projects Found
+There are currently no public projects available to explore.
+
+
+ );
+}
diff --git a/apps/create-hypergraph-app/template-vite-react/src/routes/login.tsx b/apps/create-hypergraph-app/template-vite-react/src/routes/login.tsx
new file mode 100644
index 00000000..fad0d7cd
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/routes/login.tsx
@@ -0,0 +1,36 @@
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+function Login() {
+ const { redirectToConnect } = useHypergraphApp();
+ return (
+
+ 
+
+
+
+ + Welcome to Hypergraph +
+Your web3 app template powered by Hypergraph
+
+ {/* Section 1: Explore existing public knowledge */}
+
+
+
+
+ {/* Section 2: Sign in with Geo Connect */}
+
+
+
+
+
+ Explore Public Knowledge
++ Discover and explore the vast network of knowledge already available in the public Knowledge Graph. +
+ + + +
+
+
+ {/* Section 3: Explore the docs */}
+
+
+
+
+
+ Manage Your Data
++ Sign in with Geo Connect to manage your private data and publish it to the public Knowledge Graph. +
+ +
+
+
+
+
+
+
+ Explore the Docs
++ Learn how to build with Hypergraph and discover all the features available in our comprehensive + documentation. +
+ + + +
+
+ );
+}
+
+export const Route = createFileRoute('/login')({
+ component: Login,
+});
diff --git a/apps/create-hypergraph-app/template-vite-react/src/routes/private-space/$space-id.tsx b/apps/create-hypergraph-app/template-vite-react/src/routes/private-space/$space-id.tsx
new file mode 100644
index 00000000..764c62e3
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/routes/private-space/$space-id.tsx
@@ -0,0 +1,196 @@
+import { Button } from '@/components/ui/button';
+import { Address } from '@/schema';
+import {
+ HypergraphSpaceProvider,
+ preparePublish,
+ publishOps,
+ useCreateEntity,
+ useHypergraphApp,
+ useQuery,
+ useSpace,
+ useSpaces,
+} from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+import { useState } from 'react';
+
+export const Route = createFileRoute('/private-space/$space-id')({
+ component: RouteComponent,
+});
+
+function RouteComponent() {
+ const { 'space-id': spaceId } = Route.useParams();
+
+ return (
+
+
+ Sign in to access your spaces and start building.
+ +
+
+ );
+ }
+
+ const handleSubmit = (e: React.FormEvent
+
+
+ Loading space...
+
+
+ );
+}
+s;
diff --git a/apps/create-hypergraph-app/template-vite-react/src/routes/public-space/$space-id.tsx b/apps/create-hypergraph-app/template-vite-react/src/routes/public-space/$space-id.tsx
new file mode 100644
index 00000000..2a83a651
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/routes/public-space/$space-id.tsx
@@ -0,0 +1,122 @@
+import { Address } from '@/schema';
+import { HypergraphSpaceProvider, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/public-space/$space-id')({
+ component: RouteComponent,
+});
+
+function RouteComponent() {
+ const { 'space-id': spaceId } = Route.useParams();
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {name}
+Manage your private addresses and publish them to public spaces
+
+ {/* Create Address Form */}
+
+
+
+
+ {/* Addresses List */}
+
+
+ Create New Address
+ +
+
+
+
+ + Your Addresses ({addresses?.length || 0}) +
+ + {addresses && addresses.length > 0 ? ( +
+ {addresses.map((address) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+ {address.name}
+ + ID: {address.id.slice(0, 8)}... + +
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ No addresses created yet
+Create your first address using the form
+
+
+ );
+ }
+
+ return (
+
+
+
+ Loading space...
+
+ {/* Header */}
+
+ );
+}
diff --git a/apps/create-hypergraph-app/template-vite-react/src/schema.ts b/apps/create-hypergraph-app/template-vite-react/src/schema.ts
new file mode 100644
index 00000000..ed50614a
--- /dev/null
+++ b/apps/create-hypergraph-app/template-vite-react/src/schema.ts
@@ -0,0 +1,10 @@
+import { Entity, Type } from '@graphprotocol/hypergraph';
+
+export class Address extends Entity.Class('Address')({
+ name: Type.Text,
+ description: Type.Text,
+}) {}
+
+export class Project extends Entity.Class
+
+
+ {/* Main Content */}
+
+
+
+
+ {name}
+Public Space
+
+
+
+
+
+
+
+ Addresses
++ {addresses ? `${addresses.length} addresses found` : 'Loading addresses...'} +
+
+ {!addresses ? (
+
+
+ {[...Array(3)].map((_, i) => (
+
+ ) : addresses.length > 0 ? (
+
+
+
+ ))}
+
+ {addresses.map((address) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+
+
+
+ {address.name.charAt(0).toUpperCase()}
+
+
+
+
+ + {address.name} +
+Address ID: {address.id}
+
+
+
+
+
+ )}
+
+
+
+ No addresses found
+This space doesn't have any addresses yet.
+