Updated Hello Earth UI

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -8,7 +8,6 @@
 		// services.helloEarthAlert.alertMe();
 	}
 	$: if (services.core) {
-		console.log('services: ' + JSON.stringify(services));
 		// services.core.testAlert();
 	}
 
@@ -16,26 +15,38 @@
 </script>
 
 {#if isStoreLoaded}
-	<div class="p-12 bg-blue-400 rounded-md shadow-lg">
-		<p class="mb-4 text-xl font-bold text-white">Hello Earth</p>
-		Wallet Address:
+	<div class="container p-12">
+		<h1 class="h1">
+			{#if $store.title}{$store.title}{/if}
+		</h1>
+		<h2 class="py-6 h2">
+			{#if $store.description}{$store.description}{/if}
+		</h2>
+		<h3 class="mt-4 h3">Wallet Address</h3>
 		{#if $store.pkpWallet}
-			<p class="mb-6 text-white">{$store.pkpWallet.address}</p>
+			<p>{$store.pkpWallet.address}</p>
 		{/if}
-		<br />
-		hello store: {#if $store.hello}{$store.hello}{/if}
-		<br />
-		hello store2: {#if $store.hello2}{$store.hello2}{/if}
-		<br />
-		Reference TodoList
+
+		<h4 class="mt-4 h4">store: hello (init default)</h4>
+		{#if $store.hello}{$store.hello}{/if}
+		<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
+		{#if $store.hello2}{$store.hello2}{/if}
+
+		<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
 		{#if $store.todos}
-			<ul class="pl-5 list-decimal">
+			<dl class="list-dl">
 				{#each $store.todos as todo}
-					<li class="p-2 mb-2 text-gray-700 bg-white rounded shadow">{todo.text}</li>
+					<div>
+						<span class="flex-auto">
+							<dd>{todo.text}</dd>
+						</span>
+					</div>
 				{/each}
-			</ul>
+			</dl>
 		{/if}
 	</div>
 {:else}
-	<div class="p-6 text-center bg-gray-100 rounded-md shadow-lg">Loading...</div>
+	<div class="container">
+		<p>Loading...</p>
+	</div>
 {/if}

src/lib/components/Wallet/Wallet.svelte

@@ -1,13 +1,16 @@
 <script>
 	import { onMount } from 'svelte';
 	import { connectWallet } from '$lib/services/wallet/wallet';
-	import { getCompositeStore } from '$lib/core/compositeStores';
 
-	export let id;
-	const store = getCompositeStore(id);
+	// export let id;
+	export let store;
+	export let services;
 
 	onMount(async () => {
 		$store.pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
+		services.core.updateStore({
+			'@wallet:pkpWallet': $store.pkpWallet
+		});
 	});
 </script>
 

src/routes/helloearth/+page.svelte

@@ -4,6 +4,9 @@
 	let composite = {
 		id: 'hello',
 		store: {
+			title: 'Hello Earth',
+			description:
+				'Here you can find all the references, how to use the store and mapping logic of store to store and data to store maps',
 			helloMapMe: 'this is going to be mapped'
 		},
 		layout: {
@@ -23,8 +26,10 @@
 					hello2: 'overwrite me with the mapping value'
 				},
 				map: {
-					hello2: '@hello.helloMapMe',
-					pkpWallet: '@wallet.pkpWallet',
+					title: '@hello:title',
+					description: '@hello:description',
+					hello2: '@hello:helloMapMe',
+					pkpWallet: '@wallet:pkpWallet',
 					todos: '@data:queryTodos'
 				},
 				services: ['helloEarthAlert']