From c4a84c9f0f3f2c5db3bb1a54e08bb3d33249435b Mon Sep 17 00:00:00 2001
From: Jen <60794961+jennyg0@users.noreply.github.com>
Date: Wed, 21 Aug 2024 18:54:32 -0400
Subject: [PATCH] updates

---
 .../src/components/SendTransaction.svelte     |  56 ++++---
 .../src/components/WriteContract.svelte       |  33 ++--
 .../src/components/BlockNumber.svelte         |  24 ++-
 .../src/components/EstimateGas.svelte         |   4 +-
 .../src/components/FindBalance.svelte         |  45 ++++--
 .../src/components/NetworkSwitcher.svelte     |  39 +++--
 .../src/components/ReadContracts.svelte       |   2 +-
 .../src/components/ReadTokenBalance.svelte    |   4 +-
 .../src/components/ReadTokenSupply.svelte     |   3 +-
 .../src/components/SendTransaction.svelte     |  44 +++---
 .../src/components/SignMessage.svelte         |   3 +-
 .../src/components/SignTypedData.svelte       |   4 +-
 .../src/components/Token.svelte               |  83 +++++++---
 .../src/components/WatchContractEvents.svelte |  42 ++---
 .../WatchPendingTransactions.svelte           |  29 +++-
 .../src/components/WriteContract.svelte       |  12 +-
 .../components/WriteContractPrepared.svelte   | 146 +++++++++---------
 .../src/utils/contracts.ts                    |   4 +-
 .../svelte/vite-wagmi-web3modal/src/wagmi.ts  |   5 +-
 .../vite-wagmi/src/components/Connect.svelte  |  16 +-
 .../src/components/EstimateGas.svelte         |   4 +-
 .../src/components/NetworkSwitcher.svelte     |   1 -
 .../vite-wagmi/src/components/Token.svelte    |   2 +-
 .../components/WriteContractPrepared.svelte   |   3 +-
 templates/svelte/vite-wagmi/src/wagmi.ts      |   5 +-
 25 files changed, 378 insertions(+), 235 deletions(-)

diff --git a/templates/svelte/vite-ethers/src/components/SendTransaction.svelte b/templates/svelte/vite-ethers/src/components/SendTransaction.svelte
index eb4db20..d57f540 100644
--- a/templates/svelte/vite-ethers/src/components/SendTransaction.svelte
+++ b/templates/svelte/vite-ethers/src/components/SendTransaction.svelte
@@ -1,33 +1,45 @@
 <script lang="ts">
   import { ethers } from "ethers";
+  import { stringify } from "../utils/formatters";
   import { etherStore } from "../ethers";
   import { useAsync } from "../composables/useAsync";
-  import { stringify } from "../utils/formatters";
 
   const { getSigner, getProvider } = etherStore;
 
   let address: string | null = "";
   let value: string | null = "";
 
