upgrade to wagmi-svelte 0.1.0

package.json

@@ -40,6 +40,7 @@
     "lint-staged": "^13.0.3"
   },
   "dependencies": {
+    "@walletconnect/ethereum-provider": "^2.12.2",
     "viem": "^2.9.3"
   }
 }

packages/svelte/package.json

@@ -28,8 +28,8 @@
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "prettier-plugin-tailwindcss": "^0.5.13",
-    "svelte": "^5.0.0-next.1",
-    "svelte-check": "^3.6.0",
+    "svelte": "5.0.0-next.96",
+    "svelte-check": "^3.6.9",
     "svelte-hero-icons": "^5.1.0",
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
@@ -39,7 +39,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@byteatatime/wagmi-svelte": "^0.0.6",
+    "@byteatatime/wagmi-svelte": "^0.1.1",
     "@castlenine/svelte-qrcode": "^1.1.0",
     "@leodog896/svelte-french-toast": "^1.3.1",
     "@tanstack/svelte-query": "^5.28.9",

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

@@ -7,7 +7,7 @@
   import Faucet from "./scaffold-eth/Faucet.svelte";
   import SwitchTheme from "./SwitchTheme.svelte";
 
-  const { targetNetwork } = $derived(createTargetNetwork());
+  const targetNetwork = $derived.by(createTargetNetwork());
   const isLocalNetwork = $derived(targetNetwork.id === hardhat.id);
 </script>
 

packages/svelte/src/lib/components/ScaffoldEthApp.svelte

@@ -21,7 +21,7 @@
     });
   });
 
