<script>
	import { onMount } from 'svelte';
	import { connectWallet } from '$lib/services/wallet/wallet';

	import { getComponentStore } from '$lib/stores/componentStores.ts';

	// please abstract this.
	export let id;
	const store = getComponentStore(id);

	let pkpWallet = null;

	onMount(async () => {
		pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
	});
</script>

{#if pkpWallet}
	<div class="mb-4 text-lg font-medium">
		PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>
	</div>
{/if}
