1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<script>
import Avatar from "$comp/Avatar.svelte";
import Media from "$comp/Media.svelte";
import { goto } from "$app/navigation";
import { fail, ago, post } from "$lib/utils";
import { sign } from "$lib/nostr";
import Pin from "$comp/Pin.svelte";
import { pin } from "$lib/store";
import { page } from "$app/stores";
let amount = 21;
let { event, minimal, last = true, user } = $props();
let { author, parts, zaps, names, created_at, pubkey } = $derived(event);
let { id } = event;
let zapping = $state();
let zap = async () => {
zapping = true;
try {
const body = new FormData();
if (!user) return goto(`/register?redirect=${$page.url.pathname}`);
let request = await post("/post/zapRequest", { amount, id });
let { pr: payreq } = await post("/post/zap", {
event: await sign(request),
});
await post("/post/payments", { amount, payreq });
} catch (e) {
console.log(e);
fail(e.message);
}
};
</script>
{#snippet heading()}
<div class="flex gap-2 items-center">
<Avatar user={author} size={16} disabled={true} />
<div>
<div>
<span class="font-bold">{author.displayName}</span>
<span class="text-secondary">@{author.name}</span>
<span class="text-secondary">• {ago(created_at)}</span>
</div>
{#if author.lud16}
<div class="flex items-center">
<iconify-icon
noobserver
icon="ph:lightning-fill"
class="text-yellow-300"
></iconify-icon>
{author.lud16}
</div>
{/if}
</div>
</div>
{/snippet}
<button
onclick={() => goto(`/e/${id}`)}
class="space-y-2 dark:border-primary py-8 w-full text-left"
class:border-b={!last}
>
{#if minimal}
{@render heading()}
{:else}
<a href={`/${pubkey}/notes`} class="contents">
{@render heading()}
</a>
{/if}
<div class="text-2xl space-y-2 break-words">
{#each parts as { type, value }, i}
{#if type === "text"}
{value}
{:else if type === "link"}
<Media {value} {minimal} />
{:else if type.match(/^nostr:np(rofile|ub)$/)}
<a href={`/${value.pubkey}`} class="font-bold">@{names[value.pubkey]}</a
>
{/if}
{/each}
</div>
</button>
{#if zaps?.length}
<div class="flex flex-wrap gap-2">
{#each zaps as { amount, user }}
<a href={`/${user.pubkey}`}>
<div class="flex gap-1 items-center">
<Avatar {user} size={8} disabled={true} />
<div>{amount}</div>
</div>
</a>
{/each}
</div>
{/if}
{#if !(minimal || user?.pubkey === pubkey)}
<div class="justify-center flex">
<btn onclick={zap} class="btn btn-accent items-center">
<div class="flex gap-1 items-center">
<iconify-icon
noobserver
icon="ph:lightning-fill"
class="text-yellow-300"
width={32}
></iconify-icon>
<div>Zap</div>
</div>
</btn>
</div>
{/if}
|