-  const { isDarkMode } = $derived(createDarkMode());
+  const { isDarkMode } = $derived.by(createDarkMode());
 
   $effect(() => {
     modal.setThemeMode(isDarkMode ? "dark" : "light");

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

@@ -4,7 +4,7 @@
 
   const { class: className } = $props();
 
-  const { isDarkMode, toggle } = $derived(createDarkMode());
+  const { isDarkMode, toggle } = $derived.by(createDarkMode());
 
   $effect(() => {
     document.body.setAttribute("data-theme", isDarkMode ? "dark" : "light");

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

@@ -6,7 +6,6 @@
   import { getBlockExplorerAddressLink } from "$lib/utils/scaffold-eth/networks";
   import BlockieAvatar from "./BlockieAvatar.svelte";
   import { CheckCircle, DocumentDuplicate, Icon } from "svelte-hero-icons";
-  import { untrack } from "svelte";
 
   const {
     address,
@@ -20,6 +19,8 @@
     size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
   } = $props();
 
+  const checkSumAddress = $derived(address ? getAddress(address) : undefined);
+
   const blockieSizeMap = {
     xs: 6,
     sm: 7,
@@ -30,32 +31,25 @@
     "3xl": 15,
   };
 
-  let ens: string | null = $state(null);
-  let ensAvatar: string | null = $state(null);
-  let addressCopied = $state(false);
-  const checkSumAddress = $derived(address ? getAddress(address) : undefined);
-
-  $effect(() => {
-    const fetchedEnsName = createEnsName({
+  let { data: ens } = $derived.by(
+    createEnsName(() => ({
       address: checkSumAddress,
       query: {
         enabled: isAddress(checkSumAddress ?? ""),
       },
       chainId: 1,
-    });
-    const fetchedEnsAvatar = createEnsAvatar({
-      name: untrack(() => fetchedEnsName.result.data ?? undefined),
+    })),
+  );
+  let { data: ensAvatar } = $derived.by(
+    createEnsAvatar(() => ({
+      name: ens ?? undefined,
       query: {
-        enabled: untrack(() => Boolean(fetchedEnsName.result.data ?? false)),
+        enabled: Boolean(ens),
       },
       chainId: 1,
-    });
-
-    untrack(() => {
-      ens = fetchedEnsName.result.data ?? null;
-      ensAvatar = fetchedEnsAvatar.result.data ?? null;
-    });
-  });
+    })),
+  );
+  let addressCopied = $state(false);
 
   let displayAddress = $derived.by(() => {
     if (ens) {
@@ -66,7 +60,7 @@
     return checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
   });
 
-  const { targetNetwork } = $derived(createTargetNetwork());
+  const targetNetwork = $derived.by(createTargetNetwork());
 
   let blockExplorerAddressLink = $state<string>();
   $effect(() => {

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

@@ -1,43 +1,34 @@
 <script lang="ts">
   import { createTargetNetwork } from "$lib/runes/targetNetwork.svelte";
-  // @ts-expect-error - No idea why it doesn't find createBalance in the package
-  import { createBlockNumber, createBalance } from "@byteatatime/wagmi-svelte";
+  import { createBlockNumber } from "@byteatatime/wagmi-svelte";
   import { useQueryClient } from "@tanstack/svelte-query";
   import { formatEther, type Address } from "viem";
   import { nativeCurrencyPrice } from "$lib/runes/global.svelte";
   import { untrack } from "svelte";
+  import { createBalance } from "@byteatatime/wagmi-svelte";
 
   const {
     address,
     class: className = "",
     usdMode = false,
   }: { address?: Address; class?: string; usdMode?: boolean } = $props();
 
-  const { targetNetwork } = $derived(createTargetNetwork());
-
+  const targetNetwork = $derived.by(createTargetNetwork());
   const queryClient = useQueryClient();
-  const blockNumber = $derived.by(() => {
-    targetNetwork;
-
-    return untrack(() => createBlockNumber({ watch: true, chainId: targetNetwork.id }));
-  });
+  const blockNumber = $derived.by(createBlockNumber(() => ({ watch: true, chainId: targetNetwork.id })));
 
-  const balance = $derived.by(() => {
-    targetNetwork;
-
-    return untrack(() => createBalance({ address, chainId: targetNetwork.id }));
-  });
+  const balance = $derived.by(createBalance(() => ({ address })));
 
   $effect(() => {
-    blockNumber.result.data;
+    blockNumber.data;
     queryClient;
 
     untrack(() => {
-      queryClient.invalidateQueries({ queryKey: balance.result.queryKey });
+      balance.refetch();
     });
   });
 
-  const formattedBalance = $derived(balance.result.data ? Number(formatEther(balance.result.data.value)) : 0);
+  const formattedBalance = $derived(balance.data ? Number(formatEther(balance.data.value)) : 0);
 
   let displayUsdMode = $state(nativeCurrencyPrice.price > 0 ? Boolean(usdMode) : false);
 
@@ -48,14 +39,14 @@
   };
 </script>
 
-{#if balance.result.isLoading}
+{#if balance.isLoading}
   <div class="flex animate-pulse space-x-4">
     <div class="h-6 w-6 rounded-md bg-slate-300"></div>
     <div class="flex items-center space-y-6">
       <div class="h-2 w-28 rounded bg-slate-300"></div>
     </div>
   </div>
-{:else if balance.result.isError}
+{:else if balance.isError}
   <div class="flex max-w-fit cursor-pointer flex-col items-center rounded-md border-2 border-gray-400 px-2">
     <div class="text-warning">Error</div>
   </div>

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

@@ -20,14 +20,13 @@
   });
 
   let loading = $state(false);
-  let inputAddress = $state<AddressType>();
+  let inputAddress = $state<AddressType>("" as AddressType);
   let faucetAddress = $state<AddressType>();
   let sendValue = $state("");
 
-  const account = createAccount();
-  const connectedChain = $derived(account.result.chain);
+  const { chain } = $derived.by(createAccount());
 
-  const faucetTxn = createTransactor(localWalletClient);
+  const faucetTxn = $derived.by(createTransactor(() => localWalletClient));
 
   $effect(() => {
     untrack(() => {
@@ -57,7 +56,7 @@
         chain: hardhat,
       });
       loading = false;
-      inputAddress = undefined;
+      inputAddress = "" as AddressType;
       sendValue = "";
     } catch (error) {
       console.error("⚡️ ~ file: Faucet.tsx:sendETH ~ error", error);
@@ -66,7 +65,7 @@
   };
 </script>
 
-{#if connectedChain?.id === hardhat.id}
+{#if chain?.id === hardhat.id}
   <div>
     <label for="faucet-modal" class="btn btn-primary btn-sm gap-1 font-normal">
       <Icon src={Banknotes} class="h-4 w-4" />
@@ -90,11 +89,7 @@
             </div>
           </div>
           <div class="flex flex-col space-y-3">
-            <AddressInput
-              placeholder="Destination Address"
-              value={inputAddress ?? ""}
-              onchange={(value) => (inputAddress = value as AddressType)}
-            />
+            <AddressInput placeholder="Destination Address" bind:value={inputAddress} />
             <EtherInput placeholder="Amount to send" value={sendValue} onchange={value => (sendValue = value)} />
             <button class="btn btn-primary btn-sm h-10 rounded-full px-2" onclick={sendETH} disabled={loading}>
               {#if loading}

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

@@ -1,30 +1,24 @@
 <script lang="ts">
   import { createTransactor } from "$lib/runes/transactor.svelte";
-  // @ts-expect-error - No idea why it doesn't find createBalance or CreateBalanceReturnType in the package
-  import { createAccount, createBalance, type CreateBalanceReturnType } from "@byteatatime/wagmi-svelte";
+  import { createAccount, createBalance } from "@byteatatime/wagmi-svelte";
   import { Banknotes, Icon } from "svelte-hero-icons";
   import { createWalletClient, http, parseEther } from "viem";
   import { hardhat } from "viem/chains";
 
   const AMOUNT_TO_SEND = "1";
   const FAUCET_ADDRESS = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
 
-  const account = createAccount();
-  const address = $derived(account.result.address);
+  const { address, chain } = $derived.by(createAccount());
   const localWalletClient = createWalletClient({
     chain: hardhat,
     transport: http(),
   });
 
-  const faucetTxn = createTransactor(localWalletClient);
+  const faucetTxn = $derived.by(createTransactor(() => localWalletClient));
 
-  let balance = $state<CreateBalanceReturnType | undefined>();
+  let balance = $derived.by(createBalance(() => ({ address: FAUCET_ADDRESS })));
 
-  $effect(() => {
-    balance = createBalance({ address });
-  });
-
-  const isBalanceZero = $derived(balance?.result.data?.value === 0n);
+  const isBalanceZero = $derived(balance.data?.value === 0n);
 
   let loading = $state(false);
 
@@ -45,7 +39,7 @@
   };
 </script>
 
-{#if account.result.chain?.id === hardhat.id}
+{#if chain?.id === hardhat.id}
   <div
     class={!isBalanceZero
       ? "ml-1"

packages/svelte/src/lib/components/scaffold-eth/connect-button/AddressInfoDropdown.svelte

@@ -39,7 +39,7 @@
   );
 
   const allowedNetworks = getTargetNetworks();
-  const disconnect = createDisconnect();
+  const disconnect = $derived.by(createDisconnect());
 
   const checkSumAddress = getAddress(address);
 
@@ -121,7 +121,7 @@
       <button
         class="menu-item btn-sm flex gap-3 !rounded-xl py-3 text-error"
         type="button"
-        onclick={() => disconnect.result.disconnect()}
+        onclick={() => disconnect.disconnect()}
       >
         <Icon src={ArrowLeftOnRectangle} class="ml-2 h-6 w-4 sm:ml-0" /> <span>Disconnect</span>
       </button>

packages/svelte/src/lib/components/scaffold-eth/connect-button/ConnectButton.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
   import { modal } from "$lib/modal";
   import scaffoldConfig from "$lib/scaffold.config";
-  import {
-    type CreateEnsNameReturnType,
-    createAccount,
-    createEnsName,
-    type CreateEnsAvatarReturnType,
-    createEnsAvatar,
-  } from "@byteatatime/wagmi-svelte";
+  import { createAccount, createEnsName, createEnsAvatar } from "@byteatatime/wagmi-svelte";
   import WrongNetworkDropdown from "./WrongNetworkDropdown.svelte";
   import Balance from "$lib/components/scaffold-eth/Balance.svelte";
   import type { Address } from "viem/accounts";
@@ -18,32 +12,18 @@
   import { createTargetNetwork } from "$lib/runes/targetNetwork.svelte";
   import AddressQRCodeModal from "./AddressQRCodeModal.svelte";
 
-  const { targetNetwork } = $derived(createTargetNetwork());
-  const account = createAccount();
-  const address = $derived(account.result.address as Address);
-  const chain = $derived(account.result.chain);
-  const connected = $derived(account.result.isConnected);
+  const targetNetwork = $derived.by(createTargetNetwork());
+  const { address, chain, isConnected } = $derived.by(createAccount());
+  const connected = $derived(isConnected);
   const isChainUnsupported = $derived(
     chain?.id && !scaffoldConfig.targetNetworks.map(it => it.id as number).includes(chain.id),
   );
-  const { networkColor } = $derived(createNetworkColor());
+  const networkColor = $derived.by(createNetworkColor());
 
-  let ensName = $state<CreateEnsNameReturnType | undefined>(undefined);
-  let ensAvatar = $state<CreateEnsAvatarReturnType | undefined>(undefined);
+  const ensName = $derived.by(createEnsName(() => ({ address })));
+  const ensAvatar = $derived.by(createEnsAvatar(() => ({ name: ensName.data ?? undefined })));
 
-  $effect(() => {
-    ensName = createEnsName({ address });
-  });
-
-  $effect(() => {
-    if (!ensName?.result.data) return;
-
-    ensAvatar = createEnsAvatar({ name: ensName.result.data });
-  });
-
-  const blockExplorerAddressLink = $derived(
-    account.result.address ? getBlockExplorerAddressLink(targetNetwork, account.result.address) : undefined,
-  );
+  const blockExplorerAddressLink = $derived(address ? getBlockExplorerAddressLink(targetNetwork, address) : undefined);
 </script>
 
 {#if !connected}
@@ -52,16 +32,18 @@
   <WrongNetworkDropdown />
 {:else}
   <div class="mr-1 flex flex-col items-center">
-    <Balance address={account.result.address as Address} class="h-auto min-h-0" />
+    <Balance address={address as Address} class="h-auto min-h-0" />
     <span class="text-xs" style:color={networkColor}>
       {chain?.name}
     </span>
   </div>
-  <AddressInfoDropdown
-    {address}
-    displayName={ensName?.result.data ? formatENS(ensName.result.data) : formatAddress(address)}
-    ensAvatar={ensAvatar?.result.data ?? undefined}
-    {blockExplorerAddressLink}
-  />
-  <AddressQRCodeModal {address} modalId="qrcode-modal" />
+  {#if address}
+    <AddressInfoDropdown
+      {address}
+      displayName={ensName.data ? formatENS(ensName.data) : formatAddress(address)}
+      ensAvatar={ensAvatar.data ?? undefined}
+      {blockExplorerAddressLink}
+    />
+    <AddressQRCodeModal {address} modalId="qrcode-modal" />
+  {/if}
 {/if}