some basic cleanup

src/lib/components/AuthSig.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { onMount } from 'svelte';
+	import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';
+	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
+
+	let authSig = null;
+	let error = null;
+
+	async function generateAuthSig() {
+		authSig = null;
+		error = null;
+		try {
+			authSig = await checkAndSignAuthMessage({
+				chain: 'xdai'
+			});
+		} catch (err) {
+			console.error(err);
+			error = `Failed to sign auth message: ${err.message}`;
+		}
+	}
+	onMount(() => {
+		const storedAuthSig = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
+		if (storedAuthSig) {
+			authSig = JSON.parse(storedAuthSig);
+		}
+	});
+</script>
+
+<!-- AuthSig Address Displayed -->
+{#if authSig}
+	<div class="flex items-center p-4 mb-4 bg-gray-100 rounded-lg shadow-md">
+		<p class="font-medium text-gray-700">
+			AuthSig Address: <span class="text-orange-500">{authSig.address}</span>
+		</p>
+	</div>
+	<!-- Error Message -->
+{:else if error}
+	<div class="flex items-center p-4 mb-4 bg-red-100 rounded-lg shadow-md">
+		<p class="font-medium text-red-700">{error}</p>
+	</div>
+	<!-- Login Button -->
+{:else}
+	<div class="flex justify-center">
+		<button
+			class="flex items-center px-4 py-2 m-2 font-bold text-white bg-orange-500 rounded-lg shadow-lg hover:bg-orange-600"
+			on:click={generateAuthSig}
+		>
+			<img
+				src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
+				alt="MetaMask"
+				class="w-6 h-6 mr-2"
+			/>
+			<span class="text-lg">Login</span>
+		</button>
+	</div>
+{/if}

src/lib/components/Balance.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { fetchBalance } from '@wagmi/core';
+	import { onMount } from 'svelte';
+
+	export let balance;
+
+	onMount(async () => {
+		const getBalance = await fetchBalance({
+			address: '0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE'
+		});
+		balance = getBalance.formatted;
+	});
+</script>
+
+<span>{balance}</span>

src/lib/components/HelloEarth.svelte

@@ -1 +0,0 @@
-<div class="p-12 bg-blue-500">Hello Earth</div>

src/lib/components/Messages.svelte

@@ -39,7 +39,7 @@
 		</div>
 		<!-- Render Composite Component -->
 		{#if message.composite}
-			<div class="overflow-y-auto max-h-500">
+			<div class="overflow-y-auto max-h-80vh">
 				<Composite componentsData={message.composite} />
 			</div>
 		{/if}