Skip to content

Commit 4e0588f

Browse files
nikgrafnikgraf
committed
query assets, dapps and investment rounds
1 parent 463792d commit 4e0588f

File tree

6 files changed

+294
-16
lines changed

6 files changed

+294
-16
lines changed

‎apps/create-hypergraph/template-vite-react/src/mapping.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ export const mapping: Mapping.Mapping = {
2828
},
2929
Dapp: {
3030
typeIds: [Id('8ca136d0-698a-4bbf-a76b-8e2741b2dc8c')],
31+
properties: {
32+
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
33+
description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
34+
xUrl: Id('0d625978-4b3c-4b57-a86f-de45c997c73c'),
35+
githubUrl: Id('9eedefa8-60ae-4ac1-9a04-805054a4b094'),
36+
},
37+
relations: {
38+
avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'),
39+
},
40+
},
41+
Investor: {
42+
typeIds: [Id('331aea18-973c-4adc-8f53-614f598d262d')],
43+
properties: {
44+
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
45+
},
46+
},
47+
FundingStage: {
48+
typeIds: [Id('8d35d217-3fa1-4686-b74f-fcb3e9438067')],
3149
properties: {
3250
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
3351
},
@@ -36,12 +54,20 @@ export const mapping: Mapping.Mapping = {
3654
typeIds: [Id('8f03f4c9-59e4-44a8-a625-c0a40b1ff330')],
3755
properties: {
3856
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
57+
raisedAmount: Id('16781706-dd9c-48bf-913e-cdf18b56034f'),
58+
},
59+
relations: {
60+
investors: Id('9b8a610a-fa35-486e-a479-e253dbdabb4f'),
61+
fundingStages: Id('e278c3d4-78b9-4222-b272-5a39a8556bd2'),
62+
raisedBy: Id('b4878d1a-0609-488d-b8a6-e19862d6b62f'),
3963
},
4064
},
4165
Asset: {
4266
typeIds: [Id('f8780a80-c238-4a2a-96cb-567d88b1aa63')],
4367
properties: {
4468
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
69+
symbol: Id('ace1e96c-9b83-47b4-bd33-1d302ec0a0f5'),
70+
blockchainAddress: Id('56b5944f-f059-48d1-b0fa-34abe84219da'),
4571
},
4672
},
4773
};

‎apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/asset-market.tsx‎

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,71 @@ function AssetMarket() {
1313
first: 40,
1414
});
1515

16-
console.log(assets, isPending);
1716
return (
18-
<div className="container mx-auto px-0 py-0">
19-
<h1 className="text-3xl font-bold mb-2">Asset Market</h1>
20-
<p className="text-muted-foreground">Coming soon.</p>
21-
</div>
17+
<>
18+
<div className="text-center mb-4">
19+
<h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
20+
Asset Market
21+
</h2>
22+
</div>
23+
24+
{isPending && <div className="text-center py-16">Loading…</div>}
25+
26+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
27+
{assets.map((asset) => (
28+
<div
29+
key={asset.id}
30+
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"
31+
>
32+
{/* Gradient overlay */}
33+
<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" />
34+
35+
{/* Content */}
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">{asset.name.charAt(0).toUpperCase()}</span>
39+
</div>
40+
41+
{/* Asset name */}
42+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
43+
{asset.name}
44+
</h3>
45+
46+
{/* Asset ID */}
47+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{asset.id}</p>
48+
49+
{/* Asset symbol */}
50+
{asset.symbol && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.symbol}</p>}
51+
52+
{/* Asset blockchain address */}
53+
{asset.blockchainAddress && (
54+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">{asset.blockchainAddress}</p>
55+
)}
56+
</div>
57+
58+
{/* Decorative corner accent */}
59+
<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" />
60+
</div>
61+
))}
62+
</div>
63+
64+
{/* Empty state */}
65+
{isPending === false && assets.length === 0 && (
66+
<div className="text-center py-16">
67+
<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">
68+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
69+
<path
70+
strokeLinecap="round"
71+
strokeLinejoin="round"
72+
strokeWidth={2}
73+
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+
/>
75+
</svg>
76+
</div>
77+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Projects Found</h3>
78+
<p className="text-gray-500">There are currently no public projects available to explore.</p>
79+
</div>
80+
)}
81+
</>
2282
);
2383
}

