feat(wallet): Refactor wallet service for enhanced modularity and clarity

- Abstracted RPC interface to allow dynamic input for connection flexibility.
- Added `signSession` function to retrieve `authSig` efficiently.
- Improved logging and error handling to provide clearer feedback.
- Centralized `authSig` retrieval for better code maintainability.

This refactor ensures the wallet service is more adaptable to varying use cases and improves overall code readability.

src/lib/components/Wallet.svelte

@@ -1,21 +1,22 @@
 <script>
-	import AuthSig from '$lib/components/AuthSig.svelte';
+	import { onMount } from 'svelte';
-	import Wallet from '$lib/Wallet.svelte';
+	import { connectWallet } from '$lib/services/wallet/wallet';
-	import Send from '$lib/Send.svelte';
-	import WalletConnect from '$lib/WalletConnect.svelte';
-	import Balance from '$lib/components/Balance.svelte';
 
-	let pkpWallet;
+	let pkpWallet = null;
-	let authSig;
+
-	let pkpPubKey =
+	const pkpPubKey =
 		'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571';
+
+	// Specify your RPC URL here
+	const rpcURL = 'https://rpc.gnosischain.com/';
+
+	onMount(async () => {
+		pkpWallet = await connectWallet(pkpPubKey, rpcURL);
+	});
 </script>
 
-<AuthSig />
+{#if pkpWallet}
-<div class="flex flex-col items-center justify-center p-4 bg-gray-200">
+	<div class="mb-4 text-lg font-medium">
-	<Wallet bind:pkpWallet bind:authSig />
+		PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
-	<Send bind:pkpWallet />
-	<Balance />
-
-	<WalletConnect bind:pkpWallet bind:authSig bind:pkpPubKey />
 	</div>
+{/if}

src/lib/services/wallet/README.md

@@ -0,0 +1,36 @@
+# `wallet.ts` Service Documentation
+
+The `wallet.ts` service provides utilities for working with the PKPEthersWallet, including connecting and retrieving the authentication signature.
+
+## Dependencies
+
+- `getStoredAuthSig` from `'$lib/services/authWithMetamask/authWithMetamask'`
+- `PKPEthersWallet` from `'@lit-protocol/pkp-ethers'`
+- `createMessage` from `'$lib/services/messages'`
+
+## Variables
+
+- **isWalletConnected**: A boolean flag that keeps track of whether the wallet is currently connected or not.
+
+## Functions
+
+### `connectWallet(pkpPubKey: string, rpcURL: string = 'https://rpc.gnosischain.com/')`
+
+#### Parameters:
+- **pkpPubKey**: The public key used to connect to the wallet.
+- **rpcURL** (Optional): The RPC URL for the connection. Defaults to `'https://rpc.gnosischain.com/'`.
+
+#### Returns:
+- A promise which resolves to an instance of `PKPEthersWallet` if the wallet is successfully connected. If the wallet is already connected or there's an error in getting the `authSig`, it returns `null`.
+
+#### Description:
+This function first checks if the wallet is already connected. If it's not, it attempts to retrieve the `authSig` from local storage. If successful, it connects to the wallet using the provided `pkpPubKey` and `rpcURL`. Once the wallet is successfully connected, it sends a success message and sets the `isWalletConnected` flag to `true`.
+
+### `signSession()`
+
+#### Returns:
+- The `authSig` from local storage if it exists, or `null` otherwise.
+
+#### Description:
+This function retrieves the `authSig` from local storage and returns it. If the `authSig` does not exist in local storage, an error message is sent, and the function returns `null`.
+

src/lib/services/wallet/wallet.ts

@@ -0,0 +1,68 @@
+import { getStoredAuthSig } from '$lib/services/authWithMetamask/authWithMetamask';
+import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
+import { createMessage } from '$lib/services/messages';
+
+// Use a variable to keep track of whether the wallet has been connected or not
+let isWalletConnected = false;
+
+export async function connectWallet(pkpPubKey: string, rpcURL: string = 'https://rpc.gnosischain.com/'): Promise<PKPEthersWallet | null> {
+    if (isWalletConnected) {
+        createMessage({
+            text: 'Attempted to connect PKPEthersWallet, but it is already connected.',
+            sender: '$lib/services/wallet/wallet.ts',
+            type: 'INFO'
+        });
+        return null;
+    }
+
+    const authSig = getStoredAuthSig();
+
+    if (!authSig) {
+        createMessage({
+            text: 'No authSig parsed from local storage.',
+            sender: '$lib/services/wallet/wallet.ts',
+            type: 'ERROR'
+        });
+        alert('No authSig parsed from local storage');
+        return null;
+    }
+
+    createMessage({
+        text: `Connecting PKPEthersWallet with provided pkpPubKey using RPC: ${rpcURL}`,
+        sender: '$lib/services/wallet/wallet.ts',
+        type: 'SYSTEM'
+    });
+
+    const pkpWallet = new PKPEthersWallet({
+        controllerAuthSig: authSig,
+        pkpPubKey,
+        rpc: rpcURL
+    });
+
+    await pkpWallet.init();
+
+    createMessage({
+        text: 'PKPEthersWallet connected successfully.',
+        sender: '$lib/services/wallet/wallet.ts',
+        type: 'SUCCESS'
+    });
+
+    isWalletConnected = true;
+
+    return pkpWallet;
+}
+
+// Function to return the authSig
+export function signSession(): string | null {
+    const authSig = getStoredAuthSig();
+    if (!authSig) {
+        createMessage({
+            text: 'No authSig found in local storage.',
+            sender: '$lib/services/wallet/wallet.ts',
+            type: 'ERROR'
+        });
+        return null;
+    }
+
+    return authSig;
+}

src/routes/+page.svelte

@@ -7,14 +7,20 @@
 				"login",
 				"main"
 				"footer";
-			grid-template-rows: 150px 1fr auto;
+			grid-template-rows: 1fr 1fr auto;
 		`,
 		children: [
 			{
 				id: 1,
 				componentName: 'Login',
 				props: {},
-				slot: 'login'
+				slot: 'login',
+				children: [
+					{
+						id: 5,
+						componentName: 'Wallet'
+					}
+				]
 			},
 			{
 				id: 2,