Skip to content

Commit 88b733b

Browse files
ayelenmuranoayelenmurano
authored
Add .smal chain specs to website (#21)
* Add .smal chain specs to website * Adds chain spec file selection Introduces a dropdown to select between different chain spec files (raw and smol). Updates the chain specs data structure to include multiple files per chain.
1 parent 3be85c4 commit 88b733b

3 files changed

Lines changed: 141 additions & 20 deletions

File tree

‎src/components/sections/ChainSpecsSection.tsx‎

Lines changed: 75 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,66 @@
11
"use client";
22

33
import { Download } from "lucide-react";
4+
import { useState } from "react";
45
import { Button } from "@/components/ui/button";
6+
import {
7+
Select,
8+
SelectContent,
9+
SelectItem,
10+
SelectTrigger,
11+
SelectValue,
12+
} from "@/components/ui/select";
513
import { CHAIN_SPECS_CONTENT } from "@/constants/chain-specs";
614

15+
function getInitialSelectedFiles(): Record<string, string> {
16+
const initial: Record<string, string> = {};
17+
for (const spec of CHAIN_SPECS_CONTENT.specs) {
18+
initial[spec.title] = spec.files[0].filename;
19+
}
20+
return initial;
21+
}
22+
23+
interface FileSelectProps {
24+
files: readonly { filename: string; url: string }[];
25+
value: string;
26+
onChange: (value: string) => void;
27+
}
28+
29+
function FileSelect({ files, value, onChange }: FileSelectProps) {
30+
return (
31+
<Select value={value} onValueChange={onChange}>
32+
<SelectTrigger className="flex-1 h-8 text-xs bg-background/50 text-left [&>span]:text-left">
33+
<SelectValue />
34+
</SelectTrigger>
35+
<SelectContent>
36+
{files.map((file) => (
37+
<SelectItem key={file.filename} value={file.filename}>
38+
{file.filename}
39+
</SelectItem>
40+
))}
41+
</SelectContent>
42+
</Select>
43+
);
44+
}
45+
746
export function ChainSpecsSection() {
47+
const [selectedFiles, setSelectedFiles] = useState<Record<string, string>>(
48+
getInitialSelectedFiles,
49+
);
50+
51+
const getSelectedFile = (specTitle: string) => {
52+
const spec = CHAIN_SPECS_CONTENT.specs.find((s) => s.title === specTitle);
53+
const selectedFilename = selectedFiles[specTitle];
54+
return spec?.files.find((f) => f.filename === selectedFilename);
55+
};
56+
57+
const handleFileChange = (specTitle: string, value: string) => {
58+
setSelectedFiles((prev) => ({
59+
...prev,
60+
[specTitle]: value,
61+
}));
62+
};
63+
864
return (
965
<section id="chain-specs" className="section-primary py-24">
1066
<div className="max-w-7xl mx-auto px-6">
@@ -20,6 +76,9 @@ export function ChainSpecsSection() {
2076
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
2177
{CHAIN_SPECS_CONTENT.specs.map((spec) => {
2278
const Icon = spec.icon;
79+
const selectedFile = getSelectedFile(spec.title);
80+
const hasMultipleFiles = spec.files.length > 1;
81+
2382
return (
2483
<div
2584
key={spec.title}
@@ -32,15 +91,25 @@ export function ChainSpecsSection() {
3291
<p className="text-muted-foreground text-sm mb-4">
3392
{spec.description}
3493
</p>
35-
<div className="flex items-center justify-between">
36-
<code className="text-xs bg-background/50 px-2 py-1 rounded text-primary">
37-
{spec.filename}
38-
</code>
94+
<div className="flex items-center gap-2">
95+
{hasMultipleFiles ? (
96+
<FileSelect
97+
files={spec.files}
98+
value={selectedFiles[spec.title]}
99+
onChange={(value) => handleFileChange(spec.title, value)}
100+
/>
101+
) : (
102+
<code className="flex-1 text-xs bg-background/50 px-2 py-1 rounded text-primary truncate">
103+
{spec.files[0].filename}
104+
</code>
105+
)}
39106
<Button
40107
variant="ghost"
41108
size="sm"
42-
onClick={() => window.open(spec.url, "_blank")}
43-
className="bg-primary/10 hover:bg-primary/20 text-primary h-auto px-3 py-1 rounded-lg text-sm"
109+
onClick={() =>
110+
selectedFile && window.open(selectedFile.url, "_blank")
111+
}
112+
className="bg-primary/10 hover:bg-primary/20 text-primary h-auto px-3 py-1 rounded-lg text-sm shrink-0"
44113
>
45114
<Download className="w-3 h-3" />
46115
<span>{CHAIN_SPECS_CONTENT.downloadLabel}</span>

‎src/constants/chain-specs.tsx‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Database, FileCode, type LucideIcon, Server } from "lucide-react";
22
import { URLS } from "./urls";
33

4+
interface ChainSpecFile {
5+
readonly filename: string;
6+
readonly url: string;
7+
}
8+
49
interface ChainSpec {
510
readonly title: string;
611
readonly description: string;
7-
readonly filename: string;
8-
readonly url: string;
12+
readonly files: readonly ChainSpecFile[];
913
readonly icon: LucideIcon;
1014
}
1115

@@ -26,43 +30,79 @@ export const CHAIN_SPECS_CONTENT = {
2630
{
2731
title: "Paseo Relay Chain",
2832
description: "Main relay chain specification file",
29-
filename: "paseo.raw.json",
30-
url: URLS.chainSpecs.relayChain,
33+
files: [
34+
{ filename: "paseo.raw.json", url: URLS.chainSpecs.relayChain },
35+
{
36+
filename: "paseo.raw.smol.json",
37+
url: URLS.chainSpecs.relayChainSmol,
38+
},
39+
],
3140
icon: Server,
3241
},
3342
{
3443
title: "Asset Hub",
3544
description: "Asset Hub parachain specification",
36-
filename: "paseo-asset-hub.json",
37-
url: URLS.chainSpecs.assetHub,
45+
files: [
46+
{ filename: "paseo-asset-hub.json", url: URLS.chainSpecs.assetHub },
47+
{
48+
filename: "paseo-asset-hub.smol.json",
49+
url: URLS.chainSpecs.assetHubSmol,
50+
},
51+
],
3852
icon: Database,
3953
},
4054
{
4155
title: "Bridge Hub",
4256
description: "Bridge Hub parachain specification",
43-
filename: "paseo-bridge-hub.raw.json",
44-
url: URLS.chainSpecs.bridgeHub,
57+
files: [
58+
{
59+
filename: "paseo-bridge-hub.raw.json",
60+
url: URLS.chainSpecs.bridgeHub,
61+
},
62+
{
63+
filename: "paseo-bridge-hub.raw.smol.json",
64+
url: URLS.chainSpecs.bridgeHubSmol,
65+
},
66+
],
4567
icon: FileCode,
4668
},
4769
{
4870
title: "Coretime Chain",
4971
description: "Coretime parachain specification",
50-
filename: "paseo-coretime.raw.json",
51-
url: URLS.chainSpecs.coretime,
72+
files: [
73+
{ filename: "paseo-coretime.raw.json", url: URLS.chainSpecs.coretime },
74+
{
75+
filename: "paseo-coretime.raw.smol.json",
76+
url: URLS.chainSpecs.coretimeSmol,
77+
},
78+
],
5279
icon: Server,
5380
},
5481
{
5582
title: "People Chain",
5683
description: "People parachain specification",
57-
filename: "paseo-people.raw.json",
58-
url: URLS.chainSpecs.people,
84+
files: [
85+
{ filename: "paseo-people.raw.json", url: URLS.chainSpecs.people },
86+
{
87+
filename: "paseo-people.raw.smol.json",
88+
url: URLS.chainSpecs.peopleSmol,
89+
},
90+
],
5991
icon: Database,
6092
},
6193
{
6294
title: "Collectives Chain",
6395
description: "Collectives parachain specification",
64-
filename: "paseo-collectives.raw.json",
65-
url: URLS.chainSpecs.collectives,
96+
files: [
97+
{
98+
filename: "paseo-collectives.raw.json",
99+
url: URLS.chainSpecs.collectives,
100+
},
101+
{
102+
filename: "paseo-collectives.raw.smol.json",
103+
url: URLS.chainSpecs.collectivesSmol,
104+
},
105+
],
66106
icon: Database,
67107
},
68108
],

‎src/constants/urls.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,25 @@ export const URLS = {
4242
chainSpecsBase: "https://paseo-r2.zondax.ch/chain-specs",
4343
chainSpecs: {
4444
relayChain: "https://paseo-r2.zondax.ch/chain-specs/paseo.raw.json",
45+
relayChainSmol:
46+
"https://paseo-r2.zondax.ch/chain-specs/paseo.raw.smol.json",
4547
assetHub: "https://paseo-r2.zondax.ch/chain-specs/paseo-asset-hub.json",
48+
assetHubSmol:
49+
"https://paseo-r2.zondax.ch/chain-specs/paseo-asset-hub.smol.json",
4650
bridgeHub:
4751
"https://paseo-r2.zondax.ch/chain-specs/paseo-bridge-hub.raw.json",
52+
bridgeHubSmol:
53+
"https://paseo-r2.zondax.ch/chain-specs/paseo-bridge-hub.raw.smol.json",
4854
coretime: "https://paseo-r2.zondax.ch/chain-specs/paseo-coretime.raw.json",
55+
coretimeSmol:
56+
"https://paseo-r2.zondax.ch/chain-specs/paseo-coretime.raw.smol.json",
4957
people: "https://paseo-r2.zondax.ch/chain-specs/paseo-people.raw.json",
58+
peopleSmol:
59+
"https://paseo-r2.zondax.ch/chain-specs/paseo-people.raw.smol.json",
5060
collectives:
5161
"https://paseo-r2.zondax.ch/chain-specs/paseo-collectives.raw.json",
62+
collectivesSmol:
63+
"https://paseo-r2.zondax.ch/chain-specs/paseo-collectives.raw.smol.json",
5264
},
5365

5466
// Resources

0 commit comments

Comments
 (0)