aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/AppHeader.svelte84
-rw-r--r--src/lib/utils.js4
-rw-r--r--src/routes/[username]/index.svelte96
-rw-r--r--src/routes/__layout.svelte11
-rw-r--r--static/icons/copy.svg3
-rw-r--r--static/icons/minus.svg3
-rw-r--r--static/icons/plus.svg3
7 files changed, 152 insertions, 52 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9f73adbf..d0123650 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -5,6 +5,8 @@
import { goto } from '$app/navigation';
import { Icon } from '$comp';
+ export let avatarPosition = 'left-[calc(50vw-48px)]';
+
const menuButtons = [
{ title: 'Customers', icon: 'customers', goto: 'customers' },
{ title: 'Dashboard', icon: 'dash', goto: 'dashboard' },
@@ -24,48 +26,54 @@
};
</script>
-<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
+<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative">
<nav class="flex justify-end items-center space-x-4 p-5">
- <a href={`/${$user.username}/receive`}>
- <button class="bg-white p-2 rounded-full w-12 h-12"
- ><Icon icon="numpad" style="mx-auto" />
- </button>
- </a>
- <a href={`/${$user.username}/transactions`}>
- <button class="bg-white p-2 rounded-full w-12 h-12"
- ><Icon icon="clock" style="mx-auto" />
- </button>
- </a>
- <a href={`/${$user.username}`}>
- <button class="bg-white p-2 rounded-full w-12 h-12"
- ><Icon icon="profile" style="mx-auto" />
- </button>
- </a>
- <div class="relative">
- <button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => (showMenu = !showMenu)}
- ><Icon icon="menu" style="mx-auto" />
- </button>
- <div
- class="{showMenu
- ? 'block'
- : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
- >
- <ul class="space-y-5 w-32">
- {#each menuButtons as button}
- <li>
- <button
- class="flex justify-center items-center font-semibold text-sm"
- on:click={() => handleMenuItemClick(button.goto)}
- ><Icon icon={button.icon} style="mr-1" /> {button.title}
- </button>
- </li>
- {/each}
- </ul>
+ {#if $user}
+ <a href={`/${$user.username}/receive`}>
+ <button class="bg-white p-2 rounded-full w-12 h-12"
+ ><Icon icon="numpad" style="mx-auto" />
+ </button>
+ </a>
+ <a href={`/${$user.username}/transactions`}>
+ <button class="bg-white p-2 rounded-full w-12 h-12"
+ ><Icon icon="clock" style="mx-auto" />
+ </button>
+ </a>
+ <a href={`/${$user.username}`}>
+ <button class="bg-white p-2 rounded-full w-12 h-12"
+ ><Icon icon="profile" style="mx-auto" />
+ </button>
+ </a>
+ <div class="relative">
+ <button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => (showMenu = !showMenu)}
+ ><Icon icon="menu" style="mx-auto" />
+ </button>
+ <div
+ class="{showMenu
+ ? 'block'
+ : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
+ >
+ <ul class="space-y-5 w-32">
+ {#each menuButtons as button}
+ <li>
+ <button
+ class="flex justify-center items-center font-semibold text-sm"
+ on:click={() => handleMenuItemClick(button.goto)}
+ ><Icon icon={button.icon} style="mr-1" /> {button.title}
+ </button>
+ </li>
+ {/each}
+ </ul>
+ </div>
</div>
- </div>
+ {:else}
+ <a href="/login">
+ <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm">Sign in </button>
+ </a>
+ {/if}
</nav>
<div
- class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
+ class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
>
<Icon icon="logo-symbol-white" style="mx-auto" />
</div>
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 22c88522..7831c519 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -17,3 +17,7 @@ export const post = (url, body) =>
body: JSON.stringify(body),
headers: { accept: 'application/json', 'content-type': 'application/json' }
}).then((r) => r.json());
+
+export const copy = (text) => {
+ navigator.clipboard.writeText(text);
+};
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 90d0c04a..a53b94cc 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,24 +1,94 @@
<script>
+ import { toast } from '@zerodevx/svelte-toast';
+ import { browser } from '$app/env';
+ import { onMount } from 'svelte';
import { AppHeader, Icon, PageNotFound } from '$comp';
import { user } from '$lib/store';
+ import { copy } from '$lib/utils';
export let username;
+
+ //this needs to be pulled from user
+ let lightning = 'lnbc1p3dzl8tpp5jgq2dxefjdhvmvs3uvtjc';
+
+ onMount(async () => {
+ if (browser) {
+ let { default: QRCodeStyling } = await import('qr-code-styling');
+ const qrCode = new QRCodeStyling({
+ width: window.screen.width < 640 ? 250 : 300,
+ type: 'svg',
+ data: 'add static qr here',
+ image: '/images/invoice.svg',
+ backgroundOptions: {
+ color: 'rgba(0, 0, 0, 0)'
+ },
+ dotsOptions: {
+ type: 'rounded'
+ },
+ imageOptions: {
+ hideBackgroundDots: false
+ }
+ });
+
+ qrCode.append(document.getElementById('qr'));
+ }
+ });
+
+ let followed = false;
+
+ let qrSkeleton = true;
+ setTimeout(() => (qrSkeleton = false), 100);
+
+ const handleCopy = () => {
+ copy(lightning);
+ toast.push('Copied!', {
+ theme: {
+ '--toastBarBackground': '#2F855A'
+ }
+ });
+ };
</script>
-{#if $user?.username === username}
- <AppHeader />
- <div class="flex justify-center items-center mt-20 mb-3 px-3">
- <div class="space-y-3 w-full md:w-[300px] mx-auto">
- <div class="text-center">
- <b>Signed in as {username}</b>
+<!-- need to update this IF statement to only show if the username matches a user in the DB -->
+{#if username}
+ <AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+
+ <div class="flex xl:block justify-center items-center my-20 px-3">
+ <div class="space-y-10 xl:space-y-0">
+ <div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+ <h1 class="text-3xl font-bold">{username}</h1>
+
+ <p class="text-secondary">Address goes here</p>
+
+ <button
+ class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
+ on:click={() => (followed = !followed)}
+ ><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
+ {followed ? 'Remove' : 'Follow'}
+ </button>
</div>
- <div>
- <a href="/logout" style="cursor: pointer">
- <button
- class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
- ><Icon icon="logout" style="mr-2" /> Logout</button
- >
- </a>
+ <div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+ <div
+ id="qr"
+ class="border border-lightgrey rounded-3xl flex md:p-5 justify-center items-center relative"
+ >
+ <div
+ class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+ ? 'block'
+ : 'hidden'}"
+ />
+ </div>
+
+ <p class="text-secondary text-center font-semibold">Scan to pay with Bitcoin</p>
+
+ <div
+ class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
+ >
+ <span>{lightning}</span>
+ <button on:click={handleCopy}>
+ <Icon icon="copy" style="ml-2" />
+ </button>
+ </div>
</div>
</div>
</div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 736f38e8..b2cb8aae 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -30,8 +30,17 @@
</script>
{#if ready}
- <SvelteToast />
+ <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
<slot />
{:else}
<LoadingSplash />
{/if}
+
+<style>
+ :root {
+ --toastContainerTop: auto;
+ --toastContainerRight: auto;
+ --toastContainerBottom: 8rem;
+ --toastContainerLeft: calc(50vw - 8rem);
+ }
+</style>
diff --git a/static/icons/copy.svg b/static/icons/copy.svg
new file mode 100644
index 00000000..38b43e02
--- /dev/null
+++ b/static/icons/copy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16H6C4.89543 16 4 15.1046 4 14V6C4 4.89543 4.89543 4 6 4H14C15.1046 4 16 4.89543 16 6V8M10 20H18C19.1046 20 20 19.1046 20 18V10C20 8.89543 19.1046 8 18 8H10C8.89543 8 8 8.89543 8 10V18C8 19.1046 8.89543 20 10 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/minus.svg b/static/icons/minus.svg
new file mode 100644
index 00000000..65450cf4
--- /dev/null
+++ b/static/icons/minus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 12H9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/plus.svg b/static/icons/plus.svg
new file mode 100644
index 00000000..310c79d5
--- /dev/null
+++ b/static/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9V12M12 12V15M12 12H15M12 12H9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 09:22:41 +0000