updated the Google Flow UI part1

src/lib/components/GoogleAuth.svelte

@@ -1,152 +1,128 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
+	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 { createMessage } from '$lib/services/messages/messages';
-	import { createLitSession } from '$lib/services/createLitSession/createLitSession';
 	import Icon from '@iconify/svelte';
+	import { createLitSession } from '$lib/services/createLitSession/createLitSession';
 	import Apps from '$lib/components/Apps.svelte';
 
 	const redirectUri = 'http://localhost:5173/';
-
 	export let services;
 
-	let view = 'sign_in';
+	let sessionSigs, error, currentPKP, authMethod, provider;
-	let sessionSigs;
+	let log = '';
-	let error;
-	let isLoading = false;
-	let currentPKP;
 	let pkps: IRelayPKP[] = [];
-	let authMethod;
+	let view = 'SIGN_IN';
-	let provider;
 
-	function logMessage(text, type = 'SYSTEM') {
+	onMount(() => {
-		console.log(text);
+		initialize();
-		createMessage({
+	});
-			text,
-			sender: '$lib/components/GoogleAuth.svelte',
-			type
-		});
-	}
 
-	onMount(async () => {
+	async function initialize() {
+		addToLog('Initialization...');
 		try {
 			provider = await services.setupLit.connectProvider();
-			console.log('Provider: ' + provider);
+			addToLog('Connected to Google provider.');
-
+			if (isSignInRedirect(redirectUri)) {
-			logMessage('Component mounted.');
-
-			if (!authMethod && isSignInRedirect(redirectUri)) {
-				logMessage('Redirect detected, handling...');
 				const providerName = getProviderFromUrl();
 				if (providerName) {
 					await handleRedirect(providerName);
-				} else {
-					logMessage('No provider detected in the URL.', 'ERROR');
 				}
-			} else {
-				logMessage('No redirect detected.');
 			}
 		} catch (err) {
 			setError(err);
 		}
-	});
+	}
 
 	async function authWithGoogle() {
 		try {
+			if (!provider) {
+				provider = await services.setupLit.connectProvider();
+				addToLog('Reconnected to Google provider.');
+			}
 			await provider.signIn();
-			await handleRedirect(ProviderType.Google);
+			addToLog('Signed in with Google.');
 		} catch (err) {
 			setError(err);
 		}
 	}
 
 	async function handleRedirect(providerName: string) {
-		logMessage(`Handling redirect for ${providerName}`);
-
-		if (!provider) throw new Error('Invalid provider.');
-		authMethod = await provider.authenticate();
-		await tick();
-
-		view = 'fetching';
-		pkps = await provider.fetchPKPsThroughRelayer(authMethod);
-		view = pkps.length > 0 ? 'fetched' : 'NO_PKPS';
-
-		logMessage(`Fetched PKPs: ${pkps.length}`);
-	}
-
-	async function mint() {
 		try {
-			view = 'MINTING';
+			if (!provider) throw new Error('Invalid provider.');
-			const newPKP: IRelayPKP = await mintPkp(provider, authMethod);
+			authMethod = await provider.authenticate();
-			pkps = [...pkps, newPKP];
+			addToLog('Authenticated successfully.');
-			await createSession(newPKP);
+			pkps = await provider.fetchPKPsThroughRelayer(authMethod);
-			view = 'MINTED';
+			addToLog('Fetched PKPs.');
+			if (pkps.length === 0) {
+				addToLog('No PKPs found. Minting...');
+				await mint();
+			} else {
+				// Update the view to 'PKP' to show the available PKPs
+				view = 'PKP';
+			}
 		} catch (err) {
 			setError(err);
 		}
 	}
 
+	async function mint() {
+		const newPKP: IRelayPKP = await mintPkp(provider, authMethod);
+		pkps = [...pkps, newPKP];
+		addToLog('New PKP minted.');
+		await createSession(newPKP);
+	}
+
 	async function createSession(pkp: IRelayPKP) {
-		logMessage('Creating session...');
+		try {
-		view = 'CREATING_SESSION';
+			currentPKP = pkp; // Assign the selected PKP to currentPKP
-
+			sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
-		sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
+			addToLog('Session created successfully.');
-		currentPKP = pkp;
+			view = 'READY';
-
+		} catch (err) {
-		logMessage('Session created.');
+			setError(err);
-		view = 'SESSION_CREATED';
+		}
 	}
 
 	function setError(err) {
-		console.error(err);
 		error = err;
 		view = 'ERROR';
+		addToLog(`Error: ${err.message}`);
 	}
 
-	function resetView() {
+	function addToLog(message: string) {
-		view = authMethod ? 'fetched' : 'sign_in';
+		log += `${message}\n`;
-		error = null;
 	}
 </script>
 
-<main class="flex items-center justify-center h-full">
+<div class="flex items-center justify-center h-screen">
-	<div class="text-center">
+	<div>
 		{#if error}
-			<h1>Error</h1>
+			<div class="mt-4 text-center">
-			<p>{error.message}</p>
+				<h1>Error</h1>
-			<button on:click={resetView}>Got it</button>
+				<p>{error.message}</p>
-		{:else if isLoading}
+			</div>
-			<h1>Loading...</h1>
+		{:else if view === 'SIGN_IN'}
-		{:else if view === 'sign_in'}
 			<button on:click={authWithGoogle} class="btn variant-filled">
 				<span><Icon icon="flat-color-icons:google" /></span>
 				<span>Sign in with Google</span>
 			</button>
-		{:else if view === 'fetching'}
+		{:else if view === 'PKP'}
-			<h1>Fetching your PKPs...</h1>
-		{:else if view === 'NO_PKPS'}
-			<h1>No PKPs found.</h1>
-			<button on:click={mint}>Mint a PKP</button>
-		{:else if view === 'fetched'}
-			<h1>Select a PKP to continue</h1>
-			{#each pkps as pkp}
-				<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
-			{/each}
-		{:else if view === 'MINTING'}
-			<h1>Minting your PKP...</h1>
-		{:else if view === 'MINTED'}
-			<h1>Minted!</h1>
-		{:else if view === 'CREATING_SESSION'}
-			<h1>Creating session...</h1>
-		{:else if view === 'SESSION_CREATED'}
-			<h1>Ready for the open web</h1>
 			<div>
+				<h1>Select a PKP to continue</h1>
+				{#each pkps as pkp}
+					<button on:click={() => createSession(pkp)}>{pkp.ethAddress}</button>
+				{/each}
+			</div>
+		{:else if view === 'READY'}
+			<div>
+				<h1>Ready for the open web</h1>
 				<p>Check out your PKP:</p>
 				<p>{currentPKP.ethAddress}</p>
+				<Apps />
 			</div>
-			<Apps />
 		{/if}
+		<pre class="mt-4">{log}</pre>
 	</div>
-</main>
+</div>