round 2

change

src/components/BlockSection.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  export let title: string;
+  interface Props {
+    title: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { title, children }: Props = $props();
 </script>
 
 <div class="content-block column">
   <h2 class="section-title-underlined">{title}</h2>
-  <slot />
+  {@render children?.()}
 </div>

src/components/FAQItem.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  let isOpen = false;
+  interface Props {
+    question?: import('svelte').Snippet;
+    answer?: import('svelte').Snippet;
+  }
+
+  let { question, answer }: Props = $props();
+  let isOpen = $state(false);
 
   function toggleIsOpen() {
     isOpen = !isOpen;
@@ -9,9 +15,9 @@
 <button
   id="faq-question"
   class="label text-md mt-2 flex w-full items-center justify-between border-t border-divider p-4 text-left"
-  on:click={toggleIsOpen}
+  onclick={toggleIsOpen}
 >
-  <slot name="question" />
+  {@render question?.()}
   <svg
     class="w-8 ml-12 h-8 shrink-0 transform bg-black p-1 transition-transform duration-300 {isOpen ? 'rotate-180' : ''}"
     xmlns="http://www.w3.org/2000/svg"
@@ -28,5 +34,5 @@
 </button>
 
 <div id="faq-answer" class={`p-3 ${isOpen ? 'block' : 'hidden'}`}>
-  <slot name="answer" />
+  {@render answer?.()}
 </div>

src/components/HowToTransact.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let additionalStyles: string = '';
+  interface Props {
+    additionalStyles?: string;
+  }
+
+  let { additionalStyles = '' }: Props = $props();
 </script>
 
 <div class={`column ${additionalStyles}`}>

src/components/Intro.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  export let dismissed = false;
+  import { preventDefault } from 'svelte/legacy';
+
+  interface Props {
+    dismissed?: boolean;
+  }
+
+  let { dismissed = $bindable(false) }: Props = $props();
   const hide = (_evt: Event) => {
     dismissed = true;
   };
@@ -12,7 +18,7 @@
     relationships in form of Permissions and Grants, respectively.
   </p>
   <p class="pt-6">Click OK to get started.</p>
-  <button on:click|preventDefault={hide} on:keydown={hide} class="btn-primary mt-6 rounded-2xl p-2 px-8 text-white">
+  <button onclick={preventDefault(hide)} onkeydown={hide} class="btn-primary mt-6 rounded-2xl p-2 px-8 text-white">
     Ok
   </button>
 </div>

src/components/KeySelection.svelte

@@ -1,16 +1,27 @@
 <script lang="ts">
-  export let validAccounts: Record<string, { meta: { name: string } }> = {};
-  export let component = '';
-  export let selectLabel = 'empty';
-  export let selectedOption = '';
-  export let onSelect = () => {};
-  // for styling the dropdown
-  export let classOverrides = '';
+  interface Props {
+    validAccounts?: Record<string, { meta: { name: string } }>;
+    component?: string;
+    selectLabel?: string;
+    selectedOption?: string;
+    onSelect?: () => void;
+    // for styling the dropdown
+    classOverrides?: string;
+  }
+
+  let {
+    validAccounts = {},
+    component = '',
+    selectLabel = 'empty',
+    selectedOption = $bindable(''),
+    onSelect = () => {},
+    classOverrides = '',
+  }: Props = $props();
 </script>
 
 <p class="text-2xl"><label for={`signing-address-${component}`}>{selectLabel}</label></p>
 <div class="{classOverrides} mt-2 inline-block">
-  <select id={`signing-address-${component}`} bind:value={selectedOption} on:change={onSelect}>
+  <select id={`signing-address-${component}`} bind:value={selectedOption} onchange={onSelect}>
     {#each Object.keys(validAccounts) as address}
       <option value={address}>{validAccounts[address].meta.name}: {address}</option>
     {/each}

src/components/ListCard.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-  export let title = '';
-  export let list: { label: string; value: string }[] = [];
-  export let errorMessage: string;
+  interface Props {
+    title?: string;
+    list?: { label: string; value: string }[];
+    errorMessage: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { title = '', list = [], errorMessage, children }: Props = $props();
 </script>
 
 <div class="content-block relative min-w-fit flex-grow">
@@ -17,7 +22,7 @@
         </div>
       {/each}
       <div class="absolute bottom-7 right-7">
-        <slot />
+        {@render children?.()}
       </div>
     </div>
   {/if}

src/components/LoginForm.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
+  import { preventDefault } from 'svelte/legacy';
+
   import { providerAccountsStore, type Account } from '$lib/stores/accountsStore';
   import { clearLog } from '$lib/stores/activityLogStore';
   import { user } from '$lib/stores/userStore';
   import Button from './Button.svelte';
   import SelectNetworkAndAccount from './SelectNetworkAndAccount.svelte';
 
-  export let onConnect: () => void = () => {};
-  export let onCancel: (() => void) | undefined = undefined;
+  interface Props {
+    onConnect?: () => void;
+    onCancel?: (() => void) | undefined;
+  }
+
+  let { onConnect = () => {}, onCancel = undefined }: Props = $props();
 
-  let newUser: Account | undefined = $providerAccountsStore.get($user.address);
+  let newUser: Account | undefined = $state($providerAccountsStore.get($user.address));
 
-  $: canConnect = newUser?.network != null && $providerAccountsStore.size > 0 && newUser?.address !== '';
+  let canConnect = $derived(newUser?.network != null && $providerAccountsStore.size > 0 && newUser?.address !== '');
 
   async function connect() {
     if (!newUser) {
@@ -33,6 +39,6 @@
 <div class="flex justify-between align-bottom">
   <Button id="connect-button" title="Connect" disabled={!canConnect} action={connect} />
   {#if onCancel}
-    <button class="btn-no-fill" on:click|preventDefault={onCancel}>Cancel</button>
+    <button class="btn-no-fill" onclick={preventDefault(onCancel)}>Cancel</button>
   {/if}
 </div>

src/components/Stake.svelte

@@ -3,14 +3,20 @@
   import StakeForm from './StakeForm.svelte';
   import { storeChainInfo } from '$lib/stores';
 
-  export let isOpen = false;
-  export let close = () => {};
-  export let stakeAmount: bigint = 1n;
+  interface Props {
+    isOpen?: boolean;
+    close?: () => void;
+    stakeAmount?: bigint;
+  }
+
+  let { isOpen = false, close = () => {}, stakeAmount = 1n }: Props = $props();
 </script>
 
 <Modal id="stake-to-provider" {isOpen} {close}>
-  <span slot="title">Stake to Provider</span>
-  <svelte:fragment slot="body">
+  {#snippet title()}
+    <span>Stake to Provider</span>
+  {/snippet}
+  {#snippet body()}
     <StakeForm {close} {stakeAmount} />
 
     <span class="min-w-full border-b border-b-divider"></span>
@@ -23,5 +29,5 @@
         <li>This will require 1 signature to send the transaction.</li>
       </ol>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </Modal>

src/routes/activity-log/+page.svelte

@@ -4,11 +4,7 @@
   import BlockSection from '$components/BlockSection.svelte';
   import type { Activity } from '$lib/storeTypes';
 
-  let activityItems: Activity[];
-
-  $: {
-    activityItems = $activityLog;
-  }
+  let activityItems: Activity[] = $derived($activityLog);
 </script>
 
 <BlockSection title="Activity Log">

vitest.config.ts

@@ -3,9 +3,10 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { resolve } from 'path';
 
 // Why do the alias not work in vite.config.ts?
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [svelte({ hot: !process.env.VITEST })],
   resolve: {
+    conditions: mode === 'test' ? ['browser'] : [],
     alias: {
       $lib: resolve(__dirname, 'src/lib'),
       $components: resolve(__dirname, 'src/components'),
@@ -23,4 +24,4 @@ export default defineConfig({
       include: ['src/**'],
     },
   },
-});
+}));