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/lib/socket.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/socket.js')

diff --git a/src/lib/socket.js b/src/lib/socket.js
index 66091d76..53adfe7c 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -25,7 +25,7 @@ export const messages = (data) => ({
 
 	login() {
 		user.set(data);
-		preferredCurrency.set(data.currency);
+		preferredCurrency.set('USD');
 	}
 });
 
-- 
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/lib/socket.js')

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 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/lib/socket.js')

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