fix notification and add tests

.gitignore

@@ -1,6 +1,7 @@
 test-results
 node_modules
 dist
+.turbo
 
 # Output
 .output

.prettierignore

@@ -2,3 +2,4 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+.turbo

README.md

@@ -24,7 +24,7 @@ yarn add @kredeum/wagmi-svelte5
 ## Quick Start
 
 ```typescript
-import { createConfig } from '@kredeum/wagmi-svelte5';
+import { createConfig } from "@kredeum/wagmi-svelte5";
 
 // Configure your Web3 settings
 const config = createConfig({
@@ -38,7 +38,7 @@ const config = createConfig({
 
 ```svelte
 <script>
-  import { connect } from '@kredeum/wagmi-svelte5';
+  import { connect } from "@kredeum/wagmi-svelte5";
 </script>
 
 <button on:click={connect}>Connect Wallet</button>
@@ -75,4 +75,4 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Author
 
-zapaz.eth <[email protected]> (http://labs.kredeum.com/)
+zapaz.eth <[email protected]> (http://labs.kredeum.com/)

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kredeum/wagmi-svelte5",
   "version": "0.1.5",
+  "type": "module",
   "description": "Svelte5 Web3 library based on Wagmi",
   "keywords": [
     "svelte",
@@ -25,20 +26,28 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "type": "module",
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": "^22",
+    "pnpm": "^9"
+  },
   "scripts": {
     "all": "pnpm run setup && pnpm run format && pnpm run check && pnpm run build && pnpm run test && pnpm run dev",
     "clean": "rm -rf node_modules .pnpm-lock.yaml .svelte-kit dist",
     "setup": "pnpm run clean && pnpm install",
     "format": "prettier --write --list-different .",
-    "check": "prettier --check . && eslint . && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "prettier --check . && eslint . && pnpm run sync && svelte-check --tsconfig ./tsconfig.json",
     "build": "vite build",
-    "test": "npm run test:unit && npm run test:e2e",
+    "test": "pnpm run test:unit && pnpm run test:e2e",
     "dev": "vite dev",
     "preview": "vite preview",
     "test:unit": "vitest run",
     "test:e2e": "playwright test",
-    "package": "NODE_ENV=prod svelte-kit sync && svelte-package && publint"
+    "package": "pnpm run sync && svelte-package && publint",
+    "sync": "NODE_ENV=prod svelte-kit sync",
+    "prepublishOnly": "pnpm package",
+    "check:watch": "pnpm run sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint ."
   },
   "dependencies": {
     "svelte": "^5.16.0"
@@ -50,15 +59,15 @@
     "@playwright/test": "^1.49.1",
     "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/kit": "^2.15.1",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@types/node": "^22.10.2",
     "@wagmi/connectors": "^5.7.3",
     "@wagmi/core": "^2.16.3",
     "@walletconnect/ethereum-provider": "^2.17.3",
     "autoprefixer": "^10.4.20",
-    "daisyui": "^4.12.22",
+    "daisyui": "^4.12.23",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
@@ -73,10 +82,11 @@
     "svelte-hero-icons": "^5.2.0",
     "svelte-hot-french-toast": "^1.0.0",
     "tailwindcss": "^3.4.17",
+    "turbo": "^2.3.3",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
     "viem": "^2.21.57",
     "vite": "^5.4.11",
     "vitest": "^2.1.8"
   }
-}
+}

src/lib/index.ts

@@ -1 +1,7 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+// Export components and functionality
+export * from "./wagmi";
+
+// Export styles
+import "./styles/index.pcss";

src/lib/wagmi/classes/Account.svelte.ts

