Merge pull request #34 from Zondax/muranoa/explorers

Add paseo explorer on resources

Author: ayelenmurano

.github/workflows/ci-playwright.yml

@@ -16,4 +16,8 @@ concurrency:
 
 jobs:
   playwright-tests:
-    uses: zondax/_workflows/.github/workflows/_checks-playwright.yaml@v3
+    needs:
+      - ts-checks-linux
+    uses: zondax/_workflows/.github/workflows/_checks-playwright.yaml@v4
+    with:
+      environment: dev

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+pnpm = "latest"

package.json

@@ -17,6 +17,7 @@
 		"test:console": "playwright test console-errors",
 		"test:coverage": "vitest run --coverage",
 		"test:e2e": "playwright test",
+		"test:e2e:build": "pnpm build && playwright test",
 		"test:e2e:debug": "playwright test e2e --debug",
 		"test:e2e:install": "playwright install",
 		"test:e2e:report": "playwright show-report",
@@ -50,7 +51,7 @@
 		"tailwind-merge": "^3.3.1"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.1.2",
+		"@biomejs/biome": "2.3.10",
 		"@playwright/test": "^1.55.1",
 		"@tailwindcss/postcss": "^4",
 		"@types/node": "^20",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ import { CopyButton } from "./CopyButton";
 
 export interface DetailField {
 	label: string;
-	value: string | readonly string[];
+	value?: string | readonly string[];
 	type?: "text" | "copyable" | "link";
 	icon?: string;
 }
@@ -47,6 +47,18 @@ export function ResourceDetailsModal({
 	data,
 }: ResourceDetailsModalProps) {
 	const renderField = (field: DetailField) => {
+		// Handle fields without value (label-only fields)
+		if (field.value === undefined) {
+			return (
+				<div key={field.label}>
+					<p className="text-sm text-muted-foreground">
+						{field.icon && `${field.icon} `}
+						{field.label}
+					</p>
+				</div>
+			);
+		}
+
 		const isArray = Array.isArray(field.value);
 		const values: string[] = isArray
 			? [...field.value]

src/components/shared/ResourceDetailsModal.tsx

@@ -1,13 +1,20 @@
 import type { LucideIcon } from "lucide-react";
-import { Blocks, Droplets, FileText, Globe, Rocket } from "lucide-react";
+import {
+	Blocks,
+	Droplets,
+	FileText,
+	Globe,
+	Rocket,
+	Search,
+} from "lucide-react";
 import { URLS } from "./urls";
 
 // Resource modal field structure
-interface ModalField {
+export interface ModalField {
 	readonly label: string;
-	readonly value: string | readonly string[];
+	readonly value?: string | readonly string[];
 	readonly icon: string;
-	readonly type?: "copyable";
+	readonly type?: "text" | "copyable" | "link";
 }
 
 // Resource modal action structure
@@ -17,15 +24,15 @@ interface ModalAction {
 }
 
 // Resource modal data structure
-interface ModalData {
+export interface ModalData {
 	readonly sections: readonly {
 		readonly fields: readonly ModalField[];
 	}[];
 	readonly actions: readonly ModalAction[];
 }
 
 // Resource item structure
-interface Resource {
+export interface Resource {
 	readonly icon: LucideIcon;
 	readonly title: string;
 	readonly description: string;
@@ -130,4 +137,35 @@ export const RESOURCES = [
 			],
 		},
 	},
+	{
+		icon: Search,
+		title: "Explorers",
+		description:
+			"Browse transactions, blocks, and accounts on Paseo network with blockchain explorers.",
+		href: undefined,
+		isExternal: false,
+		buttonLabel: "View Explorers",
+		modalData: {
+			sections: [
+				{
+					fields: [
+						{
+							label: "Choose a block explorer to get started",
+							icon: "🔎",
+						},
+					],
+				},
+			],
+			actions: [
+				{
+					label: "Open Routescan",
+					url: URLS.explorers.routescan,
+				},
+				{
+					label: "Open Subscan",
+					url: URLS.explorers.subscan,
+				},
+			],
+		},
+	},
 ] as const satisfies readonly Resource[];

src/constants/resources.ts

@@ -63,6 +63,12 @@ export const URLS = {
 			"https://paseo-r2.zondax.ch/chain-specs/paseo-collectives.raw.smol.json",
 	},
 
+	// Explorers
+	explorers: {
+		routescan: "https://polkadot.testnet.routescan.io/",
+		subscan: "https://paseo.subscan.io/",
+	},
+
 	// Resources
 	faucet: "https://faucet.polkadot.io/",
 	onPop: "https://onpop.io/",