withdraw page and other fixups

3 files changed, 113 insertions, 113 deletions

diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index a580f349..55fe69ee 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -13,48 +13,29 @@
 
 	$: animateRate($rate);
 	let animateRate = (newRate) => {
-    if (!accountBalanceFiat) return;
+		if (!accountBalanceFiat) return;
 		let t = 0;
-    let newBalance = (user.account.balance * newRate / sats);
-    let oldBalance = parseFloat(accountBalanceFiat);
-    let diff = oldBalance - newBalance;
+		let newBalance = (user.account.balance * newRate) / sats;
+		let oldBalance = parseFloat(accountBalanceFiat);
+		let diff = oldBalance - newBalance;
 
 		clearInterval(interval);
 		interval = setInterval(() => {
 			let delta = diff * ease(t / 100);
-			accountBalanceFiat = (oldBalance - delta).toFixed(2)
+			accountBalanceFiat = (oldBalance - delta).toFixed(2);
 			if (t > 80) clearInterval(interval);
 			t++;
 		}, 10);
 	};
 
 	$: user = data.user;
-  $: accountBalanceFiat = accountBalanceFiat || user && $rate && (user.account.balance * $rate / sats).toFixed(2);
+	$: accountBalanceFiat =
+		accountBalanceFiat || (user && $rate && ((user.account.balance * $rate) / sats).toFixed(2));
 
 	let payreq = '',
 		payreqField,
-		withdrawing,
 		loading;
 
-	let toggle = async () => {
-		payreq = '';
-		withdrawing = !withdrawing;
-		await tick();
-		if (withdrawing) payreqField.focus();
-	};
-
-	let withdraw = async () => {
-		loading = true;
-		try {
-			await post('/withdraw', { payreq });
-			withdrawing = false;
-			loading = false;
-		} catch (e) {
-			failure(e.message);
-			loading = false;
-		}
-	};
-
 	$: btcPrice = f($selectedRate, user.currency);
 
 	$: accountBalanceBtc = user.account.balance / sats;
@@ -75,96 +56,29 @@
 <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">
-			{withdrawing ? 'Withdraw' : 'Dashboard'}
+			{$t('user.dashboard.dashboard')}
 		</h1>
-		{#if !withdrawing}
-			<!-- <span class="text-secondary mx-auto text-lg font-bold" -->
-			<!-- 	>{$t('user.dashboard.bitcoinPrice')} -->
-			<!-- 	<span class="text-black" -->
-			<!-- 		>{$selectedRate ? btcPrice : $t('user.dashboard.fetchingRate')}</span -->
-			<!-- 	> -->
-			<!-- </span> -->
-			<!--  -->
-			<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-				{$t('user.dashboard.ACCOUNT_BALANCE')}
-			</h3>
-
-			<span class="text-3xl font-bold block mb-1">{accountBalanceSats} SAT</span>
+		<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px] uppercase">
+			{$t('user.dashboard.accountBalance')}
+		</h3>
 
-			<span class="text-secondary text-xl block"
-				>{$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')}</span
-			>
-
-			<div class="md:flex md:space-x-5">
-				<button
-					class="rounded-full border py-2 px-5 font-bold mt-4 block md:inline hover:opacity-80"
-					on:click={() => goto(`/${user.username}/receive`)}>{$t('user.dashboard.receive')}</button
-				>
-				<button
-					class="rounded-full border py-2 px-5 font-bold mt-5 md:mt-4 hover:opacity-80"
-					on:click={toggle}>{$t('user.dashboard.withdraw')}</button
-				>
-			</div>
-		{: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 hover:opacity-80" />
-				</button>
-
-				<div>
-					<!-- found missing translation -->
-					<label for="invoice" class="font-bold mb-1 block">Lightning 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>
+		<span class="text-3xl font-bold block mb-1">{accountBalanceSats} SAT</span>
 
-				<!-- TODO -->
-				<!--
-				<div>
-					<label for="note" class="font-bold mb-1 block">{$t('user.dashboard.optionalNote')}</label>
-					<textarea name="note" rows={2} class="block border rounded-2xl p-3 w-full bg-primary" />
-				</div>
--->
+		<span class="text-secondary text-xl block"
+			>{$selectedRate
+				? f(accountBalanceFiat, user.currency)
+				: $t('user.dashboard.fetchingRate')}</span
+		>
 
-				<button
-					disabled={!payreq}
-					class="{!payreq
-						? 'opacity-50'
-						: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-					on:click={withdraw}
-				>
-					{#if loading}
-						<svg
-							class="mx-auto h-6 w-6 animate-spin text-white"
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<circle
-								class="opacity-25"
-								cx="12"
-								cy="12"
-								r="10"
-								stroke="currentColor"
-								stroke-width="4"
-							/>
-							<path
-								class="opacity-75"
-								fill="currentColor"
-								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-							/>
-						</svg>
-					{:else}
-						{$t('user.dashboard.send')}
-					{/if}
-				</button>
-			</div>
-		{/if}
+		<div class="grid sm:grid-cols-2 gap-2 mt-8">
+			<button
+				class="rounded-full border py-2 px-5 font-bold hover:opacity-80 text-xl w-full mb-2"
+				on:click={() => goto(`/${user.username}/receive`)}>{$t('user.dashboard.receive')}</button
+			>
+			<button
+				class="rounded-full border py-2 px-5 font-bold hover:opacity-80 text-xl w-full mb-2"
+				on:click={() => goto('/send')}>{$t('user.dashboard.withdraw')}</button
+			>
+		</div>
 	</div>
 </div>
diff --git a/src/routes/scan/+page.svelte b/src/routes/scan/+page.svelte
new file mode 100644
index 00000000..5c8c09f6
--- /dev/null
+++ b/src/routes/scan/+page.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Icon } from "$comp";
+	import QrScanner from 'qr-scanner';
+	import { onMount } from 'svelte';
+  import { goBack } from "$lib/utils";
+
+	let scanner, vid;
+	onMount(() => {
+		scanner = new QrScanner(vid, console.log);
+    scanner.start();
+	});
+
+</script>
+
+	<button
+		class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
+  on:click={goBack}
+	>
+		<Icon icon="arrow-left" style="w-10" />
+	</button>
+
+  <div class="flex w-full">
+<video bind:this={vid} class="w-full max-w-[600px] mx-auto" />
+</div>
diff --git a/src/routes/send/+page.svelte b/src/routes/send/+page.svelte
new file mode 100644
index 00000000..777f9766
--- /dev/null
+++ b/src/routes/send/+page.svelte
@@ -0,0 +1,62 @@
+<script>
+	import { t } from '$lib/translations';
+	import { AppHeader, Icon, Spinner } from '$comp';
+
+	let payreq = '',
+		loading,
+		payreqField;
+
+	let withdraw = async () => {
+		loading = true;
+		try {
+			await post('/withdraw', { payreq });
+			loading = false;
+		} catch (e) {
+			failure(e.message);
+			loading = false;
+		}
+	};
+</script>
+
+<AppHeader avatarPosition="left-[calc(50vw-64px)] lg:left-[calc(15vw-64px)]" />
+
+<div class="container px-4 mt-20 max-w-xl mx-auto">
+	<div>
+		<!-- found missing translation -->
+		<label for="invoice" class="font-bold mb-1 block"
+			>Destination <small class="text-secondary">Address, Invoice, User, Email or Phone</small
+			></label
+		>
+
+		<div class="relative">
+			<input
+				bind:this={payreqField}
+				type="text"
+				name="payreq"
+				required
+				bind:value={payreq}
+				class="block rounded-2xl p-3 w-full bg-primary"
+			/>
+
+			<a href="/scan">
+				<div class="flex absolute h-[48px] right-0 top-0 px-2 mt-[1px]">
+					<Icon icon="scan" style="mr-2 w-6 my-auto" />
+				</div>
+			</a>
+		</div>
+	</div>
+
+	<button
+		disabled={!payreq}
+		class="{!payreq
+			? 'opacity-50'
+			: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+		on:click={withdraw}
+	>
+		{#if loading}
+			<Spinner />
+		{:else}
+			{$t('user.dashboard.go')}
+		{/if}
+	</button>
+</div>