fix: Some more cleanup

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "dev": "turbo dev --no-cache --continue",
+    "dev": "turbo dev --cache=local:r,remote:r --continue",
     "lint": "biome check .",
     "lint:fix": "biome check . --apply",
     "clean": "turbo clean && rm -rf node_modules temp",
@@ -15,15 +15,15 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@types/node": "^22.8.1",
-    "@types/node-fetch": "^2.6.11",
+    "@types/node": "^22.10.3",
+    "@types/node-fetch": "^2.6.12",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.4.7",
     "jest": "^29.7.0",
     "source-map-support": "^0.5.21",
     "tsup": "^8.3.5",
     "turbo": "^2.3.3",
-    "zx": "^8.1.9"
+    "zx": "^8.3.0"
   },
   "packageManager": "pnpm@9.12.3",
   "workspaces": [
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "typedoc": "^0.26.10",
-    "wrangler": "^3.83.0"
+    "typedoc": "^0.27.6",
+    "wrangler": "^3.99.0"
   },
   "version": "1.0.0"
 }

packages/astro-example/package.json

@@ -15,24 +15,26 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/lit": "^4.3.0",
     "@astrojs/react": "^4.1.2",
-    "@astrojs/svelte": "^7.0.2",
-    "@astrojs/vue": "^5.0.3",
+    "@astrojs/svelte": "^7.0.3",
+    "@astrojs/vue": "^5.0.4",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@lit-labs/ssr": "^3.2.2",
     "@lit/reactive-element": "^2.0.4",
     "@lukso/lsp0-contracts": "^0.15.0",
     "@lukso/up-provider": "workspace:*",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "^5.1.1",
+    "astro": "^5.1.2",
     "ethers": "^6.13.4",
     "lit": "^3.2.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass-embedded": "^1.83.0",
     "svelte": "^5.16.0",
+    "typedoc": "^0.27.6",
     "typescript": "^5.7.2",
+    "uuid": "^11.0.3",
     "viem": "^2.22.1",
     "vue": "^3.5.13",
     "web3": "^4.16.0"

packages/astro-example/src/components/DonateViem.lit.ts

@@ -2,7 +2,7 @@ import { createClientUPProvider } from '@lukso/up-provider'
 import { LitElement, css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { createWalletClient, custom, parseUnits } from 'viem'
-import { lukso } from 'viem/chains'
+import { lukso, luksoTestnet } from 'viem/chains'
 
 const provider = createClientUPProvider()
 const client = createWalletClient({
@@ -79,14 +79,13 @@ class DonateWidget extends LitElement {
 
   @property({ type: Number }) minAmount = 0.25
   @property({ type: Number }) maxAmount = 1000
-  @property({ type: Number }) defaultAmount = this.minAmount
+  @property({ type: Number }) defaultAmount = 1
   @state() chainId = 0
   @state() accounts: Array<`0x${string}`> = []
   @state() contextAccounts: Array<`0x${string}`> = []
   @state() walletConnected = false
   @state() error = '' // Error message for validation feedback
   @state() amount = this.defaultAmount
-  @state() presetAmounts = [0.01, 0.05, 0.1]
   @state() disabled = true
 
   // Watch for changes in propA and propB
@@ -97,7 +96,7 @@ class DonateWidget extends LitElement {
   }
 
   calculateEnabled() {
-    this.disabled = !this.amount || this.accounts.length === 0 || this.contextAccounts.length === 0
+    this.disabled = !this.amount || this.accounts.length === 0 || this.contextAccounts.length === 0 || this.chainId !== 42
     console.log({ amount: this.amount, accounts: this.accounts, contextAccounts: this.contextAccounts, chainId: this.chainChanged, disabled: this.disabled })
   }
 
@@ -130,7 +129,7 @@ class DonateWidget extends LitElement {
         this.accounts = addresses
       })
       this.contextAccounts = provider.contextAccounts
-      this.walletConnected = this.accounts.length > 0 && this.contextAccounts.length > 0
+      this.walletConnected = this.accounts.length > 0 && this.contextAccounts.length > 0 && (this.chainId === lukso.id || this.chainId === luksoTestnet.id)
     } catch (error) {
       console.error(error)
       // Ignore error
@@ -162,6 +161,8 @@ class DonateWidget extends LitElement {
         account: this.accounts[0] as `0x${string}`,
         to: this.contextAccounts[0] as `0x${string}`,
         value: parseUnits(this.amount.toString(), 18),
+        chain: this.chainId === lukso.id ? lukso : luksoTestnet,
+        kzg: undefined,
       })
     }
   }
