diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 1 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+layout.svelte | 84 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/settings/[...tab]/_security.svelte | 25 | ||||
| -rw-r--r-- | src/routes/(app)/qr/[text]/+page.svelte | 21 |
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> |