From 5c2f7afa5f2d7a5230c3149dd9a7ccca312537ce Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Wed, 26 Jul 2023 11:11:12 +0200
Subject: [PATCH] abstracted subscribe to state in composite

---
 .../components/HelloEarth/HelloEarth.svelte   | 10 ++++----
 src/lib/core/Composite.svelte                 |  4 ++--
 src/routes/+page.svelte                       | 23 ++++++++++++-------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte
index 1fd4ec4..bafef9b 100644
--- a/src/lib/components/HelloEarth/HelloEarth.svelte
+++ b/src/lib/components/HelloEarth/HelloEarth.svelte
@@ -1,12 +1,8 @@
 <script>
-	export let id;
-
-	import { getCompositeStore } from '$lib/core/compositeStores';
 	import { onMount } from 'svelte';
 
-	const store = getCompositeStore(id);
-
 	export let services;
+	export let store;
 
 	onMount(async () => {
 		if (services && services.helloEarthAlert) {
@@ -17,4 +13,6 @@
 	});
 </script>
 
-<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store.pkpWallet.address)}</div>
+{#if $store && $store.pkpWallet.address}
+	<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store.pkpWallet.address)}</div>
+{/if}
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index bcc4ebb..aa0900c 100644
--- a/src/lib/core/Composite.svelte
+++ b/src/lib/core/Composite.svelte
@@ -130,7 +130,7 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 				<svelte:component
 					this={Component}
 					id={composite.id}
-					{...composite.store}
+					store={getCompositeStore(composite.id)}
 					services={serviceProps}
 				/>
 			{:else if composite.component}
@@ -147,7 +147,7 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 						<svelte:component
 							this={ChildComponent}
 							id={child.id}
-							{...child.store}
+							store={getCompositeStore(child.id)}
 							services={childServiceProps}
 						/>
 						{#if child.children && child.children.length}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 545c28e..3a4c95e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,24 +1,22 @@
 <script>
-	import Wallet from '$lib/Wallet.svelte';
-	import HelloEarth from '$lib/components/HelloEarth/HelloEarth.svelte';
 	import Composite from '$lib/core/Composite.svelte';
 
 	let composite = {
 		id: 'composite',
 		layout: {
 			areas: `
-				"top top top"
-				"main main main"
-				"footer footer footer";
+				"top main"
+				"aside main"
+				"footer footer ";
 			`,
-			columns: '1fr 1fr 1fr',
+			columns: '1fr 1fr ',
 			rows: '1fr 1fr auto'
 		},
 		children: [
 			{
-				id: 'wallet',
+				id: 'w',
 				component: 'Wallet',
-				slot: 'top',
+				slot: 'aside',
 				store: {
 					pkpWallet: '',
 					rpcURL: 'https://rpc.gnosischain.com/',
@@ -26,6 +24,15 @@
 						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
 				}
 			},
+			{
+				id: 'hello',
+				component: 'HelloEarth',
+				slot: 'top',
+				map: {
+					pkpWallet: 'w.pkpWallet'
+				},
+				services: ['helloEarthAlert']
+			},
 			{
 				id: 'messages',
 				component: 'Messages',