+
Explore Public Knowledge
@@ -35,103 +17,10 @@ function ExplorePublicKnowledge() {
- {/* Search UI */}
-
-
-
-
setSearchTerm(e.target.value)}
- placeholder="Search projects..."
- className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
- />
-
+
+
+
-
-
- {projects.map((project) => (
-
- {/* Gradient overlay */}
-
-
- {/* Content */}
-
- {/* Project icon/avatar */}
-
- {project.avatar?.[0]?.url ? (
-
- ) : (
- {project.name.charAt(0).toUpperCase()}
- )}
-
-
- {/* Project name */}
-
- {project.name}
-
-
- {/* Project ID */}
-
{project.id}
-
- {/* Project description */}
- {project.description &&
{project.description}
}
-
- {/* Project xUrl */}
- {project.xUrl && (
-
-
- View on X
-
- )}
-
-
- {/* Decorative corner accent */}
-
-
- ))}
-
-
- {/* Empty state */}
- {isPending === false && projects.length === 0 && (
-
-
-
No Projects Found
-
There are currently no public projects available to explore.
-
- )}
);
}
diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/asset-market.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/asset-market.tsx
new file mode 100644
index 00000000..f0520efb
--- /dev/null
+++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/asset-market.tsx
@@ -0,0 +1,83 @@
+import { Asset } from '@/schema';
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/explore-public-knowledge/asset-market')({
+ component: AssetMarket,
+});
+
+function AssetMarket() {
+ const { data: assets, isPending } = useQuery(Asset, {
+ mode: 'public',
+ space: 'b2565802-3118-47be-91f2-e59170735bac',
+ first: 100,
+ });
+
+ return (
+ <>
+
+
+ Asset Market
+
+
+
+ {isPending &&
Loading…
}
+
+
+ {assets.map((asset) => (
+
+ {/* Gradient overlay */}
+
+
+ {/* Content */}
+
+
+ {asset.name.charAt(0).toUpperCase()}
+
+
+ {/* Asset name */}
+
+ {asset.name}
+
+
+ {/* Asset ID */}
+
{asset.id}
+
+ {/* Asset symbol */}
+ {asset.symbol &&
{asset.symbol}
}
+
+ {/* Asset blockchain address */}
+ {asset.blockchainAddress && (
+
{asset.blockchainAddress}
+ )}
+
+
+ {/* Decorative corner accent */}
+
+
+ ))}
+
+
+ {/* Empty state */}
+ {isPending === false && assets.length === 0 && (
+
+
+
No Assets Found
+
There are currently no public assets available to explore.
+
+ )}
+
+ );
+}
diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/dapps.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/dapps.tsx
new file mode 100644
index 00000000..0072898e
--- /dev/null
+++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/dapps.tsx
@@ -0,0 +1,119 @@
+import { GraphImage } from '@/components/graph-image';
+import { Dapp } from '@/schema';
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/explore-public-knowledge/dapps')({
+ component: Dapps,
+});
+
+function Dapps() {
+ const { data: dapps, isPending } = useQuery(Dapp, {
+ mode: 'public',
+ space: 'b2565802-3118-47be-91f2-e59170735bac',
+ first: 100,
+ include: { avatar: {} },
+ });
+
+ return (
+ <>
+
+
+ Dapps
+
+
+
+ {isPending &&
Loading…
}
+
+
+ {dapps.map((dapp) => (
+
+ {/* Gradient overlay */}
+
+
+ {/* Content */}
+
+ {/* Dapp icon/avatar */}
+
+ {dapp.avatar?.[0]?.url ? (
+
+ ) : (
+ {dapp.name.charAt(0).toUpperCase()}
+ )}
+
+
+ {/* Asset name */}
+
+ {dapp.name}
+
+
+ {/* Asset ID */}
+
{dapp.id}
+
+ {/* Dapp description */}
+ {dapp.description &&
{dapp.description}
}
+
+ {/* Dapp xUrl */}
+ {dapp.xUrl && (
+
+
+ View on X
+
+ )}
+
+ {/* Dapp githubUrl */}
+ {dapp.githubUrl && (
+
+
+ View on Github
+
+ )}
+
+
+ {/* Decorative corner accent */}
+
+
+ ))}
+
+
+ {/* Empty state */}
+ {isPending === false && dapps.length === 0 && (
+
+
+
No Dapps Found
+
There are currently no public dapps available to explore.
+
+ )}
+
+ );
+}
diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/index.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/index.tsx
new file mode 100644
index 00000000..4d5ae379
--- /dev/null
+++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/explore-public-knowledge/')({
+ beforeLoad: () => {
+ throw redirect({ to: '/explore-public-knowledge/projects' });
+ },
+});
diff --git a/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/investment-rounds.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/investment-rounds.tsx
new file mode 100644
index 00000000..0560db32
--- /dev/null
+++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/investment-rounds.tsx
@@ -0,0 +1,100 @@
+import { InvestmentRound } from '@/schema';
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/explore-public-knowledge/investment-rounds')({
+ component: InvestmentRounds,
+});
+
+function InvestmentRounds() {
+ const { data: investmentRounds, isPending } = useQuery(InvestmentRound, {
+ mode: 'public',
+ space: 'b2565802-3118-47be-91f2-e59170735bac',
+ first: 100,
+ include: {
+ investors: {},
+ fundingStages: {},
+ raisedBy: {},
+ },
+ });
+
+ return (
+ <>
+
+
+ Investment Rounds
+
+
+
+ {isPending &&
Loading…
}
+
+ {/* Investment rounds */}
+
+ {investmentRounds.map((investmentRound) => (
+
+ {/* Gradient overlay */}
+
+
+ {/* Content */}
+
+
+ {investmentRound.name.charAt(0).toUpperCase()}
+
+
+ {/* Asset name */}
+
+ {investmentRound.name}
+
+
+ {/* Asset ID */}
+
{investmentRound.id}
+
+ {/* Investment round raised amount */}
+ {investmentRound.raisedAmount && (
+
USD {investmentRound.raisedAmount}
+ )}
+
+ {/* Investment round funding stages */}
+ {investmentRound.fundingStages.length > 0 && (
+
+ {investmentRound.fundingStages.map((fundingStage) => fundingStage.name).join(', ')}
+
+ )}
+
+ {/* Investment round investors */}
+ {investmentRound.investors.length > 0 && (
+
+ {investmentRound.investors.map((investor) => investor.name).join(', ')}
+
+ )}
+
+
+ {/* Decorative corner accent */}
+
+
+ ))}
+
+
+ {/* Empty state */}
+ {isPending === false && investmentRounds.length === 0 && (
+
+
+
No Investment Rounds Found
+
There are currently no public investment rounds available to explore.
+
+ )}
+
+ );
+}
diff --git a/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/projects.tsx
similarity index 89%
rename from apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx
rename to apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/projects.tsx
index cd7ff595..3b9ff688 100644
--- a/apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx
+++ b/apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/projects.tsx
@@ -1,17 +1,20 @@
-'use client';
-
+import { GraphImage } from '@/components/graph-image';
+import { Project } from '@/schema';
import { useQuery } from '@graphprotocol/hypergraph-react';
+import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
-import { Project } from '../../app/schema';
-import { GraphImage } from '../GraphImage';
-export function PublicKnowledgeExplorer() {
+export const Route = createFileRoute('/explore-public-knowledge/projects')({
+ component: ExplorePublicKnowledgeProjects,
+});
+
+function ExplorePublicKnowledgeProjects() {
const [searchTerm, setSearchTerm] = useState('');
const { data: projects, isPending } = useQuery(Project, {
mode: 'public',
space: 'b2565802-3118-47be-91f2-e59170735bac',
- first: 40,
+ first: 100,
include: { avatar: {} },
filter: {
name: {
@@ -23,6 +26,12 @@ export function PublicKnowledgeExplorer() {
return (
<>
+
+
+ Projects
+
+
+
{/* Search UI */}
@@ -46,6 +55,8 @@ export function PublicKnowledgeExplorer() {
+ {isPending &&
Loading…
}
+
{projects.map((project) => (
) : (
{project.name.charAt(0).toUpperCase()}
diff --git a/apps/create-hypergraph/template-vite-react/src/routes/index.tsx b/apps/create-hypergraph/template-vite-react/src/routes/index.tsx
index 228ac11f..b8ae9d1b 100644
--- a/apps/create-hypergraph/template-vite-react/src/routes/index.tsx
+++ b/apps/create-hypergraph/template-vite-react/src/routes/index.tsx
@@ -53,7 +53,7 @@ function Index() {
Discover and explore the vast network of knowledge already available in the public Knowledge Graph.
-
+
diff --git a/apps/create-hypergraph/template-vite-react/src/schema.ts b/apps/create-hypergraph/template-vite-react/src/schema.ts
index 4e869b87..aee4444f 100644
--- a/apps/create-hypergraph/template-vite-react/src/schema.ts
+++ b/apps/create-hypergraph/template-vite-react/src/schema.ts
@@ -15,3 +15,33 @@ export class Project extends Entity.Class
('Project')({
xUrl: Type.optional(Type.String),
avatar: Type.Relation(Image),
}) {}
+
+export class Dapp extends Entity.Class('Dapp')({
+ name: Type.String,
+ description: Type.optional(Type.String),
+ xUrl: Type.optional(Type.String),
+ githubUrl: Type.optional(Type.String),
+ avatar: Type.Relation(Image),
+}) {}
+
+export class Investor extends Entity.Class('Investor')({
+ name: Type.String,
+}) {}
+
+export class FundingStage extends Entity.Class('FundingStage')({
+ name: Type.String,
+}) {}
+
+export class InvestmentRound extends Entity.Class('InvestmentRound')({
+ name: Type.String,
+ raisedAmount: Type.optional(Type.Number),
+ investors: Type.Relation(Investor),
+ fundingStages: Type.Relation(FundingStage),
+ raisedBy: Type.Relation(Project),
+}) {}
+
+export class Asset extends Entity.Class('Asset')({
+ name: Type.String,
+ symbol: Type.optional(Type.String),
+ blockchainAddress: Type.optional(Type.String),
+}) {}