sent payment confirmation

11 files changed, 59 insertions, 19 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 0a2b6885..62cfd940 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -118,12 +118,14 @@
 		<div
 			class="absolute top-[111px] {avatarPosition} rounded-full border-4 border-white overflow-hidden w-32 h-32"
 		>
+    <a href={`/${$subject.username}`}>
 			<img
 				src={$tempProfileFiles && $tempProfileFiles.profile
 					? $tempProfileFiles.profile
 					: `/api/public/${$subject.username}-profile.png`}
 				class="w-full h-full object-cover object-center overflow-hidden"
 			/>
+      </a>
 		</div>
 	{:else}
 		<div
diff --git a/src/lib/socket.js b/src/lib/socket.js
index ee8883b0..7b1d72e5 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,8 +1,9 @@
 import { get } from 'svelte/store';
 import { rate, user, token, invoices, newPayment } from '$lib/store';
 import { success } from '$lib/utils';
+import { env } from '$env/dynamic/public';
 
-const socketUrl = import.meta.env.VITE_SOCKET;
+const socketUrl = env.PUBLIC_SOCKET;
 
 let interval, socket;
 
@@ -26,6 +27,7 @@ export const messages = (data) => ({
 		if (data.amount > 0) {
 			success(`Received ${data.amount} sats!`);
 		} else {
+      console.log("DATA", JSON.stringify(data))
 			success(`Sent ${-data.amount} sats!`);
 		}
 	},
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 514e3adb..f2c7a6a4 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -2,12 +2,13 @@ import cookie from 'cookie';
 import { browser } from '$app/environment';
 import { toast } from '@zerodevx/svelte-toast';
 import { goto } from '$app/navigation';
+import { env } from '$env/dynamic/public';
 
 export function scroll(section) {
 	section.scrollIntoView({ behavior: 'smooth' });
 }
 
-const base = browser ? '' : import.meta.env.VITE_COINOS_URL;
+const base = browser ? '' : env.PUBLIC_COINOS_URL;
 
 export const get = (url, headers = {}) =>
 	fetch(base + url, { headers })
diff --git a/src/locales/en.json b/src/locales/en.json
index d3d06d3f..f653dac3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -56,7 +56,7 @@
 		"header": "FAQ",
 		"cost": {
 			"question": "What does it cost?",
-			"answer": "Coinos is free to use. You pay nothing to register and maintain your account. You can send and receive unlimited payments over the lightning network at no cost. We charge a 0.1% conversion fee if you need to move your funds off of lightning to an on-chain bitcoin address at an external wallet or exchange."
+			"answer": "You pay nothing to register and maintain your account and receive unlimited payments over the lightning network. We charge a 0.1% fee to convert regular bitcoin to lightning and vice versa. Lightning withdrawals are subject to network routing fees that are typically very low."
 		},
 		"compatibility": {
 			"question": "Do I need any special device or software?",
@@ -64,7 +64,7 @@
 		},
 		"safety": {
 			"question": "What can I do with the bitcoin I receive?",
-			"answer": "Use it to pay staff and suppliers, support other bitcoin-accepting businesses or hold onto it for a few years and watch your purchasing power grow and grow."
+			"answer": "Use it to pay staff and suppliers, support other bitcoin-accepting businesses or hold onto it and watch your purchasing power grow."
 		}
 	},
 	"footer": {
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 3ebf8be2..ea3ccfdb 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -2,8 +2,9 @@ import { error, redirect } from '@sveltejs/kit';
 import cookie from 'cookie';
 import { protectedRoutes } from '$lib/utils';
 import { get, post, auth } from '$lib/utils';
+import { env } from '$env/dynamic/public';
 
-const btc = import.meta.env.VITE_BTC;
+export const { PUBLIC_BTC: btc }  = env;
 
 export async function load({ request, setHeaders, url, params }) {
 	let { token } = cookie.parse(request.headers.get('cookie') || '');
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 3042e574..a3e6850a 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -27,7 +27,7 @@
 			{#if pages.length > 1}
 				{#each pages as _, i}
 					<a href={`/${user.username}/transactions/${i + 1}`} class:active={page === i + 1}>
-						<div class="border py-2 px-4 border-r-0 last:border-r hover:opacity-80">
+						<div class="border py-2 px-4 rounded-full border-2 w-12 h-12 hover:opacity-80 mr-1 text-center my-auto">
 							{i + 1}
 						</div>
 					</a>
@@ -75,7 +75,7 @@
 </div>
 
 <style>
-	.active {
-		@apply font-bold;
+	.active div {
+    @apply bg-gray-100;
 	}
 </style>
diff --git a/src/routes/invoice/+server.js b/src/routes/invoice/+server.js
index 759c9315..9b96b114 100644
--- a/src/routes/invoice/+server.js
+++ b/src/routes/invoice/+server.js
@@ -4,12 +4,6 @@ export async function POST({ request, parent }) {
 	let { amount, currency, network = 'lightning', prompt, rate, tip, user } = await request.json();
 	let invoice = { amount, currency, network, prompt, rate, tip };
 
-	if (network === 'lightning') {
-		invoice.text = (await post('/lightning/invoice', { amount }, auth(request))).text;
-	} else {
-		invoice.address = (await get('/address?network=bitcoin&type=bech32')).address;
-	}
-
 	return new Response(JSON.stringify(await post('/invoice', { invoice, user }, auth(request))), {
 		headers: { 'content-type': 'application/json' }
 	});
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 094f698e..7ff63862 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -45,7 +45,7 @@
 	$: tip = Math.round((amount / 100) * tipPercent);
 
 	$invoices[id] = { amount, id, rate, received, text, tip, username };
-	$: $invoices[id]?.received && goto(`/invoice/${id}/paid`);
+	$: $invoices[id]?.received >= $invoices[id]?.amount && goto(`/invoice/${id}/paid`);
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 
diff --git a/src/routes/logout/+page.server.js b/src/routes/logout/+page.server.js
index 726094fd..01ddc1aa 100644
--- a/src/routes/logout/+page.server.js
+++ b/src/routes/logout/+page.server.js
@@ -8,7 +8,6 @@ const opts = {
 };
 
 export async function load({ cookies }) {
-	console.log('COOKIES', cookies);
 	cookies.set('set-cookie', [
 		cookies.serialize('token', '', {
 			...opts,
diff --git a/src/routes/send/bitcoin/[address]/+page.server.js b/src/routes/send/bitcoin/[address]/+page.server.js
index fa440394..4cc3736d 100644
--- a/src/routes/send/bitcoin/[address]/+page.server.js
+++ b/src/routes/send/bitcoin/[address]/+page.server.js
@@ -1,8 +1,11 @@
 import { redirect } from '@sveltejs/kit';
+import { btc as asset, auth, post } from '$lib/utils';
+
 export const actions = {
 	default: async ({ request }) => {
-		let form = Object.fromEntries(await request.formData());
-		console.log('send bitcoin', form);
-		throw redirect(307, '/');
+		let { address, amount } = Object.fromEntries(await request.formData());
+		let { tx } = await post('/bitcoin/fee', { address, amount, asset }, auth(request));
+		await post('/bitcoin/send', { address, tx }, auth(request));
+		throw redirect(307, '/sent');
 	}
 };
diff --git a/src/routes/sent/+page.svelte b/src/routes/sent/+page.svelte
new file mode 100644
index 00000000..6e4cb539
--- /dev/null
+++ b/src/routes/sent/+page.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { toast } from '@zerodevx/svelte-toast';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
+	import { goto } from '$app/navigation';
+
+	export let data;
+	let { user } = data;
+
+	toast.pop(0);
+
+	const done = () => {
+		goto(`/${user.username}/transactions`);
+	};
+</script>
+
+<div class="text-center mt-20 md:mt-0">
+	{#if browser}
+		<div class="w-full mx-auto max-w-xl">
+			<LottiePlayer
+				src="/lottie/success.json"
+				autoplay={true}
+				loop={true}
+				controls={false}
+				renderer="svg"
+				background="transparent"
+			/>
+		</div>
+	{/if}
+	<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
+	<button
+		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
+		on:click={done}
+	>
+		{$t('invoice.done')}
+	</button>
+</div>