Skip to content

Commit 65b4d79

Browse files
cmwhitedcmwhited
committed
Merge branch 'main' of github.com:graphprotocol/hypergraph into chris.whited/feat-352/client
2 parents f52c65b + 62a1631 commit 65b4d79

File tree

47 files changed

+1519
-311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1519
-311
lines changed

‎.changeset/clean-spies-stare.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+
improve projects listing in both templates
6+

‎.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/connect/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# connect
22

3+
## 0.2.4
4+
### Patch Changes
5+
6+
- Updated dependencies [9d22312]
7+
- @graphprotocol/hypergraph@0.5.0
8+
- @graphprotocol/hypergraph-react@1.0.0
9+
310
## 0.2.3
411
### Patch Changes
512

‎apps/connect/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "connect",
33
"private": true,
4-
"version": "0.2.3",
4+
"version": "0.2.4",
55
"type": "module",
66
"scripts": {
77
"dev": "vite --force",

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
function getImageUrl(src: string | undefined | Blob) {
2+
if (!src || typeof src !== 'string') return src;
3+
const image = src.split('ipfs://');
4+
if (image.length === 2) {
5+
return `https://gateway.lighthouse.storage/ipfs/${image[1]}`;
6+
}
7+
return src;
8+
}
9+
10+
export function GraphImage(
11+
props: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
12+
) {
13+
return <img {...props} src={getImageUrl(props.src)} />;
14+
}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,17 @@ 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 (
27+
pathname.startsWith('/login') ||
28+
pathname.startsWith('/authenticate-success') ||
29+
pathname === '/' ||
30+
pathname === '/explore-public-knowledge' ||
31+
pathname === '/explore-public-knowledge/projects' ||
32+
pathname === '/explore-public-knowledge/dapps' ||
33+
pathname === '/explore-public-knowledge/investors' ||
34+
pathname === '/explore-public-knowledge/investment-rounds' ||
35+
pathname === '/explore-public-knowledge/assets'
36+
) {
2737
return;
2838
}
2939

‎apps/create-hypergraph/template-nextjs/Components/PublicKnowledge/Explore.tsx‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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: 'Assets', href: '/explore-public-knowledge/assets' },
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+
}

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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+
Assets
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
59+
strokeLinecap="round"
60+
strokeLinejoin="round"
61+
strokeWidth={2}
62+
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"
63+
/>
64+
</svg>
65+
</div>
66+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Assets Found</h3>
67+
<p className="text-gray-500">There are currently no public assets available to explore.</p>
68+
</div>
69+
)}
70+
</>
71+
);
72+
}

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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
37+
src={dapp.avatar[0].url}
38+
alt={`${dapp.name} avatar`}
39+
className="w-full h-full object-cover"
40+
/>
41+
) : (
42+
<span className="text-white font-bold text-lg">{dapp.name.charAt(0).toUpperCase()}</span>
43+
)}
44+
</div>
45+
46+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
47+
{dapp.name}
48+
</h3>
49+
50+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{dapp.id}</p>
51+
52+
{dapp.description && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{dapp.description}</p>}
53+
54+
{dapp.xUrl && (
55+
<a
56+
href={dapp.xUrl}
57+
target="_blank"
58+
rel="noopener noreferrer"
59+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
60+
>
61+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
62+
<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" />
63+
</svg>
64+
View on X
65+
</a>
66+
)}
67+
68+
{dapp.githubUrl && (
69+
<a
70+
href={dapp.githubUrl}
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
74+
>
75+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
76+
<path d="M12 2L2 22h20L12 2z" />
77+
</svg>
78+
View on Github
79+
</a>
80+
)}
81+
</div>
82+
83+
<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" />
84+
</div>
85+
))}
86+
</div>
87+
88+
{isPending === false && dapps.length === 0 && (
89+
<div className="text-center py-16">
90+
<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">
91+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
92+
<path
93+
strokeLinecap="round"
94+
strokeLinejoin="round"
95+
strokeWidth={2}
96+
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"
97+
/>
98+
</svg>
99+
</div>
100+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Dapps Found</h3>
101+
<p className="text-gray-500">There are currently no public dapps available to explore.</p>
102+
</div>
103+
)}
104+
</>
105+
);
106+
}

0 commit comments

Comments
 (0)