refactoring and cleanup of Send.Svelte

src/lib/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/Provider.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { configureChains, createConfig } from '@wagmi/core';
+	import { gnosis } from '@wagmi/core/chains';
+	import { publicProvider } from '@wagmi/core/providers/public';
+	import { InjectedConnector } from '@wagmi/core/connectors/injected';
+	import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
+
+	import { onMount } from 'svelte';
+
+	const { chains, publicClient } = configureChains(
+		[gnosis],
+		[
+			jsonRpcProvider({
+				rpc: () => ({
+					http: `https://rpc.gnosischain.com/`,
+					wss: `wss://rpc.gnosischain.com/wss`
+				})
+			}),
+			publicProvider()
+		]
+	);
+
+	onMount(() => {
+		createConfig({
+			autoConnect: true,
+			connectors: [new InjectedConnector({ chains })],
+			publicClient
+		});
+	});
+</script>

src/lib/Send.svelte

@@ -1,67 +1,34 @@
 <script>
-	import { onMount } from 'svelte';
+	import { waitForTransaction } from '@wagmi/core';
 
-	import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
+	export let pkpWallet;
-	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
-
-	let pkpWallet;
-	let authSig = null;
-
-	// Load wallet on component mount
-	onMount(async () => {
-		const storedAuthSig = await localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
-
-		if (storedAuthSig) {
-			authSig = JSON.parse(storedAuthSig);
-			pkpWallet = new PKPEthersWallet({
-				controllerAuthSig: authSig,
-				pkpPubKey:
-					'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
-				rpc: 'https://rpc.gnosischain.com/'
-			});
-			await pkpWallet.init();
-			console.log(pkpWallet);
-		} else {
-			alert('no authsig parsed from local storage');
-		}
-	});
 
 	const sendTransaction = async () => {
-		if (!authSig) {
+		console.log('transaction initiated');
-			alert('authsig not ready in send transaction');
+		const from = pkpWallet.address;
-		} else {
+		const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
-			console.log('transaction initiated');
+		const value = BigInt(10000000000000000);
-			const from = pkpWallet.address;
+		const gasLimit = 21000;
-			const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
-			const value = BigInt(10000000000000000);
-			const gasLimit = 21000;
 
-			// @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
+		const tx = {
-			const transactionRequest = {
+			from,
-				from,
+			to,
-				to,
+			value,
-				value,
+			gasLimit
-				gasLimit
+		};
-			};
+		console.log('transaction created: ' + tx);
-			console.log('transaction request created');
 
-			const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
+		const signedTx = await pkpWallet.signTransaction(tx);
-			await pkpWallet.sendTransaction(signedTransactionRequest);
+		console.log('transaction signed: ' + signedTx);
-			console.log('transaction sent');
+
-		}
+		await pkpWallet.sendTransaction(signedTx);
+		console.log('transaction sent');
 	};
 </script>
 
-<div class="p-4 bg-gray-200 flex justify-center items-center flex-col">
+<button
-	{#if pkpWallet}
+	class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg focus:outline-none focus:shadow-outline-blue active:bg-blue-800 transition duration-150 ease-in-out"
-		<div class="mb-4 text-lg font-medium">
+	on:click={sendTransaction}
-			PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
+>
-		</div>
+	send 0.01 xdai
-	{/if}
+</button>
-	<button
-		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg focus:outline-none focus:shadow-outline-blue active:bg-blue-800 transition duration-150 ease-in-out"
-		on:click={sendTransaction}
-	>
-		send 0.01 xdai
-	</button>
-</div>

src/lib/Wallet.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { onMount } from 'svelte';
+	import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
+	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
+
+	export let pkpWallet;
+	export let authSig = null;
+
+	onMount(async () => {
+		const storedAuthSig = await localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
+
+		if (storedAuthSig) {
+			authSig = JSON.parse(storedAuthSig);
+			pkpWallet = new PKPEthersWallet({
+				controllerAuthSig: authSig,
+				pkpPubKey:
+					'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
+				rpc: 'https://rpc.gnosischain.com/'
+			});
+			await pkpWallet.init();
+		} else {
+			alert('no authsig parsed from local storage');
+		}
+	});
+</script>
+
+{#if pkpWallet}
+	<div class="mb-4 text-lg font-medium">
+		PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
+	</div>
+{/if}

src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script>
 	import '../app.css';
+	import Provider from '$lib/Provider.svelte';
 </script>
 
+<Provider />
 <slot />

src/routes/+page.svelte

@@ -1,9 +1,18 @@
 <script>
 	import LitStatus from '$lib/LitStatus.svelte';
 	import AuthSign from '$lib/AuthSig.svelte';
+	import Wallet from '$lib/Wallet.svelte';
 	import Send from '$lib/Send.svelte';
+	import Balance from '$lib/Balance.svelte';
+	let pkpWallet;
+	let authSig;
 </script>
 
 <LitStatus />
 <AuthSign />
-<Send />
+
+<div class="p-4 bg-gray-200 flex justify-center items-center flex-col">
+	<Wallet bind:pkpWallet bind:authSig />
+	<Send bind:pkpWallet />
+	<Balance />
+</div>