replace all react-style ${} classes

packages/svelte/src/lib/components/Footer.svelte

@@ -31,7 +31,7 @@
           </a>
         {/if}
       </div>
-      <SwitchTheme class={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
+      <SwitchTheme class="pointer-events-auto {isLocalNetwork && 'self-end md:self-auto'}" />
     </div>
   </div>
   <div class="w-full">

packages/svelte/src/lib/components/Header.svelte

@@ -71,7 +71,7 @@
     <div class="dropdown lg:hidden" bind:this={burgerMenu}>
       <button
         tabIndex={0}
-        class={`btn btn-ghost ml-1 ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
+        class="btn btn-ghost ml-1 {isDrawerOpen ? 'hover:bg-secondary' : 'hover:bg-transparent'}"
         onclick={() => {
           isDrawerOpen = !isDrawerOpen;
         }}

packages/svelte/src/lib/components/SwitchTheme.svelte

@@ -2,7 +2,7 @@
   import { createDarkMode } from "$lib/runes/darkMode.svelte";
   import { Icon, Moon, Sun } from "svelte-hero-icons";
 
-  const { class: className } = $props();
+  const { class: className }: { class?: string | undefined } = $props();
 
   const { isDarkMode, toggle } = $derived.by(createDarkMode());
 
@@ -11,7 +11,7 @@
   });
 </script>
 
-<div class={`flex space-x-2 text-sm ${className}`}>
+<div class="flex space-x-2 text-sm {className}">
   <input
     id="theme-toggle"
     type="checkbox"

packages/svelte/src/lib/components/scaffold-eth/Address.svelte

@@ -89,14 +89,14 @@
       />
     </div>
     {#if disableAddressLink}
-      <span class={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
+      <span class="ml-1.5 text-{size} font-normal">{displayAddress}</span>
     {:else if targetNetwork.id === hardhat.id}
-      <span class={`ml-1.5 text-${size} font-normal`}>
+      <span class="ml-1.5 text-{size} font-normal">
         <a href={blockExplorerAddressLink}>{displayAddress}</a>
       </span>
     {:else}
       <a
-        class={`ml-1.5 text-${size} font-normal`}
+        class="ml-1.5 text-{size} font-normal"
         target="_blank"
         href={blockExplorerAddressLink}
         rel="noopener noreferrer"

packages/svelte/src/lib/components/scaffold-eth/Balance.svelte

@@ -52,7 +52,7 @@
   </div>
 {:else}
   <button
-    class={`btn btn-ghost btn-sm flex flex-col items-center font-normal hover:bg-transparent ${className}`}
+    class="btn btn-ghost btn-sm flex flex-col items-center font-normal hover:bg-transparent {className}"
     on:click={toggleBalanceMode}
   >
     <div class="flex w-full items-center justify-center">

packages/svelte/src/lib/components/scaffold-eth/inputs/InputBase.svelte

@@ -53,7 +53,7 @@
   });
 </script>
 
-<div class={`flex rounded-full border-2 border-base-300 bg-base-200 text-accent ${modifier}`}>
+<div class="flex rounded-full border-2 border-base-300 bg-base-200 text-accent {modifier}">
   {#if prefix}
     {@render prefix()}
   {/if}

packages/svelte/src/lib/components/scaffold-eth/inputs/IntegerInput.svelte

@@ -46,7 +46,7 @@
         data-tip="Multiply by 10^18 (wei)"
       >
         <button
-          class={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} px-4 font-semibold text-accent`}
+          class="{disabled ? 'cursor-not-allowed' : 'cursor-pointer'} px-4 font-semibold text-accent"
           onclick={multiplyBy1e18}
           {disabled}
         >

packages/svelte/src/lib/runes/TxnNotification.svelte

@@ -2,7 +2,7 @@
   const { message, blockExplorerLink }: { message: string; blockExplorerLink?: string } = $props();
 </script>
 
-<div class={`ml-1 flex cursor-default flex-col`}>
+<div class="ml-1 flex cursor-default flex-col">
   <p class="my-0">{message}</p>
 
   {#if blockExplorerLink && blockExplorerLink.length > 0}

packages/svelte/src/lib/utils/scaffold-eth/BaseNotification.svelte

@@ -23,12 +23,9 @@
 </script>
 
 <div
-  class={`relative flex max-w-sm transform-gpu flex-row items-start justify-between space-x-2 rounded-xl bg-base-200 p-4 shadow-center shadow-accent transition-all duration-500 ease-in-out
-  ${
-		position!.substring(0, 3) == 'top'
+  class="relative flex max-w-sm transform-gpu flex-row items-start justify-between space-x-2 rounded-xl bg-base-200 p-4 shadow-center shadow-accent transition-all duration-500 ease-in-out {position!.substring(0, 3) == 'top'
 			? `hover:translate-y-1 ${visible ? 'top-0' : '-top-96'}`
-			: `hover:-translate-y-1 ${visible ? 'bottom-0' : '-bottom-96'}`
-	}`}
+			: `hover:-translate-y-1 ${visible ? 'bottom-0' : '-bottom-96'}`}"
 >
   <div class="self-center leading-[0]">
     {#if icon}
@@ -45,15 +42,15 @@
       <Icon src={ExclamationTriangle} class="w-7 text-warning" />
     {/if}
   </div>
-  <div class={`overflow-x-hidden whitespace-pre-line break-words ${icon ? "mt-1" : ""}`}>
+  <div class="overflow-x-hidden whitespace-pre-line break-words" class:mt-1={icon}>
     {#if typeof content === "string"}
       {content}
     {:else}
       <svelte:component this={content} {...allProps} />
     {/if}
   </div>
 
-  <button class={`cursor-pointer text-lg ${icon ? "mt-1" : ""}`} onclick={() => toast_.dismiss(id)}>
+  <button class="cursor-pointer text-lg" class:mt-1={icon} onclick={() => toast_.dismiss(id)}>
     <Icon src={XMark} class="w-6 cursor-pointer" onclick={() => toast_.remove(id)} />
   </button>
 </div>

packages/svelte/src/routes/blockexplorer/_components/PaginationButton.svelte

@@ -19,15 +19,15 @@
 {#if !isNextButtonDisabled && !isPrevButtonDisabled}
   <div class="mx-5 mt-5 flex justify-end gap-3">
     <button
-      class={`btn btn-sm ${prevButtonClass}`}
+      class="btn btn-sm {prevButtonClass}"
       disabled={isPrevButtonDisabled}
       onClick={() => setCurrentPage(currentPage - 1)}
     >
       <Icon src={ArrowLeft} class="h-4 w-4" />
     </button>
     <span class="self-center font-medium text-primary-content">Page {currentPage + 1}</span>
     <button
-      class={`btn btn-sm ${nextButtonClass}`}
+      class="btn btn-sm {nextButtonClass}"
       disabled={isNextButtonDisabled}
       onClick={() => setCurrentPage(currentPage + 1)}
     >

packages/svelte/src/routes/debug/_components/DebugContracts.svelte

@@ -29,11 +29,9 @@
       <div class="flex w-full max-w-7xl flex-row flex-wrap gap-2 px-6 pb-1 lg:px-10">
         {#each contractNames as contractName}
           <button
-            class={`btn btn-secondary btn-sm font-light hover:border-transparent ${
-              contractName === selectedContract
-                ? "no-animation bg-base-300 hover:bg-base-300"
-                : "bg-base-100 hover:bg-secondary"
-            }`}
+            class="btn btn-secondary btn-sm font-light hover:border-transparent {contractName === selectedContract
+              ? 'no-animation bg-base-300 hover:bg-base-300'
+              : 'bg-base-100 hover:bg-secondary'}"
             onclick={() => (selectedContract = contractName)}
           >
             {contractName}

packages/svelte/src/routes/debug/_components/DisplayVariable.svelte

@@ -63,9 +63,9 @@
   <div class="flex flex-col items-start font-medium text-gray-500">
     <div>
       <div
-        class={`block break-all bg-transparent transition ${
-          showAnimation ? "animate-pulse-fast rounded-sm bg-warning" : ""
-        }`}
+        class="block break-all bg-transparent transition {showAnimation
+          ? 'animate-pulse-fast rounded-sm bg-warning'
+          : ''}"
       >
         <DisplayTxResult content={contractRead?.data} />
       </div>

packages/svelte/src/routes/debug/_components/WriteOnlyFunctionForm.svelte

@@ -72,7 +72,7 @@
 </script>
 
 <div class="space-y-3 py-5 first:pt-0 last:pb-1">
-  <div class={`flex gap-3 ${zeroInputs ? "flex-row items-center justify-between" : "flex-col"}`}>
+  <div class="flex gap-3 {zeroInputs ? 'flex-row items-center justify-between' : 'flex-col'}">
     <p class="my-0 break-words font-medium">
       {abiFunction.name}
       <InheritanceTooltip {inheritedFrom} />
@@ -113,10 +113,8 @@
         </div>
       {/if}
       <div
-        class={`flex ${
-          writeDisabled &&
-          "tooltip before:left-auto before:right-[-10px] before:transform-none before:content-[attr(data-tip)]"
-        }`}
+        class="flex {writeDisabled &&
+          'tooltip before:left-auto before:right-[-10px] before:transform-none before:content-[attr(data-tip)]'}"
         data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
       >
         <button