diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/lib/components/Login.svelte | 69 | ||||
-rw-r--r-- | src/lib/components/Navigation.svelte | 7 | ||||
-rw-r--r-- | src/lib/ndk.ts | 7 |
3 files changed, 80 insertions, 3 deletions
diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte new file mode 100644 index 0000000..0e52e9c --- /dev/null +++ b/src/lib/components/Login.svelte @@ -0,0 +1,69 @@ +<script lang='ts'> + import { Avatar, Button, Popover } from 'flowbite-svelte'; + import NDK, { NDKNip07Signer, type NDKUserProfile } from '@nostr-dev-kit/ndk'; + import { ndk } from '$lib/ndk'; + + let signedIn: boolean = false; + let profile: NDKUserProfile | null = null; + + const signInWithExtension = async () => { + const signer = new NDKNip07Signer(); + const user = await signer.user(); + + user.ndk = $ndk; + $ndk.signer = signer; + $ndk.activeUser = user; + + const connectPromise = $ndk.connect(); + const fetchProfilePromise = user.fetchProfile(); + + const [_, extensionUserProfile] = await Promise.all([connectPromise, fetchProfilePromise]); + profile = extensionUserProfile; + + console.log('NDK signed in with extension and reconnected.'); + + signedIn = true; + }; + + const signInWithBunker = () => { + console.warn('Bunker sign-in not yet implemented.'); + }; +</script> + +{#if signedIn} + <Avatar + rounded + class='h-6 w-6 m-4 cursor-pointer' + src={profile?.image} + alt={profile?.displayName} + /> + <Popover + class='popover-leather w-fit' + placement='bottom' + target='avatar' + > + <h3 class='text-lg font-bold'>{profile?.displayName}</h3> + <h4 class='text-base'>@{profile?.name}</h4> +</Popover> +{:else} + <Avatar rounded class='h-6 w-6 m-4 cursor-pointer' id='avatar' /> + <Popover + class='popover-leather w-fit' + placement='bottom' + target='avatar' + > + <div class='w-full flex space-x-2'> + <Button + on:click={signInWithExtension} + > + Extension Sign-In + </Button> + <Button + color='alternative' + on:click={signInWithBunker} + > + Bunker Sign-In + </Button> + </div> + </Popover> +{/if} diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index 380e33c..d682bab 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -1,5 +1,6 @@ <script lang="ts"> import { DarkMode, Navbar, NavLi, NavUl, NavHamburger, NavBrand } from 'flowbite-svelte'; + import Login from './Login.svelte'; let className: string; export { className as class }; @@ -13,12 +14,14 @@ <h1 class='font-serif'>Alexandria</h1> </NavBrand> </div> - <NavHamburger class='btn-leather' /> + <div class='flex md:order-2'> + <Login /> + <NavHamburger class='btn-leather' /> + </div> <NavUl class='ul-leather'> <NavLi href='./about'>About</NavLi> <NavLi href='./new/edit'>New Note</NavLi> <NavLi href='./visualize'>Visualize</NavLi> - <NavLi href='./login'>Login</NavLi> <NavLi> <DarkMode btnClass='btn-leather p-0'/> </NavLi> diff --git a/src/lib/ndk.ts b/src/lib/ndk.ts index a6c4e5f..036db26 100644 --- a/src/lib/ndk.ts +++ b/src/lib/ndk.ts @@ -17,7 +17,12 @@ export function getStoredNdkConfig() { export function getNdkInstance() { const { relays, dexieAdapter } = getStoredNdkConfig(); - const ndk = new NDK({ explicitRelayUrls: relays, cacheAdapter: dexieAdapter }); + const ndk = new NDK({ + autoConnectUserRelays: true, + cacheAdapter: dexieAdapter, + enableOutboxModel: true, + explicitRelayUrls: relays, + }); ndk.connect().then(() => console.log('ndk connected')); return ndk; |