- const { state: transactionState, execute: sendTransaction } = useAsync(
-  async () => {
-    try {
-      const signer = await getSigner();
-      if (!signer) {
-        throw new Error("Failed to get signer");
+  const { state: transactionState, execute: sendTransaction } = useAsync(
+    async () => {
+      try {
+        const signer = await getSigner();
+        if (!signer) {
+          throw new Error("Failed to get signer");
+        }
+
+        const gasPrice = await getProvider()!.getGasPrice();
+        const gasLimit = await signer.estimateGas({
+          to: address!,
+          value: ethers.parseEther(value!),
+          gasPrice,
+        });
+
+        const result = await signer.sendTransaction({
+          to: address!,
+          value: ethers.parseEther(value!),
+          gasPrice,
+          gasLimit,
+        });
+
+        waitForReceipt(result.hash);
+        return result;
+      } catch (error) {
+        console.error("Error sending transaction:", error);
+        throw error;
       }
-      const result = await signer.sendTransaction({
-        to: address!,
-        value: ethers.parseEther(value!),
-      });
-      waitForReceipt(result.hash);
-      return result;
-    } catch (error) {
-      console.error("Error sending transaction:", error);
-      throw error;
     }
-  }
-);
+  );
+  
   $: ({ result: transaction, inProgress, error } = $transactionState);
 
   const { state: receiptState, execute: waitForReceipt } = useAsync(
@@ -35,6 +47,7 @@
       return await getProvider()!.waitForTransaction(transactionHash);
     },
   );
+  
   $: ({
     result: receipt,
     inProgress: receiptInProgress,
@@ -49,7 +62,6 @@
     <button type="submit">Send</button>
   </form>
 
-  <div>
   {#if inProgress}
     <div>Transaction pending...</div>
   {:else if transaction}
@@ -59,11 +71,8 @@
         Transaction Receipt:
         {#if receiptInProgress}
           <span>pending...</span>
-        {:else if receipt}
-          <pre>{stringify(receipt, null, 2)}</pre>
-        {:else}
-          <div>No transaction receipt available</div>
         {/if}
+        <pre>{stringify(receipt, null, 2)}</pre>
       </div>
     </div>
   {/if}
@@ -75,4 +84,3 @@
     <div>Receipt Error: {receiptError?.message}</div>
   {/if}
 </div>
-</div>
diff --git a/templates/svelte/vite-ethers/src/components/WriteContract.svelte b/templates/svelte/vite-ethers/src/components/WriteContract.svelte
index a8ac71c..cceab9a 100644
--- a/templates/svelte/vite-ethers/src/components/WriteContract.svelte
+++ b/templates/svelte/vite-ethers/src/components/WriteContract.svelte
@@ -10,19 +10,32 @@
 
   const { state: transactionState, execute: writeContract } = useAsync(
     async () => {
-      const contract = new Contract(
-        daiContractConfig.address,
-        daiContractConfig.abi,
-        await getSigner()!,
-      );
+      try {
+        const contract = new Contract(
+          daiContractConfig.address,
+          daiContractConfig.abi,
+          await getSigner()!,
+        );
 
-      // random address for testing, replace with contract address that you want to allow to spend your tokens
-      const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044";
+        // random address for testing, replace with contract address that you want to allow to spend your tokens
+        const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044";
 
-      const transaction = await contract.approve(spender, amount);
+        const gasPrice = await getProvider()!.getGasPrice();
+        const gasLimit = await contract
+        .getFunction("approve")
+        .estimateGas(spender, amount);
 
-      waitForReceipt(transaction.hash);
-      return transaction;
+        const transaction = await contract.approve(spender, amount, {
+          gasPrice,
+          gasLimit,
+        });
+
+        waitForReceipt(transaction.hash);
+        return transaction;
+      } catch (error) {
+        console.error("Error sending transaction:", error);
+        throw error;
+      }
     },
   );
   $: ({ result: transaction, inProgress, error } = $transactionState);
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/BlockNumber.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/BlockNumber.svelte
index 0fd8753..13b6d0a 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/BlockNumber.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/BlockNumber.svelte
@@ -1,13 +1,31 @@
 <script lang="ts">
   import { watchBlockNumber } from "@wagmi/core";
+  import { wagmiConfig } from "../wagmi";
+  import { onDestroy } from "svelte";
 
   let blockNumber: bigint | null = null;
 
-  watchBlockNumber({ listen: true }, (block) => {
-    blockNumber = block;
+  const unsubscribe = watchBlockNumber(
+    {
+      ...wagmiConfig,
+      listen: true,
+    },
+    {
+      onBlockNumber(block) {
+        blockNumber = block;
+      },
+    }
+  );
+
+  onDestroy(() => {
+    unsubscribe();
   });
 </script>
 
 <div>
-  {blockNumber?.toString()}
+  {#if blockNumber !== null}
+    {blockNumber.toString()}
+  {:else}
+    Loading...
+  {/if}
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/EstimateGas.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/EstimateGas.svelte
index b6fbb59..263c2c4 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/EstimateGas.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/EstimateGas.svelte
@@ -55,12 +55,12 @@
 <form on:submit|preventDefault={handleSubmit}>
   <input
     bind:value={$to}
-    placeholder="Address"
+    placeholder="address"
     type="text"
   />
   <input
     bind:value={$value}
-    placeholder="Value (ether)"
+    placeholder="value (ether)"
     type="text"
   />
   <button disabled={$isSending || !$to || !$value} type="submit">
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/FindBalance.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/FindBalance.svelte
index 8e73e88..b9ecc10 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/FindBalance.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/FindBalance.svelte
@@ -1,24 +1,41 @@
-<script lang="ts" setup>
-  import { useAsync } from "../composables/useAsync";
-  import { fetchBalance as wagmiFetchBalance, type Address } from "@wagmi/core";
+<script lang="ts">
+  import { writable, derived } from 'svelte/store';
+  import { getBalance } from '@wagmi/core';
+  import type { Address } from 'viem';
+  import { formatEther } from 'viem';
+  import { get } from 'svelte/store';
+  import { useAsync } from '../composables/useAsync';
+  import { wagmiConfig } from '../wagmi';
 
-  const { state: asyncState, execute: fetchBalance } =
-    useAsync(wagmiFetchBalance);
-  $: ({ result: balance, error, inProgress } = $asyncState);
+  let address = writable("");
 
-  let address: Address = "0x";
+  const { state, execute: fetchBalance } = useAsync(async () => {
+    const addr = get(address);
+    if (addr) {
+      return getBalance(wagmiConfig, { address: addr as Address });
+    }
+    return null;
+  });
+
+  const balance = derived(state, ($state) => $state?.result || null);
+  const error = derived(state, ($state) => $state?.error || null);
+  const inProgress = derived(state, ($state) => $state?.inProgress || false);
+
+  const formattedBalance = derived(balance, ($balance) => {
+    return $balance ? formatEther($balance.value) : '0.0';
+  });
 </script>
 
 <div>
   <div>
     Find balance:
-    <input bind:value={address} type="text" placeholder="wallet address" />
-    <button on:click={() => fetchBalance({ address })}
-      >{inProgress ? "fetching..." : "fetch"}</button
-    >
+    <input bind:value={$address} type="text" placeholder="wallet address" />
+    <button on:click={() => fetchBalance()} disabled={$inProgress}>
+      {$inProgress ? 'fetching...' : 'fetch'}
+    </button>
   </div>
-  <div>{balance?.formatted || ""}</div>
-  {#if error}
-    <div>Error: {error?.message}</div>
+  <div>{$formattedBalance}</div>
+  {#if $error}
+    <div>Error: {$error?.message}</div>
   {/if}
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/NetworkSwitcher.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/NetworkSwitcher.svelte
index 2569e84..67613ae 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/NetworkSwitcher.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/NetworkSwitcher.svelte
@@ -1,27 +1,42 @@
-<script lang="ts" setup>
-  import { switchNetwork as wagmiSwitchNetwork } from "@wagmi/core";
+<script lang="ts">
+  import { switchChain } from "@wagmi/core";
+  import { wagmiConfig, wagmiStore } from "../wagmi";
+  import { get } from "svelte/store";
   import { useAsync } from "../composables/useAsync";
-  import { wagmiStore } from "../wagmi";
+  import type { Chain } from "viem";
 
-  $: ({ network } = $wagmiStore);
+  $: ({ account } = get(wagmiStore));
 
-  const { execute: switchNetwork, state: asyncState } =
-    useAsync(wagmiSwitchNetwork);
+  const chains: readonly Chain[] = wagmiConfig.chains;
+
+  const { execute: switchNetwork, state: asyncState } = useAsync(switchChain);
   $: ({ inProgress, error } = $asyncState);
+
+  const handleSwitchNetwork = async (chainId: number) => {
+    if (account.isConnected) {
+      try {
+        await switchNetwork(wagmiConfig, { chainId });
+      } catch (err) {
+        console.error("Error switching network:", err);
+      }
+    }
+  };
+
+  $: currentChain = chains.find((chain) => chain.id === account.chainId) || null;
 </script>
 
 <div>
   <div>
-    Connected to {network.chain?.name ?? network.chain?.id}
-    {#if network.chain?.unsupported}
-      <span>(unsupported)</span>
-    {/if}
+    Connected to {currentChain?.name ?? currentChain?.id}
   </div>
   <br />
   <div>
     Switch to:
-    {#each network.chains as item (item.id)}
-      <button on:click={() => switchNetwork({ chainId: item.id })}>
+    {#each chains as item (item.id)}
+      <button
+        on:click={() => handleSwitchNetwork(item.id)}
+        disabled={!account.isConnected || currentChain?.id === item.id}
+      >
         {item.name}
       </button>
     {/each}
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/ReadContracts.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/ReadContracts.svelte
index 208d1e3..5bf3add 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/ReadContracts.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/ReadContracts.svelte
@@ -9,7 +9,7 @@
   $: ({ account } = $wagmiStore);
 
   const { state: asyncState, execute: fetchContracts } = useAsync(async () => {
-    return await readContracts({
+    return await readContracts(wagmiConfig, {
       contracts: [
         {
           ...daiContractConfig,
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenBalance.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenBalance.svelte
index 4b31bc7..314511e 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenBalance.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenBalance.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { readContract } from "@wagmi/core";
   import { useAsync } from "../composables/useAsync";
-  import { wagmiStore } from "../wagmi";
+  import { wagmiConfig, wagmiStore } from "../wagmi";
   import { daiContractConfig } from "../utils/contracts";
   import { onMount } from "svelte";
 
@@ -11,7 +11,7 @@
     state: asyncState,
     execute: fetchBalance,
   } = useAsync(async () => {
-    return await readContract({
+    return await readContract(wagmiConfig, {
       ...daiContractConfig,
       functionName: "balanceOf",
       args: [account.address!],
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenSupply.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenSupply.svelte
index a17e34a..2e6b1e4 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenSupply.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/ReadTokenSupply.svelte
@@ -3,9 +3,10 @@
   import { useAsync } from "../composables/useAsync";
   import { daiContractConfig } from "../utils/contracts";
   import { onMount } from "svelte";
+  import { wagmiConfig } from "../wagmi";
 
   const { state, execute: fetchTotalSupply } = useAsync(async () => {
-    return await readContract({
+    return await readContract(wagmiConfig, {
       ...daiContractConfig,
       functionName: "totalSupply",
     });
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/SendTransaction.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/SendTransaction.svelte
index 461fead..288b1b1 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/SendTransaction.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/SendTransaction.svelte
@@ -1,33 +1,37 @@
 <script lang="ts">
-  import { parseEther } from "viem";
+  import { parseEther, type Address } from "viem";
   import { useAsync } from "../composables/useAsync";
   import { stringify } from "../utils/formatters";
   import {
-    type Address,
     sendTransaction as wagmiSendTransaction,
-    waitForTransaction,
+    waitForTransactionReceipt,
   } from "@wagmi/core";
+  import { wagmiConfig } from "../wagmi";
+  import { get, writable } from 'svelte/store';
 
-  let address: Address | null = "0x";
-  let value: string | null = "";
+  let address = writable<string>("");
+  let value = writable<string>("");
 
-  const { state: transactionState, execute: sendTransaction } = useAsync(
-    async () => {
-      const result = await wagmiSendTransaction({
-        to: address!,
-        value: parseEther(value!),
+  const { state: transactionState, execute: sendTransaction } = useAsync(async () => {
+    const addressValue = get(address);
+    if (addressValue.startsWith("0x")) {
+      const result = await wagmiSendTransaction(wagmiConfig, {
+        to: addressValue as Address,
+        value: parseEther(get(value)),
       });
-      waitForReceipt(result.hash);
+      waitForReceipt(result);
       return result;
+    } else {
+      throw new Error("Invalid address format");
     }
-  );
+  });
+
   $: ({ result: transaction, inProgress, error } = $transactionState);
 
-  const { state: receiptState, execute: waitForReceipt } = useAsync(
-    async (transactionHash) => {
-      return await waitForTransaction({ hash: transactionHash });
-    }
-  );
+  const { state: receiptState, execute: waitForReceipt } = useAsync(async (transactionHash) => {
+    return await waitForTransactionReceipt(wagmiConfig, { hash: transactionHash });
+  });
+
   $: ({
     result: receipt,
     inProgress: receiptInProgress,
@@ -37,8 +41,8 @@
 
 <div>
   <form on:submit|preventDefault={sendTransaction}>
-    <input bind:value={address} placeholder="address" />
-    <input bind:value placeholder="value (ether)" />
+    <input bind:value={$address} placeholder="address" />
+    <input bind:value={$value} placeholder="value (ether)" />
     <button type="submit">Send</button>
   </form>
 
@@ -46,7 +50,7 @@
     <div>Transaction pending...</div>
   {:else if transaction}
     <div>
-      <div>Transaction Hash: {transaction?.hash}</div>
+      <div>Transaction Hash: {transaction}</div>
       <div>
         Transaction Receipt:
         {#if receiptInProgress}
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/SignMessage.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/SignMessage.svelte
index 5c6cfbc..57fc827 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/SignMessage.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/SignMessage.svelte
@@ -2,11 +2,12 @@
   import { recoverMessageAddress } from "viem";
   import { signMessage as wagmiSignMessage } from "@wagmi/core";
   import { useAsync } from "../composables/useAsync";
+  import { wagmiConfig } from "../wagmi";
 
   let message: string | null = null;
 
   const { state, execute: signMessage } = useAsync(async () => {
-    const signature = await wagmiSignMessage({ message: message! });
+    const signature = await wagmiSignMessage(wagmiConfig, { message: message! });
     const recoveredAddress = await recoverMessageAddress({
       message: message!,
       signature,
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/SignTypedData.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/SignTypedData.svelte
index 825ec4c..41baf92 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/SignTypedData.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/SignTypedData.svelte
@@ -2,7 +2,7 @@
   import { recoverTypedDataAddress } from "viem";
   import { signTypedData as wagmiSignTypedData } from "@wagmi/core";
   import { useAsync } from "../composables/useAsync";
-  import { defaultChain } from "../wagmi";
+  import { defaultChain, wagmiConfig } from "../wagmi";
 
   const domain = {
     name: "Ether Mail",
@@ -36,7 +36,7 @@
   } as const;
 
   const { state, execute: signTypedData } = useAsync(async () => {
-    const signature = await wagmiSignTypedData({
+    const signature = await wagmiSignTypedData(wagmiConfig, {
       domain,
       types,
       message,
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/Token.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/Token.svelte
index d8445b7..08f7358 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/Token.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/Token.svelte
@@ -1,26 +1,73 @@
 <script lang="ts">
-  import { fetchToken as wagmiFetchToken } from "@wagmi/core";
-  import { daiContractConfig } from "../utils/contracts";
-  import { useAsync } from "../composables/useAsync";
-  import { stringify } from "../utils/formatters";
+  import { writable } from 'svelte/store';
+  import { readContracts } from '@wagmi/core';
+  import { erc20Abi } from "viem";
+  import { get } from 'svelte/store';
+  import { wagmiConfig } from '../wagmi';
+  import { daiContractConfig } from '../utils/contracts';
 
-  let tokenAddress = daiContractConfig.address;
+  type TokenResult = [number, string, string, bigint];
 
-  const { state, execute: fetchToken } = useAsync(wagmiFetchToken);
-  $: ({ result: token, inProgress, error } = $state);
-  const fetchCurrentToken = () => fetchToken({ address: tokenAddress });
+  let tokenAddress = writable(daiContractConfig.address);
+  let token = writable<TokenResult | null>(null); 
+  let inProgress = writable(false);
+  let error = writable<Error | null>(null);
+
+  const fetchToken = async () => {
+    inProgress.set(true);
+    error.set(null);
+
+    try {
+      const result = await readContracts(wagmiConfig, {
+        allowFailure: false, 
+        contracts: [
+          {
+            address: get(tokenAddress), 
+            abi: erc20Abi,
+            functionName: 'decimals',
+          },
+          {
+            address: get(tokenAddress), 
+            abi: erc20Abi,
+            functionName: 'name',
+          },
+          {
+            address: get(tokenAddress), 
+            abi: erc20Abi,
+            functionName: 'symbol',
+          },
+          {
+            address: get(tokenAddress), 
+            abi: erc20Abi,
+            functionName: 'totalSupply',
+          },
+        ],
+      });
+
+      token.set(result);
+    } catch (err) {
+      error.set(err as Error);
+    } finally {
+      inProgress.set(false);
+    }
+  };
+
+  const fetchCurrentToken = () => {
+    fetchToken();
+  };
 </script>
 
+<form on:submit|preventDefault={fetchCurrentToken}>
+  <input bind:value={$tokenAddress} placeholder="token address" />
+  <button type="submit">fetch</button>
+</form>
+
 <div>
-  <form on:submit|preventDefault={fetchCurrentToken}>
-    <input bind:value={tokenAddress} placeholder="token address" />
-    <button type="submit">fetch</button>
-  </form>
-  {#if inProgress}
-    <div>Fetching token...</div>
-  {:else if token}
-    <pre>{stringify(token, null, 4)}</pre>
-  {:else if error}
-    <div>Error: {error?.message}</div>
+  {#if $inProgress}
+    Fetching token...
+  {:else if $token}
+    <pre>{JSON.stringify($token, (key, value) => typeof value === 'bigint' ? value.toString() : value, 4)}</pre>
+  {:else if $error}
+    Error: {$error.message}
   {/if}
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/WatchContractEvents.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/WatchContractEvents.svelte
index eb03cb1..35acc66 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/WatchContractEvents.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/WatchContractEvents.svelte
@@ -1,29 +1,35 @@
 <script lang="ts">
-  import type { Log } from "viem";
-  import { watchContractEvent } from "@wagmi/core";
-  import { daiContractConfig } from "../utils/contracts";
-  import { stringify } from "../utils/formatters";
+  import { onDestroy } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { watchContractEvent } from '@wagmi/core';
+  import type { Log } from 'viem';
+  import { daiContractConfig } from '../utils/contracts';
+  import { wagmiConfig } from '../wagmi';
 
-  let events: Log[] = [];
+  let events = writable<Log[]>([]);
 
-  watchContractEvent(
-    {
-      ...daiContractConfig,
-      eventName: "Transfer",
+  const unsubscribe = watchContractEvent(wagmiConfig, {
+    ...daiContractConfig,
+    eventName: 'Transfer',
+    onLogs(logs) {
+      events.update(existingLogs => [...existingLogs, ...logs]);
     },
-    (logs) => {
-      events = [...events, ...logs];
-    }
-  );
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
 </script>
 
 <div>
   <details>
-    <summary>{events.length} DAI `Transfer`s logged</summary>
-
-    {events
+    <summary>{$events.length} DAI `Transfer`s logged</summary>
+    <pre>
+    {$events
+      .slice() 
       .reverse()
-      .map((log) => stringify(log))
-      .join("\n\n\n\n")}
+      .map((log) => JSON.stringify(log, null, 2)) 
+      .join('\n\n\n\n')}
+    </pre>
   </details>
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/WatchPendingTransactions.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/WatchPendingTransactions.svelte
index d2e10fe..badb3d4 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/WatchPendingTransactions.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/WatchPendingTransactions.svelte
@@ -1,17 +1,32 @@
 <script lang="ts">
-  import { watchPendingTransactions, type Hash } from "@wagmi/core";
+  import { onDestroy } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+  import { watchPendingTransactions } from '@wagmi/core';
+  import type { Hash } from 'viem';
+  import { wagmiConfig } from '../wagmi';
 
-  let transactionHashes: Hash[] = [];
+  let transactionHashes = writable<Hash[]>([]);
 
-  watchPendingTransactions({}, (hashes) => {
-    transactionHashes = [...transactionHashes, ...hashes];
+  let reversedTransactionHashes = derived(transactionHashes, $transactionHashes =>
+    [...$transactionHashes].reverse()
+  );
+
+  const unwatch = watchPendingTransactions(wagmiConfig, {
+    onTransactions(newHashes) {
+      transactionHashes.update(existingHashes => 
+        Array.from(new Set([...existingHashes, ...newHashes]))
+      );
+    },
+  });
+
+  onDestroy(() => {
+    unwatch();
   });
 </script>
 
 <div>
   <details>
-    <summary>{transactionHashes.length} transaction hashes</summary>
-
-    {transactionHashes.reverse().join("\n")}
+    <summary>{$reversedTransactionHashes.length} transaction hashes</summary>
+    <pre>{$reversedTransactionHashes.join('\n')}</pre>
   </details>
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/WriteContract.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/WriteContract.svelte
index 9341f41..88e083c 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/WriteContract.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/WriteContract.svelte
@@ -4,22 +4,22 @@
   import { stringify } from "../utils/formatters";
   import {
     writeContract as wagmiWriteContract,
-    waitForTransaction,
+    waitForTransactionReceipt,
   } from "@wagmi/core";
+  import { wagmiConfig } from "../wagmi";
 
   let amount: string | null = null;
 
   const { state: transactionState, execute: writeContract } = useAsync(
     async () => {
-      // random address for testing, replace with contract address that you want to allow to spend your tokens
       const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044";
 
-      const result = await wagmiWriteContract({
+      const result = await wagmiWriteContract(wagmiConfig, {
         ...daiContractConfig,
         functionName: "approve",
         args: [spender, BigInt(amount!)],
       });
-      waitForReceipt(result.hash);
+      waitForReceipt(result);
       return result;
     }
   );
@@ -27,7 +27,7 @@
 
   const { state: receiptState, execute: waitForReceipt } = useAsync(
     async (transactionHash) => {
-      return await waitForTransaction({ hash: transactionHash });
+      return await waitForTransactionReceipt(wagmiConfig, { hash: transactionHash });
     }
   );
   $: ({
@@ -47,7 +47,7 @@
   {#if inProgress}
     <div>Transaction pending...</div>
   {:else if transaction}
-    <div>Transaction Hash: {transaction?.hash}</div>
+    <div>Transaction Hash: {transaction}</div>
     <div>
       Transaction Receipt:
       {#if receiptInProgress}
diff --git a/templates/svelte/vite-wagmi-web3modal/src/components/WriteContractPrepared.svelte b/templates/svelte/vite-wagmi-web3modal/src/components/WriteContractPrepared.svelte
index 2ed2cb2..4b3e3c1 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/components/WriteContractPrepared.svelte
+++ b/templates/svelte/vite-wagmi-web3modal/src/components/WriteContractPrepared.svelte
@@ -1,86 +1,92 @@
 <script lang="ts">
-  import { daiContractConfig } from "../utils/contracts";
-  import { useAsync } from "../composables/useAsync";
-  import { stringify } from "../utils/formatters";
-  import {
-    prepareWriteContract as wagmiPrepareWriteContract,
-    writeContract as wagmiWriteContract,
-    waitForTransaction,
-  } from "@wagmi/core";
+  import { writable } from 'svelte/store';
+  import { BaseError } from 'viem';
+  import { simulateContract, writeContract as wagmiWriteContract, waitForTransactionReceipt } from '@wagmi/core';
+  import { get } from 'svelte/store';
+  import { daiContractConfig } from '../utils/contracts';
+  import { wagmiConfig } from '../wagmi';
 
-  let amount: string | null = null;
+  let amount = writable<string>('');
+  let isSimulating = writable(false);
+  let isPending = writable(false);
+  let transactionHash = writable<string | null>(null);
+  let receipt = writable<any>(null);
+  let simulateError = writable<Error | null>(null);
+  let error = writable<Error | null>(null);
 
-  // Preparing the transaction
-  const { state: preparedTransactionState, execute: prepareTransaction } =
-    useAsync(async () => {
-      // random address for testing, replace with contract address that you want to allow to spend your tokens
-      const spender = "0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044";
+  // random address for testing, replace with contract address that you want to allow to spend your tokens
+  const spender: `0x${string}` = '0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044';
 
-      return await wagmiPrepareWriteContract({
-        ...daiContractConfig,
-        functionName: "approve",
-        args: [spender, BigInt(amount!)],
+  const handleSubmit = async () => {
+    const amountValue = get(amount);
+    if (!amountValue) return;
+
+    simulateError.set(null);
+    error.set(null);
+    
+    try {
+      isSimulating.set(true);
+
+      const simulation = await simulateContract(wagmiConfig, {
+        abi: daiContractConfig.abi,
+        address: daiContractConfig.address,
+        functionName: 'approve',
+        args: [spender, BigInt(amountValue)],
       });
-    });
-  $: ({
-    result: preparedWriteContract,
-    inProgress: prepareInProgress,
-    error: prepareError,
-  } = $preparedTransactionState);
 
-  const { state: transactionState, execute: sendTransaction } = useAsync(
-    async () => {
-      const result = await wagmiWriteContract(preparedWriteContract!);
-      waitForReceipt(result.hash);
-      return result;
-    }
-  );
-  $: ({ result: transaction, inProgress, error } = $transactionState);
+      isSimulating.set(false);
 
-  const { state: receiptState, execute: waitForReceipt } = useAsync(
-    async (transactionHash) => {
-      return await waitForTransaction({ hash: transactionHash });
-    }
-  );
-  $: ({
-    result: receipt,
-    inProgress: receiptInProgress,
-    error: receiptError,
-  } = $receiptState);
+      if (simulation.result) {
+        isPending.set(true);
+        
+        const result = await wagmiWriteContract(wagmiConfig, {
+          abi: daiContractConfig.abi,
+          address: daiContractConfig.address,
+          functionName: 'approve',
+          args: [spender, BigInt(amountValue)],
+        });
 
-  $: amount && prepareTransaction();
+        transactionHash.set(result);
+
+        const transactionReceipt = await waitForTransactionReceipt(wagmiConfig, { hash: result });
+        receipt.set(transactionReceipt);
+      }
+    } catch (e: any) {
+      if (get(isSimulating)) {
+        simulateError.set(e instanceof BaseError ? e : null);
+      } else {
+        error.set(e instanceof BaseError ? e : null);
+      }
+    } finally {
+      isSimulating.set(false);
+      isPending.set(false);
+    }
+  };
 </script>
 
-<div>
-  <form on:submit|preventDefault={sendTransaction}>
-    <input bind:value={amount} type="number" placeholder="allowance amount" />
-    <button disabled={prepareInProgress || !preparedWriteContract} type="submit"
-      >Approve</button
-    >
-  </form>
+<form on:submit|preventDefault={handleSubmit}>
+  <input bind:value={$amount} type="number" placeholder="allowance amount" />
+  <button disabled={$isSimulating || $isPending || !$amount} type="submit">
+    {$isSimulating ? 'Simulating...' : $isPending ? 'Confirming...' : 'Approve'}
+  </button>
+</form>
 
-  {#if inProgress}
-    <div>Transaction pending...</div>
-  {:else if transaction}
-    <div>
-      <div>Transaction Hash: {transaction?.hash}</div>
-      <div>
-        Transaction Receipt:
-        {#if receiptInProgress}
-          <span>pending...</span>
-        {/if}
-        <pre>{stringify(receipt, null, 2)}</pre>
-      </div>
-    </div>
+<div>
+  {#if $simulateError}
+    Simulation Error: {$simulateError.message}
   {/if}
-
-  {#if prepareError}
-    <div>Preparing Transaction Error: {prepareError?.message}</div>
+  {#if $isPending}
+    Check wallet...
   {/if}
-  {#if error}
-    <div>Error: {error?.message}</div>
+  {#if $transactionHash}
+    <div>Transaction Hash: {$transactionHash}</div>
+    {#if $receipt}
+      <div>
+        Transaction Receipt: <pre>{JSON.stringify($receipt, null, 2)}</pre>
+      </div>
+    {/if}
   {/if}
-  {#if receiptError}
-    <div>Receipt Error: {receiptError?.message}</div>
+  {#if $error}
+    Error: {$error.message}
   {/if}
 </div>
diff --git a/templates/svelte/vite-wagmi-web3modal/src/utils/contracts.ts b/templates/svelte/vite-wagmi-web3modal/src/utils/contracts.ts
index 5e2952e..6c1020b 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/utils/contracts.ts
+++ b/templates/svelte/vite-wagmi-web3modal/src/utils/contracts.ts
@@ -1,6 +1,6 @@
-import { erc20ABI } from "@wagmi/core";
+import { erc20Abi } from "viem";
 
 export const daiContractConfig = {
   address: "0x604F0416e788779edB06c1A74a75FAad38384C6E", // zkSync Era Sepolia Testnet DAI token address
-  abi: erc20ABI,
+  abi: erc20Abi,
 } as const;
diff --git a/templates/svelte/vite-wagmi-web3modal/src/wagmi.ts b/templates/svelte/vite-wagmi-web3modal/src/wagmi.ts
index 2906e43..ca443a2 100644
--- a/templates/svelte/vite-wagmi-web3modal/src/wagmi.ts
+++ b/templates/svelte/vite-wagmi-web3modal/src/wagmi.ts
@@ -49,11 +49,13 @@ export const chains: Chain[] = [
 export const defaultChain = import.meta.env.MODE === "development" ? zksyncSepoliaTestnet : zksync;
 
 export const wagmiConfig = createConfig({
-  chains: [zksync, zksyncSepoliaTestnet],
+ chains: chains.length > 0 ? (chains as [Chain, ...Chain[]]) : [defaultChain], 
   connectors: [injected(), coinbaseWallet(), metaMask()],
   transports: {
     [zksync.id]: http(),
     [zksyncSepoliaTestnet.id]: http(),
+    270: http(),  
+    260: http(),
   },
 })
 
@@ -86,7 +88,6 @@ export function createWagmiStore() {
     account: getAccount(wagmiConfig),
   });
 
-
   function setField<K extends keyof WagmiStore>(
     field: K,
     value: WagmiStore[K]
diff --git a/templates/svelte/vite-wagmi/src/components/Connect.svelte b/templates/svelte/vite-wagmi/src/components/Connect.svelte
index 924cfe9..9849bd7 100644
--- a/templates/svelte/vite-wagmi/src/components/Connect.svelte
+++ b/templates/svelte/vite-wagmi/src/components/Connect.svelte
@@ -1,25 +1,15 @@
 <script lang="ts">
   import { wagmiConfig, wagmiStore } from "../wagmi";
   import { connect, disconnect, type Connector } from "@wagmi/core";
-  import { get } from "svelte/store";
 
-  $: ({ account } = get(wagmiStore));
+  $: ({ account } = $wagmiStore);
 
   const handleConnect = async (connector: Connector) => {
-    try {
-      await connect(wagmiConfig, { connector });
-    } catch (error) {
-      console.error("Error connecting:", error);
-    }
+    await connect(wagmiConfig, { connector });
   };
 
   const handleDisconnect = async () => {
-    try {
-      await disconnect(wagmiConfig);
-      account.isConnected = false;
-    } catch (error) {
-      console.error("Error disconnecting:", error);
-    }
+    await disconnect(wagmiConfig);
   };
 </script>
 
diff --git a/templates/svelte/vite-wagmi/src/components/EstimateGas.svelte b/templates/svelte/vite-wagmi/src/components/EstimateGas.svelte
index b6fbb59..263c2c4 100644
--- a/templates/svelte/vite-wagmi/src/components/EstimateGas.svelte
+++ b/templates/svelte/vite-wagmi/src/components/EstimateGas.svelte
@@ -55,12 +55,12 @@
 <form on:submit|preventDefault={handleSubmit}>
   <input
     bind:value={$to}
-    placeholder="Address"
+    placeholder="address"
     type="text"
   />
   <input
     bind:value={$value}
-    placeholder="Value (ether)"
+    placeholder="value (ether)"
     type="text"
   />
   <button disabled={$isSending || !$to || !$value} type="submit">
diff --git a/templates/svelte/vite-wagmi/src/components/NetworkSwitcher.svelte b/templates/svelte/vite-wagmi/src/components/NetworkSwitcher.svelte
index 3d728e3..67613ae 100644
--- a/templates/svelte/vite-wagmi/src/components/NetworkSwitcher.svelte
+++ b/templates/svelte/vite-wagmi/src/components/NetworkSwitcher.svelte
@@ -12,7 +12,6 @@
   const { execute: switchNetwork, state: asyncState } = useAsync(switchChain);
   $: ({ inProgress, error } = $asyncState);
 
-  // Function to switch networks
   const handleSwitchNetwork = async (chainId: number) => {
     if (account.isConnected) {
       try {
diff --git a/templates/svelte/vite-wagmi/src/components/Token.svelte b/templates/svelte/vite-wagmi/src/components/Token.svelte
index 4fc3c86..08f7358 100644
--- a/templates/svelte/vite-wagmi/src/components/Token.svelte
+++ b/templates/svelte/vite-wagmi/src/components/Token.svelte
@@ -66,7 +66,7 @@
   {#if $inProgress}
     Fetching token...
   {:else if $token}
-    <pre>{JSON.stringify($token, null, 4)}</pre>
+    <pre>{JSON.stringify($token, (key, value) => typeof value === 'bigint' ? value.toString() : value, 4)}</pre>
   {:else if $error}
     Error: {$error.message}
   {/if}
diff --git a/templates/svelte/vite-wagmi/src/components/WriteContractPrepared.svelte b/templates/svelte/vite-wagmi/src/components/WriteContractPrepared.svelte
index 523a2d3..4b3e3c1 100644
--- a/templates/svelte/vite-wagmi/src/components/WriteContractPrepared.svelte
+++ b/templates/svelte/vite-wagmi/src/components/WriteContractPrepared.svelte
@@ -17,7 +17,6 @@
   // random address for testing, replace with contract address that you want to allow to spend your tokens
   const spender: `0x${string}` = '0xa1cf087DB965Ab02Fb3CFaCe1f5c63935815f044';
 
-
   const handleSubmit = async () => {
     const amountValue = get(amount);
     if (!amountValue) return;
@@ -66,7 +65,7 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit}>
-  <input bind:value={$amount} type="number" placeholder="Allowance Amount" />
+  <input bind:value={$amount} type="number" placeholder="allowance amount" />
   <button disabled={$isSimulating || $isPending || !$amount} type="submit">
     {$isSimulating ? 'Simulating...' : $isPending ? 'Confirming...' : 'Approve'}
   </button>
diff --git a/templates/svelte/vite-wagmi/src/wagmi.ts b/templates/svelte/vite-wagmi/src/wagmi.ts
index bd889f1..cb5257d 100644
--- a/templates/svelte/vite-wagmi/src/wagmi.ts
+++ b/templates/svelte/vite-wagmi/src/wagmi.ts
@@ -45,14 +45,17 @@ export const chains: Chain[] = [
       ]
     : []),
 ];
+
 export const defaultChain = import.meta.env.MODE === "development" ? zksyncSepoliaTestnet : zksync;
 
 export const wagmiConfig = createConfig({
-  chains: [zksync, zksyncSepoliaTestnet],
+ chains: chains.length > 0 ? (chains as [Chain, ...Chain[]]) : [defaultChain], 
   connectors: [injected(), coinbaseWallet(), metaMask()],
   transports: {
     [zksync.id]: http(),
     [zksyncSepoliaTestnet.id]: http(),
+    270: http(),  
+    260: http(),
   },
 })