Add "see all chains" button to homepage chains section

Author: kenkunz

src/routes/FeaturedStrategies.svelte

@@ -3,7 +3,9 @@
 	import { slide } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 	import { cubicOut } from 'svelte/easing';
-	import { Alert, Button, Section } from '$lib/components';
+	import Alert from '$lib/components/Alert.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import Section from '$lib/components/Section.svelte';
 	import {
 		type ChainOption,
 		default as ChainFilter,
@@ -13,11 +15,15 @@
 	import StrategyTile from './strategies/StrategyTile.svelte';
 	import { getStrategyChartDateRange } from 'trade-executor/helpers/chart';
 
-	export let strategies: StrategyInfo[];
+	interface Props {
+		strategies: StrategyInfo[];
+	}
+
+	let { strategies }: Props = $props();
 
-	let selected: ChainOption = 'all';
+	let selected: ChainOption = $state('all');
 
-	$: filteredStrategies = strategies.filter((s) => matchesChainOption(s, selected));
+	let filteredStrategies = $derived(strategies.filter((s) => matchesChainOption(s, selected)));
 
 	const chartDateRange = getStrategyChartDateRange(strategies);
 </script>

src/routes/ImpressiveNumbers.svelte

@@ -3,6 +3,7 @@
 	import { chains } from '$lib/helpers/chain';
 	import { getLogoUrl } from '$lib/helpers/assets';
 	import { formatAmount, formatDollar } from '$lib/helpers/formatters';
+	import Button from '$lib/components/Button.svelte';
 
 	let { impressiveNumbers } = $props();
 
@@ -13,11 +14,14 @@
 	{#if chains}
 		<h2>Trading Strategy runs on</h2>
 		<div class="chains">
-			{#each indexedChains as chain (chain.id)}
-				<a class="tile b" title={chain.name} href="/trading-view/{chain.slug}" data-sveltekit-preload-data>
-					<img src={getLogoUrl('blockchain', chain.slug)} alt={chain.name} />
-				</a>
-			{/each}
+			<div class="chain-logos">
+				{#each indexedChains as chain (chain.id)}
+					<a class="tile b" title={chain.name} href="/trading-view/{chain.slug}" data-sveltekit-preload-data>
+						<img src={getLogoUrl('blockchain', chain.slug)} alt={chain.name} />
+					</a>
+				{/each}
+			</div>
+			<Button class="chain-button" secondary label="See all chains" href="/trading-view/blockchains" />
 		</div>
 	{/if}
 
@@ -55,6 +59,15 @@
 	}
 
 	.chains {
+		display: grid;
+		gap: 2rem;
+
+		:global(.chain-button) {
+			justify-self: center;
+		}
+	}
+
+	.chain-logos {
 		display: grid;
 		grid-template-columns: repeat(8, auto);
 		gap: 2rem 0;