3 files changed, 70 insertions, 30 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/Pin.svelte b/src/components/Pin.svelte
index 1d7ed65b..40a53b8b 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 ERR', 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;