From d99a3524fd2649f1a9ce3623333de56a99e06971 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:23:59 -0600
Subject: lots of updates, implementing design, refactoring, bug fixes and more

---
 src/routes/[username]/dashboard.svelte |  67 ++++++-
 src/routes/[username]/index.svelte     |  34 +---
 src/routes/[username]/receive.svelte   |  22 +--
 src/routes/[username]/support.svelte   |  45 +++++
 src/routes/__error.svelte              |   8 +-
 src/routes/__layout.svelte             |   8 +-
 src/routes/community.svelte            |   0
 src/routes/index.svelte                |   2 +-
 src/routes/invoice/[id].svelte         | 318 ++++++++++++++++-----------------
 src/routes/jobs.svelte                 |  28 +++
 src/routes/support.svelte              |   5 -
 11 files changed, 321 insertions(+), 216 deletions(-)
 create mode 100644 src/routes/[username]/support.svelte
 delete mode 100644 src/routes/community.svelte
 delete mode 100644 src/routes/support.svelte

(limited to 'src/routes')

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 1935b156..4c0e4cfc 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -1,5 +1,70 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { rate, user, preferredCurrency } from '$lib/store';
+
+	$: btcPrice = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($rate);
+
+	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($user.account.balance * ($rate / 100000000));
+
+	$: accountBalanceBtc = $user.account.balance / 100000000;
+
+	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$user.account.balance
+	);
+
+	$: feeAmount = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(($user.account.balance * ($rate / 100000000)) / 100);
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
+
+	<div
+		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
+	>
+		<h2 class="text-2xl font-semibold">{$user.username}</h2>
+		<span class="text-secondary">Address goes here</span>
+	</div>
+
+	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
+		<div>
+			<h1 class="text-4xl font-semibold mb-8">Dashboard</h1>
+
+			<span class="text-secondary mx-auto text-lg font-bold"
+				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+				{$preferredCurrency}
+			</span>
+
+			<span class="text-secondary block mt-1"
+				>Data from <span class="text-black">Binance</span>.
+			</span>
+
+			<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+				ACCOUNT BALANCE
+			</h3>
+
+			<span class="text-3xl font-bold block mb-1"
+				>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
+			>
+
+			<span class="text-secondary text-xl block"
+				>{accountBalanceBtc} BTC ({accountBalanceSats} SATS)
+			</span>
+
+			<button class="rounded-full border py-2 font-bold w-28 mt-4">Withdraw</button>
+			<p class="text-secondary mt-2 w-full md:w-[550px]">
+				You will be charged a 1% withdrawal fee (<span class="text-black"
+					>{$rate ? feeAmount : 'fetching rate...'}</span
+				>) on your balance.
+			</p>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 6002efdc..41d60849 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/env';
 	import { onMount } from 'svelte';
 	import { AppHeader, Icon, PageNotFound } from '$comp';
@@ -14,7 +13,7 @@
 			let { default: QRCodeStyling } = await import('qr-code-styling');
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
-				type: 'svg',
+				type: 'canvas',
 				data: 'add static qr here',
 				image: '/images/invoice.svg',
 				backgroundOptions: {
@@ -33,18 +32,6 @@
 	});
 
 	let followed = false;
-
-	let qrSkeleton = true;
-	setTimeout(() => (qrSkeleton = false), 100);
-
-	const handleCopy = () => {
-		copy(lightningAddress);
-		toast.push('Copied!', {
-			theme: {
-				'--toastBarBackground': '#2F855A'
-			}
-		});
-	};
 </script>
 
 {#if username}
@@ -57,33 +44,30 @@
 
 				<p class="text-secondary">Address goes here</p>
 
-				<button
+				<!--
+        we need to hook this up
+        <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 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>
+					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+				/>
 
-				<p class="text-secondary text-center font-semibold">Scan to pay with Bitcoin</p>
+				<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>{lightningAddress}</span>
-					<button on:click={handleCopy}>
+					<button on:click={() => copy(lightningAddress)}>
 						<Icon icon="copy" style="ml-2" />
 					</button>
 				</div>
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
index 50fddbed..f0fa0fbd 100644
--- a/src/routes/[username]/receive.svelte
+++ b/src/routes/[username]/receive.svelte
@@ -3,13 +3,12 @@
 	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
-	import { post } from '$lib/utils';
+	import { post, warning } from '$lib/utils';
 	import { page } from '$app/stores';
 
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
-	let message = '';
 
 	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
 
@@ -33,9 +32,6 @@
 	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
 
 	const handleInput = (value) => {
-		if (message) {
-			message = '';
-		}
 		if (useFiat) {
 			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
 				amountFiat = value;
@@ -54,7 +50,7 @@
 					}
 				}
 			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				message = 'Please enter an amount less than 1 bitcoin.';
+				warning('Please enter an amount less than 1 bitcoin.');
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
 			} else {
@@ -74,7 +70,7 @@
 					}
 				}
 			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				message = 'Please enter an amount less than 1 bitcoin.';
+				warning('Please enter an amount less than 1 bitcoin.');
 			} else {
 				amountSats = amountSats + value;
 			}
@@ -118,16 +114,6 @@
 					>
 				</div>
 
