add datasets

.changeset/great-papayas-divide.md

@@ -0,0 +1,6 @@
+---
+"create-hypergraph": patch
+---
+
+add datasets (dapps, investment roundes, assets) to templates
+

apps/create-hypergraph/template-nextjs/Components/Layout.tsx

@@ -23,7 +23,7 @@ export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
   const { redirectToConnect, logout } = useHypergraphApp();
 
   useLayoutEffect(() => {
-    if (pathname.startsWith('/login') || pathname.startsWith('/authenticate-success') || pathname === '/' ||  pathname === '/explore-public-knowledge') {
+    if (pathname.startsWith('/login') || pathname.startsWith('/authenticate-success') || pathname === '/' ||  pathname === '/explore-public-knowledge' || pathname === '/explore-public-knowledge/projects' || pathname === '/explore-public-knowledge/dapps' || pathname === '/explore-public-knowledge/investors' || pathname === '/explore-public-knowledge/investment-rounds' || pathname === '/explore-public-knowledge/asset-market') {
       return;
     }
 

apps/create-hypergraph/template-nextjs/Components/explore-tabs.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { clsx } from 'clsx';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+type Tab = {
+  label: string;
+  href: string;
+};
+
+const tabs: Tab[] = [
+  { label: 'Projects', href: '/explore-public-knowledge/projects' },
+  { label: 'dApps', href: '/explore-public-knowledge/dapps' },
+  { label: 'Investment Rounds', href: '/explore-public-knowledge/investment-rounds' },
+  { label: 'Asset Market', href: '/explore-public-knowledge/asset-market' },
+];
+
+export function ExploreTabs() {
+  const pathname = usePathname();
+
+  return (
+    <div className="w-full flex justify-center">
+      <div className="inline-flex rounded-lg border bg-background p-1">
+        {tabs.map((tab) => {
+          const isActive = pathname.startsWith(tab.href);
+          return (
+            <Link
+              key={tab.href}
+              href={tab.href}
+              className={clsx(
+                'px-4 py-2 text-sm rounded-md transition-colors text-foreground hover:bg-accent hover:text-accent-foreground',
+                isActive && 'bg-primary text-primary-foreground',
+              )}
+            >
+              {tab.label}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+

apps/create-hypergraph/template-nextjs/app/explore-public-knowledge/asset-market/page.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { Asset } from '../../schema';
+
+export default function ExploreAssetMarketPage() {
+  const { data: assets, isPending } = useQuery(Asset, {
+    mode: 'public',
+    space: 'b2565802-3118-47be-91f2-e59170735bac',
+    first: 100,
+  });
+
+  return (
+    <>
+      <div className="text-center mb-4">
+        <h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          Asset Market
+        </h2>
+      </div>
+
+      {isPending && <div className="text-center py-16">Loading…</div>}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {assets.map((asset) => (
+          <div
+            key={asset.id}
+            className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200 transform hover:-translate-y-1 z-10"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-purple-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+            <div className="relative p-6">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 overflow-hidden">
+                <span className="text-white font-bold text-lg">{asset.name.charAt(0).toUpperCase()}</span>
+              </div>
+
+              <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
+                {asset.name}
+              </h3>
+
+              <p className="text-[10px] text-gray-500 mb-2 font-mono">{asset.id}</p>
+
+              {asset.symbol && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.symbol}</p>}
+
+              {asset.blockchainAddress && (
+                <p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.blockchainAddress}</p>
+              )}
+            </div>
+
+            <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300 transform rotate-45 translate-x-8 -translate-y-8" />
+          </div>
+        ))}
+      </div>
+
+      {isPending === false && assets.length === 0 && (
+        <div className="text-center py-16">
+          <div className="w-24 h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">No Assets Found</h3>
+          <p className="text-gray-500">There are currently no public assets available to explore.</p>
+        </div>
+      )}
+    </>
+  );
+}
+
+

apps/create-hypergraph/template-nextjs/app/explore-public-knowledge/dapps/page.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { GraphImage } from '../../../Components/GraphImage';
+import { Dapp } from '../../schema';
+
+export default function ExploreDappsPage() {
+  const { data: dapps, isPending } = useQuery(Dapp, {
+    mode: 'public',
+    space: 'b2565802-3118-47be-91f2-e59170735bac',
+    first: 100,
+    include: { avatar: {} },
+  });
+
+  return (
+    <>
+      <div className="text-center mb-4">
+        <h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          Dapps
+        </h2>
+      </div>
+
+      {isPending && <div className="text-center py-16">Loading…</div>}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {dapps.map((dapp) => (
+          <div
+            key={dapp.id}
+            className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200 transform hover:-translate-y-1 z-10"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-purple-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+            <div className="relative p-6">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 overflow-hidden">
+                {dapp.avatar?.[0]?.url ? (
+                  <GraphImage src={dapp.avatar[0].url} alt={`${dapp.name} avatar`} className="w-full h-full object-cover" />
+                ) : (
+                  <span className="text-white font-bold text-lg">{dapp.name.charAt(0).toUpperCase()}</span>
+                )}
+              </div>
+
+              <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
+                {dapp.name}
+              </h3>
+
+              <p className="text-[10px] text-gray-500 mb-2 font-mono">{dapp.id}</p>
+
+              {dapp.description && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{dapp.description}</p>}
+
+              {dapp.xUrl && (
+                <a
+                  href={dapp.xUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
+                >
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                  </svg>
+                  View on X
+                </a>
+              )}
+
+              {dapp.githubUrl && (
+                <a
+                  href={dapp.githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
+                >
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2L2 22h20L12 2z" />
+                  </svg>
+                  View on Github
+                </a>
+              )}
+            </div>
+
+            <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300 transform rotate-45 translate-x-8 -translate-y-8" />
+          </div>
+        ))}
+      </div>
+
+      {isPending === false && dapps.length === 0 && (
+        <div className="text-center py-16">
+          <div className="w-24 h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">No Dapps Found</h3>
+          <p className="text-gray-500">There are currently no public dapps available to explore.</p>
+        </div>
+      )}
+    </>
+  );
+}
+
+

apps/create-hypergraph/template-nextjs/app/explore-public-knowledge/investment-rounds/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { InvestmentRound } from '../../schema';
+
+export default function ExploreInvestmentRoundsPage() {
+  const { data: investmentRounds, isPending } = useQuery(InvestmentRound, {
+    mode: 'public',
+    space: 'b2565802-3118-47be-91f2-e59170735bac',
+    first: 100,
+    include: {
+      investors: {},
+      fundingStages: {},
+      raisedBy: {},
+    },
+  });
+
+  return (
+    <>
+      <div className="text-center mb-4">
+        <h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          Investment Rounds
+        </h2>
+      </div>
+
+      {isPending && <div className="text-center py-16">Loading…</div>}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {investmentRounds.map((investmentRound) => (
+          <div
+            key={investmentRound.id}
+            className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200 transform hover:-translate-y-1 z-10"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-purple-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+            <div className="relative p-6">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 overflow-hidden">
+                <span className="text-white font-bold text-lg">{investmentRound.name.charAt(0).toUpperCase()}</span>
+              </div>
+
+              <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
+                {investmentRound.name}
+              </h3>
+
+              <p className="text-[10px] text-gray-500 mb-2 font-mono">{investmentRound.id}</p>
+
+              {investmentRound.raisedAmount && (
+                <p className="text-sm text-gray-600 mb-2 line-clamp-2">USD {investmentRound.raisedAmount}</p>
+              )}
+
+              {investmentRound.fundingStages.length > 0 && (
+                <p className="text-sm text-gray-600 mb-2 line-clamp-2">
+                  {investmentRound.fundingStages.map((fundingStage) => fundingStage.name).join(', ')}
+                </p>
+              )}
+
+              {investmentRound.investors.length > 0 && (
+                <p className="text-sm text-gray-600 mb-2 line-clamp-2">
+                  {investmentRound.investors.map((investor) => investor.name).join(', ')}
+                </p>
+              )}
+            </div>
+
+            <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300 transform rotate-45 translate-x-8 -translate-y-8" />
+          </div>
+        ))}
+      </div>
+
+      {isPending === false && investmentRounds.length === 0 && (
+        <div className="text-center py-16">
+          <div className="w-24 h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">No Investment Rounds Found</h3>
+          <p className="text-gray-500">There are currently no public investment rounds available to explore.</p>
+        </div>
+      )}
+    </>
+  );
+}
+
+

apps/create-hypergraph/template-nextjs/app/explore-public-knowledge/layout.tsx

@@ -0,0 +1,26 @@
+import { ExploreTabs } from '../../Components/explore-tabs';
+
+export default function ExplorePublicKnowledgeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="text-center mb-12">
+        <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          Explore Public Knowledge
+        </h1>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+          This page demonstrates how to query public data from a space. No authentication is required.
+        </p>
+      </div>
+
+      <ExploreTabs />
+
+      <div className="mt-12">{children}</div>
+    </div>
+  );
+}
+
+

apps/create-hypergraph/template-nextjs/app/explore-public-knowledge/page.tsx

@@ -1,18 +1,5 @@
-import { PublicKnowledgeExplorer } from '../../Components/PublicKnowledge/Explore';
+import { redirect } from 'next/navigation';
 
-export default function ExplorePublicKnowledgePage() {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="text-center mb-12">
-        <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-          Explore Public Knowledge
-        </h1>
-        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          This page demonstrates how to query public data from a space. No authentication is required.
-        </p>
-      </div>
-
-      <PublicKnowledgeExplorer />
-    </div>
-  );
+export default function ExplorePublicKnowledgeIndexPage() {
+  redirect('/explore-public-knowledge/projects');
 }