display tips

10 files changed, 61 insertions, 36 deletions

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 952a905f..31cbe1b3 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -4,6 +4,11 @@
 	let qr;
 </script>
 
-<div class="w-80 mx-auto my-5 cursor-pointer" bind:this={qr} on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)}>
+<div
+	class="w-80 mx-auto my-5 cursor-pointer"
+	bind:this={qr}
+	on:click={() => screenfull.toggle(qr)}
+	on:keydown={() => screenfull.toggle(qr)}
+>
 	<img {src} class="mx-auto" />
 </div>
diff --git a/src/hooks.server.js b/src/hooks.server.js
index e298da5d..011df673 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -4,7 +4,7 @@ export async function handle({ event, resolve }) {
 	let token = event.cookies.get('token');
 	let {
 		params,
-    request,
+		request,
 		url: { pathname, origin }
 	} = event;
 
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 70aac87e..2e0036e1 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -133,7 +133,7 @@ export const f = (s, currency) =>
 
 export const s = (s) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(s);
 export const sat = (s) => {
-  s = Math.abs(s);
+	s = Math.abs(s);
 	let p = Math.floor(Math.log(s) / Math.LN10 + 0.000000001);
 	let d = Math.floor((p + 1) / 3);
 
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 6bab769b..a32d2238 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -44,19 +44,19 @@
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</p>
 
-    <div class="menu">
-		<button on:click={() => (followed = !followed)}>
-			{$t('user.' + (followed ? 'following' : 'follow'))}
-		</button>
+		<div class="menu">
+			<button on:click={() => (followed = !followed)}>
+				{$t('user.' + (followed ? 'following' : 'follow'))}
+			</button>
 
-		<a href={`/${subject.username}/receive`}>
-			<button> Pay </button>
-		</a>
+			<a href={`/${subject.username}/receive`}>
+				<button> Pay </button>
+			</a>
 
-		<a href={`/${subject.username}/request`}>
-			<button> Request invoice </button>
-		</a>
-    </div>
+			<a href={`/${subject.username}/request`}>
+				<button> Request invoice </button>
+			</a>
+		</div>
 	</div>
 
 	<div class="space-y-5 md:mt-20 mx-auto w-[350px]">
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index fe685cc7..93fac986 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -48,7 +48,7 @@
 	</div>
 
 	<div class="text-secondary text-2xl">
-    {sat(user.account.balance)}
+		{sat(user.account.balance)}
 	</div>
 
 	<div class="grid sm:grid-cols-2 gap-2 mt-8">
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index 32c0970d..da023c3d 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -110,30 +110,43 @@
 		<div class="space-y-10">
 			{#if transactions.length}
 				{#each transactions as tx}
-					<div class="grid grid-cols-5 border-b pb-5">
-						<div>
-							<div class="mb-1 font-bold">{f(tx.amount * (tx.rate / sats), tx.currency)}</div>
+					<div class="grid grid-cols-3 border-b pb-5">
+						<div class="whitespace-nowrap">
+							<div class="mb-1 font-bold">
+								{f(tx.amount * (tx.rate / sats), tx.currency)}
 
-							<span class="text-secondary">{sat(tx.amount)} </span>
+								{#if tx.tip}
+									<span class="text-sm">
+										+{f(tx.tip * (tx.rate / sats), tx.currency)}
+									</span>
+								{/if}
+							</div>
+
+							<span class="text-secondary"
+								>{sat(tx.amount)}
+
+								{#if tx.tip}
+									<span class="text-sm">
+										+{sat(tx.tip)}
+									</span>
+								{/if}
+							</span>
 						</div>
 
-						<div class="flex col-span-3">
+						<div class="flex">
 							{#if tx.with}
 								<a href={`/${tx.with.username}`} class="mx-auto">
 									<div class="flex">
-                <div class="my-auto text-secondary">
-                  {tx.amount > 0 ? 'From' : 'To'}
-                </div>
 										<div class="my-auto">
 											<Avatar user={tx.with} size={12} />
 										</div>
 										<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
 									</div>
 								</a>
-              {:else}
-                <div class="mx-auto text-secondary">
-                  {tx.amount > 0 ? 'Received' : 'Sent'}
-                  </div>
+							{:else}
+								<div class="mx-auto text-secondary">
+									{tx.amount > 0 ? 'Received' : 'Sent'}
+								</div>
 							{/if}
 						</div>
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index f24ca590..6de55bae 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -70,7 +70,7 @@
 				></span
 			>
 
-      <Qr {src} />
+			<Qr {src} />
 
 			<div class="mb-10">
 				<button
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index d044a626..4f0a8ed1 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -10,11 +10,12 @@
 
 	export let data;
 	let { invoice } = data;
-	let { amount, rate } = invoice;
+	let { amount, currency, rate, tip } = invoice;
 
 	toast.pop(0);
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
 
 	const handleDoneClick = () => {
 		delete $invoices[invoice.uuid];
@@ -28,9 +29,17 @@
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
 	<h2 class="text-2xl md:text-3xl font-semibold">
-		{f(amountFiat, invoice.currency)}
+		{f(amountFiat, currency)}
+		{#if tip}
+			+ {f(tipFiat, currency)}
+		{/if}
 	</h2>
-	<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(invoice.amount)}</h3>
+	<h3 class="text-secondary md:text-lg mb-6 mt-1">
+		{sat(amount)}
+		{#if tip}
+			+{sat(tip)}
+		{/if}
+	</h3>
 	<button
 		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
 		on:click={handleDoneClick}
diff --git a/src/routes/(app)/send/[uuid=uuid]/+page.server.js b/src/routes/(app)/send/[uuid=uuid]/+page.server.js
index c9c77f70..cdf06e5c 100644
--- a/src/routes/(app)/send/[uuid=uuid]/+page.server.js
+++ b/src/routes/(app)/send/[uuid=uuid]/+page.server.js
@@ -3,8 +3,9 @@ import { btc as asset, auth, get, post } from '$lib/utils';
 
 export async function load({ params, parent }) {
 	let { user } = await parent();
-	let { amount, address, text, user: recipient } = await get(`/invoice/${params.uuid}`);
+	let { amount, address, tip, text, user: recipient } = await get(`/invoice/${params.uuid}`);
 	if (recipient.username === user.username) throw error(500, { message: 'Cannot send to self' });
+	if (tip) amount += tip;
 	return { amount, address, payreq: text, recipient };
 }
 
diff --git a/src/routes/(app)/send/[uuid=uuid]/+page.svelte b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
index b5a1593a..a07ae937 100644
--- a/src/routes/(app)/send/[uuid=uuid]/+page.svelte
+++ b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
@@ -54,10 +54,7 @@
 		<div class="text-center mb-8">
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">Send</h1>
 			<p class="text-6xl break-words mb-4">
-				{fiat ? f(amountFiat, currency) : s(amount)}
-				{#if !fiat}
-					<span class="text-xl md:text-2xl text-secondary">sats</span>
-				{/if}
+				{fiat ? f(amountFiat, currency) : '⚡️' + s(amount)}
 			</p>
 
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>