From 858d21e7dbcdf770f7802e1039ca50958e87b42d Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Wed, 26 Jul 2023 06:14:33 +0200
Subject: [PATCH] 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           |  2 +-
 .../components/HelloEarth/HelloEarth.svelte   |  5 ++---
 src/lib/components/Wallet/Wallet.svelte       |  9 +++-----
 src/routes/+page.svelte                       | 21 ++++++++++++-------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index e8d0e5f..c475645 100644
--- a/src/lib/components/Composite.svelte
+++ b/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);
diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte
index bb9eb2c..90fa10d 100644
--- a/src/lib/components/HelloEarth/HelloEarth.svelte
+++ b/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>
diff --git a/src/lib/components/Wallet/Wallet.svelte b/src/lib/components/Wallet/Wallet.svelte
index d730e25..ae455f6 100644
--- a/src/lib/components/Wallet/Wallet.svelte
+++ b/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}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f98f3e0..dad1c34 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,11 +4,11 @@
 	let componentsData = {
 		layout: {
 			areas: `   
-				"header header header"
-				"main main aside"
-				"footer footer footer";
+				"header  main"
+				"aside  main"
+				"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'