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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<script>
import { goto } from "$app/navigation";
import Avatar from "$comp/Avatar.svelte";
import { get, f, s, si, sat, loc, sats, types } from "$lib/utils";
import { format } from "date-fns";
import { t } from "$lib/translations";
import locales from "$lib/locales";
const { fund, locale, user, payments } = $props();
const language = $derived(user?.language || "en");
</script>
<div class="text-base">
{#each payments as p, i}
{@const amount = fund ? -p.amount : p.amount}
<div
class="grid grid-cols-12 border-b border-base-200 hover:bg-base-200 px-1 py-2 lg:p-4 cursor-pointer"
class:border-b-0={i === payments.length - 1}
class:text-error={amount < 0}
onclick={() => goto(`/payment/${p.id}`)}
>
<div class="whitespace-nowrap my-auto col-span-3">
<div class="font-bold flex items-center">
<div class="flex items-center">
<iconify-icon
noobserver
icon="ph:lightning-fill"
width="24"
class="text-yellow-300"
></iconify-icon>
<div>{s(Math.abs(amount), locale)}</div>
</div>
</div>
<div class="text-secondary flex items-center text-base">
{f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}
{#if p.tip}
<span class="text-sm text-secondary">
+{Math.round((p.tip / Math.abs(amount)) * 100)}%
</span>
{/if}
</div>
</div>
<div
class="flex my-auto col-span-6 truncate text-ellipsis overflow-hidden mx-auto"
>
{#if p.type === types.fund}
{#if fund}
<div class="flex">
<div class="my-auto">
<Avatar user={p.user} size={12} disabled={true} />
</div>
<div class="my-auto ml-1 text-secondary">
{p.user.username}
</div>
</div>
{:else}
<a href={`/fund/${p.memo}`}>
<div class="text-secondary flex">
<iconify-icon
noobserver
icon="ph:lightning-fill"
class="text-yellow-300 text-3xl"
></iconify-icon>
<div class="my-auto">{$t("payments.fund")}</div>
</div>
</a>
{/if}
{:else if p.with}
<div class="flex">
<div class="my-auto">
<Avatar user={p.with} size={12} disabled={true} />
</div>
<div class="my-auto ml-1 text-secondary">
{p.with.username}
</div>
</div>
{:else}
<div class="text-secondary flex items-center gap-1">
{#if p.type === types.lightning || p.type === types.bolt12}
<iconify-icon
noobserver
icon="ph:lightning-fill"
class="text-yellow-300 text-3xl"
></iconify-icon>
{:else if p.type === types.ecash}
<img src="/images/cash.png" class="w-12" />
{:else if p.type === types.reconcile}
<iconify-icon noobserver icon="ph:scales-bold" width="32"
></iconify-icon>
{:else if p.type === types.bitcoin}
<iconify-icon noobserver icon="logos:bitcoin" class="text-3xl"
></iconify-icon>
{:else if p.type === types.liquid}
<div class="my-auto">
<img
src="/images/liquid.svg"
class="w-10 border-4 border-transparent"
alt="Liquid"
/>
</div>
{/if}
<div class="my-auto">
{#if p.type === types.ecash}
{amount > 0 ? $t("payments.redeemed") : $t("payments.minted")}
{:else}
{amount > 0
? p.confirmed
? $t("payments.received")
: $t("payments.pending")
: $t("payments.sent")}
{/if}
</div>
</div>
{/if}
</div>
<div class="text-secondary text-right text-sm my-auto col-span-3">
<div>
{format(new Date(p.created), "h:mm aaa", {
locale: locales[language],
})}
</div>
<div>
{format(new Date(p.created), "MMM d, yy", {
locale: locales[language],
})}
</div>
</div>
</div>
{:else}
<p class="text-secondary text-lg text-center">{$t("payments.empty")}</p>
{/each}
</div>
|
