finish withdraw UI, add more validation on support, bug fixes on tx hist

6 files changed, 82 insertions, 50 deletions

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>
+			<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 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>
 
-			<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>
 
-			<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>
 
-			<span class="text-3xl font-bold block mb-1"
-				>{$rate ? accountBalanceFiat : 'fetching rate...'}</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>
 
-			<span class="text-secondary text-xl block">{accountBalanceSats} SATS </span>
+					<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>
 
-			<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>
+					<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>
 
-			{#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
-				>
+					<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}`
 	});