Update blockchain index page to include 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/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

@@ -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();