From 1ad46b3252266af18989d2c3153bf50f02e36208 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Mon, 7 Aug 2023 18:57:19 +0200
Subject: [PATCH] Further cleanup and fixing Wallet and GoogleAuth to the new
 Composer interface

---
 src/lib/components/GoogleAuth.svelte          |  8 +++---
 src/lib/components/Messages.svelte            |  2 +-
 src/lib/components/Wallet/Wallet.svelte       | 28 -------------------
 .../components/refactor/ComposerWallet.svelte | 23 +++++++++++++++
 src/lib/core/{refactor => }/Composer.svelte   |  3 +-
 .../core/{refactor => }/componentLoader.ts    |  0
 src/lib/core/{refactor => }/composerStores.ts |  0
 src/lib/core/{refactor => }/coreServices.ts   |  0
 src/lib/core/{refactor => }/queryLoader.ts    |  0
 src/routes/+layout.svelte                     |  2 +-
 src/routes/+page.svelte                       |  2 +-
 src/routes/composer/+page.svelte              |  2 +-
 src/routes/composer/form/+page.svelte         |  4 +--
 src/routes/composer/graphql/+page.svelte      |  2 +-
 src/routes/composer/queries/+page.svelte      |  2 +-
 src/routes/composer/stateToState/+page.svelte |  2 +-
 src/routes/terminal/+page.svelte              |  2 +-
 src/routes/wallet/+page.svelte                | 27 +++++++++---------
 18 files changed, 51 insertions(+), 58 deletions(-)
 delete mode 100644 src/lib/components/Wallet/Wallet.svelte
 create mode 100644 src/lib/components/refactor/ComposerWallet.svelte
 rename src/lib/core/{refactor => }/Composer.svelte (97%)
 rename src/lib/core/{refactor => }/componentLoader.ts (100%)
 rename src/lib/core/{refactor => }/composerStores.ts (100%)
 rename src/lib/core/{refactor => }/coreServices.ts (100%)
 rename src/lib/core/{refactor => }/queryLoader.ts (100%)

diff --git a/src/lib/components/GoogleAuth.svelte b/src/lib/components/GoogleAuth.svelte
index b9b0434..63d422b 100644
--- a/src/lib/components/GoogleAuth.svelte
+++ b/src/lib/components/GoogleAuth.svelte
@@ -2,13 +2,13 @@
 	import { onMount } from 'svelte';
 	import { isSignInRedirect, getProviderFromUrl } from '@lit-protocol/lit-auth-client';
 	import type { IRelayPKP } from '@lit-protocol/types';
-	import { ProviderType } from '@lit-protocol/constants';
+	// import { ProviderType } from '@lit-protocol/constants';
 	import Icon from '@iconify/svelte';
 	import { createLitSession } from '$lib/services/createLitSession/createLitSession';
 	import Apps from '$lib/components/Apps.svelte';
+	import { connectProvider } from '$lib/services/provider/setupLit';
 
 	const redirectUri = 'http://localhost:5173/';
-	export let services;
 
 	let sessionSigs, error, currentPKP, authMethod, provider;
 	let log = '';
