Feat/evault provisioning via phone (#188)

* feat: eid wallet basic ui for verification

* chore: evault provisioning

* feat: working wallet with provisioning

* feat: restrict people on dupes

* 📝 Add docstrings to `feat/evault-provisioning-via-phone` (#189)

Docstrings generation was requested by @coodos.

* #188 (comment)

The following files were modified:

* `infrastructure/eid-wallet/src/lib/utils/capitalize.ts`
* `infrastructure/evault-provisioner/src/utils/hmac.ts`

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: coodos

infrastructure/eid-wallet/package.json

@@ -27,9 +27,16 @@
         "@tauri-apps/plugin-biometric": "^2.2.0",
         "@tauri-apps/plugin-opener": "^2",
         "@tauri-apps/plugin-store": "^2.2.0",
+        "@veriff/incontext-sdk": "^2.4.0",
+        "@veriff/js-sdk": "^1.5.1",
+        "axios": "^1.6.7",
         "clsx": "^2.1.1",
+        "dotenv": "^16.5.0",
         "flag-icons": "^7.3.2",
-        "tailwind-merge": "^3.0.2"
+        "import": "^0.0.6",
+        "svelte-loading-spinners": "^0.3.6",
+        "tailwind-merge": "^3.0.2",
+        "uuid": "^11.1.0"
     },
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",

infrastructure/eid-wallet/src-tauri/gen/apple/eid-wallet.xcodeproj/project.pbxproj

@@ -377,7 +377,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = "eid-wallet_iOS/eid-wallet_iOS.entitlements";
 				CODE_SIGN_IDENTITY = "iPhone Developer";
-				DEVELOPMENT_TEAM = 7F2T2WK6DR;
+				DEVELOPMENT_TEAM = 3FS4B734X5;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphoneos*]" = "arm64-sim x86_64";
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -430,7 +430,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = "eid-wallet_iOS/eid-wallet_iOS.entitlements";
 				CODE_SIGN_IDENTITY = "iPhone Developer";
-				DEVELOPMENT_TEAM = 7F2T2WK6DR;
+				DEVELOPMENT_TEAM = 3FS4B734X5;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphoneos*]" = "arm64-sim x86_64";
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -1,103 +1,145 @@
 <script lang="ts">
-import * as Button from "$lib/ui/Button";
-import { cn } from "$lib/utils";
-import {
-    CheckmarkBadge02Icon,
-    Upload03Icon,
-    ViewIcon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { HTMLAttributes } from "svelte/elements";
+    import * as Button from "$lib/ui/Button";
+    import { cn } from "$lib/utils";
+    import {
+        CheckmarkBadge02Icon,
+        Upload03Icon,
+        ViewIcon,
+    } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { HTMLAttributes } from "svelte/elements";
 
-interface userData {
-    [fieldName: string]: string;
-}
-interface IIdentityCard extends HTMLAttributes<HTMLElement> {
-    variant?: "eName" | "ePassport" | "eVault";
-    userId?: string;
-    viewBtn?: () => void;
-    shareBtn?: () => void;
-    userData?: userData;
-    totalStorage?: number;
-    usedStorage?: number;
-}
+    interface userData {
+        [fieldName: string]: string;
+    }
+    interface IIdentityCard extends HTMLAttributes<HTMLElement> {
+        variant?: "eName" | "ePassport" | "eVault";
+        userId?: string;
+        viewBtn?: () => void;
+        shareBtn?: () => void;
+        userData?: userData;
+        totalStorage?: number;
+        usedStorage?: number;
+    }
 
-const {
-    variant = "eName",
-    userId,
-    viewBtn,
-    shareBtn,
-    userData,
-    totalStorage = 0,
-    usedStorage = 0,
-    ...restProps
-}: IIdentityCard = $props();
-const state = $state({
-    progressWidth: "0%",
-});
+    const {
+        variant = "eName",
+        userId,
+        viewBtn,
+        shareBtn,
+        userData,
+        totalStorage = 0,
+        usedStorage = 0,
+        ...restProps
+    }: IIdentityCard = $props();
+    const state = $state({
+        progressWidth: "0%",
+    });
 
-$effect(() => {
-    state.progressWidth =
-        usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
-});
+    $effect(() => {
+        state.progressWidth =
+            usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
+    });
 
-const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
+    const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
 <div {...restProps} class={cn(baseClasses, restProps.class)}>
-    <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
-        <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
-        <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
+    <div
+        class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20"
+    >
+        <div
+            class="w-10 {variant === 'eVault'
+                ? 'bg-white/40'
+                : 'bg-white/10'} h-[300%] rotate-40"
+        ></div>
+        <div
+            class="w-10 {variant === 'eVault'
+                ? 'bg-white/40'
+                : 'bg-white/10'} h-[300%] rotate-40"
+        ></div>
     </div>
     <div class="p-5 flex flex-col gap-2">
         <div class="flex justify-between">
