refactor(frontend): 💡 use snippets to reflect states in loader component

frontend/src/routes/dashboard/+layout.svelte

@@ -6,27 +6,29 @@
 </script>
 
 <HashConnectLoader>
-	{#snippet children({ hashConnect })}
-		{#if hashConnect.session}
-			Connected to {hashConnect.session.ledgerId.toString()} with {hashConnect.session.accountId.toString()}
-
-			{#if hashConnect.session}
-				<button onclick={hashConnect.session.disconnect}>disconnect</button>
-			{/if}
-		{:else}
-			<button
-				onclick={() => {
-					hashConnect.connect()
-				}}
-			>
-				Connect HashPack
-			</button>
-		{/if}
-
+	{#snippet initialized({ hashConnect })}
 		<select bind:value={hashConnect.selectedLedgerId}>
 			<option value={LedgerId.TESTNET}>{LedgerId.TESTNET}</option>
 			<option value={LedgerId.MAINNET}>{LedgerId.MAINNET}</option>
 		</select>
+
+		<button onclick={hashConnect.connect}>
+			Connect to {hashConnect.selectedLedgerId}
+		</button>
+	{/snippet}
+
+	{#snippet paired({ hashConnect })}
+		Connected to {hashConnect.session.ledgerId.toString()} with {hashConnect.session.accountId.toString()}
+
+		<button onclick={hashConnect.session.disconnect}>disconnect</button>
+
+		<label>
+			switch chain
+			<select bind:value={hashConnect.selectedLedgerId}>
+				<option value={LedgerId.TESTNET}>{LedgerId.TESTNET}</option>
+				<option value={LedgerId.MAINNET}>{LedgerId.MAINNET}</option>
+			</select>
+		</label>
 	{/snippet}
 </HashConnectLoader>
 

frontend/src/routes/dashboard/HashConnectLoader.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+	type UninitializedReactiveHashConnect = Pick<ReactiveHashConnect, 'selectedLedgerId'>
+
 	type InitializedReactiveHashConnect = Omit<ReactiveHashConnect, 'connect'> &
 		Pick<Required<ReactiveHashConnect>, 'connect'>
 
@@ -7,27 +9,39 @@
 	): reactiveHashConnect is InitializedReactiveHashConnect => {
 		return !!reactiveHashConnect.connect
 	}
+
+	type PairedReactiveHashConnect = Omit<ReactiveHashConnect, 'connect' | 'session'> &
+		Pick<Required<ReactiveHashConnect>, 'connect' | 'session'>
+	const isPaired = (
+		reactiveHashConnect: ReactiveHashConnect,
+	): reactiveHashConnect is PairedReactiveHashConnect => {
+		return !!reactiveHashConnect.connect && !!reactiveHashConnect.session
+	}
 </script>
 
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { hashConnect, type ReactiveHashConnect } from '../../lib/hashconnect/hashConnect.svelte'
 
 	let {
-		children,
+		paired,
+		initialized,
+		loading,
 	}: {
-		children: Snippet<
-			[
-				{
-					hashConnect: InitializedReactiveHashConnect
-				},
-			]
-		>
+		loading?: Snippet<[{ hashConnect: UninitializedReactiveHashConnect }]>
+		initialized?: Snippet<[{ hashConnect: InitializedReactiveHashConnect }]>
+		paired?: Snippet<[{ hashConnect: PairedReactiveHashConnect }]>
 	} = $props()
 </script>
 
 {#if !isInitialized(hashConnect)}
-	<span>Loading HashConnect</span>
-{:else}
-	{@render children({ hashConnect })}
+	{#if loading}
+		{@render loading({ hashConnect })}
+	{/if}
+{:else if !isPaired(hashConnect)}
+	{#if initialized}
+		{@render initialized({ hashConnect })}
+	{/if}
+{:else if paired}
+	{@render paired({ hashConnect })}
 {/if}