@@ -22,7 +22,7 @@
 	async function initialize() {
 		addToLog('Initialization...');
 		try {
-			provider = await services.setupLit.connectProvider();
+			provider = await connectProvider();
 			addToLog('Connected to Google provider.');
 			if (isSignInRedirect(redirectUri)) {
 				const providerName = getProviderFromUrl();
@@ -38,7 +38,7 @@
 	async function authWithGoogle() {
 		try {
 			if (!provider) {
-				provider = await services.setupLit.connectProvider();
+				provider = await connectProvider();
 				addToLog('Reconnected to Google provider.');
 			}
 			await provider.signIn();
diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte
index 3cfb6a5..7717ba2 100644
--- a/src/lib/components/Messages.svelte
+++ b/src/lib/components/Messages.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 
 	export let me;
 
diff --git a/src/lib/components/Wallet/Wallet.svelte b/src/lib/components/Wallet/Wallet.svelte
deleted file mode 100644
index 13cd80d..0000000
--- a/src/lib/components/Wallet/Wallet.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { connectWallet } from '$lib/services/wallet/wallet';
-	import WalletConnect from '$lib/WalletConnect.svelte';
-	import Send from '$lib/Send.svelte';
-
-	// 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>
-
-<div>
-	PkpWallet
-	{#if $store.pkpWallet}
-		<div class="mb-4 text-lg font-medium">
-			PKP Wallet: <span class="text-blue-600">{$store.pkpWallet.address}</span>
-		</div>
-		<Send pkpWallet={$store.pkpWallet} />
-	{/if}
-	<WalletConnect />
-</div>
diff --git a/src/lib/components/refactor/ComposerWallet.svelte b/src/lib/components/refactor/ComposerWallet.svelte
new file mode 100644
index 0000000..d1d195d
--- /dev/null
+++ b/src/lib/components/refactor/ComposerWallet.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { onMount } from 'svelte';
+	import { connectWallet } from '$lib/services/wallet/wallet';
+	import WalletConnect from '$lib/WalletConnect.svelte';
+	import Send from '$lib/Send.svelte';
+
+	export let me;
+
+	onMount(async () => {
+		$me.context.pkpWallet = await connectWallet($me.context.pkpPubKey, $me.context.rpcURL);
+	});
+</script>
+
+<div>
+	<div class="mb-4 text-lg font-medium">
+		PKP Wallet:
+		{#if $me.context.pkpWallet}
+			<span class="text-blue-600">{$me.context.pkpWallet.address}</span>
+		{/if}
+	</div>
+	<Send pkpWallet={$me.context.pkpWallet} />
+	<WalletConnect />
+</div>
diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/Composer.svelte
similarity index 97%
rename from src/lib/core/refactor/Composer.svelte
rename to src/lib/core/Composer.svelte
index f9e2c3c..a6deaf7 100644
--- a/src/lib/core/refactor/Composer.svelte
+++ b/src/lib/core/Composer.svelte
@@ -77,7 +77,8 @@
 				core: coreServices,
 				state: component.machineService || null
 			},
-			data: component.data || {} // Add this line
+			data: component.data || {},
+			context: component.machine?.context || {} // Add context here
 		}));
 
 		if (component.children) {
diff --git a/src/lib/core/refactor/componentLoader.ts b/src/lib/core/componentLoader.ts
similarity index 100%
rename from src/lib/core/refactor/componentLoader.ts
rename to src/lib/core/componentLoader.ts
diff --git a/src/lib/core/refactor/composerStores.ts b/src/lib/core/composerStores.ts
similarity index 100%
rename from src/lib/core/refactor/composerStores.ts
rename to src/lib/core/composerStores.ts
diff --git a/src/lib/core/refactor/coreServices.ts b/src/lib/core/coreServices.ts
similarity index 100%
rename from src/lib/core/refactor/coreServices.ts
rename to src/lib/core/coreServices.ts
diff --git a/src/lib/core/refactor/queryLoader.ts b/src/lib/core/queryLoader.ts
similarity index 100%
rename from src/lib/core/refactor/queryLoader.ts
rename to src/lib/core/queryLoader.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 676fe71..b72d391 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 	import { onMount } from 'svelte';
 
 	import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 
 	const providerData = {
 		walletConnectId: import.meta.env.VITE_WALLETCONNECT_ID
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de67d85..3975613 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 
 	let composer = {
 		id: 'login',
diff --git a/src/routes/composer/+page.svelte b/src/routes/composer/+page.svelte
index b735bf4..058c13c 100644
--- a/src/routes/composer/+page.svelte
+++ b/src/routes/composer/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 	import { queryMessages } from '$lib/data/queryMessages';
 	import { queryTodos } from '$lib/data/queryTodos';
 
diff --git a/src/routes/composer/form/+page.svelte b/src/routes/composer/form/+page.svelte
index 5194479..218bbc4 100644
--- a/src/routes/composer/form/+page.svelte
+++ b/src/routes/composer/form/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
-	import { queryMessages } from '$lib/data/queryMessages';
-	import { queryTodos } from '$lib/data/queryTodos';
+	import Composer from '$lib/core/Composer.svelte';
 
 	let composer = {
 		id: 'FormContainer',
diff --git a/src/routes/composer/graphql/+page.svelte b/src/routes/composer/graphql/+page.svelte
index 346fcc3..b79e1bf 100644
--- a/src/routes/composer/graphql/+page.svelte
+++ b/src/routes/composer/graphql/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 	import { onMount } from 'svelte';
 	import type { PageData } from '../../test/$houdini';
 
diff --git a/src/routes/composer/queries/+page.svelte b/src/routes/composer/queries/+page.svelte
index 7adfdc8..345356d 100644
--- a/src/routes/composer/queries/+page.svelte
+++ b/src/routes/composer/queries/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 	import { queryMessages } from '$lib/data/queryMessages';
 	import { queryTodos } from '$lib/data/queryTodos';
 
diff --git a/src/routes/composer/stateToState/+page.svelte b/src/routes/composer/stateToState/+page.svelte
index 6e410fc..aee312d 100644
--- a/src/routes/composer/stateToState/+page.svelte
+++ b/src/routes/composer/stateToState/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 
 	let composer = {
 		id: 'StateToStateContainer',
diff --git a/src/routes/terminal/+page.svelte b/src/routes/terminal/+page.svelte
index 4f611fd..2f4b05f 100644
--- a/src/routes/terminal/+page.svelte
+++ b/src/routes/terminal/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 	import { queryMessages } from '$lib/data/queryMessages';
 
 	let composer = {
diff --git a/src/routes/wallet/+page.svelte b/src/routes/wallet/+page.svelte
index 7ab317e..cea5234 100644
--- a/src/routes/wallet/+page.svelte
+++ b/src/routes/wallet/+page.svelte
@@ -1,14 +1,8 @@
 <script>
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import Composer from '$lib/core/Composer.svelte';
 
 	let composer = {
-		id: 'wallet',
-		store: {
-			pkpWallet: '',
-			rpcURL: 'https://rpc.gnosischain.com/',
-			pkpPubKey:
-				'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
-		},
+		id: 'ContainerWallet',
 		layout: {
 			areas: `
 				"top"
@@ -25,13 +19,18 @@
 			},
 			{
 				id: 'xyz',
-				component: 'Wallet',
+				component: 'ComposerWallet',
 				slot: 'main',
-				map: {
-					rpcURL: '@wallet:rpcURL',
-					pkpPubKey: '@wallet:pkpPubKey',
-					pkpWallet: '@wallet:pkpWallet',
-					todos: '@data:queryTodos'
+				data: {
+					map: {}
+				},
+				machine: {
+					context: {
+						pkpWallet: '',
+						rpcURL: 'https://rpc.gnosischain.com/',
+						pkpPubKey:
+							'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
+					}
 				}
 			},
 			{