refactor: minor improvements

identity-wallet/src/state/dev_mode/reducers/ferris_static_profile.rs

@@ -33,7 +33,7 @@ lazy_static! {
         record
     };
     pub static ref DRIVERS_LICENSE_CREDENTIAL: VerifiableCredentialRecord = VerifiableCredentialRecord::try_from(
-        json!("eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSIsImtpZCI6ImRpZDprZXk6ejZNa2toUDQzTENTWGFqM1NRQm92eTF1RTJuWHZTQm5SUFdaMndoUExxblo4UGdEI3o2TWtraFA0M0xDU1hhajNTUUJvdnkxdUUyblh2U0JuUlBXWjJ3aFBMcW5aOFBnRCJ9.eyJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjEyNzo5MDkwLyIsInN1YiI6ImRpZDprZXk6ejZNa2cxWFhHVXFma2hBS1Uxa1ZkMVBtdzZVRWoxdnhpTGoxeGM5MU1CejVvd05ZIiwiZXhwIjo5OTk5OTk5OTk5LCJpYXQiOjAsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIiwiaHR0cHM6Ly93d3cudzMub3JnLzIwMTgvY3JlZGVudGlhbHMvZXhhbXBsZXMvdjEiXSwidHlwZSI6WyJWZXJpZmlhYmxlQ3JlZGVudGlhbCIsIkRyaXZlckxpY2Vuc2VDcmVkZW50aWFsIl0sImlzc3VlciI6Imh0dHA6Ly8xOTIuMTY4LjEuMTI3OjkwOTAvIiwiaXNzdWFuY2VEYXRlIjoiMjAyMi0wOC0xNVQwOTozMDowMFoiLCJleHBpcmF0aW9uRGF0ZSI6IjIwMjctMDgtMTVUMjM6NTk6NTlaIiwiY3JlZGVudGlhbFN1YmplY3QiOnsiaWQiOiJkaWQ6a2V5Ono2TWtnMVhYR1VxZmtoQUtVMWtWZDFQbXc2VUVqMXZ4aUxqMXhjOTFNQno1b3dOWSIsImxpY2Vuc2VDbGFzcyI6IkNsYXNzIEMiLCJpc3N1ZWRCeSI6IkNhbGlmb3JuaWEiLCJ2YWxpZGl0eSI6IlZhbGlkIn19fQ.OZCcZt5JTJcBhoLPIyrQuvZuc2dnVN65f8GvKQ3earAzJEgGMA9ZjKRNHEjI73wLwvG5MJBN7Zs_rWiNLEZ5Dg"),
+        json!("eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSIsImtpZCI6ImRpZDprZXk6ejZNa2toUDQzTENTWGFqM1NRQm92eTF1RTJuWHZTQm5SUFdaMndoUExxblo4UGdEI3o2TWtraFA0M0xDU1hhajNTUUJvdnkxdUUyblh2U0JuUlBXWjJ3aFBMcW5aOFBnRCJ9.eyJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjEyNzo5MDkwLyIsInN1YiI6ImRpZDprZXk6ejZNa2cxWFhHVXFma2hBS1Uxa1ZkMVBtdzZVRWoxdnhpTGoxeGM5MU1CejVvd05ZIiwiZXhwIjo5OTk5OTk5OTk5LCJpYXQiOjAsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIiwiaHR0cHM6Ly93d3cudzMub3JnLzIwMTgvY3JlZGVudGlhbHMvZXhhbXBsZXMvdjEiXSwidHlwZSI6WyJWZXJpZmlhYmxlQ3JlZGVudGlhbCIsIkRyaXZlckxpY2Vuc2VDcmVkZW50aWFsIl0sImlzc3VlciI6Imh0dHA6Ly8xOTIuMTY4LjEuMTI3OjkwOTAvIiwiaXNzdWFuY2VEYXRlIjoiMjAwNC0wMi0wOFQwODoxNDowOFoiLCJleHBpcmF0aW9uRGF0ZSI6IjIwMjctMDgtMTVUMjM6NTk6NTlaIiwiY3JlZGVudGlhbFN1YmplY3QiOnsiaWQiOiJkaWQ6a2V5Ono2TWtnMVhYR1VxZmtoQUtVMWtWZDFQbXc2VUVqMXZ4aUxqMXhjOTFNQno1b3dOWSIsImxpY2Vuc2VDbGFzcyI6IkNsYXNzIEMiLCJpc3N1ZWRCeSI6IkNhbGlmb3JuaWEiLCJ2YWxpZGl0eSI6IlZhbGlkIn19fQ.OZCcZt5JTJcBhoLPIyrQuvZuc2dnVN65f8GvKQ3earAzJEgGMA9ZjKRNHEjI73wLwvG5MJBN7Zs_rWiNLEZ5Dg"),
     ).unwrap();
     pub static ref OPEN_BADGE: VerifiableCredentialRecord = {
         let mut record = VerifiableCredentialRecord::try_from(

unime/package.json

@@ -30,11 +30,7 @@
   },
   "devDependencies": {
     "@iconify-json/circle-flags": "^1.1.46",
-    "@iconify-json/emojione": "^1.1.7",
-    "@iconify-json/heroicons": "^1.1.11",
-    "@iconify-json/lucide": "^1.1.112",
     "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/svg-spinners": "^1.1.1",
     "@melt-ui/pp": "^0.3.0",
     "@melt-ui/svelte": "^0.76.0",
     "@sveltejs/adapter-static": "^3.0.0",

unime/src-tauri/gen-static/apply.sh

@@ -0,0 +1,2 @@
+# Copies all files tracked by git (/gen-static) to the generated resources (/gen)
+cp -v ./android/app/build.gradle.kts ../gen/android/app/build.gradle.kts

unime/src/lib/components/ListItemCard.svelte

@@ -41,7 +41,7 @@ Can be used for credentials, connections, etc.
   <!-- min-h-[64px] needed? -->
   <!-- Image or icon -->
   <slot name="image">
-    <!-- TODO: if Image does not load, then `bg-silver dark:bg-navy` -->
+    <!-- TODO: fix: should be `bg-white` only when Image is present, else `bg-silver dark:bg-navy` -->
     <div class="mr-4 flex h-12 w-12 min-w-[48px] items-center justify-center overflow-hidden rounded-lg bg-white p-1">
       <Image
         {id}

unime/src/lib/components/molecules/toast/ErrorToast.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  import { fade, fly } from 'svelte/transition';
+
+  import Warning from '~icons/ph/warning';
+  import X from '~icons/ph/x';
+
+  const dispatch = createEventDispatcher();
+
+  export let autoDismissAfterMs = 0; // A value of 0 means the toast will never auto-dismiss
+  export let title;
+  export let detail: string | undefined = undefined;
+
+  onMount(() => {
+    if (autoDismissAfterMs > 0) {
+      setTimeout(() => {
+        dispatch('dismissed');
+      }, autoDismissAfterMs);
+    }
+  });
+</script>
+
+<div
+  class="relative flex items-center overflow-hidden rounded-xl border border-rose-400 bg-rose-100 p-4"
+  in:fly={{ x: 200 }}
+  out:fade={{ duration: 200 }}
+>
+  <Warning class="h-6 w-6 min-w-6 text-rose-400" />
+  <div class="ml-4 mr-2 flex w-full flex-col overflow-hidden text-ellipsis break-words">
+    <p class="truncate text-[12px]/[20px] font-bold text-slate-800">
+      {title}
+    </p>
+    {#if detail}
+      <p class="line-clamp-2 text-[12px]/[16px] text-slate-800">{detail}</p>
+    {/if}
+  </div>
+  <button class="-mr-2 rounded-full p-3" on:click={() => dispatch('dismissed')}>
+    <X class="h-4 w-4 text-slate-800" />
+  </button>
+</div>

unime/src/lib/components/navigation/TopNavBar.svelte

@@ -3,7 +3,7 @@
 
   import { twMerge } from 'tailwind-merge';
 
-  import { ChevronLeftIcon } from '$lib/icons';
+  import { CaretLeftBoldIcon } from '$lib/icons';
 
   const dispatch = createEventDispatcher();
 
@@ -18,7 +18,7 @@
   )}
 >
   <button class="z-30 -ml-2 rounded-full p-2 disabled:opacity-25" on:click={() => dispatch('back')} {disabled}>
-    <ChevronLeftIcon class="h-6 w-6" />
+    <CaretLeftBoldIcon class="h-5 w-5" />
   </button>
   {#if title}
     <p class="custom absolute left-0 top-0 z-10 flex h-[50px] w-full items-center justify-center font-medium">

unime/src/lib/icons/index.ts

@@ -4,18 +4,16 @@ export { default as GBFlagIcon } from '~icons/circle-flags/gb';
 export { default as NLFlagIcon } from '~icons/circle-flags/nl';
 export { default as USFlagIcon } from '~icons/circle-flags/us';
 
-// Lucide icons: https://icon-sets.iconify.design/lucide/
-export { default as ChevronLeftIcon } from '~icons/lucide/chevron-left';
-export { default as ScrollTextIcon } from '~icons/lucide/scroll-text';
-
 // Phosphor icons: https://icon-sets.iconify.design/ph/
 export { default as ArrowLeftRegularIcon } from '~icons/ph/arrow-left';
 export { default as ArrowSquareOutBoldIcon } from '~icons/ph/arrow-square-out-bold';
 export { default as BankLightIcon } from '~icons/ph/bank-light';
+export { default as BugRegularIcon } from '~icons/ph/bug';
 export { default as CalendarCheckRegularIcon } from '~icons/ph/calendar-check';
 export { default as CalendarPlusRegularIcon } from '~icons/ph/calendar-plus';
 export { default as CameraSlashRegularIcon } from '~icons/ph/camera-slash';
 export { default as CaretDownBoldIcon } from '~icons/ph/caret-down-bold';
+export { default as CaretLeftBoldIcon } from '~icons/ph/caret-left-bold';
 export { default as CaretRightBoldIcon } from '~icons/ph/caret-right-bold';
 export { default as CaretUpBoldIcon } from '~icons/ph/caret-up-bold';
 export { default as CertificateLightIcon } from '~icons/ph/certificate-light';
@@ -25,6 +23,7 @@ export { default as CheckCircleRegularIcon } from '~icons/ph/check-circle';
 export { default as CheckCircleFillIcon } from '~icons/ph/check-circle-fill';
 export { default as CircleRegularIcon } from '~icons/ph/circle';
 export { default as CodeBoldIcon } from '~icons/ph/code-bold';
+export { default as CodeRegularIcon } from '~icons/ph/code';
 export { default as ConfettiFillIcon } from '~icons/ph/confetti-fill';
 export { default as DownloadSimpleFillIcon } from '~icons/ph/download-simple-fill';
 export { default as EnvelopeFillIcon } from '~icons/ph/envelope-fill';
@@ -68,5 +67,6 @@ export { default as UserLightIcon } from '~icons/ph/user-light';
 export { default as VaultFillIcon } from '~icons/ph/vault-fill';
 export { default as WarningRegularIcon } from '~icons/ph/warning';
 export { default as WarningCircleFillIcon } from '~icons/ph/warning-circle-fill';
+export { default as WarningCircleRegularIcon } from '~icons/ph/warning-circle';
 export { default as XRegularIcon } from '~icons/ph/x';
 export { default as XBoldIcon } from '~icons/ph/x-bold';

unime/src/routes/(app)/scan/+page@.svelte

@@ -3,6 +3,7 @@
 
   import { goto } from '$app/navigation';
   import LL from '$i18n/i18n-svelte';
+  import { fade } from 'svelte/transition';
 
   import {
     cancel,
@@ -18,7 +19,7 @@
 
   import { BottomNavBar, Button, LoadingSpinner } from '$lib/components';
   import { dispatch } from '$lib/dispatcher';
-  import { CameraSlashRegularIcon } from '$lib/icons';
+  import { CameraSlashRegularIcon, CodeRegularIcon, WarningCircleRegularIcon } from '$lib/icons';
   import { state } from '$lib/stores';
 
   let scanning = false;
@@ -90,9 +91,9 @@
       ...$state,
       current_user_prompt: {
         type: 'accept-connection',
-        client_name: 'Some other client',
+        client_name: 'Impierce Demo Portal',
         logo_uri: undefined,
-        redirect_uri: 'https://demo.ngdil.com/auth/callback',
+        redirect_uri: 'https://demo.impierce.com/auth/callback',
         previously_connected: false,
         domain_validation: {
           status: 'Unknown',
@@ -102,12 +103,41 @@
     });
   };
 
+  const mockOfferRequest = () => {
+    state.set({
+      ...$state,
+      current_user_prompt: {
+        type: 'credential-offer',
+        issuer_name: 'State University',
+        logo_uri: undefined,
+        credential_configurations: {
+          0: {
+            display: [
+              {
+                name: 'Graduation Diploma',
+                locale: 'en-US',
+              },
+            ],
+            credential_definition: {
+              type: ['VerifiableCredential', 'University Degree'],
+            },
+          },
+          1: {
+            credential_definition: {
+              type: ['VerifiableCredential', 'Cafeteria Voucher'],
+            },
+          },
+        },
+      },
+    });
+  };
+
   const mockShareRequest = () => {
     state.set({
       ...$state,
       current_user_prompt: {
         type: 'share-credentials',
-        client_name: 'My Client Name',
+        client_name: 'Impierce Demo Portal',
         logo_uri: undefined,
         options: [$state.credentials[0].id],
       },
@@ -143,6 +173,12 @@
         <!-- This part is only visible when no scanning or loading is happening.
           Only visible when user has not granted permissions to the camera. -->
         <div class="relative flex h-full flex-col items-center justify-center space-y-4 bg-silver p-8 dark:bg-navy">
+          {#if loading}
+            <!-- Wait for 500ms before showing the loading spinner -->
+            <div in:fade={{ delay: 500, duration: 500 }}>
+              <LoadingSpinner class="h-12 w-12" />
+            </div>
+          {/if}
           <!-- Ask for permissions (only if not given) -->
           {#if permissions_nullable && permissions_nullable !== 'granted'}
             <div class="flex w-3/4 flex-col space-y-4">
@@ -155,14 +191,43 @@
           {/if}
 
           <!-- Dev mode -->
-          {#if $state?.dev_mode !== 'Off'}
+          {#if $state?.dev_mode !== 'Off' && !loading}
+            <!-- Description -->
+            <div class="flex w-full items-center rounded-lg bg-white px-4 py-4 dark:bg-dark">
+              <span class="mr-4 h-6 w-6">
+                <CodeRegularIcon class="h-6 w-6 text-primary" />
+              </span>
+              <div class="flex flex-col">
+                <p class="text-[13px]/[24px] font-medium text-slate-800 dark:text-grey">Developer mode active</p>
+                <p class="text-[12px]/[20px] font-medium text-slate-500 dark:text-slate-300">
+                  Click one of the following buttons to simulate a successful QR scan.
+                </p>
+              </div>
+            </div>
+
+            <!-- Warning -->
+            <div class="flex w-full items-center rounded-lg bg-white px-4 py-4 dark:bg-dark">
+              <span class="mr-4 h-6 w-6">
+                <WarningCircleRegularIcon class="h-6 w-6 text-amber-500" />
+              </span>
+              <div class="flex flex-col">
+                <p class="text-[13px]/[24px] font-medium text-slate-800 dark:text-grey">Warning</p>
+                <p class="text-[12px]/[20px] font-medium text-slate-500 dark:text-slate-300">
+                  Accepting one of the mock requests can lead to unexpected behavior.
+                </p>
+              </div>
+            </div>
+
+            <!-- Buttons -->
             <div class="flex w-3/4 flex-col space-y-4">
               <!-- Mocks -->
               <div class="flex flex-col space-y-2">
-                <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">Mock scans</p>
                 <Button variant="secondary" on:click={mockSiopRequest} label="New connection" />
+                <!-- OpenID4VCI (Verifiable Credential Issuance) -->
+                <Button variant="secondary" on:click={mockOfferRequest} label="Receive credential offer" />
+                <!-- OpenID4VP (Verifiable Presentations) -->
                 <Button variant="secondary" on:click={mockShareRequest} label="Share credentials" />
-                <Button variant="secondary" on:click={mockScanError} label="Scan error" />
+                <Button variant="secondary" on:click={mockScanError} label="Invalid QR code" />
                 <div class="flex flex-col space-y-2 rounded-[20px] border border-slate-200 p-2 dark:border-slate-600">
                   <input
                     bind:value={mockQrCodeValue}

unime/src/routes/+layout.svelte

@@ -12,9 +12,9 @@
   import { dispatch } from '$lib/dispatcher';
   import {
     ArrowLeftRegularIcon,
+    BugRegularIcon,
     CaretDownBoldIcon,
     CaretUpBoldIcon,
-    ScrollTextIcon,
     TrashRegularIcon,
   } from '$lib/icons';
   import { error, state } from '$lib/stores';
@@ -94,7 +94,7 @@
     };
 
     const debugButton: DevModeButton = {
-      icon: ScrollTextIcon,
+      icon: BugRegularIcon,
       onClick: () => (showDebugMessages = !showDebugMessages),
     };
 

unime/src/routes/prompt/accept-connection/+page.svelte

@@ -46,6 +46,14 @@
     }
   });
 
+  // When an error is received, cancel the flow and redirect to the "me" page
+  error.subscribe((err) => {
+    if (err) {
+      loading = false;
+      dispatch({ type: '[User Flow] Cancel', payload: { redirect: 'me' } });
+    }
+  });
+
   onDestroy(async () => {
     // TODO: is onDestroy also called when user accepts since the component itself is destroyed?
     dispatch({ type: '[User Flow] Cancel', payload: {} });

unime/src/routes/prompt/credential-offer/+page.svelte

@@ -68,7 +68,7 @@
       class="mt-3 w-full rounded-[20px] border border-slate-200 bg-white p-[10px] dark:border-slate-600 dark:bg-dark"
     >
       {#each Object.entries(credential_configurations) as [credential_configuration_id, credential_configuration]}
-        <!-- TODO: careful with long list! -->
+        <!-- TODO: bug: long list is not correctly displayed -->
         <ListItemCard
           id={`credential_${credential_configuration_id}`}
           title={credential_configuration.display?.at(0)?.name ??

unime/src/routes/prompt/share-credentials/+page.svelte

@@ -33,6 +33,14 @@
     }
   });
 
+  // When an error is received, cancel the flow and redirect to the "me" page
+  error.subscribe((err) => {
+    if (err) {
+      loading = false;
+      dispatch({ type: '[User Flow] Cancel', payload: { redirect: 'me' } });
+    }
+  });
+
   onDestroy(async () => {
     // TODO: is onDestroy also called when user accepts since the component itself is destroyed?
     dispatch({ type: '[User Flow] Cancel', payload: {} });