-            {#if variant === 'eName'}  
-                <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
-                <div class="flex gap-3 items-center"> 
-                    {#if shareBtn} 
-                    <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+            {#if variant === "eName"}
+                <HugeiconsIcon
+                    size={30}
+                    strokeWidth={2}
+                    className="text-secondary"
+                    icon={CheckmarkBadge02Icon}
+                />
+                <div class="flex gap-3 items-center">
+                    {#if shareBtn}
+                        <Button.Icon
+                            icon={Upload03Icon}
+                            iconColor={"white"}
+                            strokeWidth={2}
+                            onclick={shareBtn}
+                        />
                     {/if}
                     {#if viewBtn}
-                    <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                        <Button.Icon
+                            icon={ViewIcon}
+                            iconColor={"white"}
+                            strokeWidth={2}
+                            onclick={viewBtn}
+                        />
                     {/if}
-                    </div>
-            {:else if variant === 'ePassport'}
-                <p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
+                </div>
+            {:else if variant === "ePassport"}
+                <p
+                    class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium"
+                >
+                    HIGH SECURITY
+                </p>
                 {#if viewBtn}
-                <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    <Button.Icon
+                        icon={ViewIcon}
+                        iconColor={"white"}
+                        strokeWidth={2}
+                        onclick={viewBtn}
+                    />
                 {/if}
-            {:else if variant === 'eVault'}
-                <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">{state.progressWidth} Used</h3>
+            {:else if variant === "eVault"}
+                <h3 class="text-black-300 text-3xl font-semibold mb-3 z-[1]">
+                    {state.progressWidth} Used
+                </h3>
             {/if}
         </div>
         <div>
-            {#if variant === "eName"}        
+            {#if variant === "eName"}
                 <p class="text-gray font-normal">Your eName</p>
                 <div class="flex items-center justify-between w-full">
-                    <p class="text-white w-full font-medium">@{userId}</p>
+                    <p class="text-white w-full font-medium">{userId}</p>
                 </div>
             {:else if variant === "ePassport"}
                 <div class="flex gap-2 flex-col">
                     {#if userData}
-                        {#each Object.entries(userData) as [fieldName, value] }    
+                        {#each Object.entries(userData) as [fieldName, value]}
                             <div class="flex justify-between">
-                                <p class="text-gray">{fieldName}</p>
+                                <p class="text-gray capitalize">{fieldName}</p>
                                 <p class=" font-medium text-white">{value}</p>
                             </div>
                         {/each}
                     {/if}
                 </div>
             {:else if variant === "eVault"}
-            <div>
-                <div class="flex justify-between mb-1 ">
-                    <p class="z-[1]">{usedStorage}GB Used</p>
-                    <p class="z-[1]">{totalStorage}GB total storage</p>
-                </div>
-                <div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
-                    <div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <p class="z-[1]">{usedStorage}GB Used</p>
+                        <p class="z-[1]">{totalStorage}GB total storage</p>
+                    </div>
+                    <div
+                        class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400"
+                    >
+                        <div
+                            class="h-full bg-secondary rounded-full"
+                            style={`width: calc(${state.progressWidth})`}
+                        ></div>
+                    </div>
                 </div>
-            </div>
             {/if}
         </div>
     </div>
-</div>
+</div>
+

infrastructure/eid-wallet/src/lib/global/controllers/evault.ts

@@ -0,0 +1,42 @@
+import type { Store } from "@tauri-apps/plugin-store";
+
+export class VaultController {
+    #store: Store;
+    constructor(store: Store) {
+        this.#store = store;
+    }
+
+    set vault(
+        vault:
+            | Promise<Record<string, string> | undefined>
+            | Record<string, string>
+            | undefined,
+    ) {
+        if (vault instanceof Promise) {
+            vault
+                .then((resolvedUser) => {
+                    this.#store.set("vault", resolvedUser);
+                })
+                .catch((error) => {
+                    console.error("Failed to set vault:", error);
+                });
+        } else {
+            this.#store.set("vault", vault);
+        }
+    }
+
+    get vault() {
+        return this.#store
+            .get<Record<string, string>>("vault")
+            .then((vault) => {
+                if (!vault) {
+                    return undefined;
+                }
+                return vault;
+            })
+            .catch((error) => {
+                console.error("Failed to get vault:", error);
+                return undefined;
+            });
+    }
+}

infrastructure/eid-wallet/src/lib/global/controllers/user.ts

@@ -54,10 +54,12 @@ export class UserController {
      * ```
      * @throws {Error} If the user state cannot be set in the store
      */
-    set user(user:
-        | Promise<Record<string, string> | undefined>
-        | Record<string, string>
-        | undefined) {
+    set user(
+        user:
+            | Promise<Record<string, string> | undefined>
+            | Record<string, string>
+            | undefined,
+    ) {
         if (user instanceof Promise) {
             user.then((resolvedUser) => {
                 this.#store.set("user", resolvedUser);
@@ -83,4 +85,38 @@ export class UserController {
                 return undefined;
             });
     }
+
+    set document(
+        document:
+            | Promise<Record<string, string> | undefined>
+            | Record<string, string>
+            | undefined,
+    ) {
+        if (document instanceof Promise) {
+            document
+                .then((resolvedDoc) => {
+                    this.#store.set("doc", resolvedDoc);
+                })
+                .catch((error) => {
+                    console.error("Failed to set doc:", error);
+                });
+        } else {
+            this.#store.set("doc", document);
+        }
+    }
+
+    get document() {
+        return this.#store
+            .get<Record<string, string>>("doc")
+            .then((user) => {
+                if (!user) {
+                    return undefined;
+                }
+                return user;
+            })
+            .catch((error) => {
+                console.error("Failed to get doc:", error);
+                return undefined;
+            });
+    }
 }

infrastructure/eid-wallet/src/lib/global/state.ts

@@ -1,6 +1,7 @@
 import { Store } from "@tauri-apps/plugin-store";
 import { SecurityController } from "./controllers/security";
 import { UserController } from "./controllers/user";
+import { VaultController } from "./controllers/evault";
 /**
  * @author SoSweetHam <[email protected]>
  * @description A centralized state that can be used to control the global state of the application, meant to be used as a singleton through the main layout component.
@@ -23,10 +24,13 @@ export class GlobalState {
     #store: Store;
     securityController: SecurityController;
     userController: UserController;
+    vaultController: VaultController;
+
     private constructor(store: Store) {
         this.#store = store;
         this.securityController = new SecurityController(store);
         this.userController = new UserController(store);
+        this.vaultController = new VaultController(store);
     }
 
     /**

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -106,7 +106,7 @@ const classes = $derived({
     </div>
 </button>
 
-<!-- 
+<!--
 @component
 export default ButtonAction
 @description

infrastructure/eid-wallet/src/lib/utils/capitalize.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns a new string with the first letter of each word in uppercase and the remaining letters in lowercase.
+ *
+ * @param str - The input string to capitalize.
+ * @returns The capitalized string.
+ */
+export function capitalize(str: string) {
+    return str
+        .toLowerCase()
+        .split(" ")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+}

infrastructure/eid-wallet/src/lib/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./mergeClasses";
 export * from "./clickOutside";
+export * from "./capitalize";