Skip to content

Commit b2fbdbb

Browse files
nikgrafnikgraf
authored
add datasets (#458)
1 parent 7e20c0b commit b2fbdbb

23 files changed

Lines changed: 1098 additions & 159 deletions

File tree

‎.changeset/great-papayas-divide.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"create-hypergraph": patch
3+
---
4+
5+
add datasets (dapps, investment roundes, assets) to templates
6+

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
2323
const { redirectToConnect, logout } = useHypergraphApp();
2424

2525
useLayoutEffect(() => {
26-
if (pathname.startsWith('/login') || pathname.startsWith('/authenticate-success') || pathname === '/' || pathname === '/explore-public-knowledge') {
26+
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') {
2727
return;
2828
}
2929

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use client';
2+
3+
import { clsx } from 'clsx';
4+
import Link from 'next/link';
5+
import { usePathname } from 'next/navigation';
6+
7+
type Tab = {
8+
label: string;
9+
href: string;
10+
};
11+
12+
const tabs: Tab[] = [
13+
{ label: 'Projects', href: '/explore-public-knowledge/projects' },
14+
{ label: 'dApps', href: '/explore-public-knowledge/dapps' },
15+
{ label: 'Investment Rounds', href: '/explore-public-knowledge/investment-rounds' },
16+
{ label: 'Asset Market', href: '/explore-public-knowledge/asset-market' },
17+
];
18+
19+
export function ExploreTabs() {
20+
const pathname = usePathname();
21+
22+
return (
23+
<div className="w-full flex justify-center">
24+
<div className="inline-flex rounded-lg border bg-background p-1">
25+
{tabs.map((tab) => {
26+
const isActive = pathname.startsWith(tab.href);
27+
return (
28+
<Link
29+
key={tab.href}
30+
href={tab.href}
31+
className={clsx(
32+
'px-4 py-2 text-sm rounded-md transition-colors text-foreground hover:bg-accent hover:text-accent-foreground',
33+
isActive && 'bg-primary text-primary-foreground',
34+
)}
35+
>
36+
{tab.label}
37+
</Link>
38+
);
39+
})}
40+
</div>
41+
</div>
42+
);
43+
}
44+
45+

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
'use client';
2+
3+
import { useQuery } from '@graphprotocol/hypergraph-react';
4+
import { Asset } from '../../schema';
5+
6+
export default function ExploreAssetMarketPage() {
7+
const { data: assets, isPending } = useQuery(Asset, {
8+
mode: 'public',
9+
space: 'b2565802-3118-47be-91f2-e59170735bac',
10+
first: 100,
11+
});
12+
13+
return (
14+
<>
15+
<div className="text-center mb-4">
16+
<h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
17+
Asset Market
18+
</h2>
19+
</div>
20+
21+
{isPending && <div className="text-center py-16">Loading…</div>}
22+
23+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
24+
{assets.map((asset) => (
25+
<div
26+
key={asset.id}
27+
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"
28+
>
29+
<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" />
30+
31+
<div className="relative p-6">
32+
<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">
33+
<span className="text-white font-bold text-lg">{asset.name.charAt(0).toUpperCase()}</span>
34+
</div>
35+
36+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
37+
{asset.name}
38+
</h3>
39+
40+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{asset.id}</p>
41+
42+
{asset.symbol && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.symbol}</p>}
43+
44+
{asset.blockchainAddress && (
45+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.blockchainAddress}</p>
46+
)}
47+
</div>
48+
49+
<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" />
50+
</div>
51+
))}
52+
</div>
53+
54+
{isPending === false && assets.length === 0 && (
55+
<div className="text-center py-16">
56+
<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">
57+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
58+
<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" />
59+
</svg>
60+
</div>
61+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Assets Found</h3>
62+
<p className="text-gray-500">There are currently no public assets available to explore.</p>
63+
</div>
64+
)}
65+
</>
66+
);
67+
}
68+
69+

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
'use client';
2+
3+
import { useQuery } from '@graphprotocol/hypergraph-react';
4+
import { GraphImage } from '../../../Components/GraphImage';
5+
import { Dapp } from '../../schema';
6+
7+
export default function ExploreDappsPage() {
8+
const { data: dapps, isPending } = useQuery(Dapp, {
9+
mode: 'public',
10+
space: 'b2565802-3118-47be-91f2-e59170735bac',
11+
first: 100,
12+
include: { avatar: {} },
13+
});
14+
15+
return (
16+
<>
17+
<div className="text-center mb-4">
18+
<h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
19+
Dapps
20+
</h2>
21+
</div>
22+
23+
{isPending && <div className="text-center py-16">Loading…</div>}
24+
25+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
26+
{dapps.map((dapp) => (
27+
<div
28+
key={dapp.id}
29+
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"
30+
>
31+
<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" />
32+
33+
<div className="relative p-6">
34+
<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">
35+
{dapp.avatar?.[0]?.url ? (
36+
<GraphImage src={dapp.avatar[0].url} alt={`${dapp.name} avatar`} className="w-full h-full object-cover" />
37+
) : (
38+
<span className="text-white font-bold text-lg">{dapp.name.charAt(0).toUpperCase()}</span>
39+
)}
40+
</div>
41+
42+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
43+
{dapp.name}
44+
</h3>
45+
46+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{dapp.id}</p>
47+
48+
{dapp.description && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{dapp.description}</p>}
49+
50+
{dapp.xUrl && (
51+
<a
52+
href={dapp.xUrl}
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
56+
>
57+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
58+
<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" />
59+
</svg>
60+
View on X
61+
</a>
62+
)}
63+
64+
{dapp.githubUrl && (
65+
<a
66+
href={dapp.githubUrl}
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
70+
>
71+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
72+
<path d="M12 2L2 22h20L12 2z" />
73+
</svg>
74+
View on Github
75+
</a>
76+
)}
77+
</div>
78+
79+
<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" />
80+
</div>
81+
))}
82+
</div>
83+
84+
{isPending === false && dapps.length === 0 && (
85+
<div className="text-center py-16">
86+
<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">
87+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
88+
<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" />
89+
</svg>
90+
</div>
91+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Dapps Found</h3>
92+
<p className="text-gray-500">There are currently no public dapps available to explore.</p>
93+
</div>
94+
)}
95+
</>
96+
);
97+
}
98+
99+

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
'use client';
2+
3+
import { useQuery } from '@graphprotocol/hypergraph-react';
4+
import { InvestmentRound } from '../../schema';
5+
6+
export default function ExploreInvestmentRoundsPage() {
7+
const { data: investmentRounds, isPending } = useQuery(InvestmentRound, {
8+
mode: 'public',
9+
space: 'b2565802-3118-47be-91f2-e59170735bac',
10+
first: 100,
11+
include: {
12+
investors: {},
13+
fundingStages: {},
14+
raisedBy: {},
15+
},
16+
});
17+
18+
return (
19+
<>
20+
<div className="text-center mb-4">
21+
<h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
22+
Investment Rounds
23+
</h2>
24+
</div>
25+
26+
{isPending && <div className="text-center py-16">Loading…</div>}
27+
28+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
29+
{investmentRounds.map((investmentRound) => (
30+
<div
31+
key={investmentRound.id}
32+
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"
33+
>
34+
<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" />
35+
36+
<div className="relative p-6">
37+
<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">
38+
<span className="text-white font-bold text-lg">{investmentRound.name.charAt(0).toUpperCase()}</span>
39+
</div>
40+
41+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
42+
{investmentRound.name}
43+
</h3>
44+
45+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{investmentRound.id}</p>
46+
47+
{investmentRound.raisedAmount && (
48+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">USD {investmentRound.raisedAmount}</p>
49+
)}
50+
51+
{investmentRound.fundingStages.length > 0 && (
52+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">
53+
{investmentRound.fundingStages.map((fundingStage) => fundingStage.name).join(', ')}
54+
</p>
55+
)}
56+
57+
{investmentRound.investors.length > 0 && (
58+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">
59+
{investmentRound.investors.map((investor) => investor.name).join(', ')}
60+
</p>
61+
)}
62+
</div>
63+
64+
<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" />
65+
</div>
66+
))}
67+
</div>
68+
69+
{isPending === false && investmentRounds.length === 0 && (
70+
<div className="text-center py-16">
71+
<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">
72+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
73+
<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" />
74+
</svg>
75+
</div>
76+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Investment Rounds Found</h3>
77+
<p className="text-gray-500">There are currently no public investment rounds available to explore.</p>
78+
</div>
79+
)}
80+
</>
81+
);
82+
}
83+
84+

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ExploreTabs } from '../../Components/explore-tabs';
2+
3+
export default function ExplorePublicKnowledgeLayout({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<div className="container mx-auto px-4 py-8">
10+
<div className="text-center mb-12">
11+
<h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
12+
Explore Public Knowledge
13+
</h1>
14+
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
15+
This page demonstrates how to query public data from a space. No authentication is required.
16+
</p>
17+
</div>
18+
19+
<ExploreTabs />
20+
21+
<div className="mt-12">{children}</div>
22+
</div>
23+
);
24+
}
25+
26+

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
1-
import { PublicKnowledgeExplorer } from '../../Components/PublicKnowledge/Explore';
1+
import { redirect } from 'next/navigation';
22

3-
export default function ExplorePublicKnowledgePage() {
4-
return (
5-
<div className="container mx-auto px-4 py-8">
6-
<div className="text-center mb-12">
7-
<h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
8-
Explore Public Knowledge
9-
</h1>
10-
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
11-
This page demonstrates how to query public data from a space. No authentication is required.
12-
</p>
13-
</div>
14-
15-
<PublicKnowledgeExplorer />
16-
</div>
17-
);
3+
export default function ExplorePublicKnowledgeIndexPage() {
4+
redirect('/explore-public-knowledge/projects');
185
}

0 commit comments

Comments
 (0)