feat: add SwitchChain component to playground

packages/svelte/src/routes/+page.svelte

@@ -6,12 +6,14 @@ import Connect from './_components/Connect.svelte'
 import Connections from './_components/Connections.svelte'
 import ReadContract from './_components/ReadContract.svelte'
 import SwitchAccount from './_components/SwitchAccount.svelte'
+import SwitchChain from './_components/SwitchChain.svelte'
 </script>
 
 <Account />
 <Balance />
 <BlockNumber />
 <Connect />
 <SwitchAccount />
+<SwitchChain />
 <Connections />
 <ReadContract />

packages/svelte/src/routes/_components/SwitchChain.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { useChainId } from '$lib/hooks/useChainId.svelte.js'
+import { useSwitchChain } from '$lib/hooks/useSwitchChain.svelte.js'
+
+const chainId = $derived.by(useChainId())
+const { chains, switchChain, error } = $derived.by(useSwitchChain())
+</script>
+
+<h2>Switch Chain</h2>
+
+{#each chains as chain}
+    <button
+        disabled={chainId === chain.id}
+        onclick={() => switchChain({ chainId: chain.id })}
+        type="button"
+    >
+        {chain.name}
+    </button>
+{/each}
+
+{#if error}
+    {error.message}
+{/if}