-				<!-- error message -->
-				{#if message}
-					<div
-						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
-					>
-						<Icon icon="info" style="w-5" />
-						<p>{message}</p>
-					</div>
-				{/if}
-
 				<!-- numpad -->
 				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
 					{#each numPad as value}
@@ -172,10 +158,12 @@
 						on:click={submit}
 						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
 					>
+					<!--
 					<button
 						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
 						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
 					>
+          -->
 				</div>
 			</div>
 		{:else}
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
new file mode 100644
index 00000000..7dd254c1
--- /dev/null
+++ b/src/routes/[username]/support.svelte
@@ -0,0 +1,45 @@
+<script>
+	// this needs to be hooked up to the backend
+	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+
+		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+			<div>
+				<label for="email" class="font-semibold">Email</label>
+				<input class="block border rounded-xl p-2 w-full" type="email" name="email" required />
+			</div>
+
+			<div>
+				<label for="account" class="font-semibold">Account Name</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={$user.username}
+				/>
+			</div>
+
+			<div>
+				<label for="message" class="font-semibold">Message</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					required
+				/>
+			</div>
+
+			<button class="bg-black text-white font-bold rounded-xl py-3 w-full mx-auto">Send</button>
+		</form>
+	</div>
+{/if}
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index 2d617f9d..b62b158f 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,7 +1,7 @@
 <script context="module">
 	export function load({ error, status }) {
 		if (error.message.includes('not found')) {
-			error.message = 'Page not found';
+			error.message = 'Page not found.';
 			status = 404;
 		}
 
@@ -25,13 +25,13 @@
 	<div class="flex justify-center items-center mt-20">
 		<div class="space-y-5 text-center">
 			<a href="/">
-				<Icon icon="logo" />
+				<Icon icon="logo" style="mx-auto" />
 			</a>
 
-			<Icon icon="error" style="mx-auto w-full" />
+			<Icon icon="error" style="mx-auto w-56" />
 
 			<h1 class="font-bold text-5xl">Error</h1>
-			<p>{error.message}</p>
+			<p class="px-1 w-full md:w-96 break-all font-bold">{error.message.toUpperCase()}</p>
 			<p>Please try again or contact support.</p>
 		</div>
 	</div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 406c29e2..167fba93 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import { toast } from '@zerodevx/svelte-toast';
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
@@ -9,18 +8,19 @@
 	import { browser } from '$app/env';
 	import { goto } from '$app/navigation';
 	import { LoadingSplash } from '$comp';
+	import { warning, protectedRoutes } from '$lib/utils';
 
 	browser && ($token ||= $session.token);
-	let protectedRoutes = [/receive/, /customers/, /dashboard/, /settings/, /transactions/];
+
 	let ready = false;
 
 	onMount(() => {
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
-				toast.push('Please sign in to continue.');
+				warning('Please sign in to continue.');
 			}
-			user.subscribe((u) => (ready = true));
+			user.subscribe((u) => u?.username && (ready = true));
 		} else {
 			ready = true;
 		}
diff --git a/src/routes/community.svelte b/src/routes/community.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index faa881bb..f50db726 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -23,7 +23,7 @@
 		{
 			image: 'bolt',
 			step: '2. Ask for payments',
-			description: 'The same as you normally would, but with Bitcoin.'
+			description: 'The same as you normally would, but with bitcoin.'
 		},
 		{
 			image: 'smile',
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 17c7de1f..126a474e 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -1,5 +1,4 @@
 <script>
-	import { toast } from '@zerodevx/svelte-toast';
 	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/env';
 	import { invoices, user, preferredCurrency } from '$lib/store';
@@ -83,7 +82,6 @@
 
 	$: generate(text);
 	let generate = async (ready) => {
-		console.log('GENERATE', text);
 		if (!ready) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
@@ -122,15 +120,6 @@
 
 	let customInput;
 
-	const handleCopy = () => {
-		copy(text);
-		toast.push('Copied!', {
-			theme: {
-				'--toastBarBackground': '#2F855A'
-			}
-		});
-	};
-
 	const handleDoneClick = () => {
 		if ($user) {
 			goto(`/${$user.username}/receive`);
@@ -140,174 +129,185 @@
 	};
 </script>
 
-{#if $invoices[id]?.status !== 'paid'}
-	<div class:full-shadow={showMobileTip}>
-		<button
-			class="ml-5 md:ml-20 mt-5 md:mt-10"
-			class:invisible={!$user}
-			on:click={handleBackButton}
-		>
-			<Icon icon="arrow-left" style="w-10" />
-		</button>
-
-		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
-			<div
-				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+{#if $user}
+	{#if $invoices[id]?.status !== 'paid'}
+		<div class:full-shadow={showMobileTip}>
+			<button
+				class="ml-5 md:ml-20 mt-5 md:mt-10"
+				class:invisible={!$user}
+				on:click={handleBackButton}
 			>
-				<!-- tipping section  -->
+				<Icon icon="arrow-left" style="w-10" />
+			</button>
+
+			<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
 				<div
-					class="w-[100%] md:w-auto absolute {showMobileTip
-						? 'bottom-0'
-						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+					class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
 				>
-					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
-
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
-
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							customInput.value = '';
-							tipPercent = e.target.value;
-						}}
-					/>
+					<!-- tipping section  -->
+					<div
+						class="w-[100%] md:w-auto absolute {showMobileTip
+							? 'bottom-0'
+							: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+					>
+						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
-									? ''
-									: tipPercent === amount.slice(0, 2) ||
-									  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
+						<div>
+							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
 							>
-						{/each}
+							<span class="block text-secondary text-sm">{tipPercent}%</span>
+						</div>
 
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								bind:this={customInput}
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-									? !customTipAmount && !tipAmount
+						<input
+							id="slider"
+							type="range"
+							min="0"
+							max="100"
+							value={tipPercent}
+							class="px-2"
+							on:input={(e) => {
+								customTipAmount = '';
+								customInput.value = '';
+								tipPercent = e.target.value;
+							}}
+						/>
+
+						<div>
+							{#each tipAmounts as amount}
+								<button
+									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+										? ''
+										: tipPercent === amount.slice(0, 2) ||
+										  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+										? '!bg-black text-white'
+										: ''}"
+									on:click={() => handleTipButtonClick(amount)}>{amount}</button
+								>
+							{/each}
+
+							<div class="relative">
+								<span
+									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
 										? 'opacity-50'
-										: 'opacity-100'
-									: !customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-								on:click={() => (showMobileTip = false)}>Done</button
-							>
+										: 'opacity-100'}">$</span
+								>
+								<input
+									bind:this={customInput}
+									type="number"
+									min="0"
+									on:input={(e) => handleCustomTipAmount(e)}
+									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+									placeholder="Other"
+								/>
+								<button
+									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+										? !customTipAmount && !tipAmount
+											? 'opacity-50'
+											: 'opacity-100'
+										: !customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}"
+									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+									on:click={() => (showMobileTip = false)}>Done</button
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-
-				<div
-					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
-
-				<!-- invoice section -->
-				<div class="text-center space-y-5">
-					<button
-						class="block md:hidden bg-black {showMobileTip
-							? 'text-white/50'
-							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-						on:click={() => (showMobileTip = true)}
-						disabled={showMobileTip}
-					>
-						<svg
-							width="24"
-							height="24"
-							class="mr-1"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg> Add a tip
-					</button>
-
-					<span class="text-secondary block"
-						>Scan to pay <span class="text-black font-semibold">{username}</span></span
-					>
 
 					<div
-						bind:this={qr}
-						on:click={handleCopy}
-						class="border {showMobileTip
-							? 'border-gray-400'
-							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center cursor-pointer"
+						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
 					/>
 
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+					<!-- invoice section -->
+					<div class="text-center space-y-5">
+						<button
+							class="block md:hidden bg-black {showMobileTip
+								? 'text-white/50'
+								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+							on:click={() => (showMobileTip = true)}
+							disabled={showMobileTip}
+						>
+							<svg
+								width="24"
+								height="24"
+								class="mr-1"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
 							>
-						</div>
+								<path
+									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg> Add a tip
+						</button>
+
+						<span class="text-secondary block"
+							>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a
+							></span
+						>
 
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
+						<div
+							bind:this={qr}
+							on:click={() => copy(text)}
+							class="border {showMobileTip
+								? 'border-gray-400'
+								: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
+						/>
+
+						<div class="px-5 space-y-3">
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Invoice</span>
+								<span class="font-semibold text-sm"
+									>{invoiceAmountFiatFormatted}
+									<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span
+									></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Tip</span>
+								<span class="font-semibold text-sm"
+									>{tipAmountFormatted}
+									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-bold">Total</span>
+								<span class="font-bold"
+									>{totalAmountFormatted}
+									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
+									></span
+								>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-{:else}
-	<div class="text-center mt-20 md:mt-0">
-		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
-		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
-		<h2 class="text-2xl md:text-3xl font-semibold">{totalAmountFormatted} {$preferredCurrency}</h2>
-		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
-			Done
-		</button>
-	</div>
+	{:else}
+		<div class="text-center mt-20 md:mt-0">
+			<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+			<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+			<h2 class="text-2xl md:text-3xl font-semibold">
+				{totalAmountFormatted}
+				{$preferredCurrency}
+			</h2>
+			<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+			<button
+				class="bg-black text-white rounded-2xl w-20 py-3 font-bold"
+				on:click={handleDoneClick}
+			>
+				Done
+			</button>
+		</div>
+	{/if}
 {/if}
 
 <style>
diff --git a/src/routes/jobs.svelte b/src/routes/jobs.svelte
index e69de29b..e4a97386 100644
--- a/src/routes/jobs.svelte
+++ b/src/routes/jobs.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<a href="/">
+	<Icon icon="logo" style="mx-auto mt-10" />
+</a>
+<div class="w-11/12 md:w-3/4 lg:w-1/2 2xl:w-1/3 max-w-3xl mx-auto my-20 space-y-5">
+	<h1 class="text-5xl font-medium">Jobs</h1>
+
+	<h2 class="text-2xl font-medium">Current Openings</h2>
+
+	<p class="text-justify text-xl text-secondary">
+		CoinOS is actively looking for developers to join our growing team (full-time or part-time,
+		remote working OK).
+		<br /><br />
+		Excited about working on open source bitcoin? Then take a look at our repositories on
+		<a
+			href="https://github.com/coinos"
+			target="_blank"
+			rel="noreferrer"
+			class="underline underline-offset-4">GitHub</a
+		>.
+		<br /><br />
+		If you think you can make an impact, we'd love to hear from you. Send us your resume to
+		<a href="mailto:contact@coinos.io" class="underline underline-offset-4">contact@coinos.io</a>.
+	</p>
+</div>
diff --git a/src/routes/support.svelte b/src/routes/support.svelte
deleted file mode 100644
index 1935b156..00000000
--- a/src/routes/support.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-</script>
-
-<AppHeader />
-- 
cgit v1.2.3


From e195d2fe45e4e006df0404929ffef4f739caa8c7 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 2 Aug 2022 12:42:28 -0700
Subject: remove user check from invoice page

---
 src/routes/invoice/[id].svelte | 310 ++++++++++++++++++++---------------------
 1 file changed, 151 insertions(+), 159 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 126a474e..2e3d257c 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -129,185 +129,177 @@
 	};
 </script>
 
-{#if $user}
-	{#if $invoices[id]?.status !== 'paid'}
-		<div class:full-shadow={showMobileTip}>
-			<button
-				class="ml-5 md:ml-20 mt-5 md:mt-10"
-				class:invisible={!$user}
-				on:click={handleBackButton}
+{#if $invoices[id]?.status !== 'paid'}
+	<div class:full-shadow={showMobileTip}>
+		<button
+			class="ml-5 md:ml-20 mt-5 md:mt-10"
+			class:invisible={!$user}
+			on:click={handleBackButton}
+		>
+			<Icon icon="arrow-left" style="w-10" />
+		</button>
+
+		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+			<div
+				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
 			>
-				<Icon icon="arrow-left" style="w-10" />
-			</button>
-
-			<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+				<!-- tipping section  -->
 				<div
-					class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+					class="w-[100%] md:w-auto absolute {showMobileTip
+						? 'bottom-0'
+						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
 				>
-					<!-- tipping section  -->
-					<div
-						class="w-[100%] md:w-auto absolute {showMobileTip
-							? 'bottom-0'
-							: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
-					>
-						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+					<div>
+						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+						>
+						<span class="block text-secondary text-sm">{tipPercent}%</span>
+					</div>
+
+					<input
+						id="slider"
+						type="range"
+						min="0"
+						max="100"
+						value={tipPercent}
+						class="px-2"
+						on:input={(e) => {
+							customTipAmount = '';
+							customInput.value = '';
+							tipPercent = e.target.value;
+						}}
+					/>
 
-						<div>
-							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+					<div>
+						{#each tipAmounts as amount}
+							<button
+								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+									? ''
+									: tipPercent === amount.slice(0, 2) ||
+									  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+									? '!bg-black text-white'
+									: ''}"
+								on:click={() => handleTipButtonClick(amount)}>{amount}</button
 							>
-							<span class="block text-secondary text-sm">{tipPercent}%</span>
-						</div>
+						{/each}
 
-						<input
-							id="slider"
-							type="range"
-							min="0"
-							max="100"
-							value={tipPercent}
-							class="px-2"
-							on:input={(e) => {
-								customTipAmount = '';
-								customInput.value = '';
-								tipPercent = e.target.value;
-							}}
-						/>
-
-						<div>
-							{#each tipAmounts as amount}
-								<button
-									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
-										? ''
-										: tipPercent === amount.slice(0, 2) ||
-										  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-										? '!bg-black text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-
-							<div class="relative">
-								<span
-									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									min="0"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-									placeholder="Other"
-								/>
-								<button
-									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
+						<div class="relative">
+							<span
+								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}">$</span
+							>
+							<input
+								bind:this={customInput}
+								type="number"
+								min="0"
+								on:input={(e) => handleCustomTipAmount(e)}
+								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+								placeholder="Other"
+							/>
+							<button
+								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+									? !customTipAmount && !tipAmount
 										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-									on:click={() => (showMobileTip = false)}>Done</button
-								>
-							</div>
+										: 'opacity-100'
+									: !customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}"
+								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+								on:click={() => (showMobileTip = false)}>Done</button
+							>
 						</div>
 					</div>
+				</div>
+
+				<div
+					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
+				/>
+
+				<!-- invoice section -->
+				<div class="text-center space-y-5">
+					<button
+						class="block md:hidden bg-black {showMobileTip
+							? 'text-white/50'
+							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+						on:click={() => (showMobileTip = true)}
+						disabled={showMobileTip}
+					>
+						<svg
+							width="24"
+							height="24"
+							class="mr-1"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg> Add a tip
+					</button>
+
+					<span class="text-secondary block"
+						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
+					>
 
 					<div
-						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-						id="section-divider"
+						bind:this={qr}
+						on:click={() => copy(text)}
+						class="border {showMobileTip
+							? 'border-gray-400'
+							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
 					/>
 
-					<!-- invoice section -->
-					<div class="text-center space-y-5">
-						<button
-							class="block md:hidden bg-black {showMobileTip
-								? 'text-white/50'
-								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-							on:click={() => (showMobileTip = true)}
-							disabled={showMobileTip}
-						>
-							<svg
-								width="24"
-								height="24"
-								class="mr-1"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+					<div class="px-5 space-y-3">
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Invoice</span>
+							<span class="font-semibold text-sm"
+								>{invoiceAmountFiatFormatted}
+								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
 							>
-								<path
-									d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg> Add a tip
-						</button>
-
-						<span class="text-secondary block"
-							>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a
-							></span
-						>
+						</div>
 
-						<div
-							bind:this={qr}
-							on:click={() => copy(text)}
-							class="border {showMobileTip
-								? 'border-gray-400'
-								: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
-						/>
-
-						<div class="px-5 space-y-3">
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Invoice</span>
-								<span class="font-semibold text-sm"
-									>{invoiceAmountFiatFormatted}
-									<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span
-									></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-semibold text-sm">Tip</span>
-								<span class="font-semibold text-sm"
-									>{tipAmountFormatted}
-									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-								>
-							</div>
-
-							<div class="flex justify-between">
-								<span class="font-bold">Total</span>
-								<span class="font-bold"
-									>{totalAmountFormatted}
-									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
-									></span
-								>
-							</div>
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Tip</span>
+							<span class="font-semibold text-sm"
+								>{tipAmountFormatted}
+								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+							>
+						</div>
+
+						<div class="flex justify-between">
+							<span class="font-bold">Total</span>
+							<span class="font-bold"
+								>{totalAmountFormatted}
+								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+							>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	{:else}
-		<div class="text-center mt-20 md:mt-0">
-			<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
-			<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
-			<h2 class="text-2xl md:text-3xl font-semibold">
-				{totalAmountFormatted}
-				{$preferredCurrency}
-			</h2>
-			<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
-			<button
-				class="bg-black text-white rounded-2xl w-20 py-3 font-bold"
-				on:click={handleDoneClick}
-			>
-				Done
-			</button>
-		</div>
-	{/if}
+	</div>
+{:else}
+	<div class="text-center mt-20 md:mt-0">
+		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{totalAmountFormatted}
+			{$preferredCurrency}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+			Done
+		</button>
+	</div>
 {/if}
 
 <style>
-- 
cgit v1.2.3


From a421da7ca5e67972d833e36c5bd1cbf6bb76a477 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:33:58 -0600
Subject: add transactions page

---
 src/routes/[username]/dashboard.svelte    |  2 +-
 src/routes/[username]/support.svelte      |  2 +-
 src/routes/[username]/transactions.svelte | 48 ++++++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 3 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 4c0e4cfc..6f38a812 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -36,7 +36,7 @@
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 		<div>
-			<h1 class="text-4xl font-semibold mb-8">Dashboard</h1>
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1>
 
 			<span class="text-secondary mx-auto text-lg font-bold"
 				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
index 7dd254c1..f974bd80 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/[username]/support.svelte
@@ -8,7 +8,7 @@
 	<AppHeader />
 
 	<div class="my-20">
-		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 1935b156..bbcc0c23 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -1,5 +1,51 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+
+	$: transactions = $user.payments;
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary flex justify-between mb-5">
+				<h2>AMOUNT</h2>
+				<h2>TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="flex justify-between items-center border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>({new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									SATS)
+								</span>
+							</div>
+
+							<div class="text-secondary">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
-- 
cgit v1.2.3


From 4d0d80ab159733a16be329b0f77b80c1f1475185 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 17:14:47 -0600
Subject: fix tip mobile menu bug

---
 src/app.css                    | 1 +
 src/routes/invoice/[id].svelte | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/routes')

diff --git a/src/app.css b/src/app.css
index 91fcc5c1..7f585187 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,6 +9,7 @@
 
 html {
 	font-family: PublicSans, sans-serif;
+	overflow: hidden;
 }
 
 ::selection {
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 2e3d257c..92ffb61a 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -147,7 +147,7 @@
 				<div
 					class="w-[100%] md:w-auto absolute {showMobileTip
 						? 'bottom-0'
-						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
 				>
 					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-- 
cgit v1.2.3


From fe130806aea8ba9e0b16a9f8c2ec4adcfe12a821 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 17:27:06 -0600
Subject: update toast color fix another bug

---
 src/app.css                    | 1 -
 src/routes/__layout.svelte     | 1 +
 src/routes/invoice/[id].svelte | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/routes')

diff --git a/src/app.css b/src/app.css
index 7f585187..91fcc5c1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9,7 +9,6 @@
 
 html {
 	font-family: PublicSans, sans-serif;
-	overflow: hidden;
 }
 
 ::selection {
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 167fba93..9b842cc2 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -42,5 +42,6 @@
 		--toastContainerRight: auto;
 		--toastContainerBottom: 8rem;
 		--toastContainerLeft: calc(50vw - 8rem);
+    --toastBackground: #292929;
 	}
 </style>
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 92ffb61a..3170feba 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -147,7 +147,7 @@
 				<div
 					class="w-[100%] md:w-auto absolute {showMobileTip
 						? 'bottom-0'
-						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
+						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
 				>
 					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-- 
cgit v1.2.3


From 1281f173cd5f109799ef5974ed6f57165c9d2791 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 20:23:00 -0600
Subject: add settings screen

---
 src/components/AppHeader.svelte           |  19 +++-
 src/components/Toggle.svelte              |  12 +++
 src/components/index.js                   |   1 +
 src/lib/socket.js                         |   3 +-
 src/lib/store.js                          |   2 +
 src/routes/[username]/settings.svelte     | 165 +++++++++++++++++++++++++++++-
 src/routes/[username]/transactions.svelte |   4 +-
 src/routes/__layout.svelte                |   2 +-
 static/icons/lock.svg                     |   3 +
 static/icons/mobile.svg                   |   3 +
 10 files changed, 204 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Toggle.svelte
 create mode 100644 static/icons/lock.svg
 create mode 100644 static/icons/mobile.svg

(limited to 'src/routes')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index cc147b0d..ff8ede70 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -2,7 +2,7 @@
 	// we will want to dynamically use the users avatar on this screen if they have uploaded one
 
 	import OutClick from 'svelte-outclick';
-	import { user } from '$lib/store';
+	import { user, newPayment, colorTheme } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 
@@ -28,7 +28,7 @@
 	};
 </script>
 
-<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative">
+<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
 		{#if $user}
 			<a href={`/${$user.username}/receive`}>
@@ -37,12 +37,21 @@
 				</button>
 			</a>
 			<a href={`/${$user.username}/transactions`}>
-				<button class="bg-white p-2 rounded-full  w-12 h-12"
+				<button class="bg-white p-2 rounded-full w-12 h-12 relative"
 					><Icon icon="clock" style="mx-auto" />
+					{#if $newPayment}
+						<span class="absolute top-[8px] right-[8px]">
+							<span class="flex h-8 w-8">
+								<span
+									class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75"
+								/>
+							</span>
+						</span>
+					{/if}
 				</button>
 			</a>
 			<a href={`/${$user.username}`}>
-				<button class="bg-white p-2 rounded-full  w-12 h-12"
+				<button class="bg-white p-2 rounded-full w-12 h-12"
 					><Icon icon="profile" style="mx-auto" />
 				</button>
 			</a>
@@ -80,7 +89,7 @@
 		{/if}
 	</nav>
 	<div
-		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"
+		class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24"
 	>
 		<Icon icon="logo-symbol-white" style="mx-auto" />
 	</div>
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
new file mode 100644
index 00000000..85fd08d5
--- /dev/null
+++ b/src/components/Toggle.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let id;
+	export let checked;
+	export let value;
+</script>
+
+<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
+	<input type="checkbox" {value} {checked} {id} class="sr-only peer" />
+	<div
+		class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"
+	/>
+</label>
diff --git a/src/components/index.js b/src/components/index.js
index dade4c2c..1003a1b0 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -11,3 +11,4 @@ export { default as LoadingSplash } from './LoadingSplash.svelte';
 export { default as PageNotFound } from './404.svelte';
 export { default as About } from './About.svelte';
 export { default as Footer } from './Footer.svelte';
+export { default as Toggle } from './Toggle.svelte';
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 53adfe7c..c1b68a12 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { rate, user, token, invoices, preferredCurrency } from '$lib/store';
+import { rate, user, token, invoices, preferredCurrency, newPayment } from '$lib/store';
 
 let interval, socket;
 
@@ -19,6 +19,7 @@ export const messages = (data) => ({
 
 	payment() {
 		invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
+		newPayment.set(true);
 	},
 
 	connected: auth,
diff --git a/src/lib/store.js b/src/lib/store.js
index b20fd10f..2fcf21d5 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -20,3 +20,5 @@ export const invoiceAmountFiat = writable();
 export const token = persisted('token');
 export const invoices = writable({});
 export const preferredCurrency = writable();
+export const newPayment = writable();
+export const colorTheme = writable('from-primary to-gradient');
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 1935b156..ae8e91c1 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -1,5 +1,166 @@
 <script>
-	import { AppHeader } from '$comp';
+	import { AppHeader, Icon, Toggle } from '$comp';
+	import { user, colorTheme } from '$lib/store';
+
+	let setting = 'account';
+	let password;
+	let revealPassword = false;
+
+	const colorThemes = [
+		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
+		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
+		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
+		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
+		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
+		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
+	];
+	// need to update this to use the new backend field
+	let selectedTheme = 1;
+
+	const handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
+
+		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
+				>ACCOUNT</button
+			>
+
+			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
+				>POINT OF SALE</button
+			>
+
+			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
+				>SECURITY</button
+			>
+		</div>
+
+		{#if setting === 'account'}
+			<div>
+				<label for="username" class="font-bold mb-1 block">Username</label>
+				<input
+					type="text"
+					disabled
+					name="username"
+					value={$user.username}
+					class="block border rounded-xl p-3 w-full"
+				/>
+			</div>
+
+			<div class="relative">
+				<label for="password" class="block font-bold block mb-1">New Password</label>
+				{#if revealPassword}
+					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{:else}
+					<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{/if}
+				<button
+					type="button"
+					on:click={() => (revealPassword = !revealPassword)}
+					class="absolute right-5 top-10"
+				>
+					<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
+				</button>
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">Email Notifications</span>
+					<Toggle id="email-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					Get notified via email when a change occurs on your account or when people send you
+					payments.
+				</p>
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">SMS Notifications</span>
+					<Toggle id="sms-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					CoinOS will send you text notifications when this is enabled.
+				</p>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1 block">Color Theme</span>
+				<p class="text-secondary mb-1">Select from the default color themes.</p>
+				{#each colorThemes as colors}
+					<button
+						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
+						colors.theme
+							? 'border-black'
+							: ''}"
+						on:click={() => handleThemeClick(colors)}
+					/>
+				{/each}
+			</div>
+		{:else if setting === 'pos'}
+			<div>
+				<label for="currency" class="font-bold block mb-1">Local Currency</label>
+				<select name="currency" class="block py-3 w-full">
+					<option value="USD">USD</option>
+				</select>
+			</div>
+
+			<div>
+				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
+				<select disabled name="btc-unit" class="block py-3 w-full">
+					<option value="SATS">Satoshi (SATS)</option>
+					<option value="BTC">Bitcoin (BTC)</option>
+				</select>
+			</div>
+		{:else}
+			<div>
+				<span class="font-bold mb-1">Security Pin</span>
+				<p class="text-secondary mb-1">
+					Set a security pin that will be used to unlock your settings and to send outgoing
+					payments.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="lock" style="mr-1" /> Set Pin</button
+				>
+			</div>
+
+			<div>
+				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
+				<p class="text-secondary mb-1">
+					Your account will go into a secure mode automatically after a specified time:
+				</p>
+				<select name="auto-lock" class="block py-3 w-full">
+					<option value="5">5 min</option>
+					<option value="10">10 min</option>
+					<option value="30">30 min</option>
+					<option value="60">1 hour</option>
+					<option value="480">8 hours</option>
+				</select>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1">2-Factor Authentication</span>
+				<p class="text-secondary mb-1">
+					Add an extra level of security to your device by enableing 2-factor authentication.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
+				>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.selected {
+		color: black;
+	}
+</style>
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index bbcc0c23..0e635298 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { AppHeader } from '$comp';
-	import { user } from '$lib/store';
+	import { user, newPayment } from '$lib/store';
+
+	$newPayment = false;
 
 	$: transactions = $user.payments;
 </script>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 9b842cc2..5ffdc9a0 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -42,6 +42,6 @@
 		--toastContainerRight: auto;
 		--toastContainerBottom: 8rem;
 		--toastContainerLeft: calc(50vw - 8rem);
-    --toastBackground: #292929;
+		--toastBackground: #292929;
 	}
 </style>
diff --git a/static/icons/lock.svg b/static/icons/lock.svg
new file mode 100644
index 00000000..adbf200e
--- /dev/null
+++ b/static/icons/lock.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 15V17M6 21H18C19.1046 21 20 20.1046 20 19V13C20 11.8954 19.1046 11 18 11H6C4.89543 11 4 11.8954 4 13V19C4 20.1046 4.89543 21 6 21ZM16 11V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V11H16Z" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/static/icons/mobile.svg b/static/icons/mobile.svg
new file mode 100644
index 00000000..e23e8233
--- /dev/null
+++ b/static/icons/mobile.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 18H12.01M8 21H16C17.1046 21 18 20.1046 18 19V5C18 3.89543 17.1046 3 16 3H8C6.89543 3 6 3.89543 6 5V19C6 20.1046 6.89543 21 8 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
-- 
cgit v1.2.3


From bf70817d4a3440b5ea105e62648d7c5c67047fd9 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 20:37:31 -0600
Subject: minor adjustments and additions

---
 src/components/LandingHeader.svelte | 4 +---
 src/routes/invoice/[id].svelte      | 8 ++++----
 src/routes/jobs.svelte              | 4 ++++
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'src/routes')

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 65ea607c..a8abfaba 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -15,9 +15,7 @@
 	};
 </script>
 
-<header
-	class="w-full lg:w-5/6 py-5 xl:pb-0 xl:pt-10 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
->
+<header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90">
 	<nav class="block xl:flex flex-wrap justify-between items-center">
 		<a href="/" class="hidden md:block">
 			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 3170feba..9ef25251 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -220,7 +220,7 @@
 				/>
 
 				<!-- invoice section -->
-				<div class="text-center space-y-5">
+				<div class="w-[325px] text-center space-y-5">
 					<button
 						class="block md:hidden bg-black {showMobileTip
 							? 'text-white/50'
@@ -255,7 +255,7 @@
 						on:click={() => copy(text)}
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
+							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer mx-auto"
 					/>
 
 					<div class="px-5 space-y-3">
@@ -275,8 +275,8 @@
 							>
 						</div>
 
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
+						<div class="flex flex-wrap justify-between">
+							<span class="font-bold mr-1">Total</span>
 							<span class="font-bold"
 								>{totalAmountFormatted}
 								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
diff --git a/src/routes/jobs.svelte b/src/routes/jobs.svelte
index e4a97386..d864cf88 100644
--- a/src/routes/jobs.svelte
+++ b/src/routes/jobs.svelte
@@ -1,11 +1,15 @@
 <script>
 	import { Icon } from '$comp';
+	import { goto } from '$app/navigation';
 </script>
 
 <a href="/">
 	<Icon icon="logo" style="mx-auto mt-10" />
 </a>
 <div class="w-11/12 md:w-3/4 lg:w-1/2 2xl:w-1/3 max-w-3xl mx-auto my-20 space-y-5">
+	<button on:click={() => goto('/')}>
+		<Icon icon="arrow-left" style="w-8" />
+	</button>
 	<h1 class="text-5xl font-medium">Jobs</h1>
 
 	<h2 class="text-2xl font-medium">Current Openings</h2>
-- 
cgit v1.2.3


From b2310e9b98bbaa5918003208157e0594307a033f Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 3 Aug 2022 22:57:04 -0600
Subject: add tx type to history, add address to settings and other ui updates

---
 src/routes/[username]/dashboard.svelte    |  8 +++-----
 src/routes/[username]/settings.svelte     |  9 +++++++++
 src/routes/[username]/transactions.svelte | 19 ++++++++++++-------
 3 files changed, 24 insertions(+), 12 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 6f38a812..11295728 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -56,14 +56,12 @@
 			>
 
 			<span class="text-secondary text-xl block"
-				>{accountBalanceBtc} BTC ({accountBalanceSats} SATS)
+				>{accountBalanceSats} SATS
 			</span>
 
 			<button class="rounded-full border py-2 font-bold w-28 mt-4">Withdraw</button>
-			<p class="text-secondary mt-2 w-full md:w-[550px]">
-				You will be charged a 1% withdrawal fee (<span class="text-black"
-					>{$rate ? feeAmount : 'fetching rate...'}</span
-				>) on your balance.
+			<p class="text-secondary mt-2">
+				You will be charged a 1% withdrawal fee on the amount.
 			</p>
 		</div>
 	</div>
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index ae8e91c1..82ed7305 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -71,6 +71,15 @@
 				</button>
 			</div>
 
+			<div>
+				<label for="address" class="font-bold mb-1 block">Business Address</label>
+				<input
+					type="text"
+					name="address"
+					class="block border rounded-xl p-3 w-full"
+				/>
+			</div>
+
 			<div>
 				<div class="flex justify-between items-center">
 					<span class="font-bold">Email Notifications</span>
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 0e635298..24e3e146 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -16,30 +16,35 @@
 		</h1>
 
 		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
-			<div class="text-secondary flex justify-between mb-5">
+			<div class="text-secondary grid grid-cols-3 mb-5">
 				<h2>AMOUNT</h2>
-				<h2>TIME</h2>
+				<h2 class='text-center'>TYPE</h2>
+				<h2 class='text-right'>TIME</h2>
 			</div>
 
 			<div class="space-y-10">
 				{#if transactions.length}
 					{#each transactions as tx}
-						<div class="flex justify-between items-center border-b pb-5">
+						<div class="grid grid-cols-3 border-b pb-5">
 							<div class="font-bold">
 								<span class="block mb-1"
-									>{new Intl.NumberFormat('en-US', {
+									>{tx.amount > 0 && '+'}{new Intl.NumberFormat('en-US', {
 										style: 'currency',
 										currency: 'USD'
 									}).format(tx.amount * (tx.rate / 100000000))}
 								</span>
 
 								<span class="text-secondary"
-									>({new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
-									SATS)
+									>{new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									SATS
 								</span>
 							</div>
 
-							<div class="text-secondary">
+							<div class='text-center'>
+								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
+							</div>
+
+							<div class="text-secondary text-right">
 								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
 							</div>
 						</div>
-- 
cgit v1.2.3


From dcd4fe70f6f23a5ac2df3b773fea89c1acd878b6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 5 Aug 2022 10:21:48 -0700
Subject: lightning withdrawals

---
 src/lib/socket.js                      |  8 +++++-
 src/lib/utils.js                       |  8 +++---
 src/routes/[username]/dashboard.svelte | 49 ++++++++++++++++++++++++++++------
 src/routes/withdraw.js                 | 10 +++++++
 4 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/withdraw.js

(limited to 'src/routes')

diff --git a/src/lib/socket.js b/src/lib/socket.js
index c1b68a12..a30d4376 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,6 @@
 import { get } from 'svelte/store';
 import { rate, user, token, invoices, preferredCurrency, newPayment } from '$lib/store';
+import { success } from '$lib/utils';
 
 let interval, socket;
 
@@ -18,8 +19,13 @@ export const messages = (data) => ({
 	},
 
 	payment() {
-		invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
+		if (data.invoice) invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
 		newPayment.set(true);
+		if (data.amount > 0) {
+			success(`Received ${data.amount} sats!`);
+		} else {
+			success(`Sent ${-data.amount} sats!`);
+		}
 	},
 
 	connected: auth,
diff --git a/src/lib/utils.js b/src/lib/utils.js
index a812c136..24f94d40 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -18,11 +18,12 @@ export const get = (url, headers = { accept: 'application/json' }) =>
 			}
 		});
 
-export const post = (url, body) =>
-	fetch(base + url, {
+export const post = (url, body, headers) => {
+  headers = { ...headers,  accept: 'application/json', 'content-type': 'application/json' };
+	return fetch(base + url, {
 		method: 'POST',
 		body: JSON.stringify(body),
-		headers: { accept: 'application/json', 'content-type': 'application/json' }
+		headers 
 	})
 		.then((r) => r.text())
 		.then((body) => {
@@ -37,6 +38,7 @@ export const post = (url, body) =>
 
 			return body;
 		});
+}
 
 export const copy = (text) => {
 	navigator.clipboard.writeText(text);
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 11295728..7fab2125 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -1,7 +1,29 @@
 <script>
+	import { post, failure } from '$lib/utils';
+	import { tick } from 'svelte';
 	import { AppHeader } from '$comp';
 	import { rate, user, preferredCurrency } from '$lib/store';
 
+	let payreq = '',
+		payreqField,
+		withdrawing;
+
+	let toggle = async () => {
+		withdrawing = !withdrawing;
+		await tick();
+		if (withdrawing) payreqField.focus();
+	};
+
+	let withdraw = async () => {
+		try {
+			await post('/withdraw', { payreq });
+			withdrawing = false;
+		} catch (e) {
+			console.log(e);
+      failure("Withdrawal failed, please contact support.");
+		}
+	};
+
 	$: btcPrice = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
@@ -18,7 +40,7 @@
 		$user.account.balance
 	);
 
-	$: feeAmount = new Intl.NumberFormat('en-US', {
+	$: feepayreq = new Intl.NumberFormat('en-US', {
 		style: 'currency',
 		currency: 'USD'
 	}).format(($user.account.balance * ($rate / 100000000)) / 100);
@@ -55,14 +77,25 @@
 				>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
 			>
 
-			<span class="text-secondary text-xl block"
-				>{accountBalanceSats} SATS
-			</span>
+			<span class="text-secondary text-xl block">{accountBalanceSats} SATS </span>
+
+			<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
+				>Withdraw</button
+			>
+			<p class="text-secondary mt-2">You will be charged a 1% withdrawal fee on the payreq.</p>
 
-			<button class="rounded-full border py-2 font-bold w-28 mt-4">Withdraw</button>
-			<p class="text-secondary mt-2">
-				You will be charged a 1% withdrawal fee on the amount.
-			</p>
+			{#if withdrawing}
+				<input
+					bind:this={payreqField}
+					type="text"
+					name="payreq"
+					bind:value={payreq}
+					class="block border rounded-xl p-3 w-full"
+				/>
+				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={withdraw}
+					>Submit</button
+				>
+			{/if}
 		</div>
 	</div>
 {/if}
diff --git a/src/routes/withdraw.js b/src/routes/withdraw.js
new file mode 100644
index 00000000..aaed2250
--- /dev/null
+++ b/src/routes/withdraw.js
@@ -0,0 +1,10 @@
+import { post } from '$lib/utils';
+export async function POST({ locals, request }) {
+	let { token } = locals;
+  let body = await request.json();
+  console.log(body)
+	body = await post('/lightning/send', body, {
+		authorization: `Bearer ${token}`
+	});
+	return { body };
+}
-- 
cgit v1.2.3


From 93f9d0abf58c5b5154e35b63524405554042bef1 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 6 Aug 2022 00:04:55 -0600
Subject: finish withdraw UI, add more validation on support, bug fixes on tx
 hist

---
 src/lib/utils.js                          |  6 +-
 src/routes/[username]/dashboard.svelte    | 98 +++++++++++++++++++------------
 src/routes/[username]/settings.svelte     |  6 +-
 src/routes/[username]/support.svelte      | 19 +++++-
 src/routes/[username]/transactions.svelte | 12 ++--
 src/routes/withdraw.js                    |  3 +-
 6 files changed, 88 insertions(+), 56 deletions(-)

(limited to 'src/routes')

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 24f94d40..b42fe970 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -19,11 +19,11 @@ export const get = (url, headers = { accept: 'application/json' }) =>
 		});
 
 export const post = (url, body, headers) => {
-  headers = { ...headers,  accept: 'application/json', 'content-type': 'application/json' };
+	headers = { ...headers, accept: 'application/json', 'content-type': 'application/json' };
 	return fetch(base + url, {
 		method: 'POST',
 		body: JSON.stringify(body),
-		headers 
+		headers
 	})
 		.then((r) => r.text())
 		.then((body) => {
@@ -38,7 +38,7 @@ export const post = (url, body, headers) => {
 
 			return body;
 		});
-}
+};
 
 export const copy = (text) => {
 	navigator.clipboard.writeText(text);
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 7fab2125..d056399f 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { post, failure } from '$lib/utils';
 	import { tick } from 'svelte';
-	import { AppHeader } from '$comp';
+	import { AppHeader, Icon } from '$comp';
 	import { rate, user, preferredCurrency } from '$lib/store';
 
 	let payreq = '',
@@ -19,8 +19,7 @@
 			await post('/withdraw', { payreq });
 			withdrawing = false;
 		} catch (e) {
-			console.log(e);
-      failure("Withdrawal failed, please contact support.");
+			failure(e.message);
 		}
 	};
 
@@ -58,43 +57,64 @@
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 		<div>
-			<h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1>
-
-			<span class="text-secondary mx-auto text-lg font-bold"
-				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
-				{$preferredCurrency}
-			</span>
-
-			<span class="text-secondary block mt-1"
-				>Data from <span class="text-black">Binance</span>.
-			</span>
-
-			<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-				ACCOUNT BALANCE
-			</h3>
-
-			<span class="text-3xl font-bold block mb-1"
-				>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
-			>
-
-			<span class="text-secondary text-xl block">{accountBalanceSats} SATS </span>
-
-			<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
-				>Withdraw</button
-			>
-			<p class="text-secondary mt-2">You will be charged a 1% withdrawal fee on the payreq.</p>
-
-			{#if withdrawing}
-				<input
-					bind:this={payreqField}
-					type="text"
-					name="payreq"
-					bind:value={payreq}
-					class="block border rounded-xl p-3 w-full"
-				/>
-				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={withdraw}
-					>Submit</button
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
+				{withdrawing ? 'Withdraw' : 'Dashboard'}
+			</h1>
+			{#if !withdrawing}
+				<span class="text-secondary mx-auto text-lg font-bold"
+					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+					{$preferredCurrency}
+				</span>
+
+				<span class="text-secondary block mt-1"
+					>Data from <span class="text-black">Binance</span>.
+				</span>
+
+				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+					ACCOUNT BALANCE
+				</h3>
+
+				<span class="text-3xl font-bold block mb-1"
+					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
 				>
+
+				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
+
+				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
+					>Withdraw</button
+				>
+				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
+			{:else}
+				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
+					<button on:click={() => (withdrawing = false)}>
+						<Icon icon="arrow-left" style="w-8" />
+					</button>
+
+					<div>
+						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
+						<input
+							bind:this={payreqField}
+							type="text"
+							name="payreq"
+							required
+							bind:value={payreq}
+							class="block rounded-2xl p-3 w-full bg-primary"
+						/>
+					</div>
+
+					<div>
+						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
+						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
+					</div>
+
+					<button
+						disabled={!payreq}
+						class="{!payreq
+							? 'opacity-50'
+							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+						on:click={withdraw}>Send</button
+					>
+				</div>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 82ed7305..5abe58e0 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -73,11 +73,7 @@
 
 			<div>
 				<label for="address" class="font-bold mb-1 block">Business Address</label>
-				<input
-					type="text"
-					name="address"
-					class="block border rounded-xl p-3 w-full"
-				/>
+				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
 			</div>
 
 			<div>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
index f974bd80..335c804f 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/[username]/support.svelte
@@ -2,6 +2,8 @@
 	// this needs to be hooked up to the backend
 	import { AppHeader } from '$comp';
 	import { user } from '$lib/store';
+	let email;
+	let message;
 </script>
 
 {#if $user}
@@ -13,7 +15,13 @@
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
 				<label for="email" class="font-semibold">Email</label>
-				<input class="block border rounded-xl p-2 w-full" type="email" name="email" required />
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="email"
+					name="email"
+					bind:value={email}
+					required
+				/>
 			</div>
 
 			<div>
@@ -35,11 +43,18 @@
 					class="block border rounded-xl p-2 w-full"
 					type="text"
 					name="message"
+					bind:value={message}
 					required
 				/>
 			</div>
 
-			<button class="bg-black text-white font-bold rounded-xl py-3 w-full mx-auto">Send</button>
+			<button
+				disabled={!email || !message}
+				class="{!email || !message
+					? 'opacity-50'
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
+				>Send</button
+			>
 		</form>
 	</div>
 {/if}
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 24e3e146..c91fd900 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -18,8 +18,8 @@
 		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
 			<div class="text-secondary grid grid-cols-3 mb-5">
 				<h2>AMOUNT</h2>
-				<h2 class='text-center'>TYPE</h2>
-				<h2 class='text-right'>TIME</h2>
+				<h2 class="text-center">TYPE</h2>
+				<h2 class="text-right">TIME</h2>
 			</div>
 
 			<div class="space-y-10">
@@ -28,19 +28,21 @@
 						<div class="grid grid-cols-3 border-b pb-5">
 							<div class="font-bold">
 								<span class="block mb-1"
-									>{tx.amount > 0 && '+'}{new Intl.NumberFormat('en-US', {
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
 										style: 'currency',
 										currency: 'USD'
 									}).format(tx.amount * (tx.rate / 100000000))}
 								</span>
 
 								<span class="text-secondary"
-									>{new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										maximumFractionDigits: 0
+									}).format(tx.amount)}
 									SATS
 								</span>
 							</div>
 
-							<div class='text-center'>
+							<div class="text-center">
 								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
 							</div>
 
diff --git a/src/routes/withdraw.js b/src/routes/withdraw.js
index aaed2250..818d39da 100644
--- a/src/routes/withdraw.js
+++ b/src/routes/withdraw.js
@@ -1,8 +1,7 @@
 import { post } from '$lib/utils';
 export async function POST({ locals, request }) {
 	let { token } = locals;
-  let body = await request.json();
-  console.log(body)
+	let body = await request.json();
 	body = await post('/lightning/send', body, {
 		authorization: `Bearer ${token}`
 	});
-- 
cgit v1.2.3