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}

src/routes/+page.svelte

@@ -4,11 +4,11 @@
 	let componentsData = {
 		layout: {
 			areas: `   
-				"header header header"
+				"header  main"
-				"main main aside"
+				"aside  main"
-				"footer footer footer";
+				"footer  footer";
 			`,
-			columns: '1fr 1fr 1fr',
+			columns: '1fr 1fr',
 			rows: 'auto 1fr auto'
 		},
 		children: [
@@ -19,15 +19,20 @@
 				services: ['setupLit']
 			},
 			{
-				id: '2',
+				id: 'messages',
 				componentName: 'Messages',
-				slot: 'main'
+				slot: 'main',
+				store: {
+					prop1: 'prop1',
+					prop2: 'prop2'
+				}
 			},
 			{
-				id: '4',
+				id: 'wallet',
 				componentName: 'Wallet',
 				slot: 'aside',
-				state: {
+				store: {
+					pkpWallet: '',
 					rpcURL: 'https://rpc.gnosischain.com/',
 					pkpPubKey:
 						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'