Refactor authWithMetamask to enhance modularity and introduce logout functionality

src/lib/components/Login/Login.svelte

@@ -0,0 +1,63 @@
+<script>
+	import { onMount } from 'svelte';
+	import {
+		generateAuthSig,
+		getStoredAuthSig,
+		logout
+	} from '$lib/services/authWithMetamask/authWithMetamask';
+
+	let authSig = null;
+	let error = null;
+
+	async function handleAuth() {
+		try {
+			authSig = await generateAuthSig();
+		} catch (err) {
+			error = err.message;
+		}
+	}
+
+	function handleLogout() {
+		logout();
+		authSig = null;
+	}
+
+	onMount(() => {
+		authSig = getStoredAuthSig();
+	});
+</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">
+			Metamask Address: <span class="text-orange-500">{authSig.address}</span>
+		</p>
+		<button
+			class="px-4 py-2 ml-4 font-bold text-white bg-red-500 rounded-lg shadow-lg hover:bg-red-600"
+			on:click={handleLogout}
+		>
+			Logout
+		</button>
+	</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={handleAuth}
+		>
+			<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}