improved README

.gitignore

@@ -16,8 +16,7 @@ dist
 Thumbs.db
 
 # Env
-.env
-.env.*
+.env*
 !.env.example
 !.env.test
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2024 Kredeum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,77 +2,151 @@
 
 A Svelte 5 Web3 library based on Wagmi, providing seamless integration of Web3 functionality into your Svelte applications.
 
-## Features
+## ✨ Features
 
-- 🔌 Built for Svelte 5
-- 🌐 Web3 Integration
-- 🔒 Wallet Connection Management
-- ⛓️ Multi-chain Support
-- 🎣 Reactive Web3 Hooks
+- 🔌 Built for Svelte 5 with full TypeScript support
+- 🌐 Web3 Integration using Wagmi core functionality
+- 🔒 Secure Wallet Connection Management
+- ⛓️ Multi-chain Support with Auto-detection
+- 🎣 Reactive Web3 Hooks for Real-time Updates
 - 🔄 Auto-refresh on Network Changes
+- 📦 Simple and Intuitive API
+- 🛠️ Type-safe Contract Interactions
 
-## Installation
+## 📁 Repository Structure
+
+This repository contains two main parts:
+
+- 📦 The Svelte5 package code in `src/lib/wagmi`
+- 🎮 A SvelteKit demo app with usage examples in `src/routes`
+
+## 📦 Svelte5 Package
+
+### 💻 Installation
+
+Add this package to your Svelte5 project:
 
 ```bash
 npm install @kredeum/wagmi-svelte5
 # or
-pnpm add @kredeum/wagmi-svelte5
+pnpm install @kredeum/wagmi-svelte5
 # or
 yarn add @kredeum/wagmi-svelte5
 ```
 
-## Quick Start
+### 🚀 Quick Start
 
-```typescript
-import { createConfig } from "@kredeum/wagmi-svelte5";
+#### Simple Example
+
+```svelte
+<script lang="ts">
+  import { newWagmi } from "@wagmi-svelte5";
+  import { Counter } from "$lib/examples/Counter.svelte";
+
+  newWagmi();
+  const counter = new Counter();
+</script>
 
-// Configure your Web3 settings
-const config = createConfig({
-  // Your configuration options here
-});
+{counter.number}² = {counter.square(counter.number)}
 ```
 
-## Usage
+#### Using this Counter class Helper
 
-### Connect Wallet
+```typescript
+import { SmartContract } from "$lib/wagmi";
+
+export class Counter extends SmartContract {
+  get number() {
+    return this.call("number") as bigint;
+  }
+  square(num: number | bigint) {
+    return this.call("square", [num]) as bigint;
+  }
+  constructor() {
+    super("Counter");
+  }
+}
+```
+
+#### Same example without Helper
 
 ```svelte
-<script>
-  import { connect } from "@kredeum/wagmi-svelte5";
+<script lang="ts">
+  import { newWagmi, SmartContract } from "@wagmi-svelte5";
+
+  newWagmi();
+  const contract = new SmartContract("Counter");
+  const num = $derived(contract.call("number"));
+  const square = $derived(contract.call("square", [num]));
 </script>
 
-<button on:click={connect}>Connect Wallet</button>
+{num}² = {square}
 ```
 
-## Requirements
+#### 📄 Smart Contract Source
 
-- Svelte 5.x
-- Node.js 16+
+```solidity
+// Counter.sol
+contract Counter is ICounter {
+    uint256 public number;
 
-## Development
+    function square(uint256 num) public pure override(ICounter) returns (uint256) {
+        return num ** 2;
+    }
+    ...
+}
+```
+
+Full Counter.sol code deployed on Base Sepolia testnet can be Viewed here:
+🔍 [on BaseScan](https://sepolia.basescan.org/address/0xb1eC295A306436560C7A27616f51B5d76D6aDCa8#code)
+
+## 🎮 SvelteKit Demo and Examples
+
+The demo app in `src/routes` showcases various package features and usage patterns.
+
+### 🛠️ Requirements
+
+Your local machine needs:
+
+- 📦 [Node.js](https://nodejs.org/) 20+
+- 📦 [Pnpm](https://pnpm.io/) 9+
+
+Optional but recommended:
+
+- 🚀 [Turborepo](https://turbo.build/repo) 1.8+
+
+### ⚡ Quick Setup
+
+Get started with the examples:
 
 ```bash
+# Clone the repository
+git clone https://github.com/kredeum/wagmi-svelte5.git
+cd wagmi-svelte5
+
 # Install dependencies
 pnpm install
 
-# Run development server
-pnpm dev
+# Run the demo app
+turbo start
+# or without Turborepo
+pnpx turbo start
+```
 
-# Build package
-pnpm build
+🌐 Your browser will open to http://localhost:5173 showing the `Tests` page
 
-# Run tests
-pnpm test
-```
+## 🤝 Contributing
 
-## Contributing
+We welcome contributions! Feel free to:
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+- 🐛 Report issues
+- 💡 Suggest features
+- 🔧 Submit pull requests
 
-## License
+## 📄 License
 
 MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Author
+## 👨‍💻 Author
 
 zapaz.eth <[email protected]> (http://labs.kredeum.com/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kredeum/wagmi-svelte5",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "Svelte5 Web3 library based on Wagmi",
   "keywords": [
@@ -40,6 +40,7 @@
     "build": "vite build",
     "test": "pnpm run test:unit && pnpm run test:e2e",
     "dev": "vite dev",
+    "start": "vite dev",
     "preview": "vite preview",
     "test:unit": "vitest run",
     "test:e2e": "playwright test",

src/lib/examples/Counter.svelte.ts

@@ -0,0 +1,20 @@
+import { SmartContract } from "$lib/wagmi";
+
+class Counter extends SmartContract {
+  get number() {
+    return this.call("number") as bigint;
+  }
+  increment = async () => {
+    await this.sendAndWait("increment");
+    await this.callAsync("number");
+  };
+  square(num: number | bigint) {
+    return this.call("square", [num || 0n]) as bigint;
+  }
+
+  constructor() {
+    super("Counter");
+  }
+}
+
+export { Counter };

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

@@ -65,8 +65,7 @@ class SmartContract {
     functionName: string = "",
     args: unknown[] = []
   ) => {
-    // console.log("SMARTCONTRACT READ", functionName, args, chainId, deployment.address, `#${this.id}`);
-    // console.log("SMARTCONTRACT READ",  deployment.abi);
+    // console.log("SMARTCONTRACT READ", functionName, args, chainId, `#${this.id}`);
     const abiFunction = (abi as unknown as AbiFunction[]).find(
       (f) => f.type === "function" && f.name === functionName && f.inputs.length === args.length
     );

src/lib/wagmi/ts/notification.ts

@@ -53,7 +53,7 @@ export const notification = {
   loading: (Content: Renderable, options?: NotificationOptions) => {
     return Notification({ Content, status: "loading", ...options });
   },
-  remove: (toastId: string) => {
+  remove: (toastId?: string) => {
     toast.remove(toastId);
   }
 };

src/routes/+layout.svelte

@@ -1,19 +1,9 @@
 <script lang="ts">
+  import "../app.pcss";
   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;
-  const account = new Account();
-
-  const switchChain = (chainId: number) => {
-    wagmi.switch(chainId);
-  };
 </script>
 
 <Toaster />
@@ -24,27 +14,6 @@
       <a href="/">Tests</a>
     </h1>
 
-    <div class="pb-8">
-      {#if account.address}
-        {account.address} ({account.chainId})
-
-        <Disconnect />
-
-        {#each chains as chain (chain.id)}
-          {#if chain.id !== account.chainId}
-            <span class="px-1">
-              <button class="btn-default btn btn-sm" onclick={() => switchChain(chain.id)}>
-                {chain.name}
-              </button>
-            </span>
-          {/if}
-        {/each}
-        <div class="p-2"></div>
-      {:else}
-        <Connect chainId={account.chainId} bind:address={account.address} />
-      {/if}
-    </div>
-
-    <main class="relative flex flex-1 flex-col">{@render children()}</main>
+    {@render children()}
   </div>
 </div>

src/routes/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts"></script>
 
-{#snippet pageTest(pageName: string)}
-  <li><a class="text-blue-500 hover:underline" href="/{pageName}">{pageName}</a></li>
+{#snippet pageTest(pagePath: string, pageDescription: string)}
+  <li><a class="text-blue-500 hover:underline" href={pagePath}>{pageDescription}</a></li>
 {/snippet}
 
 <ul class="list-disc space-y-2 pl-5">
-  {@render pageTest("notification")}
-  {@render pageTest("counter")}
-  {@render pageTest("deployments")}
+  {@render pageTest("/quick/counter", "Read Counter")}
+  {@render pageTest("/connect/counter", "Read/Write Counter")}
+  {@render pageTest("/quick/notification", "Notifications")}
+  {@render pageTest("/connect/deployments", "Deployments")}
 </ul>

src/routes/connect/+layout.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Account, Connect, Disconnect, wagmi, newWagmi } from "$lib/wagmi";
+
+  let { children }: { children: Snippet } = $props();
+
+  newWagmi();
+
+  const chains = wagmi.chains;
+  const account = new Account();
+
+  const switchChain = (chainId: number) => {
+    wagmi.switch(chainId);
+  };
+</script>
+
+<div>
+  {#if account.address}
+    {account.address} ({account.chainId})
+
+    <Disconnect />
+
+    {#each chains as chain (chain.id)}
+      {#if chain.id !== account.chainId}
+        <span class="px-1">
+          <button class="btn-default btn btn-sm" onclick={() => switchChain(chain.id)}>
+            {chain.name}
+          </button>
+        </span>
+      {/if}
+    {/each}
+    <div class="p-2"></div>
+  {:else}
+    <Connect chainId={account.chainId} bind:address={account.address} />
+  {/if}
+</div>
+
+{@render children()}