diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte index 0237222..e8d0e5f 100644 --- a/src/lib/components/Composite.svelte +++ b/src/lib/components/Composite.svelte @@ -4,15 +4,28 @@ import services from '$lib/servicesLoader'; import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts'; - export let componentsData = { - layout: '', - children: [] + interface ICompositeLayout { + areas: string; + columns?: string; + rows?: string; + gap?: string; + tailwindClasses?: string; + } + + export let componentsData: { + layout: ICompositeLayout; + children: Array; }; + $: layoutStyle = ` grid-template-areas: ${componentsData.layout.areas}; - gap: ${componentsData.layout.gap || '0px'}; - grid-template-columns: ${componentsData.layout.columns || '1fr'}; - grid-template-rows: ${componentsData.layout.rows || 'auto'}; + ${componentsData.layout.gap ? `gap: ${componentsData.layout.gap};` : ''} + ${ + componentsData.layout.columns + ? `grid-template-columns: ${componentsData.layout.columns};` + : '' + } + ${componentsData.layout.rows ? `grid-template-rows: ${componentsData.layout.rows};` : ''} `; function initializeComponentState(child) { @@ -28,7 +41,7 @@ } function mapAndSubscribe(component) { - console.log('Mapping and subscribing for:', component.id); // Debug line + console.log('Mapping and subscribing for:', component.id); if (component.map) { const localStore = getComponentStore(component.id); @@ -38,7 +51,7 @@ const externalStore = getComponentStore(externalID); if (externalStore) { externalStore.subscribe((externalState) => { - console.log('External state:', externalState); // Debug line + console.log('External state:', externalState); if (externalState && externalKey in externalState) { localStore.update((storeValue) => { storeValue = storeValue || {}; @@ -78,6 +91,7 @@ } return null; } + async function getServiceProps(component) { const loadedServices = []; if (component.services) { @@ -92,14 +106,11 @@ } -
+
{#each componentsData.children as component (component.id)} - {#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]} - {#if Component} -
+
+ {#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]} + {#if Component} {/if} -
- {:else} -

Component {component.componentName} not found.

- {/if} - {/await} + {:else} +

Component {component.componentName} not found.

+ {/if} + {/await} +
{/each}
diff --git a/src/lib/components/Wallet/Wallet.svelte b/src/lib/components/Wallet/Wallet.svelte index e477e43..d730e25 100644 --- a/src/lib/components/Wallet/Wallet.svelte +++ b/src/lib/components/Wallet/Wallet.svelte @@ -14,6 +14,7 @@ }); +PkpWallet {#if pkpWallet}
PKP Wallet: {pkpWallet.address} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ff018a7..f98f3e0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,10 +3,13 @@ let componentsData = { layout: { - areas: `"nav", "main", "footer"`, - gap: '10px', - columns: '1fr', - template: 'auto 1fr auto' + areas: ` + "header header header" + "main main aside" + "footer footer footer"; + `, + columns: '1fr 1fr 1fr', + rows: 'auto 1fr auto' }, children: [ { @@ -18,18 +21,18 @@ { id: '2', componentName: 'Messages', - slot: 'Main' + slot: 'main' + }, + { + id: '4', + componentName: 'Wallet', + slot: 'aside', + state: { + rpcURL: 'https://rpc.gnosischain.com/', + pkpPubKey: + '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' + } }, - // { - // id: '2', - // componentName: 'Wallet', - // slot: 'main', - // state: { - // rpcURL: 'https://rpc.gnosischain.com/', - // pkpPubKey: - // '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' - // } - // }, { id: '3', componentName: 'Terminal',