chore: minor DX/UX improvements (#323)

* refactor: minor improvements

* refactor: remove loading spinner

* chore: update script

* fix: type error

* fix: test value to match actual

* docs: describe build steps

* chore(deps): bump did_manager

* docs: update Android build path

* refactor: remove all mock scans

README.md

@@ -105,3 +105,11 @@ rm -rf ~/.cargo/git/checkouts/*
 # Windows
 rd /s /q "%USERPROFILE%\.cargo\git\checkouts"
 ```
+
+## Release a new version
+
+1. Search the entire project for the current version string (such as `0.6.2`) and replace them with the new version string.
+   Be **cautious** not to replace versions of any other dependencies (in `Cargo.toml`, `Cargo.lock`, `package.json`, `package-lock.json`).
+2. Run the script in `unime/src-tauri/gen-static/apply.sh` which copies over the changed files into the (untracked) generated folders for Android and iOS.
+3. Inside `unime/src-tauri` run `cargo tauri icon`.
+4. Run `npm run tauri ios build` and `npm run tauri android build` to build the apps. The iOS build (`.ipa`) will be in `unime/src-tauri/gen/apple/build/arm64` and the Android builds (`.apk` and `.aab`) will be in `unime/src-tauri/gen/android/app/build/outputs/`.

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

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

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,7 @@
+# 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
+cp -v ./android/app/proguard-rules.pro ../gen/android/app/proguard-rules.pro
+cp -v ./android/app/src/main/AndroidManifest.xml ../gen/android/app/src/main/AndroidManifest.xml
+cp -v ./apple/ExportOptions.plist ../gen/apple/ExportOptions.plist
+cp -v ./apple/unime_iOS/Info.plist ../gen/apple/unime_iOS/Info.plist

unime/src-tauri/tests/fixtures/states/four_credentials_redirect_me.json

@@ -52,7 +52,7 @@
         "@context": ["https://www.w3.org/2018/credentials/v1", "https://www.w3.org/2018/credentials/examples/v1"],
         "type": ["VerifiableCredential", "DriverLicenseCredential"],
         "issuer": "http://192.168.1.127:9090/",
-        "issuanceDate": "2022-08-15T09:30:00Z",
+        "issuanceDate": "2004-02-08T08:14:08Z",
         "expirationDate": "2027-08-15T23:59:59Z",
         "credentialSubject": {
           "id": "did:key:z6Mkg1XXGUqfkhAKU1kVd1Pmw6UEj1vxiLj1xc91MBz5owNY",
@@ -64,7 +64,7 @@
       "metadata": {
         "is_favorite": false,
         "date_added": "",
-        "date_issued": "2022-08-15T09:30:00Z"
+        "date_issued": "2004-02-08T08:14:08Z"
       },
       "display_name": "DriverLicenseCredential"
     },

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/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/lib/stores.ts

@@ -36,7 +36,8 @@ const empty_state: AppState = {
   profile_settings: {
     locale: 'en-US',
     profile: null,
-    preferred_did_method: 'did:jwk',
+    preferred_did_methods: ['did:jwk'],
+    preferred_key_types: ['Ed25519'],
     sorting_preferences: {
       connections: {
         sort_method: 'name_az',

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

@@ -77,43 +77,6 @@
     }
   }
 
-  const mockScanError = () => {
-    loading = true;
-    setTimeout(() => {
-      loading = false;
-      dispatch({ type: '[QR Code] Scanned', payload: { form_urlencoded: 'foobar' } });
-    }, 1_000);
-  };
-
-  const mockSiopRequest = () => {
-    state.set({
-      ...$state,
-      current_user_prompt: {
-        type: 'accept-connection',
-        client_name: 'Some other client',
-        logo_uri: undefined,
-        redirect_uri: 'https://demo.ngdil.com/auth/callback',
-        previously_connected: false,
-        domain_validation: {
-          status: 'Unknown',
-          message: 'DomainLinkageConfiguration could not be fetched',
-        },
-      },
-    });
-  };
-
-  const mockShareRequest = () => {
-    state.set({
-      ...$state,
-      current_user_prompt: {
-        type: 'share-credentials',
-        client_name: 'My Client Name',
-        logo_uri: undefined,
-        options: [$state.credentials[0].id],
-      },
-    });
-  };
-
   async function cancelScan() {
     await cancel();
     scanning = false;
@@ -155,30 +118,21 @@
           {/if}
 
           <!-- Dev mode -->
-          {#if $state?.dev_mode !== 'Off'}
+          {#if $state?.dev_mode !== 'Off' && !loading}
             <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" />
-                <Button variant="secondary" on:click={mockShareRequest} label="Share credentials" />
-                <Button variant="secondary" on:click={mockScanError} label="Scan error" />
-                <div class="flex flex-col space-y-2 rounded-[20px] border border-slate-200 p-2 dark:border-slate-600">
-                  <input
-                    bind:value={mockQrCodeValue}
-                    class="h-12 w-full rounded-xl border border-slate-200 px-3 text-[13px]/[24px] text-teal dark:border-slate-600 dark:bg-dark"
-                    placeholder="Paste QR code value"
-                  />
-                  <Button
-                    variant="secondary"
-                    on:click={() =>
-                      dispatch({ type: '[QR Code] Scanned', payload: { form_urlencoded: mockQrCodeValue } })}
-                    label="Process QR code"
-                  />
-                </div>
+              <div class="flex flex-col space-y-2 rounded-[20px] border border-slate-200 p-2 dark:border-slate-600">
+                <input
+                  bind:value={mockQrCodeValue}
+                  class="h-12 w-full rounded-xl border border-slate-200 px-3 text-[13px]/[24px] text-teal dark:border-slate-600 dark:bg-dark"
+                  placeholder="Paste QR code value"
+                />
+                <Button
+                  variant="secondary"
+                  on:click={() =>
+                    dispatch({ type: '[QR Code] Scanned', payload: { form_urlencoded: mockQrCodeValue } })}
+                  label="Process QR code"
+                />
               </div>
-              <!-- Divider -->
-              <hr class="border-slate-300 dark:border-slate-500" />
               <Button variant="primary" on:click={startScan} label="Start new scan" />
             </div>
           {/if}

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/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/welcome/password/completed/+page.svelte → unime/src/routes/welcome/completed/+page.svelte

@@ -10,10 +10,12 @@
   import { ShieldFillIcon } from '$lib/icons';
   import { onboarding_state } from '$lib/stores';
   import { calculateInitials } from '$lib/utils';
+
+  let loading = false;
 </script>
 
 <!-- TODO: should we show this screen AFTER a successful creation of a stronghold? -->
-<TopNavBar on:back={() => history.back()} title={$LL.ONBOARDING.PASSWORD.COMPLETED.NAVBAR_TITLE()} />
+<TopNavBar on:back={() => history.back()} title={$LL.ONBOARDING.PASSWORD.COMPLETED.NAVBAR_TITLE()} disabled />
 <!-- Content -->
 <div class="mt-8 grow p-4" in:fade={{ delay: 200 }}>
   <div class="pb-8 pt-4">
@@ -57,8 +59,8 @@
 <div class="rounded-t-3xl bg-white p-6 dark:bg-dark" in:fade={{ delay: 200 }}>
   <Button
     label={$LL.CONTINUE()}
-    on:click={async () => {
-      await dispatch({
+    on:click={() => {
+      dispatch({
         type: '[DID] Create new',
         payload: {
           name: $onboarding_state.name ?? '',
@@ -67,6 +69,8 @@
           password: $onboarding_state.password ?? '',
         },
       });
+      loading = true;
     }}
+    {loading}
   />
 </div>

unime/src/routes/welcome/password/confirm/+page.svelte

@@ -102,5 +102,5 @@
 </div>
 
 <div class="rounded-t-3xl bg-white p-6 dark:bg-dark" in:fade={{ delay: 200 }} out:fade={{ duration: 200 }}>
-  <Button label={$LL.CONTINUE()} on:click={() => goto('/welcome/password/completed')} disabled={!passwordsMatch} />
+  <Button label={$LL.CONTINUE()} on:click={() => goto('/welcome/completed')} disabled={!passwordsMatch} />
 </div>

unime/src/routes/welcome/utils.ts

@@ -5,5 +5,5 @@ export const routeOrder = [
   '/welcome/customize/name',
   '/welcome/password',
   '/welcome/password/confirm',
-  '/welcome/password/completed',
+  '/welcome/completed',
 ];