From afdba2e302d01bea305f0751d6a236b49fd27e26 Mon Sep 17 00:00:00 2001
From: Hoang Dinh <d.conghoang@gmail.com>
Date: Wed, 27 Nov 2024 13:43:38 +1000
Subject: [PATCH 1/9] examples

---
 examples/production_react/package.json        | 25 +++++----
 examples/production_react/src/App.tsx         | 51 +++++++++----------
 examples/production_react/src/Home.tsx        |  2 +-
 .../src/components/Account.tsx                |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../src/components/Transact.tsx               |  8 +--
 .../src/utils/ellipseAddress.ts               |  4 +-
 7 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/examples/production_react/package.json b/examples/production_react/package.json
index 88c0ef2..7581554 100644
--- a/examples/production_react/package.json
+++ b/examples/production_react/package.json
@@ -13,34 +13,35 @@
   },
   "devDependencies": {
     "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@playwright/test": "^1.35.0",
+    "@types/jest": "29.5.2",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "playwright": "^1.35.0",
     "postcss": "^8.4.24",
     "tailwindcss": "3.3.2",
     "ts-jest": "^29.1.1",
-    "@types/jest": "29.5.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "@playwright/test": "^1.35.0",
-    "playwright": "^1.35.0",
     "vite": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -55,7 +56,8 @@
     "playwright:test": "playwright test",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [
@@ -76,6 +78,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/production_react/src/App.tsx b/examples/production_react/src/App.tsx
index 58feddf..5ed374e 100644
--- a/examples/production_react/src/App.tsx
+++ b/examples/production_react/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/production_react/src/Home.tsx b/examples/production_react/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/examples/production_react/src/Home.tsx
+++ b/examples/production_react/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/production_react/src/components/Account.tsx b/examples/production_react/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/examples/production_react/src/components/Account.tsx
+++ b/examples/production_react/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/production_react/src/components/ConnectWallet.tsx b/examples/production_react/src/components/ConnectWallet.tsx
index c4225bc..8ff01dc 100644
--- a/examples/production_react/src/components/ConnectWallet.tsx
+++ b/examples/production_react/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/examples/production_react/src/components/Transact.tsx b/examples/production_react/src/components/Transact.tsx
index 9e32a9e..2ba3e96 100644
--- a/examples/production_react/src/components/Transact.tsx
+++ b/examples/production_react/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/production_react/src/utils/ellipseAddress.ts b/examples/production_react/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/examples/production_react/src/utils/ellipseAddress.ts
+++ b/examples/production_react/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }

From 0e89df805c34b4bbc8c30951849406605681a48d Mon Sep 17 00:00:00 2001
From: Hoang Dinh <d.conghoang@gmail.com>
Date: Wed, 27 Nov 2024 13:58:32 +1000
Subject: [PATCH 2/9] update template

---
 template_content/.env.template.jinja          |  2 +-
 template_content/package.json.jinja           | 10 ++--
 template_content/src/App.tsx                  | 51 +++++++++----------
 template_content/src/Home.tsx                 |  2 +-
 template_content/src/components/Account.tsx   |  2 +-
 .../src/components/ConnectWallet.tsx.jinja    | 36 ++++++-------
 .../src/components/Transact.tsx.jinja         |  8 +--
 template_content/src/utils/ellipseAddress.ts  |  4 +-
 8 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/template_content/.env.template.jinja b/template_content/.env.template.jinja
index db35ebe..a375e24 100644
--- a/template_content/.env.template.jinja
+++ b/template_content/.env.template.jinja
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN={{ algod_token }}
 VITE_ALGOD_SERVER={{ algod_server }}
 VITE_ALGOD_PORT={{ algod_port }}
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN={{ indexer_token }}
diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
index 774da6f..f38f75c 100644
--- a/template_content/package.json.jinja
+++ b/template_content/package.json.jinja
@@ -43,12 +43,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     {% if use_daisy_ui -%}
     "daisyui": "^4.0.0",
     {% endif -%}
diff --git a/template_content/src/App.tsx b/template_content/src/App.tsx
index 58feddf..5ed374e 100644
--- a/template_content/src/App.tsx
+++ b/template_content/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/template_content/src/Home.tsx b/template_content/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/template_content/src/Home.tsx
+++ b/template_content/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/template_content/src/components/Account.tsx b/template_content/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/template_content/src/components/Account.tsx
+++ b/template_content/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/template_content/src/components/ConnectWallet.tsx.jinja b/template_content/src/components/ConnectWallet.tsx.jinja
index 41b1711..0859533 100644
--- a/template_content/src/components/ConnectWallet.tsx.jinja
+++ b/template_content/src/components/ConnectWallet.tsx.jinja
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}{% if use_daisy_ui == false -%} style={{ '{{' }} display: openModal ? 'block' : 'none' {{ '}}' }}{% endif -%}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
-                    style={{ '{{' }} objectFit: 'contain', width: '30px', height: 'auto' {{ '}}' }}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
+                    style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/template_content/src/components/Transact.tsx.jinja b/template_content/src/components/Transact.tsx.jinja
index 2c96b04..27c6750 100644
--- a/template_content/src/components/Transact.tsx.jinja
+++ b/template_content/src/components/Transact.tsx.jinja
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/template_content/src/utils/ellipseAddress.ts b/template_content/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/template_content/src/utils/ellipseAddress.ts
+++ b/template_content/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }

From c1e84e5df1af0dd5e6629314ca1f41e7067e6f19 Mon Sep 17 00:00:00 2001
From: Hoang Dinh <d.conghoang@gmail.com>
Date: Wed, 27 Nov 2024 14:41:51 +1000
Subject: [PATCH 3/9] Revert "examples"

This reverts commit afdba2e302d01bea305f0751d6a236b49fd27e26.
---
 examples/production_react/package.json        | 25 ++++-----
 examples/production_react/src/App.tsx         | 51 ++++++++++---------
 examples/production_react/src/Home.tsx        |  2 +-
 .../src/components/Account.tsx                |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../src/components/Transact.tsx               |  8 +--
 .../src/utils/ellipseAddress.ts               |  4 +-
 7 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/examples/production_react/package.json b/examples/production_react/package.json
index 7581554..88c0ef2 100644
--- a/examples/production_react/package.json
+++ b/examples/production_react/package.json
@@ -13,35 +13,34 @@
   },
   "devDependencies": {
     "@algorandfoundation/algokit-client-generator": "^4.0.0",
-    "@playwright/test": "^1.35.0",
-    "@types/jest": "29.5.2",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "playwright": "^1.35.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "postcss": "^8.4.24",
     "tailwindcss": "3.3.2",
     "ts-jest": "^29.1.1",
+    "@types/jest": "29.5.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
+    "@playwright/test": "^1.35.0",
+    "playwright": "^1.35.0",
     "vite": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^7.0.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
-    "algosdk": "^3.0.0",
+    "@perawallet/connect": "^1.3.4",
+    "@txnlab/use-wallet": "^2.8.2",
+    "algosdk": ">=2.9.0 <3.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -56,8 +55,7 @@
     "playwright:test": "playwright test",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
-    "preview": "vite preview",
-    "check-types": "tsc --noEmit"
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -78,7 +76,6 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
+    "ws@>7.0.0 <7.5.9": "7.5.10"
   }
 }
