feat: render verification

src/routes/+layout.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { setupIonicBase } from 'ionic-svelte';
-
 	setupIonicBase();
-
 	import '@fontsource/poppins';
 	import 'ionic-svelte/components/all';
 	import '../theme/variables.css';

src/routes/verify/+page.svelte

@@ -6,9 +6,11 @@
 	//@ts-ignore
 	import { qrcode } from '@slangroom/qrcode';
 	import { onMount } from 'svelte';
+	import { thumbsDownOutline, thumbsUpOutline } from 'ionicons/icons';
 
 	let qr: any;
 	let error: string;
+	let tok: string;
 
 	const scriptCreate = `
 Rule unknown ignore
@@ -18,9 +20,11 @@ Given I have a 'string' named 'qrcode'
 Then print data
 `;
 	const slangroom = new Slangroom(qrcode);
+	let incomingNotification: any;
 
 	const addListeners = async () => {
 		await PushNotifications.addListener('registration', async (token) => {
+			tok = token.value;
 			const text = JSON.stringify({
 				url: 'http://localhost:3000',
 				name: 'over18',
@@ -37,6 +41,11 @@ Then print data
 		await PushNotifications.addListener('registrationError', (err) => {
 			error = err.error;
 		});
+
+		await PushNotifications.addListener('pushNotificationReceived', (notification) => {
+			incomingNotification = notification;
+			console.log('Push notification received: ', notification);
+		});
 	};
 
 	const registerNotifications = async () => {
@@ -72,8 +81,14 @@ Then print data
 </ion-header>
 
 <ion-content fullscreen class="ion-padding">
-	<ion-button href="/">back</ion-button>
-	{#if qr}
-		<img src={qr.result.qrcode} alt="qrCode" class="w-full pt-20" />
-	{/if}
+    <ion-button href="/">back</ion-button>
+	<div class="flex flex-col">
+		{#if incomingNotification}
+			<ion-icon icon={(incomingNotification.data.message === 'ok')?thumbsUpOutline : thumbsDownOutline} class="text-9xl my-6 mx-auto"></ion-icon>
+		{:else if qr}
+			<img src={qr.result.qrcode} alt="qrCode" class="w-full pt-20" />
+		{/if}
+	</div>
+	{JSON.stringify(incomingNotification)}
+	<ion-input value={tok}></ion-input>
 </ion-content>