aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Invoice.svelte44
-rw-r--r--src/components/Request.svelte45
-rw-r--r--src/lib/socket.js4
-rw-r--r--src/routes/(app)/+layout.svelte3
-rw-r--r--src/routes/(app)/[username]/receive/[...recipient]/+page.svelte5
-rw-r--r--src/routes/(app)/invoice/[id]/+page.svelte98
-rw-r--r--src/routes/(app)/invoice/[id]/tip/+page.svelte4
7 files changed, 119 insertions, 84 deletions
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index 4b42f851..d68824a8 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -1,4 +1,5 @@
<script>
+ import { f, sat, sats } from '$lib/utils';
import { fly } from 'svelte/transition';
import { Avatar, Icon } from '$comp';
import { invoice } from '$lib/store';
@@ -7,28 +8,31 @@
</script>
{#if $invoice}
- <div
- class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
- in:fly
- >
- <div class="my-auto md:w-1/2">
- <div class="flex">
- <Avatar user={$invoice.user.username} size={12} />
- <h1 class="my-auto"><b>{$invoice.user.username}</b> sent an invoice</h1>
+ <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+ <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+ <div class="my-auto mx-auto">
+ <div class="flex">
+ <Avatar user={$invoice.user.username} size={12} />
+ <h1 class="my-auto">
+ <b>{$invoice.user.username}</b> sent an invoice for
+ <b>{f(($invoice.amount * $invoice.rate) / sats, $invoice.currency)}</b>
+ {sat($invoice.amount)}
+ </h1>
+ </div>
</div>
- </div>
- <div class="mx-auto my-auto">
- <a href={`/invoice/${$invoice.uuid}`}>
- <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
- Pay
+ <div class="mx-auto my-auto flex gap-2">
+ <a href={`/invoice/${$invoice.uuid}/tip`}>
+ <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+ Pay
+ </button>
+ </a>
+ <button
+ class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40"
+ on:click={() => ($invoice = undefined)}
+ >
+ Dismiss
</button>
- </a>
+ </div>
</div>
- <button
- class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
- on:click={() => ($invoice = undefined)}
- >
- <Icon icon="close" />
- </button>
</div>
{/if}
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
index 2c87d436..e1071272 100644
--- a/src/components/Request.svelte
+++ b/src/components/Request.svelte
@@ -7,31 +7,30 @@
</script>
{#if $request}
- <div
- class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
- in:fly
- >
- <div class="my-auto md:w-1/2">
- <div class="flex">
- <Avatar user={$request.requester} size={12} />
- <h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+ <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+ <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+ <div class="my-auto mx-auto">
+ <div class="flex">
+ <Avatar user={$request.requester} size={12} />
+ <h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+ </div>
+ {#if $request.memo}
+ <div class="border-l-4 pl-4 my-2">{$request.memo}</div>
+ {/if}
</div>
- {#if $request.memo}
- <div class="border-l-4 pl-4 my-2">{$request.memo}</div>
- {/if}
- </div>
- <div class="mx-auto my-auto">
- <a href={`/${user.username}/receive`}>
- <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
- Create invoice
+ <div class="mx-auto my-auto flex gap-2">
+ <a href={`/${user.username}/receive`}>
+ <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+ Invoice
+ </button>
+ </a>
+ <button
+ class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full"
+ on:click={() => ($request = undefined)}
+ >
+ Dismiss
</button>
- </a>
+ </div>
</div>
- <button
- class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
- on:click={() => ($request = undefined)}
- >
- <Icon icon="close" />
- </button>
</div>
{/if}
diff --git a/src/lib/socket.js b/src/lib/socket.js
index a5784f19..acb2b186 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -8,10 +8,11 @@ const btc = env.PUBLIC_BTC;
let socket, token;
-export const auth = () => token && send('login', token);
+export const auth = () => token && send('login', token) && send('heartbeat');
export const send = (type, data) => {
socket?.readyState === 1 && socket.send(JSON.stringify({ type, data }));
+ return true;
};
export const messages = (data) => ({
@@ -28,6 +29,7 @@ export const messages = (data) => ({
},
request() {
+ console.log("REQ", data)
request.set(data);
},
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 36e109e0..3485b9eb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -46,7 +46,8 @@
let checkSocket = () => {
counter++;
lost = Date.now() - $last > 15000;
- if (lost) close();
+ console.log("lost?", lost);
+ if (lost) connect(token);
if (counter > 5) {
send('heartbeat');
counter = 0;
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index a0f9a1b0..7afc2956 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -23,7 +23,6 @@
let { currency, username } = data.subject;
let { user } = data;
</script>
-
{#if form}
<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
<div class="text-center mb-8 space-y-5">
@@ -36,11 +35,13 @@
<p class="text-4xl break-words my-auto">{req.requester.username}</p>
</div>
</div>
- <a href={`/${user.username}/dashboard`} class="mx-auto">
+ <div class="text-center">
+ <a href={`/${user.username}/dashboard`} class="mx-auto text-center">
<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
Done
</button>
</a>
+ </div>
</div>
{:else}
<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 25ebf227..47f5281b 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -3,12 +3,15 @@
import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
- import { invoice as inv, invoices, last } from '$lib/store';
- import { Icon, Heart, Image, Qr } from '$comp';
+ import { invoices, last } from '$lib/store';
+ import { Avatar, Icon, Heart, Image, Qr } from '$comp';
import { goto } from '$app/navigation';
import { t } from '$lib/translations';
export let data;
+
+ let showQr;
+
$: refresh(data);
let { invoice, id, user, src } = data;
let {
@@ -24,8 +27,6 @@
let tipPercent = 0;
let refresh = (data) => {
- $inv = null;
-
({ invoice, id } = data);
({
amount,
@@ -63,18 +64,27 @@
<Icon icon="arrow-left" style="w-10" />
</button>
-<div class="container mx-auto max-w-lg px-4 space-y-10 lg:space-y-0">
- <div class="space-y-10 lg:space-y-0">
- <div class="text-center">
- <span class="text-secondary block text-2xl break-all"
- >Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
- >{username}</a
- ></span
- >
+<div class="container mx-auto max-w-lg px-4 mt-20">
+ <h1 class="text-secondary block text-2xl flex">
+ <div class="flex mx-auto">
+ <div class="my-auto">Please pay</div>
+ <div class="my-auto">
+ <a href="/{username}" class="text-black font-semibold hover:opacity-80">
+ <div class="flex my-auto">
+ <Avatar user={username} size={12} />
+ <div class="my-auto">{username}</div>
+ </div>
+ </a>
+ </div>
+ </div>
+ </h1>
+
+ <div class="text-center space-y-10">
+ {#if !user || user.username === username || showQr}
<Qr {src} />
- <div class="mb-10">
+ <div>
<button
class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
on:click={() => copy(text)}
@@ -82,35 +92,51 @@
<div>Copy</div></button
>
</div>
+ {/if}
- <div class="px-5 space-y-3 w-80 mx-auto">
- {#if invoice.tip}
- <div class="flex justify-between">
- {$t('invoice.invoice')}
- <span>
- {f(amountFiat, currency)}
- <span class="text-secondary">{`${sat(amount)}`}</span>
- </span>
- </div>
-
- <div class="flex justify-between">
- {$t('invoice.tip')}
- <span
- >{f(tipAmount, currency)}
- <span class="text-secondary">{`${sat(tip)}`}</span>
- </span>
- </div>
- {/if}
+ <div class="px-5 space-y-4 w-80 mx-auto mb-4">
+ {#if invoice.tip}
+ <div class="flex justify-between">
+ {$t('invoice.invoice')}
+ <span>
+ {f(amountFiat, currency)}
+ <span class="text-secondary">{`${sat(amount)}`}</span>
+ </span>
+ </div>
- <div class="flex flex-wrap justify-between font-bold">
- <span class="mr-1">{$t('invoice.total')}</span>
+ <div class="flex justify-between">
+ {$t('invoice.tip')}
<span
- >{f(amountFiat + parseFloat(tipAmount), currency)}
- <span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
- >
+ >{f(tipAmount, currency)}
+ <span class="text-secondary">{`${sat(tip)}`}</span>
+ </span>
</div>
+ {/if}
+
+ <div class="flex flex-wrap justify-between font-bold text-2xl !my-8">
+ <span class="mr-1">{$t('invoice.total')}</span>
+ <span
+ >{f(amountFiat + parseFloat(tipAmount), currency)}
+ <span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
+ >
</div>
</div>
+
+ {#if user && user.username !== username}
+ <div class="mx-auto my-auto flex gap-2 justify-center">
+ <a href={`/send/${invoice.uuid}`}>
+ <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
+ Pay now
+ </button>
+ </a>
+ <button
+ class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
+ on:click={() => (showQr = !showQr)}
+ >
+ {showQr ? 'Hide' : 'Show'} QR
+ </button>
+ </div>
+ {/if}
</div>
</div>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index ef878831..8f07fdb8 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,6 +1,6 @@
<script>
import { browser } from '$app/environment';
- import { invoices } from '$lib/store';
+ import { invoice as inv, invoices } from '$lib/store';
import { back, copy, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
import { Icon } from '$comp';
import { goto } from '$app/navigation';
@@ -79,6 +79,8 @@
let fullscreen;
let refresh = (data) => {
+ $inv = null;
+
({ invoice, id } = data);
({
amount,
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 22:44:42 +0000