Fixed GoogleAuth and clearMessages again and updated the routing and navigation
This commit is contained in:
Samuel Andert
26
src/lib/components/Actions.svelte
Normal file
26
src/lib/components/Actions.svelte
Normal file
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import { clearMessages } from '$lib/services/messages/messages';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
|
||||
function handleClear() {
|
||||
clearMessages();
|
||||
drawerStore.close();
|
||||
}
|
||||
|
||||
let buttons = [
|
||||
{
|
||||
label: 'clear Messages',
|
||||
handler: handleClear
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-start p-4">
|
||||
<h2 class="mb-4 font-bold h3">Actions</h2>
|
||||
|
||||
{#each buttons as button}
|
||||
<button on:click={button.handler} class="btn variant-filled-secondary">
|
||||
{button.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@ -1,12 +1,8 @@
|
||||
<script>
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<AppBar>
|
||||
<svelte:fragment slot="lead"
|
||||
><Avatar src="logo.png" width="w-8" rounded="rounded-full" /></svelte:fragment
|
||||
>
|
||||
<h1 class="h4">Nova</h1>
|
||||
<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
|
||||
</AppBar>
|
||||
|
||||
@ -1,17 +1,26 @@
|
||||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Home', icon: '🏠' },
|
||||
{ path: '/wallet', name: 'Wallet', icon: '💼' },
|
||||
{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
|
||||
{ path: '/login', name: 'Login', icon: '🔑' }
|
||||
{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
|
||||
{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
|
||||
{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
|
||||
{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
|
||||
];
|
||||
function closeDrawer() {
|
||||
drawerStore.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
|
||||
{#each routes as route, index}
|
||||
<a class="logo-item" href={route.path}>
|
||||
<span>{route.icon}</span>
|
||||
<span>{route.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
<div class="flex flex-col items-start p-4">
|
||||
<h2 class="font-bold h3">Apps</h2>
|
||||
<div class="flex space-x-4">
|
||||
{#each routes as route}
|
||||
<a class="flex flex-col items-center w-28 logo-item" href={route.path} on:click={closeDrawer}>
|
||||
<Icon icon={route.icon} width="96" height="96" />
|
||||
<span class="mt-2 text-center">{route.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,10 @@
|
||||
import { ProviderType } from '@lit-protocol/constants';
|
||||
import { createMessage } from '$lib/services/messages/messages';
|
||||
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
|
||||
import Icon from '@iconify/svelte';
|
||||
import Apps from '$lib/components/Apps.svelte';
|
||||
|
||||
const redirectUri = 'http://localhost:5173/login/';
|
||||
const redirectUri = 'http://localhost:5173/';
|
||||
|
||||
export let services;
|
||||
|
||||
@ -109,37 +111,42 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#if error}
|
||||
<h1>Error</h1>
|
||||
<p>{error.message}</p>
|
||||
<button on:click={resetView}>Got it</button>
|
||||
{:else if isLoading}
|
||||
<h1>Loading...</h1>
|
||||
{:else if view === 'sign_in'}
|
||||
<h1>Sign in with Lit</h1>
|
||||
<button on:click={authWithGoogle}>Google</button>
|
||||
{:else if view === 'fetching'}
|
||||
<h1>Fetching your PKPs...</h1>
|
||||
{:else if view === 'NO_PKPS'}
|
||||
<h1>No PKPs found.</h1>
|
||||
<button on:click={mint}>Mint a PKP</button>
|
||||
{:else if view === 'fetched'}
|
||||
<h1>Select a PKP to continue</h1>
|
||||
{#each pkps as pkp}
|
||||
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
|
||||
{/each}
|
||||
{:else if view === 'MINTING'}
|
||||
<h1>Minting your PKP...</h1>
|
||||
{:else if view === 'MINTED'}
|
||||
<h1>Minted!</h1>
|
||||
{:else if view === 'CREATING_SESSION'}
|
||||
<h1>Creating session...</h1>
|
||||
{:else if view === 'SESSION_CREATED'}
|
||||
<h1>Ready for the open web</h1>
|
||||
<div>
|
||||
<p>Check out your PKP:</p>
|
||||
<p>{currentPKP.ethAddress}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<main class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
{#if error}
|
||||
<h1>Error</h1>
|
||||
<p>{error.message}</p>
|
||||
<button on:click={resetView}>Got it</button>
|
||||
{:else if isLoading}
|
||||
<h1>Loading...</h1>
|
||||
{:else if view === 'sign_in'}
|
||||
<button on:click={authWithGoogle} class="btn variant-filled">
|
||||
<span><Icon icon="flat-color-icons:google" /></span>
|
||||
<span>Sign in with Google</span>
|
||||
</button>
|
||||
{:else if view === 'fetching'}
|
||||
<h1>Fetching your PKPs...</h1>
|
||||
{:else if view === 'NO_PKPS'}
|
||||
<h1>No PKPs found.</h1>
|
||||
<button on:click={mint}>Mint a PKP</button>
|
||||
{:else if view === 'fetched'}
|
||||
<h1>Select a PKP to continue</h1>
|
||||
{#each pkps as pkp}
|
||||
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
|
||||
{/each}
|
||||
{:else if view === 'MINTING'}
|
||||
<h1>Minting your PKP...</h1>
|
||||
{:else if view === 'MINTED'}
|
||||
<h1>Minted!</h1>
|
||||
{:else if view === 'CREATING_SESSION'}
|
||||
<h1>Creating session...</h1>
|
||||
{:else if view === 'SESSION_CREATED'}
|
||||
<h1>Ready for the open web</h1>
|
||||
<div>
|
||||
<p>Check out your PKP:</p>
|
||||
<p>{currentPKP.ethAddress}</p>
|
||||
</div>
|
||||
<Apps />
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
9
src/lib/components/Navigation.svelte
Normal file
9
src/lib/components/Navigation.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import Apps from '$lib/components/Apps.svelte';
|
||||
import Actions from '$lib/components/Actions.svelte';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Actions />
|
||||
<Apps />
|
||||
</div>
|
||||
@ -1,14 +1,16 @@
|
||||
<!-- TerminalComponent.svelte -->
|
||||
|
||||
<script lang="ts">
|
||||
import { createMessage, clearMessages } from '$lib/services/messages/messages';
|
||||
import { createMessage } from '$lib/services/messages/messages';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
import type { DrawerSettings } from '@skeletonlabs/skeleton';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
const drawerSettings: DrawerSettings = {
|
||||
position: 'bottom',
|
||||
id: 'drawer',
|
||||
meta: { id: 'apps', component: 'Apps' }
|
||||
meta: { id: 'navigation', component: 'Navigation' },
|
||||
height: 'auto'
|
||||
};
|
||||
|
||||
const openDrawer = () => {
|
||||
@ -45,18 +47,15 @@
|
||||
createMessage(message);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear messages logic
|
||||
function handleClear() {
|
||||
clearMessages();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-12">
|
||||
<button class="input-group-shim" on:click={openDrawer}>+</button>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-14">
|
||||
<button class="input-group-shim" on:drawer{closeDrawer} on:click={openDrawer}>
|
||||
<Avatar src="logo.png" width="w-10" rounded="rounded-full" />
|
||||
</button>
|
||||
|
||||
<textarea
|
||||
class="bg-transparent border-0 ring-0"
|
||||
<input
|
||||
class="p-4 bg-transparent border-0 ring-0"
|
||||
name="prompt"
|
||||
id="prompt"
|
||||
placeholder="Write a message..."
|
||||
@ -65,5 +64,4 @@
|
||||
on:keydown={handleKeyDown}
|
||||
/>
|
||||
<button class="variant-filled-primary" on:click={() => sendMessage(newMessageText)}>Send</button>
|
||||
<!-- <button class="variant-filled-primary" on:click={handleClear}>clear</button> -->
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user