Yet more top vault tweaks

src/lib/helpers/chain.ts

@@ -8,14 +8,27 @@ export type ApiChain = {
 
 // Local cache of supported chains (helps limit API calls)
 export const chains = [
+	// Fully supported chains (indexed on Oracle)
 	{ id: 1, slug: 'ethereum', name: 'Ethereum', explorer: 'https://etherscan.io', gas: 'ETH' },
 	{ id: 56, slug: 'binance', name: 'BNB Smart Chain', explorer: 'https://bscscan.com', gas: 'BNB' },
+	{ id: 130, slug: 'unichain', name: 'Unichain', explorer: 'https://unichain.blockscout.com', gas: 'ETH' },
 	{ id: 137, slug: 'polygon', name: 'Polygon', explorer: 'https://polygonscan.com', gas: 'POL' },
 	{ id: 8453, slug: 'base', name: 'Base', explorer: 'https://basescan.org', gas: 'ETH' },
-	{ id: 43114, slug: 'avalanche', name: 'Avalanche C-chain', explorer: 'https://snowtrace.io', gas: 'AVAX' },
 	{ id: 42161, slug: 'arbitrum', name: 'Arbitrum One', explorer: 'https://arbiscan.io', gas: 'ETH' },
+	{ id: 43114, slug: 'avalanche', name: 'Avalanche C-chain', explorer: 'https://snowtrace.io', gas: 'AVAX' },
 	{ id: 80094, slug: 'berachain', name: 'Berachain', explorer: 'https://berascan.com', gas: 'BERA' },
-	{ id: 130, slug: 'unichain', name: 'Unichain', explorer: 'https://unichain.blockscout.com', gas: 'ETH' }
+	// Partially supported chains (indexed vaults, logos)
+	{ id: 10, slug: 'optimism', name: 'Optimism', explorer: 'https://explorer.optimism.io', gas: 'ETH' },
+	{ id: 100, slug: 'gnosis', name: 'Gnosis', explorer: 'https://gnosisscan.io', gas: 'XDAI' },
+	{ id: 146, slug: 'sonic', name: 'Sonic', explorer: 'https://sonicscan.org', gas: 'S' },
+	{ id: 999, slug: 'hyperliquid', name: 'Hyperliquid', explorer: 'https://app.hyperliquid.xyz', gas: 'HYPE' },
+	{ id: 1868, slug: 'soneium', name: 'Soneium', explorer: 'https://soneium.blockscout.com', gas: 'ETH' },
+	{ id: 9745, slug: 'plasma', name: 'Plasma', explorer: 'https://plasmascan.to', gas: 'XLP' },
+	{ id: 34443, slug: 'mode', name: 'Mode', explorer: 'https://modescan.io', gas: 'ETH' },
+	{ id: 43111, slug: 'hemi', name: 'Hemi', explorer: 'https://explorer.hemi.xyz', gas: 'ETH' },
+	{ id: 59144, slug: 'linea', name: 'Linea', explorer: 'https://lineascan.build', gas: 'ETH' },
+	{ id: 81457, slug: 'blast', name: 'Blast', explorer: 'https://blastscan.io', gas: 'ETH' },
+	{ id: 747474, slug: 'katana', name: 'Katana', explorer: 'https://katanascan.com', gas: 'ETH' }
 ] as const;
 
 export type Chain = (typeof chains)[number];

src/lib/top-vaults/ChainCell.svelte

@@ -33,8 +33,11 @@
 		--logo-size: 1.25rem;
 
 		img {
+			display: block;
 			width: var(--logo-size);
 			height: var(--logo-size);
+			min-width: var(--logo-size);
+			min-height: var(--logo-size);
 		}
 
 		.no-logo {

src/lib/top-vaults/RiskCell.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	interface Props {
+		risk: string | null;
+	}
+
+	const { risk }: Props = $props();
+
+	const riskClass = risk?.toLowerCase().replace(/ /g, '-') ?? 'unknown';
+</script>
+
+<div class={['risk', riskClass]}>
+	{risk ?? 'Unknown'}
+</div>
+
+<style>
+	.risk {
+		display: inline-grid;
+		align-items: center;
+		height: 1.375rem;
+		padding: 0 0.625rem;
+		border-radius: 1rem;
+		font: var(--f-ui-xs-medium);
+		letter-spacing: 0.02em;
+		background: var(--c-text-ultra-light);
+
+		/* custom text color defs that ignore light/dark mode (always light or dark color) */
+		--c-always-light: var(--cm-light, var(--c-text-inverted)) var(--cm-dark, var(--c-text));
+		--c-always-dark: var(--cm-light, var(--c-text)) var(--cm-dark, var(--c-text-inverted));
+
+		&.negligible {
+			background-color: #2d7a2e;
+			color: var(--c-always-light);
+		}
+
+		&.minimal {
+			background-color: #4caf50;
+			color: var(--c-text-inverted);
+		}
+
+		&.low {
+			background-color: #fbc02d;
+			color: var(--c-always-dark);
+		}
+
+		&.high {
+			background-color: #ff9800;
+			color: var(--c-text-inverted);
+		}
+
+		&.severe {
+			background-color: #f4511e;
+			color: var(--c-always-light);
+		}
+
+		&.dangerous {
+			background-color: #c62828;
+			color: var(--c-always-light);
+		}
+	}
+</style>