update all props

src/components/AddAccountId.svelte

@@ -19,9 +19,9 @@
 
   let { isOpen, close }: Props = $props();
 
-  let selectedAccount: Account | null | undefined = $state();
+  let selectedAccount: Account | undefined = $state();
 
-  let isSubmitDisabled = $derived(selectedAccount?.injectedAccount == null);
+  let isSubmitDisabled = $derived(selectedAccount?.injectedAccount == undefined);
 
   const addAccountId = async () => {
     if (!selectedAccount || !selectedAccount.injectedAccount) {
@@ -41,17 +41,18 @@
   };
 
   function onCancel() {
-    selectedAccount = null;
+    selectedAccount = undefined;
     close();
   }
 </script>
 
-<Modal id="add-account-id" {isOpen} close={onCancel}>
-  <span slot="title">
-    Add an Account Id to MSA (<span class="font-light">{$user.msaId}</span>)
-  </span>
-
-  <div slot="body">
+<Modal
+  id="add-account-id"
+  {isOpen}
+  close={onCancel}
+  title="Add an Account Id to MSA (<span class='font-light'>{$user.msaId}</span>)"
+>
+  <div>
     <form class="column">
       <DropDownMenu
         id="AddAccountId"

src/components/ConnectProvider.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import Modal from '../components/Modal.svelte';
   import LoginForm from './LoginForm.svelte';
-  export let close = () => {};
-  export let isOpen: boolean = false;
+
+  interface Props {
+    close: () => void;
+    isOpen: boolean;
+  }
+
+  let { close, isOpen = false }: Props = $props();
 </script>
 
-<Modal id="connect-provider" {close} {isOpen}>
-  <span slot="title">Connect Provider</span>
-  <LoginForm slot="body" onConnect={close} onCancel={close} />
+<Modal id="connect-provider" {close} {isOpen} title="Connect Provider">
+  <LoginForm onConnect={close} onCancel={close} />
 </Modal>

src/components/DropDownMenu.svelte

@@ -1,16 +1,30 @@
 <script lang="ts" generics="T extends { toString: () => string }">
-  export let label: string;
-  export let id: string = '';
-  export let options: T[]; // eslint-disable-line no-undef
-  export let value: T | null = null; // eslint-disable-line no-undef
-  export let placeholder: string = '';
-  export let onChange: (() => void) | undefined = undefined;
-  export let formatter: (value: T) => string = (value) => value.toString(); // eslint-disable-line no-undef
+  interface Props<T> {
+    label: string;
+    id: string;
+    options: T[];
+    value: T | undefined;
+    placeholder?: string;
+    onChange?: (() => void) | undefined;
+    formatter: (value: T) => string;
+    disabled?: boolean;
+  }
+
+  let {
+    label,
+    id = '',
+    options,
+    value = $bindable(),
+    placeholder = '',
+    onChange = undefined,
+    formatter = (value) => value.toString(),
+    disabled = false,
+  }: Props<T> = $props();
 </script>
 
 <div>
   <label class="label mb-3.5 block" for={id}>{label}</label>
-  <select {...$$restProps} {id} bind:value on:change={onChange} data-test-id={id}>
+  <select {id} {value} onchange={onChange} data-test-id={id} {disabled}>
     {#if placeholder !== ''}
       <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
     {/if}

src/components/Modal.svelte

@@ -1,27 +1,39 @@
 <script lang="ts">
-  export let id: string;
-  export let close = () => {};
-  export let isOpen: boolean = false;
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    id: string;
+    close: () => void;
+    isOpen: boolean;
+    children: Snippet;
+  }
+
+  let { title, id, close, isOpen = false, children }: Props = $props();
+
+  function handleStopProp(e: Event) {
+    e.stopPropagation();
+  }
 </script>
 
 {#if isOpen}
   <div
     {id}
-    on:click={close}
-    on:keyup={close}
+    onclick={close}
+    onkeyup={close}
     role="button"
     tabindex="0"
     class="fixed right-0 top-0 z-[100] flex h-[100vh] w-[calc(100vw-126px)] cursor-default items-center justify-center overflow-y-auto bg-overlay"
   >
     <div
       class="content-block flex w-modal cursor-default flex-col gap-7"
-      on:click|stopPropagation={() => {}}
-      on:keyup|stopPropagation={() => {}}
+      onclick={handleStopProp}
+      onkeyup={handleStopProp}
       tabindex="0"
       role="button"
     >
-      <h2 class="section-title-underlined"><slot name="title" /></h2>
-      <slot name="body" />
+      <h2 class="section-title-underlined">{title}</h2>
+      {@render children()}
     </div>
   </div>
 {/if}

src/components/Nav.svelte

@@ -23,8 +23,6 @@
     {#if $isLoggedIn === true}
       <NavItem href="https://faucet.testnet.frequency.xyz/" target="_blank">Testnet Faucet</NavItem>
       <NavItem id="logout-button" href="/" onClick={handleLogout}>Logout</NavItem>
-    {:else}
-      <NavItem />
     {/if}
   </div>
 </div>

src/components/NavItem.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
-  export let href: string = '';
-  export let isActive: boolean = false;
-  export let onClick: () => void = () => {};
-  export let id: string = '';
-  export let target: string = '';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    href?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    id?: string;
+    target?: string;
+    children: Snippet;
+  }
+
+  let { href = '', isActive = false, onClick = () => {}, id = '', target = '', children }: Props = $props();
 </script>
 
 <a
   {id}
   {href}
-  on:click={onClick}
+  onclick={onClick}
   class={` flex h-[100px] items-center justify-center text-sm font-bold ${
     isActive && 'bg-cream text-bright-blue shadow-blue-border'
   }`}
   {target}
 >
-  <slot />
+  {@render children()}
 </a>

src/components/Stake.svelte

@@ -4,18 +4,16 @@
   import { storeChainInfo } from '$lib/stores';
 
   interface Props {
-    isOpen?: boolean;
-    close?: () => void;
+    isOpen: boolean;
+    close: () => void;
     stakeAmount?: bigint;
   }
 
-  let { isOpen = false, close = () => {}, stakeAmount = 1n }: Props = $props();
+  let { isOpen, close, stakeAmount = 1n }: Props = $props();
 </script>
 
-<Modal id="stake-to-provider" {isOpen} {close}>
-  <span slot="title">Stake to Provider</span>
-
-  <div slot="body">
+<Modal id="stake-to-provider" {isOpen} {close} title="Stake to Provider">
+  <div>
     <StakeForm {close} {stakeAmount} />
 
     <span class="min-w-full border-b border-b-divider"></span>

src/components/StakeForm.svelte

@@ -17,7 +17,7 @@
 
   let { close, stakeAmount = $bindable(1n) }: Props = $props();
 
-  let selectedAccount: Account | null = $state($allAccountsStore.get($user.address) || null);
+  let selectedAccount: Account | undefined = $state($allAccountsStore.get($user.address));
   let isLoading: boolean = $state(false);
 
   let stakeAmountInPlancks = $derived(BigInt.asUintN(64, stakeAmount) * BigInt.asUintN(64, DOLLARS));
@@ -52,7 +52,7 @@
   <DropDownMenu
     id="stake-using-account-id"
     label="Wallet Account Id"
-    bind:value={selectedAccount}
+    value={selectedAccount}
     options={Array.from($allAccountsStore.values())}
     formatter={formatAccount}
   />