@@ -23,7 +23,6 @@ class Account extends Address {
   watch = () =>
     watchAccount(wagmiConfig, {
       onChange: (newAccount: AccountType) => {
-        console.info("watchAccount Change:", newAccount);
         this.#account = newAccount;
         super.address = newAccount.address;
       }

src/lib/wagmi/classes/Events.svelte.ts

@@ -1,6 +1,14 @@
-import { type Address as AddressType, type ContractEventName } from "viem";
+import { type Address as AddressType, type Log } from "viem";
 import { watchContractEvent, getBlockNumber } from "@wagmi/core";
-import { type LogWithArgs, type EventsFilter, type EventsSortOrder, SmartContract, wagmi, wagmiConfig, getContractEvents } from "..";
+import {
+  type LogWithArgs,
+  type EventsFilter,
+  type EventsSortOrder,
+  SmartContract,
+  wagmi,
+  wagmiConfig,
+  getContractEvents
+} from "..";
 
 class Events extends SmartContract {
   limit: number = $state(0);

src/lib/wagmi/classes/SmartContract.svelte.ts

@@ -11,7 +11,15 @@ import {
   writeContract
 } from "@wagmi/core";
 
-import { wagmi, wagmiConfig, isAddress, shorten0xString, readDeployment, notification, LinkTx } from "..";
+import {
+  wagmi,
+  wagmiConfig,
+  isAddress,
+  shorten0xString,
+  readDeployment,
+  notification,
+  LinkTx
+} from "..";
 
 let counter = 0;
 

src/lib/wagmi/classes/Wagmi.svelte.ts

@@ -10,7 +10,15 @@ import {
 } from "@wagmi/core";
 import { coinbaseWallet, injected, metaMask, walletConnect } from "@wagmi/connectors";
 
-import { Network, createBurnerConnector, alchemyTransport, ALCHEMY_API_KEY, POLLING_INTERVAL, CHAINS, WALLET_CONNECT_PROJECT_ID } from "..";
+import {
+  Network,
+  createBurnerConnector,
+  alchemyTransport,
+  ALCHEMY_API_KEY,
+  POLLING_INTERVAL,
+  CHAINS,
+  WALLET_CONNECT_PROJECT_ID
+} from "..";
 
 const getChains = () => {
   const selectedChains: Chain[] = [];

src/lib/wagmi/components/BaseNotification.svelte

@@ -8,7 +8,7 @@
     XMark
   } from "svelte-hero-icons";
   import toast_, { type Renderable, type Toast } from "svelte-hot-french-toast";
-  
+
   import { clickOutside } from "..";
 
   const {
@@ -26,6 +26,7 @@
 
 <div
   use:clickOutside={() => toast_.dismiss(id)}
+  role="status"
   class="notification-{status} 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

src/lib/wagmi/components/LinkAddress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Link , Network, wagmi } from "..";
+  import { Link, Network, wagmi } from "..";
 
   const { address, description = "address" }: { address?: `0x${string}`; description?: string } =
     $props();

src/lib/wagmi/components/LinkTx.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Link ,  Network,shorten0xString , wagmi } from "..";
+  import { Link, Network, shorten0xString, wagmi } from "..";
 
   const {
     hash,

src/lib/wagmi/components/Logs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Events , replacer } from "..";
+  import { Events, replacer } from "..";
 
   const { contractName }: { contractName: string } = $props();
 

src/lib/wagmi/components/ViewEvents.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Logs ,readDeploymentContractsName ,wagmi } from "..";
+  import { Logs, readDeploymentContractsName, wagmi } from "..";
 
   const localStorageContractKey = "wagmiSvelte5.contractSelected";
 

src/lib/wagmi/ts/types.ts

@@ -14,18 +14,11 @@ type LogsParamsType = {
 
 type AccountType = ReturnType<typeof getAccount>;
 
-type EventsFilter = { 
-  eventName?: ContractEventName; 
-  args?: Record<string, unknown> 
+type EventsFilter = {
+  eventName?: ContractEventName;
+  args?: Record<string, unknown>;
 };
 
 type EventsSortOrder = "DESC" | "ASC" | undefined;
 
-export type { 
-  Nullable, 
-  LogWithArgs, 
-  LogsParamsType,
-  AccountType,
-  EventsFilter,
-  EventsSortOrder 
-};
+export type { Nullable, LogWithArgs, LogsParamsType, AccountType, EventsFilter, EventsSortOrder };

src/routes/+layout.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { Account, Connect, Disconnect, wagmi, newWagmi } from "$lib/wagmi";
+  import { Toaster } from "svelte-hot-french-toast";
   import "../app.pcss";
 
   let { children }: { children: Snippet } = $props();
 
   newWagmi();
 
   const chains = wagmi.chains;
-  console.log("chains:", chains);
   const account = new Account();
 
   const switchChain = (chainId: number) => {
     wagmi.switch(chainId);
   };
 </script>
 
+<Toaster />
+
 <div class="flex min-h-screen flex-col">
   <div class="p-8">
     <h1 class="mb-6 text-2xl font-bold">

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 {/snippet}
 
 <ul class="list-disc space-y-2 pl-5">
+  {@render pageTest("notification")}
   {@render pageTest("counter")}
   {@render pageTest("deployments")}
 </ul>

src/routes/counter/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { notification } from "@wagmi-svelte5";
   import { Counter } from "./Counter.svelte";
 
   const contract = new Counter();
@@ -7,7 +8,7 @@
 </script>
 
 <div class="p-4">
-  <div class="mb-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
+  <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
     {contract.isFetching
       ? "fetching..."
       : contract.sending
@@ -22,7 +23,11 @@
   <button class="btn btn-primary" onclick={() => contract.setNumber(0)}> Reset </button>
   <button class="btn btn-primary" onclick={() => contract.increment()}> Increment </button>
 
-  <div class="mt-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
+  <div class="my-4 w-44 rounded bg-blue-100 p-2 text-center shadow">
     {contract.number}² = {contract.square(contract.number)}
   </div>
+
+  <button class="btn btn-primary" onclick={() => notification.info("Notification!")}>
+    Notif
+  </button>
 </div>

src/routes/notification/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { notification } from "@wagmi-svelte5";
+</script>
+
+<div class="p-4">
+  <button class="btn btn-primary" onclick={() => notification.info("Notification!")}>
+    Notif
+  </button>
+</div>

tests/e2e/demo.t.ts

@@ -40,9 +40,9 @@ test("connect button should be visible and clickable", async ({ page }) => {
   await expect(disconnectButton).toBeVisible();
 });
 
-test('disconnect wallet functionality', async ({ page }) => {
+test("disconnect wallet functionality", async ({ page }) => {
   // Navigate to the home page
-  await page.goto('/');
+  await page.goto("/");
 
   // Find and click the connect button
   const connectButton = page.locator("#connect-wallet");

tests/e2e/notification.t.ts

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Notification Page", () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the notification page before each test
+    await page.goto("/notification");
+  });
+
+  test("should display notification when clicking the button", async ({ page }) => {
+    // Find and click the notification button
+    const notifButton = page.getByRole("button", { name: "Notif" });
+    await expect(notifButton).toBeVisible();
+    await notifButton.click();
+
+    // Wait for and verify the notification appears
+    const notification = page.getByText("Notification!");
+    await expect(notification).toBeVisible();
+
+    // Verify the notification has the correct styles (info type)
+    const notificationContainer = page.locator('[role="status"].notification-info');
+    await expect(notificationContainer).toBeVisible();
+    await expect(notificationContainer).toHaveClass(/top-0/);
+
+    // Wait for notification to disappear (default timeout is 3000ms)
+    await expect(notification).toBeHidden({ timeout: 5000 });
+  });
+
+  test("notification should have correct position", async ({ page }) => {
+    // Click the notification button
+    await page.getByRole("button", { name: "Notif" }).click();
+
+    // Get the notification container
+    const notificationContainer = page.locator('[role="status"].notification-info');
+
+    // Verify it appears at the top-center (default position)
+    await expect(notificationContainer).toHaveClass(/top-0/);
+  });
+
+  test("should handle multiple notifications", async ({ page }) => {
+    // Click the button multiple times
+    const button = page.getByRole("button", { name: "Notif" });
+    await button.click();
+    await button.click();
+    await button.click();
+
+    // Verify multiple notifications are visible
+    const notifications = page.locator('[role="status"].notification-info');
+    await expect(notifications).toHaveCount(3);
+
+    // Wait for all notifications to disappear
+    await expect(notifications).toHaveCount(0, { timeout: 5000 });
+  });
+});

tests/unit/mocks/env/static/public.ts

@@ -1,6 +1,6 @@
-export const PUBLIC_CHAINS = 'anvil,baseSepolia'
-export const PUBLIC_POLLING_INTERVAL = '5000'
-export const PUBLIC_ALCHEMY_API_KEY = 'test-key'
-export const PUBLIC_WALLET_CONNECT_PROJECT_ID = 'test-project-id'
-export const PUBLIC_BURNER_WALLET_ONLY_LOCAL = 'true'
-export const PUBLIC_BURNER_WALLET_KEY = 'test-key'
+export const PUBLIC_CHAINS = "anvil,baseSepolia";
+export const PUBLIC_POLLING_INTERVAL = "5000";
+export const PUBLIC_ALCHEMY_API_KEY = "test-key";
+export const PUBLIC_WALLET_CONNECT_PROJECT_ID = "test-project-id";
+export const PUBLIC_BURNER_WALLET_ONLY_LOCAL = "true";
+export const PUBLIC_BURNER_WALLET_KEY = "test-key";