feat(wallet.svelte): integrate pkpWallet into state store

- Initialize pkpWallet with null value inside the component store.
- Update store's pkpWallet upon successful wallet connection.
- Reflect pkpWallet value reactively in the UI.

BREAKING CHANGE: The pkpWallet now resides in the component's store and should be accessed as $store.pkpWallet.

src/lib/components/Composite.svelte

@@ -29,7 +29,7 @@
     `;
 
 	function initializeComponentState(child) {
-		child.store = createComponentStore(child.id, child.state || {});
+		child.store = createComponentStore(child.id, child.store || {});
 
 		if (child.children) {
 			child.children.forEach(initializeComponentState);

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -5,14 +5,13 @@
 	import { onMount } from 'svelte';
 
 	const store = getComponentStore(id);
-	$: console.log('store:', $store);
 
 	export let helloEarthAlert;
 
 	onMount(async () => {
 		helloEarthAlert.alertMe();
-		console.log('hello Earth');
+		console.log('should alerted by now');
 	});
 </script>
 
-<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store)}</div>
+<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store.pkpWallet.address)}</div>

src/lib/components/Wallet/Wallet.svelte

@@ -3,20 +3,17 @@
 	import { connectWallet } from '$lib/services/wallet/wallet';
 	import { getComponentStore } from '$lib/stores/componentStores.ts';
 
-	// please abstract this.
 	export let id;
 	const store = getComponentStore(id);
 
-	export let pkpWallet = null;
-
 	onMount(async () => {
-		pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
+		$store.pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
 	});
 </script>
 
 PkpWallet
-{#if pkpWallet}
+{#if $store.pkpWallet}
 	<div class="mb-4 text-lg font-medium">
-		PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
+		PKP Wallet: <span class="text-blue-600">{$store.pkpWallet.address}</span>
 	</div>
 {/if}