‎apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/dapps.tsx‎

Lines changed: 101 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { GraphImage } from '@/components/graph-image';
12
import { Dapp } from '@/schema';
23
import { useQuery } from '@graphprotocol/hypergraph-react';
34
import { createFileRoute } from '@tanstack/react-router';
@@ -11,14 +12,108 @@ function Dapps() {
1112
mode: 'public',
1213
space: 'b2565802-3118-47be-91f2-e59170735bac',
1314
first: 40,
15+
include: { avatar: {} },
1416
});
1517

16-
console.log(dapps, isPending);
17-
1818
return (
19-
<div className="container mx-auto px-0 py-0">
20-
<h1 className="text-3xl font-bold mb-2">dApps</h1>
21-
<p className="text-muted-foreground">Coming soon.</p>
22-
</div>
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+
Dapps
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+
{dapps.map((dapp) => (
30+
<div
31+
key={dapp.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+
{/* Gradient overlay */}
35+
<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" />
36+
37+
{/* Content */}
38+
<div className="relative p-6">
39+
{/* Dapp icon/avatar */}
40+
<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">
41+
{dapp.avatar?.[0]?.url ? (
42+
<GraphImage
43+
src={dapp.avatar[0].url}
44+
alt={`${dapp.name} avatar`}
45+
className="w-full h-full object-cover"
46+
/>
47+
) : (
48+
<span className="text-white font-bold text-lg">{dapp.name.charAt(0).toUpperCase()}</span>
49+
)}
50+
</div>
51+
52+
{/* Asset name */}
53+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
54+
{dapp.name}
55+
</h3>
56+
57+
{/* Asset ID */}
58+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{dapp.id}</p>
59+
60+
{/* Dapp description */}
61+
{dapp.description && <p className="text-sm text-gray-600 mb-2 line-clamp-2">{dapp.description}</p>}
62+
63+
{/* Dapp xUrl */}
64+
{dapp.xUrl && (
65+
<a
66+
href={dapp.xUrl}
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="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" />
73+
</svg>
74+
View on X
75+
</a>
76+
)}
77+
78+
{/* Dapp githubUrl */}
79+
{dapp.githubUrl && (
80+
<a
81+
href={dapp.githubUrl}
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
85+
>
86+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
87+
<path d="M12 2L2 22h20L12 2z" />
88+
</svg>
89+
View on Github
90+
</a>
91+
)}
92+
</div>
93+
94+
{/* Decorative corner accent */}
95+
<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" />
96+
</div>
97+
))}
98+
</div>
99+
100+
{/* Empty state */}
101+
{isPending === false && dapps.length === 0 && (
102+
<div className="text-center py-16">
103+
<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">
104+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
105+
<path
106+
strokeLinecap="round"
107+
strokeLinejoin="round"
108+
strokeWidth={2}
109+
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"
110+
/>
111+
</svg>
112+
</div>
113+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Projects Found</h3>
114+
<p className="text-gray-500">There are currently no public projects available to explore.</p>
115+
</div>
116+
)}
117+
</>
23118
);
24119
}

‎apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/investment-rounts.tsx‎

Lines changed: 82 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,90 @@ function InvestmentRounts() {
1111
mode: 'public',
1212
space: 'b2565802-3118-47be-91f2-e59170735bac',
1313
first: 40,
14+
include: {
15+
investors: {},
16+
fundingStages: {},
17+
raisedBy: {},
18+
},
1419
});
1520

