layout updates

4 files changed, 71 insertions, 23 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index cdf1dbf5..02181c1b 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -61,11 +61,10 @@
 	};
 </script>
 
-<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap">
+<div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
 	<div class="hidden lg:block w-[240px] lg:mr-10" />
-	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10 mb-10">
+	<div class="w-[240px] lg:absolute space-y-3 left-20 mx-auto lg:mr-10 mb-10">
 		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
-
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
@@ -82,21 +81,12 @@
 		</div>
 
 		<div class="flex flex-wrap justify-center">
-			<a href={`/qr/${encodeURI(username + '@coinos.io')}`}>
+			<a href={`/${subject.username}/address`}>
 				<button class="justify-center font-bold flex rounded-full py-3 px-5 hover:opacity-80">
-					⚡️
+					<div>⚡️</div>
 					<div class="my-auto ml-1">{username}@coinos.io</div>
 				</button>
 			</a>
-
-			<a href={`/qr/${encodeURI(npub)}`}>
-			<button
-				class="justify-center flex rounded-full py-3 px-5 hover:opacity-80"
-			>
-				<Icon icon="nostr" style="mr-1 w-6" />
-				<div class="font-bold my-auto">{npub.substr(0, 6)}...{npub.substr(-6)}</div>
-			</button>
-      </a>
 		</div>
 
 		<div class="flex flex-wrap gap-2 w-full">
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 4ef80356..570029dd 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -53,7 +53,7 @@
 	};
 </script>
 
-<div class="space-y-8">
+<div class="space-y-5">
 	{#if user?.id === subject.id}
 		<div>
 			<div class="flex justify-center lg:justify-start">
diff --git a/src/routes/(app)/[username]/address/+page.server.js b/src/routes/(app)/[username]/address/+page.server.js
index 247a33a2..4f3addd8 100644
--- a/src/routes/(app)/[username]/address/+page.server.js
+++ b/src/routes/(app)/[username]/address/+page.server.js
@@ -1,10 +1,8 @@
-import { auth, get, post } from '$lib/utils';
-import { redirect } from '@sveltejs/kit';
+import Qr from 'qrcode-base64';
 
-export async function load({ cookies, params, parent }) {
-	let user = (await parent()).subject;
-	let rates = await get('/rates');
-	let invoice = { type: 'bitcoin' };
-	let { hash } = await post(`/invoice`, { invoice, user }, auth(cookies));
-	throw redirect(307, `/${user.username}/invoice/${hash}`);
+export async function load({ parent }) {
+  let { subject } = await parent();
+	let src = Qr.drawImg(subject.username + '@coinos.io', { size: 600 });
+
+	return { src };
 }
diff --git a/src/routes/(app)/[username]/address/+page.svelte b/src/routes/(app)/[username]/address/+page.svelte
index e69de29b..fa4d8303 100644
--- a/src/routes/(app)/[username]/address/+page.svelte
+++ b/src/routes/(app)/[username]/address/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	import { Icon, Qr } from '$comp';
+	import { back, copy } from '$lib/utils';
+
+	export let data;
+
+	let { src, subject } = data;
+
+	let qr;
+	let text = subject.username + '@coinos.io';
+</script>
+
+<div class="space-y-8 container px-4 mx-auto my-20">
+	<p class="text-secondary text-lg text-center">
+		This
+		<a class="font-bold" href="https://lightningaddress.com/" target="_blank" rel="noreferrer">
+			⚡️ lightning address
+		</a>
+		and
+		<a
+			class="font-bold"
+			href="https://github.com/nostr-protocol/nips/blob/master/05.md"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<Icon icon="nostr" style="w-6 inline" />
+			nostr
+      identifier
+		</a>
+     
+      can receive both money and messages
+	</p>
+	<div class="relative flex">
+		<div class="flex mx-auto w-[360px] h-[360px]">
+			<img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={text} />
+		</div>
+		<div
+			class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
+		/>
+	</div>
+
+	<div class="w-full justify-center flex">
+		<button
+			class="text-left flex gap-2 rounded-full border py-3 px-5 hover:opacity-80 text-lg"
+			on:click={() => copy(text)}
+		>
+			<div class="text-secondary break-all">{text}</div>
+			<Icon icon="copy" style="mr-1 my-auto" />
+		</button>
+	</div>
+
+	<div class="w-full justify-center flex">
+		<button
+			class="flex rounded-full border py-3 px-5 bg-black hover:opacity-80 font-semibold"
+			on:click={back}
+		>
+			<div class="text-white">Back</div>
+		</button>
+	</div>
+</div>