Merge pull request #1011 from tradingstrategy-ai/extended-chains-3

Update blockchain index and sitemap with extended chains

Author: kenkunz

src/routes/trading-view/[chain=slug]/+layout.ts

@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import { chainsUnderMaintenance } from '$lib/config';
-import { getChain } from '$lib/helpers/chain.js';
+import { getChain } from '$lib/helpers/chain';
 
 export async function load({ params }) {
 	const { chain: chainSlug } = params;

src/routes/trading-view/[chain=slug]/[exchange]/+layout.ts

@@ -0,0 +1,7 @@
+import { error } from '@sveltejs/kit';
+
+// This route and sub-routes require chain to have backend data
+export async function load({ parent }) {
+	const { chain } = await parent();
+	if (!chain.hasBackendData) error(404, 'Not Found');
+}

src/routes/trading-view/[chain=slug]/exchanges/+page.ts

@@ -1,6 +1,10 @@
 import { fetchPublicApi } from '$lib/helpers/public-api';
+import { error } from '@sveltejs/kit';
 
 // https://tradingstrategy.ai/api/explorer/#/Exchange/web_exchanges
-export async function load({ fetch, params }) {
-	return await fetchPublicApi(fetch, 'exchanges', { chain_slug: params.chain });
+export async function load({ fetch, parent }) {
+	const { chain } = await parent();
+	if (!chain.hasBackendData) error(404, 'Not Found');
+
+	return await fetchPublicApi(fetch, 'exchanges', { chain_slug: chain.slug });
 }

src/routes/trading-view/[chain=slug]/lending/+layout.ts

@@ -0,0 +1,7 @@
+import { error } from '@sveltejs/kit';
+
+// This route and sub-routes require chain to have backend data
+export async function load({ parent }) {
+	const { chain } = await parent();
+	if (!chain.hasBackendData) error(404, 'Not Found');
+}

src/routes/trading-view/[chain=slug]/tokens/+layout.ts

@@ -0,0 +1,7 @@
+import { error } from '@sveltejs/kit';
+
+// This route and sub-routes require chain to have backend data
+export async function load({ parent }) {
+	const { chain } = await parent();
+	if (!chain.hasBackendData) error(404, 'Not Found');
+}

src/routes/trading-view/[chain=slug]/trading-pairs/+page.ts

@@ -1,8 +1,12 @@
+import { error } from '@sveltejs/kit';
 import { fetchPairs } from '$lib/explorer/pair-client';
 import { getNumberParam, getStringParam } from '$lib/helpers/url-params';
 import { sortOptions } from '$lib/explorer/PairTable.svelte';
 
-export async function load({ fetch, params, url }) {
+export async function load({ fetch, params, parent, url }) {
+	const { chain } = await parent();
+	if (!chain.hasBackendData) error(404, 'Not Found');
+
 	const { searchParams } = url;
 	const page = getNumberParam(searchParams, 'page', 0);
 	const sort = getStringParam(searchParams, 'sort', sortOptions.keys);

src/routes/trading-view/blockchains/+page.svelte

@@ -3,11 +3,11 @@
 -->
 <script lang="ts">
 	import Breadcrumbs from '$lib/breadcrumb/Breadcrumbs.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import HeroBanner from '$lib/components/HeroBanner.svelte';
+	import Section from '$lib/components/Section.svelte';
+	import { chains } from '$lib/helpers/chain';
 	import { getLogoUrl } from '$lib/helpers/assets';
-	import { formatAmount } from '$lib/helpers/formatters';
-	import { Button, ContentCard, ContentCardsSection, ContentCardsTemplate, HeroBanner } from '$lib/components';
-
-	export let data;
 </script>
 
 <svelte:head>
@@ -17,33 +17,49 @@
 
 <Breadcrumbs labels={{ blockchains: 'Blockchains' }} />
 
-<ContentCardsTemplate pageTitle="DEX trading view" pageDescription="DEX trading view">
-	<HeroBanner slot="hero" title="Blockchains" subtitle="List of currently active blockchains producing trading data." />
-
-	<ContentCardsSection cols={4} --button-width="100%">
-		{#each data.chains as chain}
-			<ContentCard href={`/trading-view/${chain.chain_slug}`} testId="chain-{chain.chain_id}-{chain.chain_slug}">
-				<img
-					slot="icon"
-					class="blockchain-logo"
-					alt={`${chain.chain_name} logo`}
-					src={getLogoUrl('blockchain', chain.chain_slug)}
-				/>
-				<h3 slot="title" class="blockchain-title">{chain.chain_name}</h3>
-				<p>{formatAmount(chain.exchanges)} exchanges</p>
-				<Button label="Details" />
-			</ContentCard>
-		{/each}
-	</ContentCardsSection>
-</ContentCardsTemplate>
+<main class="blockchains-page">
+	<Section>
+		<HeroBanner title="Blockchains" subtitle="List of currently active blockchains producing trading data." />
+	</Section>
+
+	<Section>
+		<div class="chains">
+			{#each chains as chain (chain.id)}
+				<a class="tile b" href={`/trading-view/${chain.slug}`}>
+					<img class="tile c" alt={`${chain.name} logo`} src={getLogoUrl('blockchain', chain.slug)} />
+					<h3>{chain.name}</h3>
+					<Button>View details</Button>
+				</a>
+			{/each}
+		</div>
+	</Section>
+</main>
 
 <style>
-	.blockchain-logo {
-		height: 3rem;
-		width: 3rem;
-	}
+	.chains {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
+		gap: 1.5rem;
+		margin-top: 1rem;
+
+		a {
+			display: grid;
+			padding: 1.5rem;
+			gap: 1rem;
+			justify-items: center;
+			--button-width: clamp(10rem, 50%, 15rem);
+		}
+
+		img {
+			height: 5rem;
+			width: 5rem;
+			border-radius: 50%;
+			margin-bottom: 0.5rem;
+			padding: 1rem;
+		}
 
-	h3.blockchain-title {
-		font: var(--f-heading-md-medium);
+		h3 {
+			font: var(--f-heading-md-medium);
+		}
 	}
 </style>

src/routes/trading-view/blockchains/+page.ts

@@ -2,20 +2,22 @@
  * Generate sitemap with entries for each chain
  */
 import { SitemapStream } from 'sitemap';
-import { fetchPublicApi } from '$lib/helpers/public-api';
+import { chains } from '$lib/helpers/chain';
 
-const chainPages = ['', 'exchanges', 'lending', 'tokens', 'trading-pairs'];
 const path = 'trading-view';
 const priority = 0.8;
 
 export async function GET({ fetch, setHeaders, url, route }) {
-	const chains = await fetchPublicApi(fetch, 'chains');
-
 	const stream = new SitemapStream({ hostname: url.origin });
 
-	for (const { chain_slug } of chains) {
-		for (const page of chainPages) {
-			const url = [path, chain_slug, page].filter(Boolean).join('/');
+	for (const chain of chains) {
+		const chainUrl = `${path}/${chain.slug}`;
+		stream.write({ url: chainUrl, priority });
+
+		const pages = chain.hasBackendData ? ['exchanges', 'lending', 'tokens', 'trading-pairs', 'vaults'] : ['vaults'];
+
+		for (const page of pages) {
+			const url = `${chainUrl}/${page}`;
 			stream.write({ url, priority });
 		}
 	}

src/routes/trading-view/blockchains/sitemap.xml/+server.ts

@@ -6,12 +6,6 @@ test.describe('chain index page', () => {
 		await page.goto('/trading-view/blockchains');
 	});
 
-	test('tiles should include exchange count', async ({ page }) => {
-		const blockchains = page.getByRole('link', { name: /[\d,]+ exchanges/ });
-		const count = await blockchains.count();
-		expect(count).toBeGreaterThan(0);
-	});
-
 	test('chain tile should link to chain details', async ({ page }) => {
 		const chain = page.getByRole('link', { name: /Ethereum/ });
 		await chain.click();