chore: Remove dfinity utils

package.json

@@ -85,7 +85,6 @@
   },
   "dependencies": {
     "@dfinity/internet-identity-vc-api": "*",
-    "@dfinity/utils": "^3.1.0",
     "@icp-sdk/auth": "^4.0.1",
     "@icp-sdk/core": "^4.0.4",
     "@lingui/core": "^5.5.1",

src/frontend/src/hooks.server.ts

@@ -1,5 +1,4 @@
 import { injectCanisterIdAndConfigPlugin } from "@dfinity/internet-identity-vite-plugins";
-import { nonNullish } from "@dfinity/utils";
 import type { Handle, ServerInit } from "@sveltejs/kit";
 import { localeStore } from "$lib/stores/locale.store";
 
@@ -12,7 +11,7 @@ const transformHtml =
 export const handle: Handle = async ({ event, resolve }) => {
   const response = await resolve(event);
   if (
-    nonNullish(transformHtml) &&
+    transformHtml !== undefined &&
     response.headers.get("Content-Type") === "text/html" &&
     response.ok
   ) {

src/frontend/src/lib/components/ui/Alert.svelte

@@ -7,7 +7,6 @@
     XIcon,
   } from "@lucide/svelte";
   import Button from "$lib/components/ui/Button.svelte";
-  import { isNullish, nonNullish } from "@dfinity/utils";
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
@@ -50,7 +49,7 @@
       <ProgressRing class="text-fg-brand-primary" />
     {/if}
   </div>
-  {#if nonNullish(onClose)}
+  {#if onClose !== undefined}
     <Button
       onclick={onClose}
       variant="tertiary"
@@ -70,20 +69,20 @@
       direction === "horizontal"
         ? "col-start-2 row-span-2 row-start-1"
         : "col-span-3",
-      direction === "horizontal" && isNullish(onClose) && "col-span-2",
+      direction === "horizontal" && onClose === undefined && "col-span-2",
     ]}
   >
     <div class="text-text-primary text-sm font-semibold">
       {title}
     </div>
-    {#if nonNullish(description) || nonNullish(children)}
+    {#if description !== undefined || children !== undefined}
       <div class="flex flex-col gap-3">
-        {#if nonNullish(description)}
+        {#if description !== undefined}
           <div class="text-text-tertiary text-sm font-medium">
             {description}
           </div>
         {/if}
-        {#if nonNullish(children)}
+        {#if children !== undefined}
           <div class="flex gap-3">
             {@render children()}
           </div>

src/frontend/src/lib/components/ui/Checkbox.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
   import { CheckIcon, MinusIcon } from "@lucide/svelte";
-  import { nonNullish } from "@dfinity/utils";
 
   type Size = "sm" | "md";
 
@@ -48,7 +47,7 @@
         sm: "size-4",
         md: "size-5",
       }[size],
-      (nonNullish(label) || nonNullish(hint)) && "mt-0.5",
+      (label !== undefined || hint !== undefined) && "mt-0.5",
     ]}
   >
     {#if checked}
@@ -67,9 +66,9 @@
       {/if}
     {/if}
   </div>
-  {#if nonNullish(label) || nonNullish(hint)}
+  {#if label !== undefined || hint !== undefined}
     <div class="flex flex-col">
-      {#if nonNullish(label)}
+      {#if label !== undefined}
         <p
           class={[
             "text-text-secondary font-medium select-none",
@@ -79,7 +78,7 @@
           {label}
         </p>
       {/if}
-      {#if nonNullish(hint)}
+      {#if hint !== undefined}
         <p
           class={[
             "text-text-tertiary select-none",

src/frontend/src/lib/components/ui/CodeInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Input from "$lib/components/ui/Input.svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     element: HTMLInputElement | undefined;
@@ -85,16 +84,16 @@
         }
         onkeydown={(event) => handleKeyDown(event, index)}
         onpaste={handlePaste}
-        errorBorder={nonNullish(error)}
+        errorBorder={error !== undefined}
         {disabled}
       />
     {/each}
   </div>
-  {#if nonNullish(error) || nonNullish(hint)}
+  {#if error !== undefined || hint !== undefined}
     <div
       class={[
         "text-sm",
-        nonNullish(error) ? "text-text-error-primary" : "text-text-tertiary",
+        error !== undefined ? "text-text-error-primary" : "text-text-tertiary",
       ]}
     >
       {error ?? hint}

src/frontend/src/lib/components/ui/Dialog.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import { scale, fly } from "svelte/transition";
   import type { ClassValue, HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
   import { XIcon } from "@lucide/svelte";
   import { t } from "$lib/stores/locale.store";
 
@@ -18,8 +17,8 @@
     children,
     onClose,
     class: className,
-    closeOnOutsideClick = nonNullish(onClose),
-    showCloseButton = nonNullish(onClose),
+    closeOnOutsideClick = onClose !== undefined,
+    showCloseButton = onClose !== undefined,
     backdrop = true,
     contentClass,
     ...props
@@ -185,7 +184,7 @@
           ]}
         >
           {@render children?.()}
-          {#if showCloseButton && nonNullish(onClose)}
+          {#if showCloseButton && onClose !== undefined}
             <button
               class="btn btn-tertiary btn-lg btn-icon absolute end-2 top-2 z-2 !rounded-full"
               onclick={onClose}

src/frontend/src/lib/components/ui/Input.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
   import type { Snippet } from "svelte";
 
   type Size = "sm" | "md";
@@ -25,13 +24,13 @@
     value = $bindable(),
     size = "md",
     error,
-    errorBorder = nonNullish(error),
+    errorBorder = error !== undefined,
     ...restProps
   }: Props = $props();
 </script>
 
 <div class={["flex flex-col gap-1.5", className]}>
-  {#if nonNullish(label)}
+  {#if label !== undefined}
     <label for={id} class="text-text-secondary text-sm font-medium">
       {label}
     </label>
@@ -56,20 +55,20 @@
       ]}
     />
   </div>
-  {#if nonNullish(error) || nonNullish(hint)}
+  {#if error !== undefined || hint !== undefined}
     <div
       class={[
         "text-sm",
-        nonNullish(error) ? "text-text-error-primary" : "text-text-tertiary",
+        error !== undefined ? "text-text-error-primary" : "text-text-tertiary",
       ]}
     >
-      {#if nonNullish(error)}
+      {#if error !== undefined}
         {#if typeof error === "string"}
           {error}
         {:else}
           {@render error()}
         {/if}
-      {:else if nonNullish(hint)}
+      {:else if hint !== undefined}
         {#if typeof hint === "string"}
           {hint}
         {:else}

src/frontend/src/lib/components/ui/LandingCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  import { nonNullish } from "@dfinity/utils";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     header: string;
@@ -16,7 +15,7 @@
 >
   <p class="text-text-tertiary text-sm uppercase">{header}</p>
   <div class="grid h-[280px] place-items-center">
-    {#if nonNullish(children)}
+    {#if children !== undefined}
       {@render children()}
     {/if}
   </div>

src/frontend/src/lib/components/ui/Popover.svelte

@@ -2,7 +2,6 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
   import Dialog from "$lib/components/ui/Dialog.svelte";
-  import { nonNullish } from "@dfinity/utils";
 
   type Direction = "up" | "right" | "down" | "left";
   type Align = "start" | "center" | "end";
@@ -39,7 +38,7 @@
     let tracking = true;
 
     const track = () => {
-      if (nonNullish(anchorRef) && nonNullish(popoverRef)) {
+      if (anchorRef !== undefined && popoverRef !== undefined) {
         const anchorRect = anchorRef.getBoundingClientRect();
         const popoverRect = popoverRef.getBoundingClientRect();
 

src/frontend/src/lib/components/ui/ProgressRing.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { SVGAttributes } from "svelte/elements";
-  import { isNullish } from "@dfinity/utils";
 
   type Props = SVGAttributes<SVGSVGElement> & {
     value?: number;
@@ -26,7 +25,7 @@
   class={[
     "size-5 -rotate-90 rounded-full",
     className,
-    isNullish(value) && "progress_rotate",
+    value === undefined && "progress_rotate",
   ]}
   style="--circumference: {circumference}px"
 >
@@ -38,7 +37,10 @@
     cy={clientWidth / 2}
   />
   <circle
-    class={["fill-none stroke-current", isNullish(value) && "progress_pulsate"]}
+    class={[
+      "fill-none stroke-current",
+      value === undefined && "progress_pulsate",
+    ]}
     stroke-linecap="round"
     stroke-width={strokeWidth}
     r={(Math.max(clientWidth, strokeWidth) - strokeWidth) / 2}

src/frontend/src/lib/components/ui/QrCode.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
   import type QrCreator from "qr-creator";
-  import { isNullish } from "@dfinity/utils";
 
   // Lazy load qr creator only once
   let qrCreatorPromise: Promise<typeof QrCreator> | undefined;
   let getQrCreator = (): Promise<typeof QrCreator> => {
-    if (isNullish(qrCreatorPromise)) {
+    if (qrCreatorPromise === undefined) {
       qrCreatorPromise = import("qr-creator").then((value) => value.default);
     }
     return qrCreatorPromise;
@@ -28,7 +27,7 @@
   let qrCreator = $state<typeof QrCreator>();
 
   $effect(() => {
-    if (isNullish(qrCreator) || isNullish(containerRef)) {
+    if (qrCreator === undefined || containerRef === undefined) {
       return;
     }
     const size = clientWidth > clientHeight ? clientWidth : clientHeight;

src/frontend/src/lib/components/ui/Radiobox.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
   import { DotIcon } from "@lucide/svelte";
-  import { nonNullish } from "@dfinity/utils";
 
   type Size = "sm" | "md";
 
@@ -48,7 +47,7 @@
         sm: "size-4",
         md: "size-5",
       }[size],
-      (nonNullish(label) || nonNullish(hint)) && "mt-0.5",
+      (label !== undefined || hint !== undefined) && "mt-0.5",
     ]}
   >
     {#if value === group}
@@ -59,9 +58,9 @@
       />
     {/if}
   </div>
-  {#if nonNullish(label) || nonNullish(hint)}
+  {#if label !== undefined || hint !== undefined}
     <div class="flex flex-col">
-      {#if nonNullish(label)}
+      {#if label !== undefined}
         <p
           class={[
             "text-text-secondary font-medium select-none",
@@ -71,7 +70,7 @@
           {label}
         </p>
       {/if}
-      {#if nonNullish(hint)}
+      {#if hint !== undefined}
         <p
           class={[
             "text-text-tertiary select-none",

src/frontend/src/lib/components/ui/Select.svelte

@@ -2,7 +2,6 @@
   import type { Component } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import Popover from "$lib/components/ui/Popover.svelte";
-  import { isNullish, nonNullish } from "@dfinity/utils";
   import Button from "$lib/components/ui/Button.svelte";
   import Tooltip from "./Tooltip.svelte";
 
@@ -50,7 +49,7 @@
   };
 
   $effect(() => {
-    if (isNullish(childrenRef)) {
+    if (childrenRef === undefined) {
       return;
     }
     const listener = () => (isOpen = true);
@@ -63,7 +62,7 @@
   {@render children?.()}
 </div>
 
-{#if isOpen && nonNullish(childrenRef)}
+{#if isOpen && childrenRef !== undefined}
   <Popover
     {...props}
     anchor={childrenRef}
@@ -93,7 +92,7 @@
             aria-label={option.label}
             disabled={option.disabled}
           >
-            {#if nonNullish(option.icon)}
+            {#if option.icon !== undefined}
               {@const Icon = option.icon}
               <div
                 class="text-fg-quaternary dark:text-fg-tertiary [&_svg]:size-4"