user details

4 files changed, 110 insertions, 21 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 9c098763..3fe36200 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -206,6 +206,7 @@
 			"placeholder": "Paste a bitcoin address, lightning invoice or coinos username"
 		},
 		"settings": {
+      "hideSeed": "Hide seed phrase",
       "revealSeed": "Reveal seed phrase",
 			"saveSettings": "Save Settings",
 			"bannerImage": "Banner Image",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 331161bb..e7fa447c 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,16 +1,25 @@
 <script>
-	import { f, s, sats } from '$lib/utils';
+	import { hexToUint8Array } from 'uint8array-extras';
+	import { copy, f, s, sats } from '$lib/utils';
 	import { animatedRate } from '$lib/store';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
+	import { bech32m } from '@scure/base';
+	import { page } from '$app/stores';
 
 	export let data;
+
+	let { encode, toWords } = bech32m;
 	let events, user, subject, rates, src, text;
+
 	$: ({ events, user, rates, subject, src, text } = data);
 	$: ({ currency, username: n, display } = subject);
 
 	$: username = n.length > 60 ? n.substr(0, 6) : display || n;
+	$: npub = bech32m.encode('npub', toWords(hexToUint8Array(user.pubkey)), 180);
+	$: lnaddr = `${n}@${$page.url.host}`;
+	$: profile = `${$page.url.host}/${n}`;
 
 	let follow = async () => {
 		user.follows.push(['p', subject.pubkey, 'wss://nostr.coinos.io', subject.username]);
@@ -42,19 +51,76 @@
 
 	$: following = !!user?.follows.find((t) => t.includes(subject.pubkey));
 
-	let hideBio = true;
-	let toggleBio = () => (hideBio = false);
+	let showBio;
+	let toggleBio = () => (showBio = !showBio);
+
+	let showDetails;
+	let toggleDetails = () => (showDetails = !showDetails);
 </script>
 
 <div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap space-y-5">
-	<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">
-		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
+	<div class="hidden lg:block lg:w-[300px]" />
+	<div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto">
+		<div
+			class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
+			on:click={toggleDetails}
+		>
+			<div class="my-auto">{display || username}</div>
+			<Icon icon="stats" style="w-12 rounded cursor-pointer" />
+		</div>
+
+		{#if showDetails}
+			<div>
+				<div class="flex gap-2">
+					<div class="break-all grow text-secondary text-lg">
+						{npub}
+					</div>
+					<div class="flex mb-auto gap-1">
+						<button class="my-auto" on:click={() => copy(npub)}
+							><Icon icon="copy" style="max-w-max min-w-[32px]" /></button
+						>
+						<a href={`/qr/${npub}`} class="my-auto">
+							<Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+						</a>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div class="flex gap-2">
+					<div class="break-all grow text-secondary text-lg">
+						{lnaddr}
+					</div>
+					<div class="flex mb-auto gap-1">
+						<button class="my-auto" on:click={() => copy(lnaddr)}
+							><Icon icon="copy" style="max-w-max min-w-[32px]" /></button
+						>
+						<a href={`/qr/${lnaddr}`} class="my-auto">
+							<Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+						</a>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div class="flex gap-2">
+					<div class="break-all grow text-secondary text-lg">
+						{profile}
+					</div>
+					<div class="flex mb-auto gap-1">
+						<button class="my-auto" on:click={() => copy(profile)}
+							><Icon icon="copy" style="max-w-max min-w-[32px]" /></button
+						>
+						<a href={`/qr/${profile}`} class="my-auto">
+							<Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+						</a>
+					</div>
+				</div>
+			</div>
+		{/if}
 
 		{#if subject.address}
 			<div
 				class="text-secondary mx-auto text-center lg:text-left lg:mx-0"
-				class:line-clamp-3={hideBio}
+				class:line-clamp-3={showBio}
 				on:click={toggleBio}
 				on:keydown={toggleBio}
 			>
@@ -62,7 +128,7 @@
 			</div>
 		{/if}
 
-		<div class="flex justify-around">
+		<div class="flex justify-center gap-4">
 			<a href={`/${subject.pubkey}/follows`}
 				><b>{subject.follows.length}</b>
 				<span class="text-secondary">{$t('user.following')}</span></a
@@ -134,7 +200,7 @@
 	</div>
 
 	<div class="w-full">
-		<div class="mx-auto space-y-5 lg:max-w-lg xl:max-w-2xl">
+		<div class="mx-auto space-y-5 lg:max-w-lg xl:max-w-2xl lg:pl-10">
 			<slot />
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index f3df3fa3..85f461ad 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -3,7 +3,7 @@
 	import { tick } from 'svelte';
 	import { t } from '$lib/translations';
 	import { Pin, Icon, Qr } from '$comp';
-	import { post, success, fail } from '$lib/utils';
+	import { copy, post, success, fail } from '$lib/utils';
 	import { pin as current } from '$lib/store';
 	import { invalidate } from '$app/navigation';
 	import { page } from '$app/stores';
@@ -223,11 +223,20 @@
 	</select>
 </div>
 
-<button type="button" class="primary" on:click={toggleSeed}>
-	<Icon icon="mobile" style="mr-1" />
-	{$t('user.settings.revealSeed')}
-</button>
+<div class="space-y-5">
+	<button type="button" class="primary" on:click={toggleSeed}>
+		<Icon icon="warning" style="mr-1 w-6 my-auto" />
+		{revealSeed ? $t('user.settings.hideSeed') : $t('user.settings.revealSeed')}
+	</button>
+
+	{#if revealSeed}
+		<div class="text-lg">
+			{mnemonic}
+		</div>
 
-{#if revealSeed}
-	{mnemonic}
-{/if}
+		<button type="button" class="primary" on:click={() => copy(mnemonic)}>
+			<Icon icon="copy" style="mr-1 w-6 my-auto" />
+			Copy
+		</button>
+	{/if}
+</div>
diff --git a/src/routes/(app)/qr/[text]/+page.svelte b/src/routes/(app)/qr/[text]/+page.svelte
index 9e56ab29..f3cd791a 100644
--- a/src/routes/(app)/qr/[text]/+page.svelte
+++ b/src/routes/(app)/qr/[text]/+page.svelte
@@ -1,11 +1,24 @@
 <script>
-	import { Qr } from '$comp';
+	import { Icon, Qr } from '$comp';
+  import { back } from "$lib/utils";
 	export let data;
 	let { src, text } = data;
 </script>
 
-<Qr {src} />
 
-<div class="text-center w-full font-bold">
-	{text}
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+  <Icon icon="arrow-left" style="w-10" />
+</button>
+
+
+<div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5">
+	<div class="flex justify-center items-center">
+		<div class="md:shadow-xl rounded-3xl md:px-10 pt-5 pb-10 space-y-5 w-full md:mx-5">
+      <Qr {src} />
+
+      <div class="text-center w-full text-2xl py-10 break-all">
+        {text}
+      </div>
+		</div>
+	</div>
 </div>