samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Hello Earth UI

Browse Source
This commit is contained in:
Samuel Andert 2023-07-27 17:01:15 +02:00
parent 049fae15e5
commit 9703fa9155
3 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/components/HelloEarth/HelloEarth.svelte
View File

@ -8,7 +8,6 @@
// services.helloEarthAlert.alertMe(); // services.helloEarthAlert.alertMe();
} }
$: if (services.core) { $: if (services.core) {
console.log('services: ' + JSON.stringify(services));
// services.core.testAlert(); // services.core.testAlert();
} }
@ -16,26 +15,38 @@
</script> </script>
{#if isStoreLoaded} {#if isStoreLoaded}
<div class="p-12 bg-blue-400 rounded-md shadow-lg"> <div class="container p-12">
<p class="mb-4 text-xl font-bold text-white">Hello Earth</p> <h1 class="h1">
Wallet Address: {#if $store.title}{$store.title}{/if}
</h1>
<h2 class="py-6 h2">
{#if $store.description}{$store.description}{/if}
</h2>
<h3 class="mt-4 h3">Wallet Address</h3>
{#if $store.pkpWallet} {#if $store.pkpWallet}
<p class="mb-6 text-white">{$store.pkpWallet.address}</p> <p>{$store.pkpWallet.address}</p>
{/if} {/if}
<br />
hello store: {#if $store.hello}{$store.hello}{/if} <h4 class="mt-4 h4">store: hello (init default)</h4>
<br /> {#if $store.hello}{$store.hello}{/if}
hello store2: {#if $store.hello2}{$store.hello2}{/if} <h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
<br /> {#if $store.hello2}{$store.hello2}{/if}
Reference TodoList
<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
{#if $store.todos} {#if $store.todos}
<ul class="pl-5 list-decimal"> <dl class="list-dl">
{#each $store.todos as todo} {#each $store.todos as todo}
<li class="p-2 mb-2 text-gray-700 bg-white rounded shadow">{todo.text}</li> <div>
<span class="flex-auto">
<dd>{todo.text}</dd>
</span>
</div>
{/each} {/each}
</ul> </dl>
{/if} {/if}
</div> </div>
{:else} {:else}
<div class="p-6 text-center bg-gray-100 rounded-md shadow-lg">Loading...</div> <div class="container">
<p>Loading...</p>
</div>
{/if} {/if}

9
src/lib/components/Wallet/Wallet.svelte
View File

@ -1,13 +1,16 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { connectWallet } from '$lib/services/wallet/wallet'; import { connectWallet } from '$lib/services/wallet/wallet';
import { getCompositeStore } from '$lib/core/compositeStores';
export let id; // export let id;
const store = getCompositeStore(id); export let store;
export let services;
onMount(async () => { onMount(async () => {
$store.pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL); $store.pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);
services.core.updateStore({
'@wallet:pkpWallet': $store.pkpWallet
});
}); });
</script> </script>

9
src/routes/helloearth/+page.svelte
View File

@ -4,6 +4,9 @@
let composite = { let composite = {
id: 'hello', id: 'hello',
store: { store: {
title: 'Hello Earth',
description:
'Here you can find all the references, how to use the store and mapping logic of store to store and data to store maps',
helloMapMe: 'this is going to be mapped' helloMapMe: 'this is going to be mapped'
}, },
layout: { layout: {
@ -23,8 +26,10 @@
hello2: 'overwrite me with the mapping value' hello2: 'overwrite me with the mapping value'
}, },
map: { map: {
hello2: '@hello.helloMapMe', title: '@hello:title',
pkpWallet: '@wallet.pkpWallet', description: '@hello:description',
hello2: '@hello:helloMapMe',
pkpWallet: '@wallet:pkpWallet',
todos: '@data:queryTodos' todos: '@data:queryTodos'
}, },
services: ['helloEarthAlert'] services: ['helloEarthAlert']