Nuša Pukšič
10 months ago
11 changed files with 368 additions and 76 deletions
@ -0,0 +1,113 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { Card, Img, Modal, Button, P } from "flowbite-svelte"; |
||||||
|
import { onMount } from "svelte"; |
||||||
|
import { userBadge } from "$lib/snippets/UserSnippets.svelte"; |
||||||
|
import { type NostrProfile, toNpub } from "$lib/utils/nostrUtils.ts"; |
||||||
|
import QrCode from "$components/util/QrCode.svelte"; |
||||||
|
import CopyToClipboard from "$components/util/CopyToClipboard.svelte"; |
||||||
|
import { bech32 } from 'bech32'; |
||||||
|
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
|
||||||
|
const { event, profile } = $props<{ event: NDKEvent, profile: NostrProfile }>(); |
||||||
|
|
||||||
|
let lnModalOpen = $state(false); |
||||||
|
let lnurl = $state<string | null>(null); |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
if (profile?.lud16) { |
||||||
|
try { |
||||||
|
// Convert LN address to LNURL |
||||||
|
const [name, domain] = profile?.lud16.split('@'); |
||||||
|
const url = `https://${domain}/.well-known/lnurlp/${name}`; |
||||||
|
const words = bech32.toWords(new TextEncoder().encode(url)); |
||||||
|
lnurl = bech32.encode('lnurl', words); |
||||||
|
} catch { |
||||||
|
console.log('Error converting LN address to LNURL'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if profile} |
||||||
|
<Card class="ArticleBox card-leather w-full max-w-2xl"> |
||||||
|
<div class='space-y-4'> |
||||||
|
{#if profile.banner} |
||||||
|
<div class="ArticleBoxImage flex col justify-center"> |
||||||
|
<Img src={profile.banner} class="rounded w-full max-h-72 object-cover" alt="Profile banner" onerror={(e) => { (e.target as HTMLImageElement).style.display = 'none';}} /> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
<div class='flex flex-row space-x-4 items-center'> |
||||||
|
{#if profile.picture} |
||||||
|
<img src={profile.picture} alt="Profile avatar" class="w-16 h-16 rounded-full border" onerror={(e) => { (e.target as HTMLImageElement).src = '/favicon.png'; }} /> |
||||||
|
{/if} |
||||||
|
{@render userBadge(toNpub(event.pubkey) as string, profile.displayName || profile.name || event.pubkey)} |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="mt-2 flex flex-col gap-4"> |
||||||
|
<dl class="grid grid-cols-1 gap-y-2"> |
||||||
|
{#if profile.name} |
||||||
|
<div class="flex gap-2"> |
||||||
|
<dt class="font-semibold min-w-[120px]">Name:</dt> |
||||||
|
<dd>{profile.name}</dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{#if profile.displayName} |
||||||
|
<div class="flex gap-2"> |
||||||
|
<dt class="font-semibold min-w-[120px]">Display Name:</dt> |
||||||
|
<dd>{profile.displayName}</dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{#if profile.about} |
||||||
|
<div class="flex gap-2"> |
||||||
|
<dt class="font-semibold min-w-[120px]">About:</dt> |
||||||
|
<dd class="whitespace-pre-line">{profile.about}</dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{#if profile.website} |
||||||
|
<div class="flex gap-2"> |
||||||
|
<dt class="font-semibold min-w-[120px]">Website:</dt> |
||||||
|
<dd> |
||||||
|
<a href={profile.website} target="_blank" class="underline text-primary-700 dark:text-primary-200">{profile.website}</a> |
||||||
|
</dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{#if profile.nip05} |
||||||
|
<div class="flex gap-2"> |
||||||
|
<dt class="font-semibold min-w-[120px]">NIP-05:</dt> |
||||||
|
<dd>{profile.nip05}</dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
{#if profile.lud16} |
||||||
|
<div class="flex items-center gap-2 mt-4"> |
||||||
|
<dt class="font-semibold min-w-[120px]">Lightning Address:</dt> |
||||||
|
<dd><Button class="btn-leather" color="primary" outline onclick={() => lnModalOpen = true}>{profile.lud16}</Button> </dd> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
|
||||||
|
<Modal class='modal-leather' title='Lightning Address' bind:open={lnModalOpen} outsideclose size='sm'> |
||||||
|
{#if profile.lud16} |
||||||
|
<div> |
||||||
|
<div class='flex flex-col items-center'> |
||||||
|
{@render userBadge(toNpub(event.pubkey) as string, profile?.displayName || profile.name || event.pubkey)} |
||||||
|
<P>{profile.lud16}</P> |
||||||
|
</div> |
||||||
|
<div class="flex flex-col items-center mt-3 space-y-4"> |
||||||
|
<P>Scan the QR code or copy the address</P> |
||||||
|
{#if lnurl} |
||||||
|
<P style="overflow-wrap: anywhere"> |
||||||
|
<CopyToClipboard icon={false} displayText={lnurl}></CopyToClipboard> |
||||||
|
</P> |
||||||
|
<QrCode value={lnurl} /> |
||||||
|
{:else} |
||||||
|
<P>Couldn't generate address.</P> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</Modal> |
||||||
|
{/if} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { onMount } from 'svelte'; |
||||||
|
import QRCode from 'qrcode'; |
||||||
|
|
||||||
|
export let value: string; |
||||||
|
let canvas: HTMLCanvasElement; |
||||||
|
|
||||||
|
async function renderQR() { |
||||||
|
if (canvas && value) { |
||||||
|
await QRCode.toCanvas(canvas, value, { width: 240 }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMount(renderQR); |
||||||
|
</script> |
||||||
|
|
||||||
|
<canvas class="qr-code" bind:this={canvas} /> |
||||||
Loading…
Reference in new issue