16-
console.log(investmentRounds, isPending);
1721
return (
18-
<div className="container mx-auto px-0 py-0">
19-
<h1 className="text-3xl font-bold mb-2">Investment Rounts</h1>
20-
<p className="text-muted-foreground">Coming soon.</p>
21-
</div>
22+
<>
23+
<div className="text-center mb-4">
24+
<h2 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
25+
Investment Rounds
26+
</h2>
27+
</div>
28+
29+
{isPending && <div className="text-center py-16">Loading…</div>}
30+
31+
{/* Investment rounds */}
32+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
33+
{investmentRounds.map((investmentRound) => (
34+
<div
35+
key={investmentRound.id}
36+
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"
37+
>
38+
{/* Gradient overlay */}
39+
<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" />
40+
41+
{/* Content */}
42+
<div className="relative p-6">
43+
<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">
44+
<span className="text-white font-bold text-lg">{investmentRound.name.charAt(0).toUpperCase()}</span>
45+
</div>
46+
47+
{/* Asset name */}
48+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
49+
{investmentRound.name}
50+
</h3>
51+
52+
{/* Asset ID */}
53+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{investmentRound.id}</p>
54+
55+
{/* Investment round raised amount */}
56+
{investmentRound.raisedAmount && (
57+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">USD {investmentRound.raisedAmount}</p>
58+
)}
59+
60+
{/* Investment round funding stages */}
61+
{investmentRound.fundingStages.length > 0 && (
62+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">
63+
{investmentRound.fundingStages.map((fundingStage) => fundingStage.name).join(', ')}
64+
</p>
65+
)}
66+
67+
{/* Investment round investors */}
68+
{investmentRound.investors.length > 0 && (
69+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">
70+
{investmentRound.investors.map((investor) => investor.name).join(', ')}
71+
</p>
72+
)}
73+
</div>
74+
75+
{/* Decorative corner accent */}
76+
<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" />
77+
</div>
78+
))}
79+
</div>
80+
81+
{/* Empty state */}
82+
{isPending === false && investmentRounds.length === 0 && (
83+
<div className="text-center py-16">
84+
<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">
85+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86+
<path
87+
strokeLinecap="round"
88+
strokeLinejoin="round"
89+
strokeWidth={2}
90+
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"
91+
/>
92+
</svg>
93+
</div>
94+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Projects Found</h3>
95+
<p className="text-gray-500">There are currently no public projects available to explore.</p>
96+
</div>
97+
)}
98+
</>
2299
);
23100
}

‎apps/create-hypergraph/template-vite-react/src/routes/explore-public-knowledge/projects.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ function ExplorePublicKnowledgeProjects() {
5555
</div>
5656
</div>
5757

58+
{isPending && <div className="text-center py-16">Loading…</div>}
59+
5860
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
5961
{projects.map((project) => (
6062
<div

‎apps/create-hypergraph/template-vite-react/src/schema.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,30 @@ export class Project extends Entity.Class<Project>('Project')({
1818

1919
export class Dapp extends Entity.Class<Dapp>('Dapp')({
2020
name: Type.String,
21+
description: Type.optional(Type.String),
22+
xUrl: Type.optional(Type.String),
23+
githubUrl: Type.optional(Type.String),
24+
avatar: Type.Relation(Image),
25+
}) {}
26+
27+
export class Investor extends Entity.Class<Investor>('Investor')({
28+
name: Type.String,
29+
}) {}
30+
31+
export class FundingStage extends Entity.Class<FundingStage>('FundingStage')({
32+
name: Type.String,
2133
}) {}
2234

2335
export class InvestmentRound extends Entity.Class<InvestmentRound>('InvestmentRound')({
2436
name: Type.String,
37+
raisedAmount: Type.optional(Type.Number),
38+
investors: Type.Relation(Investor),
39+
fundingStages: Type.Relation(FundingStage),
40+
raisedBy: Type.Relation(Project),
2541
}) {}
2642

2743
export class Asset extends Entity.Class<Asset>('Asset')({
2844
name: Type.String,
45+
symbol: Type.optional(Type.String),
46+
blockchainAddress: Type.optional(Type.String),
2947
}) {}

0 commit comments

Comments
 (0)