added dynamic data loading and mapping towards components.

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -3,6 +3,8 @@
 	export let services;
 	export let store;
 
+	// Watch for store changes
+
 	onMount(async () => {
 		if (services && services.helloEarthAlert) {
 			console.log('Alerted by HelloEarthAlert');
@@ -12,10 +14,23 @@
 	});
 </script>
 
-<!-- Only render the div when $store.pkpWallet is defined -->
-{#if $store}
-	<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
+{#if !$store}
+	<div>Loading store...</div>
 {:else}
-	<!-- You can display a loader or placeholder content here -->
-	<div>Loading...</div>
+	<div class="p-12 bg-blue-400">
+		Hello Earth
+		{#if $store.pkpWallet}{$store.pkpWallet.address}{/if}
+		{#if $store.todos && $store.messages}
+			<ul>
+				{#each $store.todos as todo}
+					<li>{todo.name}</li>
+				{/each}
+			</ul>
+			<ul>
+				{#each $store.messages as message}
+					<li>{message.text} - {message.date}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
 {/if}