<script>
	import { onMount } from 'svelte';

	import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';

	// Access the environment variable
	const authSig = JSON.parse(import.meta.env.VITE_AUTH_SIG);

	let pkpWallet;

	// Load wallet on component mount
	onMount(async () => {
		pkpWallet = new PKPEthersWallet({
			controllerAuthSig: authSig,
			pkpPubKey:
				'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571',
			rpc: 'https://rpc.gnosischain.com/'
		});

		await pkpWallet.init();
		console.log(pkpWallet);
	});

	const sendTransaction = async () => {
		console.log('transaction initiated');
		const from = '0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE';
		const to = '0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A';
		const value = BigInt(1000000000000000);

		// @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
		const transactionRequest = {
			from,
			to,
			value
		};
		console.log('transaction request created');

		const signedTransactionRequest = await pkpWallet.signTransaction(transactionRequest);
		await pkpWallet.sendTransaction(signedTransactionRequest);
	};
</script>

<div>
	<p>Sending transaction...</p>
	<button style="margin-top: 2rem; padding: 1rem;" on:click={sendTransaction}>
		send 0.001 xdai
	</button>
</div>