diff --git a/examples/production_react/src/App.tsx b/examples/production_react/src/App.tsx
index 5ed374e..58feddf 100644
--- a/examples/production_react/src/App.tsx
+++ b/examples/production_react/src/App.tsx
@@ -1,26 +1,33 @@
-import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
+import { DeflyWalletConnect } from '@blockshake/defly-connect'
+import { DaffiWalletConnect } from '@daffiwallet/connect'
+import { PeraWalletConnect } from '@perawallet/connect'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
+import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let supportedWallets: SupportedWallet[]
-if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
+let providersArray: ProvidersArray
+if (import.meta.env.VITE_ALGOD_NETWORK === '') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  supportedWallets = [
+  providersArray = [
     {
-      id: WalletId.KMD,
-      options: {
-        baseServer: kmdConfig.server,
+      id: PROVIDER_ID.KMD,
+      clientOptions: {
+        wallet: kmdConfig.wallet,
+        password: kmdConfig.password,
+        host: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  supportedWallets = [
-    { id: WalletId.DEFLY },
-    { id: WalletId.PERA },
-    { id: WalletId.EXODUS },
+  providersArray = [
+    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
+    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
+    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
+    { id: PROVIDER_ID.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -29,24 +36,20 @@ if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletManager = new WalletManager({
-    wallets: supportedWallets,
-    defaultNetwork: algodConfig.network,
-    networks: {
-      [algodConfig.network]: {
-        name: algodConfig.network,
-        algod: {
-          baseServer: algodConfig.server,
-          port: algodConfig.port,
-          token: String(algodConfig.token),
-        },
-      },
+  const walletProviders = useInitializeProviders({
+    providers: providersArray,
+    nodeConfig: {
+      network: algodConfig.network,
+      nodeServer: algodConfig.server,
+      nodePort: String(algodConfig.port),
+      nodeToken: String(algodConfig.token),
     },
+    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider manager={walletManager}>
+      <WalletProvider value={walletProviders}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/production_react/src/Home.tsx b/examples/production_react/src/Home.tsx
index 1fd37a1..42128d8 100644
--- a/examples/production_react/src/Home.tsx
+++ b/examples/production_react/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet-react'
+import { useWallet } from '@txnlab/use-wallet'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/production_react/src/components/Account.tsx b/examples/production_react/src/components/Account.tsx
index 081ce47..8324312 100644
--- a/examples/production_react/src/components/Account.tsx
+++ b/examples/production_react/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet-react'
+import { useWallet } from '@txnlab/use-wallet'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/production_react/src/components/ConnectWallet.tsx b/examples/production_react/src/components/ConnectWallet.tsx
index 8ff01dc..c4225bc 100644
--- a/examples/production_react/src/components/ConnectWallet.tsx
+++ b/examples/production_react/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
+import { Provider, useWallet } from '@txnlab/use-wallet'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { wallets, activeAddress } = useWallet()
+  const { providers, activeAddress } = useWallet()
 
-  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
+  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            wallets?.map((wallet) => (
+            providers?.map((provider) => (
               <button
-                data-test-id={`${wallet.id}-connect`}
+                data-test-id={`${provider.metadata.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${wallet.id}`}
+                key={`provider-${provider.metadata.id}`}
                 onClick={() => {
-                  return wallet.connect()
+                  return provider.connect()
                 }}
               >
-                {!isKmd(wallet) && (
+                {!isKmd(provider) && (
                   <img
-                    alt={`wallet_icon_${wallet.id}`}
-                    src={wallet.metadata.icon}
+                    alt={`wallet_icon_${provider.metadata.id}`}
+                    src={provider.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
+                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={async () => {
-                if (wallets) {
-                  const activeWallet = wallets.find((w) => w.isActive)
-                  if (activeWallet) {
-                    await activeWallet.disconnect()
+              onClick={() => {
+                if (providers) {
+                  const activeProvider = providers.find((p) => p.isActive)
+                  if (activeProvider) {
+                    activeProvider.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('@txnlab/use-wallet:v3')
+                    localStorage.removeItem('txnlab-use-wallet')
                     window.location.reload()
                   }
                 }
diff --git a/examples/production_react/src/components/Transact.tsx b/examples/production_react/src/components/Transact.tsx
index 2ba3e96..9e32a9e 100644
--- a/examples/production_react/src/components/Transact.tsx
+++ b/examples/production_react/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet-react'
+import { useWallet } from '@txnlab/use-wallet'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { transactionSigner, activeAddress } = useWallet()
+  const { signer, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!transactionSigner || !activeAddress) {
+    if (!signer || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer: transactionSigner,
+        signer,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/production_react/src/utils/ellipseAddress.ts b/examples/production_react/src/utils/ellipseAddress.ts
index db97e48..542f46f 100644
--- a/examples/production_react/src/utils/ellipseAddress.ts
+++ b/examples/production_react/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address: string | null, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
+export function ellipseAddress(address = ``, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
 }

From f35800a548f62b7753491339d0ee2b0efacce7cd Mon Sep 17 00:00:00 2001
From: Hoang Dinh <d.conghoang@gmail.com>
Date: Wed, 27 Nov 2024 14:44:56 +1000
Subject: [PATCH 4/9] update template

---
 template_content/package.json.jinja                     | 3 ++-
 template_content/src/components/ConnectWallet.tsx.jinja | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
index f38f75c..3f24dde 100644
--- a/template_content/package.json.jinja
+++ b/template_content/package.json.jinja
@@ -99,6 +99,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/template_content/src/components/ConnectWallet.tsx.jinja b/template_content/src/components/ConnectWallet.tsx.jinja
index 0859533..1f86a40 100644
--- a/template_content/src/components/ConnectWallet.tsx.jinja
+++ b/template_content/src/components/ConnectWallet.tsx.jinja
@@ -38,7 +38,7 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
                   <img
                     alt={`wallet_icon_${wallet.id}`}
                     src={wallet.metadata.icon}
-                    style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
+                    style={{ '{{' }} objectFit: 'contain', width: '30px', height: 'auto' {{ '}}' }}
                   />
                 )}
                 <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>

From 1ff0bd4e7563ab46a220ec7e01e393b3f11b0ac5 Mon Sep 17 00:00:00 2001
From: Hoang Dinh <d.conghoang@gmail.com>
Date: Wed, 27 Nov 2024 15:04:20 +1000
Subject: [PATCH 5/9] generate the examples

---
 .../production_react_netlify/.env.template    |  2 +-
 .../production_react_netlify/package.json     | 13 ++---
 .../production_react_netlify/src/App.tsx      | 51 +++++++++----------
 .../production_react_netlify/src/Home.tsx     |  2 +-
 .../src/components/Account.tsx                |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../src/components/Transact.tsx               |  8 +--
 .../src/utils/ellipseAddress.ts               |  4 +-
 .../production_react_vercel/.env.template     |  2 +-
 .../production_react_vercel/package.json      | 13 ++---
 .../production_react_vercel/src/App.tsx       | 51 +++++++++----------
 .../production_react_vercel/src/Home.tsx      |  2 +-
 .../src/components/Account.tsx                |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../src/components/Transact.tsx               |  8 +--
 .../src/utils/ellipseAddress.ts               |  4 +-
 examples/production_react/.env.template       |  2 +-
 examples/production_react/package.json        | 13 ++---
 examples/production_react/src/App.tsx         | 51 +++++++++----------
 examples/production_react/src/Home.tsx        |  2 +-
 .../src/components/Account.tsx                |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../src/components/Transact.tsx               |  8 +--
 .../src/utils/ellipseAddress.ts               |  4 +-
 examples/starter_react/.env.template          |  2 +-
 examples/starter_react/package.json           | 13 ++---
 examples/starter_react/src/App.tsx            | 51 +++++++++----------
 examples/starter_react/src/Home.tsx           |  2 +-
 .../starter_react/src/components/Account.tsx  |  2 +-
 .../src/components/ConnectWallet.tsx          | 34 ++++++-------
 .../starter_react/src/components/Transact.tsx |  8 +--
 .../starter_react/src/utils/ellipseAddress.ts |  4 +-
 32 files changed, 228 insertions(+), 236 deletions(-)

diff --git a/examples/cloud_provider/production_react_netlify/.env.template b/examples/cloud_provider/production_react_netlify/.env.template
index e05d499..eb4b229 100644
--- a/examples/cloud_provider/production_react_netlify/.env.template
+++ b/examples/cloud_provider/production_react_netlify/.env.template
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/examples/cloud_provider/production_react_netlify/package.json b/examples/cloud_provider/production_react_netlify/package.json
index 19d21c3..10706dc 100644
--- a/examples/cloud_provider/production_react_netlify/package.json
+++ b/examples/cloud_provider/production_react_netlify/package.json
@@ -35,12 +35,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -76,6 +76,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/cloud_provider/production_react_netlify/src/App.tsx b/examples/cloud_provider/production_react_netlify/src/App.tsx
index 58feddf..5ed374e 100644
--- a/examples/cloud_provider/production_react_netlify/src/App.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/cloud_provider/production_react_netlify/src/Home.tsx b/examples/cloud_provider/production_react_netlify/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/examples/cloud_provider/production_react_netlify/src/Home.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/cloud_provider/production_react_netlify/src/components/Account.tsx b/examples/cloud_provider/production_react_netlify/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/examples/cloud_provider/production_react_netlify/src/components/Account.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx b/examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx
index c4225bc..8ff01dc 100644
--- a/examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx b/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx
index 9e32a9e..2ba3e96 100644
--- a/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts b/examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts
+++ b/examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }
diff --git a/examples/cloud_provider/production_react_vercel/.env.template b/examples/cloud_provider/production_react_vercel/.env.template
index e05d499..eb4b229 100644
--- a/examples/cloud_provider/production_react_vercel/.env.template
+++ b/examples/cloud_provider/production_react_vercel/.env.template
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/examples/cloud_provider/production_react_vercel/package.json b/examples/cloud_provider/production_react_vercel/package.json
index 5bc288c..1bf4373 100644
--- a/examples/cloud_provider/production_react_vercel/package.json
+++ b/examples/cloud_provider/production_react_vercel/package.json
@@ -35,12 +35,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -79,6 +79,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/cloud_provider/production_react_vercel/src/App.tsx b/examples/cloud_provider/production_react_vercel/src/App.tsx
index 58feddf..5ed374e 100644
--- a/examples/cloud_provider/production_react_vercel/src/App.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/cloud_provider/production_react_vercel/src/Home.tsx b/examples/cloud_provider/production_react_vercel/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/examples/cloud_provider/production_react_vercel/src/Home.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/cloud_provider/production_react_vercel/src/components/Account.tsx b/examples/cloud_provider/production_react_vercel/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/examples/cloud_provider/production_react_vercel/src/components/Account.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/cloud_provider/production_react_vercel/src/components/ConnectWallet.tsx b/examples/cloud_provider/production_react_vercel/src/components/ConnectWallet.tsx
index c4225bc..8ff01dc 100644
--- a/examples/cloud_provider/production_react_vercel/src/components/ConnectWallet.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/examples/cloud_provider/production_react_vercel/src/components/Transact.tsx b/examples/cloud_provider/production_react_vercel/src/components/Transact.tsx
index 9e32a9e..2ba3e96 100644
--- a/examples/cloud_provider/production_react_vercel/src/components/Transact.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/cloud_provider/production_react_vercel/src/utils/ellipseAddress.ts b/examples/cloud_provider/production_react_vercel/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/examples/cloud_provider/production_react_vercel/src/utils/ellipseAddress.ts
+++ b/examples/cloud_provider/production_react_vercel/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }
diff --git a/examples/production_react/.env.template b/examples/production_react/.env.template
index e05d499..eb4b229 100644
--- a/examples/production_react/.env.template
+++ b/examples/production_react/.env.template
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/examples/production_react/package.json b/examples/production_react/package.json
index 88c0ef2..91a680e 100644
--- a/examples/production_react/package.json
+++ b/examples/production_react/package.json
@@ -35,12 +35,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -76,6 +76,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/production_react/src/App.tsx b/examples/production_react/src/App.tsx
index 58feddf..5ed374e 100644
--- a/examples/production_react/src/App.tsx
+++ b/examples/production_react/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/production_react/src/Home.tsx b/examples/production_react/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/examples/production_react/src/Home.tsx
+++ b/examples/production_react/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/production_react/src/components/Account.tsx b/examples/production_react/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/examples/production_react/src/components/Account.tsx
+++ b/examples/production_react/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/production_react/src/components/ConnectWallet.tsx b/examples/production_react/src/components/ConnectWallet.tsx
index c4225bc..8ff01dc 100644
--- a/examples/production_react/src/components/ConnectWallet.tsx
+++ b/examples/production_react/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/examples/production_react/src/components/Transact.tsx b/examples/production_react/src/components/Transact.tsx
index 9e32a9e..2ba3e96 100644
--- a/examples/production_react/src/components/Transact.tsx
+++ b/examples/production_react/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/production_react/src/utils/ellipseAddress.ts b/examples/production_react/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/examples/production_react/src/utils/ellipseAddress.ts
+++ b/examples/production_react/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }
diff --git a/examples/starter_react/.env.template b/examples/starter_react/.env.template
index e05d499..eb4b229 100644
--- a/examples/starter_react/.env.template
+++ b/examples/starter_react/.env.template
@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
diff --git a/examples/starter_react/package.json b/examples/starter_react/package.json
index 542c011..35237d6 100644
--- a/examples/starter_react/package.json
+++ b/examples/starter_react/package.json
@@ -24,12 +24,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
+    "@algorandfoundation/algokit-utils": "^8.0.0",
     "@blockshake/defly-connect": "^1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.4",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@perawallet/connect": "^1.3.5",
+    "@txnlab/use-wallet": "^4.0.0-beta.2",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "algosdk": "^3.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -59,6 +59,7 @@
     ]
   },
   "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10"
+    "ws@>7.0.0 <7.5.9": "7.5.10",
+    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/starter_react/src/App.tsx b/examples/starter_react/src/App.tsx
index 58feddf..5ed374e 100644
--- a/examples/starter_react/src/App.tsx
+++ b/examples/starter_react/src/App.tsx
@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,24 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        name: algodConfig.network,
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>
diff --git a/examples/starter_react/src/Home.tsx b/examples/starter_react/src/Home.tsx
index 42128d8..1fd37a1 100644
--- a/examples/starter_react/src/Home.tsx
+++ b/examples/starter_react/src/Home.tsx
@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
diff --git a/examples/starter_react/src/components/Account.tsx b/examples/starter_react/src/components/Account.tsx
index 8324312..081ce47 100644
--- a/examples/starter_react/src/components/Account.tsx
+++ b/examples/starter_react/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
diff --git a/examples/starter_react/src/components/ConnectWallet.tsx b/examples/starter_react/src/components/ConnectWallet.tsx
index 62ee609..8814cd5 100644
--- a/examples/starter_react/src/components/ConnectWallet.tsx
+++ b/examples/starter_react/src/components/ConnectWallet.tsx
@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}style={{ display: openModal ? 'block' : 'none' }}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }
diff --git a/examples/starter_react/src/components/Transact.tsx b/examples/starter_react/src/components/Transact.tsx
index 760040b..59d7cdd 100644
--- a/examples/starter_react/src/components/Transact.tsx
+++ b/examples/starter_react/src/components/Transact.tsx
@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,12 +18,12 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
@@ -31,7 +31,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),
diff --git a/examples/starter_react/src/utils/ellipseAddress.ts b/examples/starter_react/src/utils/ellipseAddress.ts
index 542f46f..db97e48 100644
--- a/examples/starter_react/src/utils/ellipseAddress.ts
+++ b/examples/starter_react/src/utils/ellipseAddress.ts
@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }

From 8c1b914a159a119553ddaa435133d708bb7dd8ac Mon Sep 17 00:00:00 2001
From: Hoang Dinh <patrick.dinh@makerx.com.au>
Date: Tue, 14 Jan 2025 11:01:45 +1000
Subject: [PATCH 6/9] update use-wallet beta

---
 template_content/package.json.jinja | 12 ++++--------
 template_content/src/App.tsx        |  3 +++
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
index 3f24dde..9b24773 100644
--- a/template_content/package.json.jinja
+++ b/template_content/package.json.jinja
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-utils": "^8.0.0",
-    "@blockshake/defly-connect": "^1.1.6",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0-beta.4",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
     "algosdk": "^3.0.0",
     {% if use_daisy_ui -%}
     "daisyui": "^4.0.0",
@@ -97,9 +97,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/template_content/src/App.tsx b/template_content/src/App.tsx
index 5ed374e..8b17a01 100644
--- a/template_content/src/App.tsx
+++ b/template_content/src/App.tsx
@@ -42,6 +42,9 @@ export default function App() {
         },
       },
     },
+    options: {
+      resetNetwork: true,
+    },
   })
 
   return (

From 47c9c7bc5a7328ee5530e80651c66e13eed1a49e Mon Sep 17 00:00:00 2001
From: Hoang Dinh <patrick.dinh@makerx.com.au>
Date: Tue, 14 Jan 2025 15:03:25 +1000
Subject: [PATCH 7/9] run examples

---
 .../production_react_netlify/package.json            | 12 ++++--------
 .../production_react_netlify/src/App.tsx             |  3 +++
 .../production_react_vercel/package.json             | 12 ++++--------
 .../production_react_vercel/src/App.tsx              |  3 +++
 examples/production_react/package.json               | 12 ++++--------
 examples/production_react/src/App.tsx                |  3 +++
 examples/starter_react/package.json                  | 12 ++++--------
 examples/starter_react/src/App.tsx                   |  3 +++
 8 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/examples/cloud_provider/production_react_netlify/package.json b/examples/cloud_provider/production_react_netlify/package.json
index 10706dc..3fe7c77 100644
--- a/examples/cloud_provider/production_react_netlify/package.json
+++ b/examples/cloud_provider/production_react_netlify/package.json
@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-utils": "^8.0.0",
-    "@blockshake/defly-connect": "^1.1.6",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0-beta.4",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
@@ -74,9 +74,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/cloud_provider/production_react_netlify/src/App.tsx b/examples/cloud_provider/production_react_netlify/src/App.tsx
index 5ed374e..8b17a01 100644
--- a/examples/cloud_provider/production_react_netlify/src/App.tsx
+++ b/examples/cloud_provider/production_react_netlify/src/App.tsx
@@ -42,6 +42,9 @@ export default function App() {
         },
       },
     },
+    options: {
+      resetNetwork: true,
+    },
   })
 
   return (
diff --git a/examples/cloud_provider/production_react_vercel/package.json b/examples/cloud_provider/production_react_vercel/package.json
index 1bf4373..5060b38 100644
--- a/examples/cloud_provider/production_react_vercel/package.json
+++ b/examples/cloud_provider/production_react_vercel/package.json
@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-utils": "^8.0.0",
-    "@blockshake/defly-connect": "^1.1.6",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0-beta.4",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
@@ -77,9 +77,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/cloud_provider/production_react_vercel/src/App.tsx b/examples/cloud_provider/production_react_vercel/src/App.tsx
index 5ed374e..8b17a01 100644
--- a/examples/cloud_provider/production_react_vercel/src/App.tsx
+++ b/examples/cloud_provider/production_react_vercel/src/App.tsx
@@ -42,6 +42,9 @@ export default function App() {
         },
       },
     },
+    options: {
+      resetNetwork: true,
+    },
   })
 
   return (
diff --git a/examples/production_react/package.json b/examples/production_react/package.json
index 91a680e..33855b4 100644
--- a/examples/production_react/package.json
+++ b/examples/production_react/package.json
@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-utils": "^8.0.0",
-    "@blockshake/defly-connect": "^1.1.6",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0-beta.4",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
@@ -74,9 +74,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/production_react/src/App.tsx b/examples/production_react/src/App.tsx
index 5ed374e..8b17a01 100644
--- a/examples/production_react/src/App.tsx
+++ b/examples/production_react/src/App.tsx
@@ -42,6 +42,9 @@ export default function App() {
         },
       },
     },
+    options: {
+      resetNetwork: true,
+    },
   })
 
   return (
diff --git a/examples/starter_react/package.json b/examples/starter_react/package.json
index 35237d6..ce16ded 100644
--- a/examples/starter_react/package.json
+++ b/examples/starter_react/package.json
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-utils": "^8.0.0",
-    "@blockshake/defly-connect": "^1.1.6",
-    "@perawallet/connect": "^1.3.5",
-    "@txnlab/use-wallet": "^4.0.0-beta.2",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.2",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0-beta.4",
+    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
     "algosdk": "^3.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -57,9 +57,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "overrides": {
-    "ws@>7.0.0 <7.5.9": "7.5.10",
-    "algosdk@<3.0.0": "3.0.0"
   }
 }
diff --git a/examples/starter_react/src/App.tsx b/examples/starter_react/src/App.tsx
index 5ed374e..8b17a01 100644
--- a/examples/starter_react/src/App.tsx
+++ b/examples/starter_react/src/App.tsx
@@ -42,6 +42,9 @@ export default function App() {
         },
       },
     },
+    options: {
+      resetNetwork: true,
+    },
   })
 
   return (

From 4eb2670d612fda95c637f82431227b941992515c Mon Sep 17 00:00:00 2001
From: Neil Campbell <neil.campbell@makerx.com.au>
Date: Sat, 15 Feb 2025 22:53:38 +0800
Subject: [PATCH 8/9] chore: update to use-wallet@4

---
 .../cloud_provider/production_react_netlify/package.json  | 8 ++++----
 .../cloud_provider/production_react_vercel/package.json   | 8 ++++----
 examples/production_react/package.json                    | 8 ++++----
 examples/starter_react/package.json                       | 8 ++++----
 template_content/package.json.jinja                       | 8 ++++----
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/examples/cloud_provider/production_react_netlify/package.json b/examples/cloud_provider/production_react_netlify/package.json
index 11e225b..ea729b2 100644
--- a/examples/cloud_provider/production_react_netlify/package.json
+++ b/examples/cloud_provider/production_react_netlify/package.json
@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -35,11 +35,11 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
     "@blockshake/defly-connect": "^1.2.1",
     "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0-beta.4",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
diff --git a/examples/cloud_provider/production_react_vercel/package.json b/examples/cloud_provider/production_react_vercel/package.json
index 08f8041..35665c8 100644
--- a/examples/cloud_provider/production_react_vercel/package.json
+++ b/examples/cloud_provider/production_react_vercel/package.json
@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -35,11 +35,11 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
     "@blockshake/defly-connect": "^1.2.1",
     "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0-beta.4",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
diff --git a/examples/production_react/package.json b/examples/production_react/package.json
index 12e56d8..c7c3e69 100644
--- a/examples/production_react/package.json
+++ b/examples/production_react/package.json
@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -35,11 +35,11 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
     "@blockshake/defly-connect": "^1.2.1",
     "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0-beta.4",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
     "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
diff --git a/examples/starter_react/package.json b/examples/starter_react/package.json
index c9e85b8..19b4e07 100644
--- a/examples/starter_react/package.json
+++ b/examples/starter_react/package.json
@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -24,11 +24,11 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
     "@blockshake/defly-connect": "^1.2.1",
     "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0-beta.4",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
     "algosdk": "^3.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
index 2146714..f63cb40 100644
--- a/template_content/package.json.jinja
+++ b/template_content/package.json.jinja
@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -43,11 +43,11 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^8.0.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
     "@blockshake/defly-connect": "^1.2.1",
     "@perawallet/connect": "^1.4.1",
-    "@txnlab/use-wallet": "^4.0.0-beta.4",
-    "@txnlab/use-wallet-react": "^4.0.0-beta.4",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
     "algosdk": "^3.0.0",
     {% if use_daisy_ui -%}
     "daisyui": "^4.0.0",

From 6be83d55a4680bc0491c39e7535a8f4efc2be1f0 Mon Sep 17 00:00:00 2001
From: Neil Campbell <neil.campbell@makerx.com.au>
Date: Sat, 15 Feb 2025 23:08:30 +0800
Subject: [PATCH 9/9] fix: correct playwright test

---
 .../production_react_netlify/tests/example.spec.ts            | 4 ++--
 .../production_react_vercel/tests/example.spec.ts             | 4 ++--
 examples/production_react/tests/example.spec.ts               | 4 ++--
 .../{% if use_playwright %}tests{% endif %}/example.spec.ts   | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/cloud_provider/production_react_netlify/tests/example.spec.ts b/examples/cloud_provider/production_react_netlify/tests/example.spec.ts
index d6909a3..a62aae4 100644
--- a/examples/cloud_provider/production_react_netlify/tests/example.spec.ts
+++ b/examples/cloud_provider/production_react_netlify/tests/example.spec.ts
@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test'
 const localnet = algorandFixture()
 
 test.beforeEach(async ({ page }) => {
-  await localnet.beforeEach()
+  await localnet.newScope()
   await page.goto('http://localhost:5173/')
 })
 
@@ -30,7 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.toString())
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent
diff --git a/examples/cloud_provider/production_react_vercel/tests/example.spec.ts b/examples/cloud_provider/production_react_vercel/tests/example.spec.ts
index d6909a3..a62aae4 100644
--- a/examples/cloud_provider/production_react_vercel/tests/example.spec.ts
+++ b/examples/cloud_provider/production_react_vercel/tests/example.spec.ts
@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test'
 const localnet = algorandFixture()
 
 test.beforeEach(async ({ page }) => {
-  await localnet.beforeEach()
+  await localnet.newScope()
   await page.goto('http://localhost:5173/')
 })
 
@@ -30,7 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.toString())
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent
diff --git a/examples/production_react/tests/example.spec.ts b/examples/production_react/tests/example.spec.ts
index d6909a3..a62aae4 100644
--- a/examples/production_react/tests/example.spec.ts
+++ b/examples/production_react/tests/example.spec.ts
@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test'
 const localnet = algorandFixture()
 
 test.beforeEach(async ({ page }) => {
-  await localnet.beforeEach()
+  await localnet.newScope()
   await page.goto('http://localhost:5173/')
 })
 
@@ -30,7 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.toString())
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent
diff --git a/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts b/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts
index d6909a3..a62aae4 100644
--- a/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts	
+++ b/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts	
@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test'
 const localnet = algorandFixture()
 
 test.beforeEach(async ({ page }) => {
-  await localnet.beforeEach()
+  await localnet.newScope()
   await page.goto('http://localhost:5173/')
 })
 
@@ -30,7 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.toString())
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent