Merge branch 'master' into hashme

7 files changed, 86 insertions, 48 deletions

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index cc923b7d..fddaae3e 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,21 +1,34 @@
 <script>
+	import { Pin } from '$comp';
 	import { f, s, sat, sats } from '$lib/utils';
-	import { animatedRate } from '$lib/store';
+	import { animatedRate, pin } from '$lib/store';
 	import { t } from '$lib/translations';
 
+	let show;
 	export let user;
 </script>
 
+{#if show && user.haspin && $pin?.length !== 6}
+	<Pin />
+{/if}
+
 <div class="space-y-2">
-	<div class="text-5xl font-bold tabular-nums">
-		{#if isNaN($animatedRate)}
-			<div class="text-gray-200">&mdash;</div>
-		{:else}
-			{f((user.balance * $animatedRate) / sats, user.currency)}
-		{/if}
-	</div>
+	{#if user.haspin && !$pin}
+		<button
+			class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
+			on:click={() => (show = true)}>Show Balance</button
+		>
+	{:else}
+		<div class="text-5xl font-bold tabular-nums">
+			{#if isNaN($animatedRate)}
+				<div class="text-gray-200">&mdash;</div>
+			{:else}
+				{f((user.balance * $animatedRate) / sats, user.currency)}
+			{/if}
+		</div>
 
-	<div class="text-secondary text-2xl">
-		⚡️{s(user.balance)}
-	</div>
+		<div class="text-secondary text-2xl">
+			⚡️{s(user.balance)}
+		</div>
+	{/if}
 </div>
diff --git a/src/components/Lnurlp.svelte b/src/components/Lnurlp.svelte
index ab0c50ce..9918a3f4 100644
--- a/src/components/Lnurlp.svelte
+++ b/src/components/Lnurlp.svelte
@@ -6,7 +6,9 @@
 
 	export let data, form;
 	let { currency } = data.user;
-	let { minSendable, maxSendable, callback, metadata } = data;
+	let { minSendable, maxSendable, callback, metadata, rates } = data;
+
+	$: rate = rates[currency];
 
 	let amount = Math.round(minSendable / 1000),
 		loading;
@@ -33,7 +35,7 @@
 		</div>
 	{/if}
 
-	<Numpad bind:amount {currency} />
+	<Numpad bind:amount bind:rate {currency} />
 
 	<form action="?/pay" method="POST" use:enhance on:submit={submit}>
 		<input name="amount" value={amount} type="hidden" />
diff --git a/src/components/Lnurlw.svelte b/src/components/Lnurlw.svelte
index f2855b53..f780d755 100644
--- a/src/components/Lnurlw.svelte
+++ b/src/components/Lnurlw.svelte
@@ -7,7 +7,8 @@
 	export let data, form;
 
 	let { currency, username } = data.user;
-	let { defaultDescription, minWithdrawable, maxWithdrawable, k1, callback } = data;
+	let { defaultDescription, minWithdrawable, maxWithdrawable, k1, callback, rates } = data;
+	$: rate = rates[currency];
 
 	let amount = Math.round(maxWithdrawable / 1000),
 		loading;
@@ -28,7 +29,7 @@
 		</div>
 	{/if}
 
-	<Numpad bind:amount {currency} />
+	<Numpad bind:amount {currency} bind:rate />
 
 	<form action="?/withdraw" method="POST" use:enhance on:submit={submit}>
 		<input name="amount" value={amount} type="hidden" />
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 77a4f38b..82512678 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,23 +1,24 @@
 <script>
 	import { Left, Icon } from '$comp';
-	import { selectedRate } from '$lib/store';
 	import { f, s, post, warning, sat, sats } from '$lib/utils';
 	import { t } from '$lib/translations';
 
 	export let amount,
 		currency,
 		fiat = !amount,
+		rate,
 		submit = undefined;
 
 	export let amountFiat = 0;
+
 	let arrow = '<';
 
 	$: update(amount, amountFiat);
 	let update = (a, f) => {
 		if (fiat) {
-			amount = Math.round(f / ($selectedRate / sats));
+			amount = Math.round(f / (rate / sats));
 		} else {
-			amountFiat = ((a * $selectedRate) / sats).toFixed(2);
+			amountFiat = ((a * rate) / sats).toFixed(2);
 		}
 	};
 
@@ -60,7 +61,7 @@
 						amount = 0;
 					}
 				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $selectedRate) {
+			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > rate) {
 				warning($t('user.receive.lessThan1BTCWarning'));
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
@@ -184,12 +185,10 @@
 					type="button"
 					on:click={() => {
 						if (fiat) {
-							amount = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
+							amount = parseInt((amountFiat / (rate / sats)).toFixed(0));
 						} else {
 							amountFiat =
-								(amount * ($selectedRate / sats)).toFixed(2) > 0.0
-									? (amount * ($selectedRate / sats)).toFixed(2)
-									: 0;
+								(amount * (rate / sats)).toFixed(2) > 0.0 ? (amount * (rate / sats)).toFixed(2) : 0;
 						}
 						fiat = !fiat;
 					}}><Icon icon="swap" style="inline hover:opacity-80" /></button
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 1d7ed65b..0cff904f 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,31 +1,59 @@
 <script>
 	import { t } from '$lib/translations';
-	import { focus } from '$lib/utils';
+	import { post, success, fail, focus } from '$lib/utils';
 	import { Pinpad } from '$comp';
+	import { pin } from '$lib/store';
+	import { onMount } from 'svelte';
 
 	export let value = '';
 	export let title = $t('user.settings.verifyPIN');
-	export let cancel = () => (pin = '');
+	export let cancel = () => (p = '');
+	export let persist = true;
+	export let notify = true;
 
-	let pin = '';
+	let p = '';
 
 	$: update(value);
-	let update = (v) => (pin = v);
+	let update = (value) => (p = value);
 
-	$: pin.toString().length > 5 && (value = pin.toString());
+	$: p.toString().length > 5 && (value = p.toString());
+
+	let loaded;
+	onMount(() => setTimeout(() => (loaded = true), 500));
+
+	$: loaded && checkPin(p);
+	let checkPin = async (p) => {
+		if (p?.length !== 6) return;
+		let result;
+		try {
+			result = await post('/pin', { pin: p });
+		} catch (e) {
+			console.log('Pin check failed', e);
+		}
+
+		if (result) {
+			if (notify) success('Pin confirmed');
+			if (persist) $pin = p;
+		} else {
+			fail('Invalid pin');
+			value = '';
+		}
+	};
 </script>
 
-<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-	<div class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5">
-		<h1 class="text-center text-2xl font-semibold">{title}</h1>
-		<Pinpad bind:v={pin} {cancel} />
-		<div class="w-full flex">
-			<button
-				class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-				on:click|preventDefault={cancel}
-			>
-				<div class="my-auto">Cancel</div>
-			</button>
+{#if loaded}
+	<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+		<div class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5">
+			<h1 class="text-center text-2xl font-semibold">{title}</h1>
+			<Pinpad bind:v={p} {cancel} />
+			<div class="w-full flex">
+				<button
+					class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+					on:click|preventDefault={cancel}
+				>
+					<div class="my-auto">Cancel</div>
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
+{/if}
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index bf3778f7..f55dc40d 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,7 +1,6 @@
 <script>
 	import { Left, Icon } from '$comp';
-	import { pin, selectedRate } from '$lib/store';
-	import { f, s, focus, post, warning, sat, sats } from '$lib/utils';
+	import { focus, post, warning } from '$lib/utils';
 	import { t } from '$lib/translations';
 
 	export let v;
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 6c099178..7aedeb9b 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -22,11 +22,7 @@
 
 	$: need2fa = form?.message === '2fa';
 	let cancel = () => (need2fa = false);
-	$: if (form?.message === '2fa' && form.token === token) {
-		token = '';
-		console.log('TOKEN', token);
-		fail('Invalid token, try again');
-	}
+	$: if (form?.message === '2fa' && form.token === token) token = '';
 
 	let username, email, btn;
 
@@ -71,7 +67,7 @@
 </script>
 
 {#if need2fa}
-	<Pin bind:value={token} title="Enter 2FA Code" {cancel} />
+	<Pin bind:value={token} title="Enter 2FA Code" {cancel} notify={false} />
 {/if}
 
 <div class="pt-10">