<script>
	import { onMount } from 'svelte';
	export let services;
	export let store;

	onMount(async () => {
		if (services && services.helloEarthAlert) {
			console.log('Alerted by HelloEarthAlert');
		} else {
			console.error('Services or helloEarthAlert not loaded');
		}
	});
</script>

<!-- Only render the div when $store.pkpWallet is defined -->
{#if $store}
	<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
{:else}
	<!-- You can display a loader or placeholder content here -->
	<div>Loading...</div>
{/if}