@@ -170,7 +171,7 @@ class DonateWidget extends LitElement {
     return html`
       <div class="widget">
         <div class="donate-widget">
-          <h3>Donate LYX LIT<br /><small>${this.contextAccounts.length > 0 ? this.contextAccounts[0] : 'not connected'}</small></h3>
+          <h3>Donate LYX to<br /><small>${this.contextAccounts.length > 0 ? this.contextAccounts[0] : 'not connected'}</small></h3>
           <div>
             <label for="amount">Enter Amount:</label>
             <input id="amount" type="number" .value="${this.amount}" @input="${this.handleInput}" min="${this.minAmount}" max="${this.maxAmount}" step="1" />

packages/astro-example/src/components/DonateViem.tsx

@@ -1,7 +1,7 @@
 import { createClientUPProvider } from '@lukso/up-provider'
 import { useCallback, useEffect, useState } from 'react'
 import { createWalletClient, custom, parseUnits } from 'viem'
-import { lukso } from 'viem/chains'
+import { lukso, luksoTestnet } from 'viem/chains'
 import './Donate.scss'
 
 const provider = createClientUPProvider()
@@ -22,7 +22,7 @@ const DonateWidget = () => {
   const [accounts, setAccounts] = useState<Array<`0x${string}`>>([])
   const [contextAccounts, setContextAccounts] = useState<Array<`0x${string}`>>([])
   const [walletConnected, setWalletConnected] = useState(false)
-  const [amount, setAmount] = useState<number>(minAmount)
+  const [amount, setAmount] = useState<number>(1)
   const [error, setError] = useState('')
 
   const validateAmount = useCallback((value: number) => {
@@ -42,7 +42,7 @@ const DonateWidget = () => {
 
   const updateConnected = useCallback((_accounts: Array<`0x${string}`>, _contextAccounts: Array<`0x${string}`>, _chainId: number) => {
     console.log(_accounts, _contextAccounts, _chainId)
-    setWalletConnected(_accounts.length > 0 && _contextAccounts.length > 0)
+    setWalletConnected(_accounts.length > 0 && _contextAccounts.length > 0 && (_chainId === lukso.id || _chainId === luksoTestnet.id))
   }, [])
 
   // Monitor accountsChanged and chainChained events
@@ -99,14 +99,16 @@ const DonateWidget = () => {
         account: accounts[0] as `0x${string}`,
         to: contextAccounts[0] as `0x${string}`,
         value: parseUnits(amount.toString(), 18),
+        chain: chainId === lukso.id ? lukso : luksoTestnet,
+        kzg: undefined,
       })
     }
   }
 
   return (
     <div className="donate-widget">
       <h3>
-        Donate LYX
+        Donate LYX to
         <br />
         <small>{contextAccounts.length > 0 ? contextAccounts[0] : 'not connected'}</small>
       </h3>

packages/astro-example/src/components/DonateWeb3.astro

@@ -2,13 +2,14 @@
 // Client-only initialization of variables
 const minValue = 0.25;
 const maxValue = 1000;
+const defaultValue = 1;
 ---
 
 <div class="donate-widget">
   <h3>Donate LYX<br/><span id="accountNumber"/></h3>
   <div>
     <label for="inputId">Enter Amount:</label>
-    <input id="inputId" type="number" value={minValue} min={minValue} step="0.01" placeholder="Enter amount in LYX" />
+    <input id="inputId" type="number" value={defaultValue} min={minValue} step="0.01" placeholder="Enter amount in LYX" />
     <p id="errorMessage" style="color: red;"></p>
   </div>
   <button id="donateButton" disabled>Donate LYX</button>

packages/astro-example/src/components/DonateWeb3.svelte

@@ -7,13 +7,12 @@
   let accounts: string[] = [];
   let contextAccounts: string[] = [];
   let walletConnected = false;
-  const presetAmounts = [0.01, 0.05, 0.1];
 
   const provider = createClientUPProvider();
   const web3 = new Web3(provider as SupportedProviders<EthExecutionAPI>);
 
   function checkWalletStatus() {
-    walletConnected = accounts.length > 0 && contextAccounts.length > 0;
+    walletConnected = accounts.length > 0 && contextAccounts.length > 0 && (chainId === 42 || chainId === 4201);
   }
 
   let error = ''; // Error message for validation feedback
@@ -82,7 +81,7 @@
 </script>
 
 <div class="donate-widget">
-  <h3>Donate LYX<br/>{ contextAccounts.length > 0 ? contextAccounts[0] : 'not connected' }</h3>
+  <h3>Donate LYX to<br/>{ contextAccounts.length > 0 ? contextAccounts[0] : 'not connected' }</h3>
   <div>
     <label for="amount">Enter Amount:</label>
     <input

packages/astro-example/src/components/DonateWeb3.tsx

@@ -18,7 +18,7 @@ const DonateWidget = () => {
   const [accounts, setAccounts] = useState<Array<`0x${string}`>>([])
   const [contextAccounts, setContextAccounts] = useState<Array<`0x${string}`>>([])
   const [walletConnected, setWalletConnected] = useState(false)
-  const [amount, setAmount] = useState<number>(minAmount)
+  const [amount, setAmount] = useState<number>(1)
   const [error, setError] = useState('')
 
   const validateAmount = useCallback((value: number) => {
@@ -38,7 +38,7 @@ const DonateWidget = () => {
 
   const updateConnected = useCallback((accounts: Array<`0x${string}`>, contextAccounts: Array<`0x${string}`>, chainId: number) => {
     console.log(accounts, chainId)
-    setWalletConnected(accounts.length > 0 && contextAccounts.length > 0)
+    setWalletConnected(accounts.length > 0 && contextAccounts.length > 0 && (chainId === 42 || chainId === 4201))
   }, [])
 
   // Monitor accountsChanged and chainChained events
@@ -107,7 +107,7 @@ const DonateWidget = () => {
   return (
     <div className="donate-widget">
       <h3>
-        Donate LYX
+        Donate LYX to
         <br />
         <small>{contextAccounts.length > 0 ? contextAccounts[0] : 'not connected'}</small>
       </h3>

packages/astro-example/src/components/DonateWeb3.vue

@@ -63,7 +63,7 @@ watch(
     // For example if you check for accounts?.[0] !== accounts?.[1] you can
     // ensure that the connected account is not the page owner.
     // The button will be disabled if the walletConnected flag is false.
-    walletConnected.value = accounts?.length > 0 && contextAccounts?.length > 0
+    walletConnected.value = accounts?.length > 0 && contextAccounts?.length > 0 && (chainId === 42 || chainId === 4201)
   }
 )
 

packages/astro-example/src/components/Navigation.astro

@@ -3,13 +3,14 @@ const currentPath = Astro.url.pathname;
 const size = 10;
 ---
 <div class="nav">&nbsp;❀
-  <a title="Vue with Web3.js" href="/" class={`button-link ${currentPath === '/' ? 'disabled' : ''}`}><img src="/images/vuejs.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
-  <a title="React with Web3.js" href="/react-web3" class={`button-link ${currentPath === '/react-web3' ? 'disabled' : ''}`}><img src="/images/react.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
-  <a title="React with Viem" href="/react-viem" class={`button-link ${currentPath === '/react-viem' ? 'disabled' : ''}`}><img src="/images/react.svg" width={size} height={size} /> <img src="/images/viem.png" width="15" height="15" /></a>
-  <a title="LIT with Viem" href="/lit-viem" class={`button-link ${currentPath === '/lit-viem' ? 'disabled' : ''}`}><img src="/images/lit.svg" color="white" width={size} height={size} /> <img src="/images/viem.png" width="15" height="15" /></a>
-  <a title="Vue with ethers.js" href="/vue-ethers" class={`button-link ${currentPath === '/vue-ethers' ? 'disabled' : ''}`}><img src="/images/vuejs.svg" color="white" width={size} height={size} /> <img src="/images/ethersjs.svg" width="15" height="15" /></a>
-  <a title="Svelte with web3.js" href="/svelte-web3" class={`button-link ${currentPath === '/svelte-web3' ? 'disabled' : ''}`}><img src="/images/svelte.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
-  <a title="Astro with web3.js" href="/astro-web3" class={`button-link ${currentPath === '/astro-web3' ? 'disabled' : ''}`}><img src="/images/astro.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
+  <a title="Vue with Web3.js" href="/" class={`hover-show button-link ${currentPath === '/' ? 'disabled' : ''}`}><img src="/images/vuejs.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
+  <a title="React with Web3.js" href="/react-web3" class={`hover-show button-link ${currentPath === '/react-web3' ? 'disabled' : ''}`}><img src="/images/react.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
+  <a title="React with Viem" href="/react-viem" class={`hover-show button-link ${currentPath === '/react-viem' ? 'disabled' : ''}`}><img src="/images/react.svg" width={size} height={size} /> <img src="/images/viem.png" width="15" height="15" /></a>
+  <a title="LIT with Viem" href="/lit-viem" class={`hover-show button-link ${currentPath === '/lit-viem' ? 'disabled' : ''}`}><img src="/images/lit.svg" color="white" width={size} height={size} /> <img src="/images/viem.png" width="15" height="15" /></a>
+  <a title="Vue with ethers.js" href="/vue-ethers" class={`hover-show button-link ${currentPath === '/vue-ethers' ? 'disabled' : ''}`}><img src="/images/vuejs.svg" color="white" width={size} height={size} /> <img src="/images/ethersjs.svg" width="15" height="15" /></a>
+  <a title="Svelte with web3.js" href="/svelte-web3" class={`hover-show button-link ${currentPath === '/svelte-web3' ? 'disabled' : ''}`}><img src="/images/svelte.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
+  <a title="Astro with web3.js" href="/astro-web3" class={`hover-show button-link ${currentPath === '/astro-web3' ? 'disabled' : ''}`}><img src="/images/astro.svg" width={size} height={size} /> <img src="/images/web3js.svg" width="15" height="15" /></a>
+  <div class="hover-show"><small>{currentPath}</small></div>
 </div>
 <style>
 .nav {
@@ -19,10 +20,10 @@ const size = 10;
   color: #333;
   font-size: 20px;
 
-  & a {
+  & .hover-show {
     display: none;
   }
-  &:hover a {
+  &:hover .hover-show {
     display: inline-block;
   }
 }

packages/up-provider/package.json

@@ -9,16 +9,16 @@
     "@mixer/postmessage-rpc": "^1.1.4",
     "@types/debug": "^4.1.12",
     "@types/uuid": "^10.0.0",
-    "debug": "^4.3.7",
+    "debug": "^4.4.0",
     "eventemitter3": "^5.0.1",
     "json-rpc-2.0": "^1.7.0",
     "lit": "^3.2.1",
     "pauseable": "^0.3.2",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
-    "tsup": "^8.3.0",
-    "typescript": "^5.6.2"
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
   },
   "scripts": {
     "build": "tsup ./src",