From aeb5f5001eaa3613335784f74c491ffc442ce318 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 1 Nov 2023 12:18:26 -0700
Subject: user details

---
 package.json                                       |  3 +-
 pnpm-lock.yaml                                     |  8 +++
 src/locales/en.json                                |  1 +
 .../(app)/[username]/(profile)/+layout.svelte      | 84 +++++++++++++++++++---
 .../[username]/settings/[...tab]/_security.svelte  | 25 ++++---
 src/routes/(app)/qr/[text]/+page.svelte            | 21 ++++--
 static/icons/stats.svg                             | 12 ++++
 static/icons/warning.svg                           | 19 +++++
 8 files changed, 151 insertions(+), 22 deletions(-)
 create mode 100644 static/icons/stats.svg
 create mode 100644 static/icons/warning.svg

diff --git a/package.json b/package.json
index 00d29f0a..2063fb63 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
 		"@scure/bip39": "^1.2.1",
 		"html2canvas": "^1.4.1",
 		"leaflet-tooltip-layout": "^0.1.2",
-		"maplibre-gl": "^3.3.1"
+		"maplibre-gl": "^3.3.1",
+		"uint8array-extras": "^0.5.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce0d43d1..c6490728 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   maplibre-gl:
     specifier: ^3.3.1
     version: 3.3.1
+  uint8array-extras:
+    specifier: ^0.5.0
+    version: 0.5.0
 
 devDependencies:
   '@scure/base':
@@ -1986,6 +1989,11 @@ packages:
       typewise-core: 1.2.0
     dev: false
 
+  /uint8array-extras@0.5.0:
+    resolution: {integrity: sha512-CKAKa+/rjCblsuGrcmIJLluHcZMYKcMwgdhAZZEnSplFFGCuGKF6e2L+CeVXK0zX5rYyerrqG2dnHIANm3i9qA==}
+    engines: {node: '>=18'}
+    dev: false
+
   /undici@5.21.0:
     resolution: {integrity: sha512-HOjK8l6a57b2ZGXOcUsI5NLfoTrfmbOl90ixJDl0AEFG4wgHNDQxtZy15/ZQp7HhjkpaGlp/eneMgtsu1dIlUA==}
     engines: {node: '>=12.18'}
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>
diff --git a/static/icons/stats.svg b/static/icons/stats.svg
new file mode 100644
index 00000000..4f1b709e
--- /dev/null
+++ b/static/icons/stats.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>contact-details-filled</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon" fill="#000000" transform="translate(42.666667, 85.333333)">
+            <path d="M426.666667,1.42108547e-14 L426.666667,341.333333 L3.55271368e-14,341.333333 L3.55271368e-14,1.42108547e-14 L426.666667,1.42108547e-14 Z M362.666667,213.333333 L234.666667,213.333333 L234.666667,245.333333 L362.666667,245.333333 L362.666667,213.333333 Z M125.333333,155.733333 L109.333333,155.733333 C78.4053873,155.733333 53.3333333,181.333333 53.3333333,213.333333 L53.3333333,213.333333 L181.333333,213.333333 C181.333333,181.333333 156.16,155.733333 125.333333,155.733333 L125.333333,155.733333 Z M362.666667,149.333333 L234.666667,149.333333 L234.666667,181.333333 L362.666667,181.333333 L362.666667,149.333333 Z M117.333333,78.62624 C101.86936,78.62624 89.3333333,91.162267 89.3333333,106.62624 C89.3333333,122.090213 101.86936,134.62624 117.333333,134.62624 C132.797306,134.62624 145.333333,122.090213 145.333333,106.62624 C145.333333,91.162267 132.797306,78.62624 117.333333,78.62624 Z M362.666667,85.3333333 L234.666667,85.3333333 L234.666667,117.333333 L362.666667,117.333333 L362.666667,85.3333333 Z" id="Combined-Shape">
+
+</path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/icons/warning.svg b/static/icons/warning.svg
new file mode 100644
index 00000000..d4729f32
--- /dev/null
+++ b/static/icons/warning.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 486.463 486.463" xml:space="preserve">
+<g>
+	<g>
+		<path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4
+			C268.225,344.682,256.925,333.382,243.225,333.382z"/>
+		<path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4
+			l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8
+			C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8
+			c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8
+			l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"/>
+		<path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7
+			c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9
+			c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file
-- 
cgit v1.2.3