From ef07c4df30bf6dfb251b072fe944aeb77e0de8c9 Mon Sep 17 00:00:00 2001
From: Doug Richar <drichar@gmail.com>
Date: Wed, 19 Jun 2024 03:37:23 -0400
Subject: [PATCH] feat(core): switching networks (#187)

* feat(react): set algodClient to a useState variable

This also refactors the `useWallet` hook so it directly accesses `WalletContext` (in place of the `useWalletManager` hook).

Both modules are now in a single file - src/index.tsx

* feat(vue): reactive algodClient

* feat(solid): reactive algodClient

* fix(solid): algodClient type

* fix(vue): ensure algodClient is a defined computed value

* fix(solid): fixes activeNetwork reactivity

* feat: add network switcher to example apps

* fix: "Set Active" button visibility in SolidJS example

* feat: disconnect all wallets when switching networks

* test: add/update tests for new setActiveNetwork logic

* test: fix failing tests

* refactor(solid): combine into one file
---
 examples/nextjs/src/app/Connect.module.css    |  30 +++
 examples/nextjs/src/app/Connect.tsx           |  40 +++-
 examples/nuxt/components/Connect.vue          |  78 +++++++-
 examples/react-ts/src/App.css                 |  30 +++
 examples/react-ts/src/Connect.tsx             |  40 +++-
 examples/solid-ts/src/App.css                 |  30 +++
 examples/solid-ts/src/Connect.tsx             |  51 ++++-
 examples/vanilla-ts/src/ActiveNetwork.ts      |  57 ++++++
 examples/vanilla-ts/src/main.ts               |   4 +
 examples/vanilla-ts/src/style.css             |  30 +++
 examples/vue-ts/src/components/Connect.vue    |  73 +++++++-
 .../use-wallet-react/src/WalletProvider.tsx   |  42 -----
 .../src/__tests__/WalletProvider.test.tsx     |  52 ------
 .../{useWallet.test.tsx => index.test.tsx}    | 142 ++++++++++++--
 packages/use-wallet-react/src/index.ts        |   3 -
 .../src/{useWallet.ts => index.tsx}           |  90 +++++++--
 packages/use-wallet-react/tsup.config.ts      |   2 +-
 .../use-wallet-solid/src/WalletProvider.tsx   |  31 ---
 .../src/__tests__/WalletProvider.test.tsx     |  53 ------
 .../{useWallet.test.tsx => index.test.tsx}    | 139 ++++++++++++--
 packages/use-wallet-solid/src/index.tsx       | 152 ++++++++++++++-
 packages/use-wallet-solid/src/useWallet.ts    | 109 -----------
 .../src/__tests__/useWallet.test.ts           |  98 +++++++---
 .../src/__tests__/walletManagerPlugin.test.ts | 109 ++++++++++-
 packages/use-wallet-vue/src/useWallet.ts      |  49 ++++-
 .../use-wallet-vue/src/walletManagerPlugin.ts |  11 ++
 .../use-wallet/src/__tests__/manager.test.ts  | 176 ++++++++++++++++--
 packages/use-wallet/src/manager.ts            |  18 +-
 28 files changed, 1323 insertions(+), 416 deletions(-)
 create mode 100644 examples/vanilla-ts/src/ActiveNetwork.ts
 delete mode 100644 packages/use-wallet-react/src/WalletProvider.tsx
 delete mode 100644 packages/use-wallet-react/src/__tests__/WalletProvider.test.tsx
 rename packages/use-wallet-react/src/__tests__/{useWallet.test.tsx => index.test.tsx} (72%)
 delete mode 100644 packages/use-wallet-react/src/index.ts
 rename packages/use-wallet-react/src/{useWallet.ts => index.tsx} (54%)
 delete mode 100644 packages/use-wallet-solid/src/WalletProvider.tsx
 delete mode 100644 packages/use-wallet-solid/src/__tests__/WalletProvider.test.tsx
 rename packages/use-wallet-solid/src/__tests__/{useWallet.test.tsx => index.test.tsx} (80%)
 delete mode 100644 packages/use-wallet-solid/src/useWallet.ts

diff --git a/examples/nextjs/src/app/Connect.module.css b/examples/nextjs/src/app/Connect.module.css
index 45a13db9..418469c1 100644
--- a/examples/nextjs/src/app/Connect.module.css
+++ b/examples/nextjs/src/app/Connect.module.css
@@ -1,3 +1,33 @@
+.networkGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025));
+  border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.networkGroup h4 {
+  margin: 0;
+}
+
+.networkGroup .activeNetwork {
+  text-transform: capitalize;
+}
+
+.networkButtons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .walletGroup {
   display: flex;
   flex-direction: column;
diff --git a/examples/nextjs/src/app/Connect.tsx b/examples/nextjs/src/app/Connect.tsx
index 00df9a1b..0419480f 100644
--- a/examples/nextjs/src/app/Connect.tsx
+++ b/examples/nextjs/src/app/Connect.tsx
@@ -1,12 +1,19 @@
 'use client'
 
-import { WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react'
+import { NetworkId, WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react'
 import algosdk from 'algosdk'
 import * as React from 'react'
 import styles from './Connect.module.css'
 
 export function Connect() {
-  const { algodClient, activeAddress, transactionSigner, wallets } = useWallet()
+  const {
+    algodClient,
+    activeAddress,
+    activeNetwork,
+    setActiveNetwork,
+    transactionSigner,
+    wallets
+  } = useWallet()
 
   const [isSending, setIsSending] = React.useState(false)
   const [magicEmail, setMagicEmail] = React.useState('')
@@ -73,6 +80,35 @@ export function Connect() {
 
   return (
     <div>
+      <div className={styles.networkGroup}>
+        <h4>
+          Current Network: <span className={styles.activeNetwork}>{activeNetwork}</span>
+        </h4>
+        <div className={styles.networkButtons}>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.BETANET)}
+            disabled={activeNetwork === NetworkId.BETANET}
+          >
+            Set to Betanet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.TESTNET)}
+            disabled={activeNetwork === NetworkId.TESTNET}
+          >
+            Set to Testnet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.MAINNET)}
+            disabled={activeNetwork === NetworkId.MAINNET}
+          >
+            Set to Mainnet
+          </button>
+        </div>
+      </div>
+
       {wallets.map((wallet) => (
         <div key={wallet.id} className={styles.walletGroup}>
           <h4 className={styles.walletName} data-active={wallet.isActive}>
diff --git a/examples/nuxt/components/Connect.vue b/examples/nuxt/components/Connect.vue
index bd9535f9..daac3a9a 100644
--- a/examples/nuxt/components/Connect.vue
+++ b/examples/nuxt/components/Connect.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-vue'
+import { NetworkId, WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-vue'
 import algosdk from 'algosdk'
 import { ref } from 'vue'
 
-const { algodClient, transactionSigner, wallets: walletsRef } = useWallet()
+const {
+  algodClient,
+  activeNetwork,
+  setActiveNetwork,
+  transactionSigner,
+  wallets: walletsRef
+} = useWallet()
 const wallets = computed(() => walletsRef.value)
 const isSending = ref(false)
 const magicEmail = ref('')
@@ -35,7 +41,7 @@ const sendTransaction = async (wallet: Wallet) => {
 
   try {
     const atc = new algosdk.AtomicTransactionComposer()
-    const suggestedParams = await algodClient.getTransactionParams().do()
+    const suggestedParams = await algodClient.value.getTransactionParams().do()
 
     const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
       from: wallet.activeAccount.address,
@@ -48,7 +54,7 @@ const sendTransaction = async (wallet: Wallet) => {
 
     console.info(`[App] Sending transaction...`, transaction)
 
-    const result = await atc.execute(algodClient, 4)
+    const result = await atc.execute(algodClient.value, 4)
 
     console.info(`[App] ✅ Successfully sent transaction!`, {
       confirmedRound: result.confirmedRound,
@@ -64,6 +70,35 @@ const sendTransaction = async (wallet: Wallet) => {
 
 <template>
   <section>
+    <div className="network-group">
+      <h4>
+        Current Network: <span className="active-network">{{ activeNetwork }}</span>
+      </h4>
+      <div className="network-buttons">
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.BETANET)"
+          :disabled="activeNetwork === NetworkId.BETANET"
+        >
+          Set to Betanet
+        </button>
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.TESTNET)"
+          :disabled="activeNetwork === NetworkId.TESTNET"
+        >
+          Set to Testnet
+        </button>
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.MAINNET)"
+          :disabled="activeNetwork === NetworkId.MAINNET"
+        >
+          Set to Mainnet
+        </button>
+      </div>
+    </div>
+
     <div v-for="wallet in wallets" :key="wallet.id" class="wallet-group">
       <h4 :data-active="wallet.isActive">
         {{ wallet.metadata.name }}
@@ -123,6 +158,36 @@ section {
   line-height: 1.5;
 }
 
+.network-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: rgba(255, 255, 255, 0.025);
+  border-color: rgba(255, 255, 255, 0.1);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.network-group h4 {
+  margin: 0;
+}
+
+.network-group .active-network {
+  text-transform: capitalize;
+}
+
+.network-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .wallet-group {
   display: flex;
   flex-direction: column;
@@ -249,5 +314,10 @@ select {
     opacity: 0.75;
     color: rgba(16, 16, 16, 0.3);
   }
+
+  .network-group {
+    background-color: rgba(0, 0, 0, 0.025);
+    border-color: rgba(0, 0, 0, 0.1);
+  }
 }
 </style>
diff --git a/examples/react-ts/src/App.css b/examples/react-ts/src/App.css
index 460005ec..a0880fd2 100644
--- a/examples/react-ts/src/App.css
+++ b/examples/react-ts/src/App.css
@@ -18,6 +18,36 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.network-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025));
+  border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.network-group h4 {
+  margin: 0;
+}
+
+.network-group .active-network {
+  text-transform: capitalize;
+}
+
+.network-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .wallet-group {
   display: flex;
   flex-direction: column;
diff --git a/examples/react-ts/src/Connect.tsx b/examples/react-ts/src/Connect.tsx
index 53de4856..d93e564f 100644
--- a/examples/react-ts/src/Connect.tsx
+++ b/examples/react-ts/src/Connect.tsx
@@ -1,9 +1,16 @@
-import { WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react'
+import { NetworkId, WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-react'
 import algosdk from 'algosdk'
 import * as React from 'react'
 
 export function Connect() {
-  const { algodClient, activeAddress, transactionSigner, wallets } = useWallet()
+  const {
+    algodClient,
+    activeAddress,
+    activeNetwork,
+    setActiveNetwork,
+    transactionSigner,
+    wallets
+  } = useWallet()
 
   const [isSending, setIsSending] = React.useState(false)
   const [magicEmail, setMagicEmail] = React.useState('')
@@ -70,6 +77,35 @@ export function Connect() {
 
   return (
     <div>
+      <div className="network-group">
+        <h4>
+          Current Network: <span className="active-network">{activeNetwork}</span>
+        </h4>
+        <div className="network-buttons">
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.BETANET)}
+            disabled={activeNetwork === NetworkId.BETANET}
+          >
+            Set to Betanet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.TESTNET)}
+            disabled={activeNetwork === NetworkId.TESTNET}
+          >
+            Set to Testnet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.MAINNET)}
+            disabled={activeNetwork === NetworkId.MAINNET}
+          >
+            Set to Mainnet
+          </button>
+        </div>
+      </div>
+
       {wallets.map((wallet) => (
         <div key={wallet.id} className="wallet-group">
           <h4>
diff --git a/examples/solid-ts/src/App.css b/examples/solid-ts/src/App.css
index 99cd9779..36aa1a60 100644
--- a/examples/solid-ts/src/App.css
+++ b/examples/solid-ts/src/App.css
@@ -18,6 +18,36 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.network-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025));
+  border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.network-group h4 {
+  margin: 0;
+}
+
+.network-group .active-network {
+  text-transform: capitalize;
+}
+
+.network-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .wallet-group {
   display: flex;
   flex-direction: column;
diff --git a/examples/solid-ts/src/Connect.tsx b/examples/solid-ts/src/Connect.tsx
index 23d80d38..34bd87c6 100644
--- a/examples/solid-ts/src/Connect.tsx
+++ b/examples/solid-ts/src/Connect.tsx
@@ -1,4 +1,4 @@
-import { useWallet, type BaseWallet, WalletId } from '@txnlab/use-wallet-solid'
+import { useWallet, type BaseWallet, WalletId, NetworkId } from '@txnlab/use-wallet-solid'
 import algosdk from 'algosdk'
 import { For, Show, createSignal } from 'solid-js'
 
@@ -9,6 +9,8 @@ export function Connect() {
   const {
     algodClient,
     activeAddress,
+    activeNetwork,
+    setActiveNetwork,
     activeWalletId,
     isWalletActive,
     isWalletConnected,
@@ -79,6 +81,35 @@ export function Connect() {
 
   return (
     <div>
+      <div class="network-group">
+        <h4>
+          Current Network: <span class="active-network">{activeNetwork()}</span>
+        </h4>
+        <div class="network-buttons">
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.BETANET)}
+            disabled={activeNetwork() === NetworkId.BETANET}
+          >
+            Set to Betanet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.TESTNET)}
+            disabled={activeNetwork() === NetworkId.TESTNET}
+          >
+            Set to Testnet
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveNetwork(NetworkId.MAINNET)}
+            disabled={activeNetwork() === NetworkId.MAINNET}
+          >
+            Set to Mainnet
+          </button>
+        </div>
+      </div>
+
       <For each={wallets}>
         {(wallet) => (
           <div class="wallet-group">
@@ -103,18 +134,20 @@ export function Connect() {
               >
                 Disconnect
               </button>
-              <Show when={wallet.id === activeWalletId()}>
+              <Show when={isWalletActive(wallet.id)}>
                 <button type="button" onClick={sendTransaction} disabled={isSending()}>
                   {isSending() ? 'Sending Transaction...' : 'Send Transaction'}
                 </button>
               </Show>
-              <button
-                type="button"
-                onClick={() => wallet.setActive()}
-                disabled={isWalletActive(wallet.id) || !isWalletConnected(wallet.id)}
-              >
-                Set Active
-              </button>
+              <Show when={!isWalletActive(wallet.id)}>
+                <button
+                  type="button"
+                  onClick={() => wallet.setActive()}
+                  disabled={!isWalletConnected(wallet.id)}
+                >
+                  Set Active
+                </button>
+              </Show>
             </div>
 
             <Show when={isMagicLink(wallet)}>
diff --git a/examples/vanilla-ts/src/ActiveNetwork.ts b/examples/vanilla-ts/src/ActiveNetwork.ts
new file mode 100644
index 00000000..0145a895
--- /dev/null
+++ b/examples/vanilla-ts/src/ActiveNetwork.ts
@@ -0,0 +1,57 @@
+import { NetworkId, WalletManager } from '@txnlab/use-wallet'
+
+export class ActiveNetwork {
+  manager: WalletManager
+  element: HTMLElement
+
+  constructor(manager: WalletManager) {
+    this.manager = manager
+    this.element = document.createElement('div')
+    this.element.className = 'network-group'
+    this.render()
+    this.addEventListeners()
+  }
+
+  setActiveNetwork = (network: NetworkId) => {
+    this.manager.setActiveNetwork(network)
+    this.render()
+  }
+
+  render() {
+    const activeNetwork = this.manager.activeNetwork
+
+    this.element.innerHTML = `
+      <h4>
+        Current Network: <span class="active-network">${activeNetwork}</span>
+      </h4>
+      <div class="network-buttons">
+        <button type="button" id="set-betanet" ${activeNetwork === NetworkId.BETANET ? 'disabled' : ''}>
+          Set to Betanet
+        </button>
+        <button type="button" id="set-testnet" ${activeNetwork === NetworkId.TESTNET ? 'disabled' : ''}>
+          Set to Testnet
+        </button>
+        <button type="button" id="set-mainnet" ${activeNetwork === NetworkId.MAINNET ? 'disabled' : ''}>
+          Set to Mainnet
+        </button>
+      </div>
+    `
+  }
+
+  addEventListeners() {
+    this.element.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLButtonElement
+      if (target.id === 'set-betanet') {
+        this.setActiveNetwork(NetworkId.BETANET)
+      } else if (target.id === 'set-testnet') {
+        this.setActiveNetwork(NetworkId.TESTNET)
+      } else if (target.id === 'set-mainnet') {
+        this.setActiveNetwork(NetworkId.MAINNET)
+      }
+    })
+  }
+
+  destroy() {
+    this.element.removeEventListener('click', this.addEventListeners)
+  }
+}
diff --git a/examples/vanilla-ts/src/main.ts b/examples/vanilla-ts/src/main.ts
index 39b75cb1..c6157f49 100644
--- a/examples/vanilla-ts/src/main.ts
+++ b/examples/vanilla-ts/src/main.ts
@@ -2,6 +2,7 @@ import './style.css'
 import typescriptLogo from './typescript.svg'
 import viteLogo from '/vite.svg'
 import { NetworkId, WalletId, WalletManager } from '@txnlab/use-wallet'
+import { ActiveNetwork } from './ActiveNetwork'
 import { WalletComponent } from './WalletComponent'
 
 const walletManager = new WalletManager({
@@ -44,6 +45,9 @@ appDiv!.innerHTML = `
   </div>
 `
 
+const activeNetwork = new ActiveNetwork(walletManager)
+appDiv?.appendChild(activeNetwork.element)
+
 const walletComponents = walletManager.wallets.map(
   (wallet) => new WalletComponent(wallet, walletManager)
 )
diff --git a/examples/vanilla-ts/src/style.css b/examples/vanilla-ts/src/style.css
index 1c9b618c..27a96904 100644
--- a/examples/vanilla-ts/src/style.css
+++ b/examples/vanilla-ts/src/style.css
@@ -113,6 +113,36 @@ select {
   appearance: none !important;
 }
 
+.network-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025));
+  border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.network-group h4 {
+  margin: 0;
+}
+
+.network-group .active-network {
+  text-transform: capitalize;
+}
+
+.network-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .wallet-group {
   display: flex;
   flex-direction: column;
diff --git a/examples/vue-ts/src/components/Connect.vue b/examples/vue-ts/src/components/Connect.vue
index 16ecde6a..011b8b3c 100644
--- a/examples/vue-ts/src/components/Connect.vue
+++ b/examples/vue-ts/src/components/Connect.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-vue'
+import { NetworkId, WalletId, useWallet, type Wallet } from '@txnlab/use-wallet-vue'
 import algosdk from 'algosdk'
 import { ref } from 'vue'
 
-const { algodClient, transactionSigner, wallets } = useWallet()
+const { algodClient, activeNetwork, setActiveNetwork, transactionSigner, wallets } = useWallet()
 const isSending = ref(false)
 const magicEmail = ref('')
 
@@ -34,7 +34,7 @@ const sendTransaction = async (wallet: Wallet) => {
 
   try {
     const atc = new algosdk.AtomicTransactionComposer()
-    const suggestedParams = await algodClient.getTransactionParams().do()
+    const suggestedParams = await algodClient.value.getTransactionParams().do()
 
     const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
       from: wallet.activeAccount.address,
@@ -47,7 +47,7 @@ const sendTransaction = async (wallet: Wallet) => {
 
     console.info(`[App] Sending transaction...`, transaction)
 
-    const result = await atc.execute(algodClient, 4)
+    const result = await atc.execute(algodClient.value, 4)
 
     console.info(`[App] ✅ Successfully sent transaction!`, {
       confirmedRound: result.confirmedRound,
@@ -63,6 +63,35 @@ const sendTransaction = async (wallet: Wallet) => {
 
 <template>
   <div>
+    <div className="network-group">
+      <h4>
+        Current Network: <span className="active-network">{{ activeNetwork }}</span>
+      </h4>
+      <div className="network-buttons">
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.BETANET)"
+          :disabled="activeNetwork === NetworkId.BETANET"
+        >
+          Set to Betanet
+        </button>
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.TESTNET)"
+          :disabled="activeNetwork === NetworkId.TESTNET"
+        >
+          Set to Testnet
+        </button>
+        <button
+          type="button"
+          @click="() => setActiveNetwork(NetworkId.MAINNET)"
+          :disabled="activeNetwork === NetworkId.MAINNET"
+        >
+          Set to Mainnet
+        </button>
+      </div>
+    </div>
+
     <div v-for="wallet in wallets" :key="wallet.id" class="wallet-group">
       <h4>{{ wallet.metadata.name }} <span v-if="wallet.isActive">[active]</span></h4>
       <div class="wallet-buttons">
@@ -112,6 +141,36 @@ const sendTransaction = async (wallet: Wallet) => {
 </template>
 
 <style scoped>
+.network-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin: 2em;
+  padding: 2em;
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.025));
+  border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 8px;
+}
+
+.network-group h4 {
+  margin: 0;
+}
+
+.network-group .active-network {
+  text-transform: capitalize;
+}
+
+.network-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 .wallet-group {
   display: flex;
   flex-direction: column;
@@ -152,4 +211,10 @@ const sendTransaction = async (wallet: Wallet) => {
   opacity: 0.75;
   color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
 }
+
+@media (prefers-color-scheme: light) {
+  .network-group {
+    border-color: #f9f9f9;
+  }
+}
 </style>
diff --git a/packages/use-wallet-react/src/WalletProvider.tsx b/packages/use-wallet-react/src/WalletProvider.tsx
deleted file mode 100644
index 74df1369..00000000
--- a/packages/use-wallet-react/src/WalletProvider.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import { WalletManager } from '@txnlab/use-wallet'
-import * as React from 'react'
-
-const WalletContext = React.createContext<WalletManager | undefined>(undefined)
-
-export const useWalletManager = () => {
-  const manager = React.useContext(WalletContext)
-
-  if (!manager) {
-    throw new Error('useWallet must be used within the WalletProvider')
-  }
-
-  return manager
-}
-
-interface WalletProviderProps {
-  manager: WalletManager
-  children: React.ReactNode
-}
-
-export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.Element => {
-  const resumedRef = React.useRef(false)
-
-  React.useEffect(() => {
-    const resumeSessions = async () => {
-      try {
-        await manager.resumeSessions()
-      } catch (error) {
-        console.error('Error resuming sessions:', error)
-      }
-    }
-
-    if (!resumedRef.current) {
-      resumeSessions()
-      resumedRef.current = true
-    }
-  }, [manager, resumedRef.current])
-
-  return <WalletContext.Provider value={manager}>{children}</WalletContext.Provider>
-}
diff --git a/packages/use-wallet-react/src/__tests__/WalletProvider.test.tsx b/packages/use-wallet-react/src/__tests__/WalletProvider.test.tsx
deleted file mode 100644
index 6c3616b2..00000000
--- a/packages/use-wallet-react/src/__tests__/WalletProvider.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { WalletId, WalletManager } from '@txnlab/use-wallet'
-import React from 'react'
-import { WalletProvider, useWalletManager } from '../WalletProvider'
-
-describe('WalletProvider', () => {
-  it('provides the WalletManager to its children', () => {
-    const TestComponent = () => {
-      const manager = useWalletManager()
-      return <h1>{manager ? 'Manager provided' : 'No manager'}</h1>
-    }
-
-    const walletManager = new WalletManager({
-      wallets: [WalletId.DEFLY]
-    })
-
-    render(
-      <WalletProvider manager={walletManager}>
-        <TestComponent />
-      </WalletProvider>
-    )
-
-    expect(screen.getByText('Manager provided')).toBeInTheDocument()
-  })
-
-  it('throws an error when useWalletManager is used outside of WalletProvider', () => {
-    const TestComponent = () => {
-      try {
-        useWalletManager()
-        return <div>No error thrown</div>
-      } catch (error: any) {
-        return <div>{error.message}</div>
-      }
-    }
-
-    render(<TestComponent />)
-    expect(screen.getByText('useWallet must be used within the WalletProvider')).toBeInTheDocument()
-  })
-
-  it('calls resumeSessions on mount', async () => {
-    const mockResumeSessions = vi.fn()
-    const fakeManager = { resumeSessions: mockResumeSessions }
-
-    render(
-      <WalletProvider manager={fakeManager as unknown as WalletManager}>
-        <div />
-      </WalletProvider>
-    )
-
-    expect(mockResumeSessions).toHaveBeenCalled()
-  })
-})
diff --git a/packages/use-wallet-react/src/__tests__/useWallet.test.tsx b/packages/use-wallet-react/src/__tests__/index.test.tsx
similarity index 72%
rename from packages/use-wallet-react/src/__tests__/useWallet.test.tsx
rename to packages/use-wallet-react/src/__tests__/index.test.tsx
index d58c757a..ee1e54be 100644
--- a/packages/use-wallet-react/src/__tests__/useWallet.test.tsx
+++ b/packages/use-wallet-react/src/__tests__/index.test.tsx
@@ -1,5 +1,5 @@
 import { Store } from '@tanstack/react-store'
-import { renderHook, act, render } from '@testing-library/react'
+import { renderHook, act, render, screen } from '@testing-library/react'
 import {
   BaseWallet,
   DeflyWallet,
@@ -12,8 +12,8 @@ import {
   type WalletAccount
 } from '@txnlab/use-wallet'
 import * as React from 'react'
-import { Wallet, useWallet } from '../useWallet'
-import { WalletProvider } from '../WalletProvider'
+import { Wallet, WalletProvider, useWallet } from '../index'
+import algosdk from 'algosdk'
 
 const mocks = vi.hoisted(() => {
   return {
@@ -52,13 +52,6 @@ vi.mock('@txnlab/use-wallet', async (importOriginal) => {
   }
 })
 
-const mockSubscribe: (callback: (state: State) => void) => () => void = vi.fn(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (callback: (state: State) => void) => {
-    return () => console.log('unsubscribe')
-  }
-)
-
 const mockStore = new Store<State>(defaultState)
 
 const mockDeflyWallet = new DeflyWallet({
@@ -66,7 +59,7 @@ const mockDeflyWallet = new DeflyWallet({
   metadata: { name: 'Defly', icon: 'icon' },
   getAlgodClient: () => ({}) as any,
   store: mockStore,
-  subscribe: mockSubscribe
+  subscribe: vi.fn()
 })
 
 const mockMagicAuth = new MagicAuth({
@@ -77,7 +70,106 @@ const mockMagicAuth = new MagicAuth({
   metadata: { name: 'Magic', icon: 'icon' },
   getAlgodClient: () => ({}) as any,
   store: mockStore,
-  subscribe: mockSubscribe
+  subscribe: vi.fn()
+})
+
+describe('WalletProvider', () => {
+  it('provides the wallet context to its children', () => {
+    const TestComponent = () => {
+      const { wallets } = useWallet()
+      return <h1>{wallets ? 'Context provided' : 'No context'}</h1>
+    }
+
+    const walletManager = new WalletManager({
+      wallets: [WalletId.DEFLY]
+    })
+
+    render(
+      <WalletProvider manager={walletManager}>
+        <TestComponent />
+      </WalletProvider>
+    )
+
+    expect(screen.getByText('Context provided')).toBeInTheDocument()
+  })
+
+  it('throws an error when useWallet is used outside of WalletProvider', () => {
+    const TestComponent = () => {
+      try {
+        useWallet()
+        return <div>No error thrown</div>
+      } catch (error: any) {
+        return <div>{error.message}</div>
+      }
+    }
+
+    render(<TestComponent />)
+    expect(screen.getByText('useWallet must be used within the WalletProvider')).toBeInTheDocument()
+  })
+
+  it('calls resumeSessions on mount', async () => {
+    const mockResumeSessions = vi.fn()
+    const fakeManager = { resumeSessions: mockResumeSessions }
+
+    render(
+      <WalletProvider manager={fakeManager as unknown as WalletManager}>
+        <div />
+      </WalletProvider>
+    )
+
+    expect(mockResumeSessions).toHaveBeenCalled()
+  })
+
+  it('updates algodClient when setAlgodClient is called', () => {
+    const newAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+    const TestComponent = () => {
+      const { setAlgodClient } = useWallet()
+      React.useEffect(() => {
+        setAlgodClient(newAlgodClient)
+      }, [setAlgodClient])
+      return null
+    }
+
+    const walletManager = new WalletManager({
+      wallets: [WalletId.DEFLY]
+    })
+
+    render(
+      <WalletProvider manager={walletManager}>
+        <TestComponent />
+      </WalletProvider>
+    )
+
+    expect(walletManager.algodClient).toBe(newAlgodClient)
+  })
+
+  it('updates activeNetwork and algodClient when setActiveNetwork is called', async () => {
+    const newNetwork = NetworkId.MAINNET
+
+    const walletManager = new WalletManager({
+      wallets: [WalletId.DEFLY],
+      network: NetworkId.TESTNET
+    })
+
+    const TestComponent = () => {
+      const { setActiveNetwork } = useWallet()
+      return <button onClick={() => setActiveNetwork(newNetwork)}>Change Network</button>
+    }
+
+    render(
+      <WalletProvider manager={walletManager}>
+        <TestComponent />
+      </WalletProvider>
+    )
+
+    await act(async () => {
+      screen.getByText('Change Network').click()
+    })
+
+    expect(walletManager.store.state.activeNetwork).toBe(newNetwork)
+    const { token, baseServer, port, headers } = walletManager.networkConfig[newNetwork]
+    expect(walletManager.algodClient).toEqual(new algosdk.Algodv2(token, baseServer, port, headers))
+  })
 })
 
 describe('useWallet', () => {
@@ -356,4 +448,30 @@ describe('useWallet', () => {
     )
     expect(getByTestId('active-address')).toHaveTextContent(JSON.stringify('address1'))
   })
+
+  it('calls setAlgodClient correctly', () => {
+    const newAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+    const { result } = renderHook(() => useWallet(), { wrapper })
+
+    act(() => {
+      result.current.setAlgodClient(newAlgodClient)
+    })
+
+    expect(result.current.algodClient).toBe(newAlgodClient)
+  })
+
+  it('calls setActiveNetwork correctly and updates algodClient', async () => {
+    const newNetwork = NetworkId.MAINNET
+    const { result } = renderHook(() => useWallet(), { wrapper })
+
+    await act(async () => {
+      await result.current.setActiveNetwork(newNetwork)
+    })
+
+    expect(result.current.activeNetwork).toBe(newNetwork)
+    const { token, baseServer, port, headers } = mockWalletManager.networkConfig[newNetwork]
+    expect(result.current.algodClient).toEqual(
+      new algosdk.Algodv2(token, baseServer, port, headers)
+    )
+  })
 })
diff --git a/packages/use-wallet-react/src/index.ts b/packages/use-wallet-react/src/index.ts
deleted file mode 100644
index bbffae0f..00000000
--- a/packages/use-wallet-react/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from '@txnlab/use-wallet'
-export { useWallet, Wallet } from './useWallet'
-export { WalletProvider } from './WalletProvider'
diff --git a/packages/use-wallet-react/src/useWallet.ts b/packages/use-wallet-react/src/index.tsx
similarity index 54%
rename from packages/use-wallet-react/src/useWallet.ts
rename to packages/use-wallet-react/src/index.tsx
index 64caff8e..830adbb4 100644
--- a/packages/use-wallet-react/src/useWallet.ts
+++ b/packages/use-wallet-react/src/index.tsx
@@ -1,10 +1,17 @@
-'use client'
-
 import { useStore } from '@tanstack/react-store'
+import { NetworkId, WalletAccount, WalletManager, WalletMetadata } from '@txnlab/use-wallet'
+import algosdk from 'algosdk'
 import * as React from 'react'
-import { useWalletManager } from './WalletProvider'
-import type { WalletAccount, WalletMetadata } from '@txnlab/use-wallet'
-import type algosdk from 'algosdk'
+
+export * from '@txnlab/use-wallet'
+
+interface IWalletContext {
+  manager: WalletManager
+  algodClient: algosdk.Algodv2
+  setAlgodClient: React.Dispatch<React.SetStateAction<algosdk.Algodv2>>
+}
+
+const WalletContext = React.createContext<IWalletContext | undefined>(undefined)
 
 export interface Wallet {
   id: string
@@ -19,10 +26,37 @@ export interface Wallet {
   setActiveAccount: (address: string) => void
 }
 
-export function useWallet() {
-  const manager = useWalletManager()
+export const useWallet = () => {
+  const context = React.useContext(WalletContext)
+
+  if (!context) {
+    throw new Error('useWallet must be used within the WalletProvider')
+  }
+
+  const { manager, algodClient, setAlgodClient } = context
+
+  const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)
+
+  const setActiveNetwork = async (networkId: NetworkId): Promise<void> => {
+    if (networkId === activeNetwork) {
+      return
+    }
+    // Disconnect any connected wallets
+    await manager.disconnect()
+
+    console.info(`[React] Creating Algodv2 client for ${networkId}...`)
+
+    const { token = '', baseServer, port = '', headers = {} } = manager.networkConfig[networkId]
+    const newClient = new algosdk.Algodv2(token, baseServer, port, headers)
+    setAlgodClient(newClient)
+
+    manager.store.setState((state) => ({
+      ...state,
+      activeNetwork: networkId
+    }))
 
-  const algodClient: algosdk.Algodv2 = manager.algodClient
+    console.info(`[React] ✅ Active network set to ${networkId}.`)
+  }
 
   const walletStateMap = useStore(manager.store, (state) => state.wallets)
   const activeWalletId = useStore(manager.store, (state) => state.activeWallet)
@@ -54,9 +88,6 @@ export function useWallet() {
   const activeAccount = activeWalletState?.activeAccount ?? null
   const activeAddress = activeAccount?.address ?? null
 
-  const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)
-  const setActiveNetwork = manager.setActiveNetwork
-
   const signTransactions = <T extends algosdk.Transaction[] | Uint8Array[]>(
     txnGroup: T | T[],
     indexesToSign?: number[]
@@ -87,7 +118,44 @@ export function useWallet() {
     activeAccount,
     activeAddress,
     setActiveNetwork,
+    setAlgodClient,
     signTransactions,
     transactionSigner
   }
 }
+
+interface WalletProviderProps {
+  manager: WalletManager
+  children: React.ReactNode
+}
+
+export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.Element => {
+  const [algodClient, setAlgodClient] = React.useState(manager.algodClient)
+
+  React.useEffect(() => {
+    manager.algodClient = algodClient
+  }, [algodClient, manager])
+
+  const resumedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    const resumeSessions = async () => {
+      try {
+        await manager.resumeSessions()
+      } catch (error) {
+        console.error('Error resuming sessions:', error)
+      }
+    }
+
+    if (!resumedRef.current) {
+      resumeSessions()
+      resumedRef.current = true
+    }
+  }, [manager])
+
+  return (
+    <WalletContext.Provider value={{ manager, algodClient, setAlgodClient }}>
+      {children}
+    </WalletContext.Provider>
+  )
+}
diff --git a/packages/use-wallet-react/tsup.config.ts b/packages/use-wallet-react/tsup.config.ts
index 6be8e448..1e8ddb95 100644
--- a/packages/use-wallet-react/tsup.config.ts
+++ b/packages/use-wallet-react/tsup.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.tsx'],
   dts: true,
   splitting: false,
   sourcemap: true,
diff --git a/packages/use-wallet-solid/src/WalletProvider.tsx b/packages/use-wallet-solid/src/WalletProvider.tsx
deleted file mode 100644
index 30ead21f..00000000
--- a/packages/use-wallet-solid/src/WalletProvider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { WalletManager } from '@txnlab/use-wallet'
-import { createContext, useContext, JSX, onMount } from 'solid-js'
-
-interface WalletProviderProps {
-  manager: WalletManager
-  children: JSX.Element
-}
-
-const WalletContext = createContext<() => WalletManager>()
-
-export const WalletProvider = (props: WalletProviderProps) => {
-  const store = () => props.manager
-
-  onMount(async () => {
-    try {
-      await props.manager.resumeSessions()
-    } catch (error) {
-      console.error('Error resuming sessions:', error)
-    }
-  })
-
-  return <WalletContext.Provider value={store}>{props.children}</WalletContext.Provider>
-}
-
-export const useWalletManager = (): WalletManager => {
-  const manager = useContext(WalletContext)
-  if (!manager) {
-    throw new Error('useWalletManager must be used within a WalletProvider')
-  }
-  return manager()
-}
diff --git a/packages/use-wallet-solid/src/__tests__/WalletProvider.test.tsx b/packages/use-wallet-solid/src/__tests__/WalletProvider.test.tsx
deleted file mode 100644
index a81df18b..00000000
--- a/packages/use-wallet-solid/src/__tests__/WalletProvider.test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { render, screen } from '@solidjs/testing-library'
-import { WalletId, WalletManager } from '@txnlab/use-wallet'
-import { WalletProvider, useWalletManager } from '../WalletProvider'
-
-describe('WalletProvider', () => {
-  it('provides the WalletManager to its children', () => {
-    const TestComponent = () => {
-      const manager = useWalletManager()
-      return <h1>{manager ? 'Manager provided' : 'No manager'}</h1>
-    }
-
-    const walletManager = new WalletManager({
-      wallets: [WalletId.DEFLY]
-    })
-
-    render(() => (
-      <WalletProvider manager={walletManager}>
-        <TestComponent />
-      </WalletProvider>
-    ))
-
-    expect(screen.getByText('Manager provided')).toBeInTheDocument()
-  })
-
-  it('throws an error when useWalletManager is used outside of WalletProvider', () => {
-    const TestComponent = () => {
-      try {
-        useWalletManager()
-        return <div>No error thrown</div>
-      } catch (error: any) {
-        return <div>{error.message}</div>
-      }
-    }
-
-    render(() => <TestComponent />)
-    expect(
-      screen.getByText('useWalletManager must be used within a WalletProvider')
-    ).toBeInTheDocument()
-  })
-
-  it('calls resumeSessions on mount', async () => {
-    const mockResumeSessions = vi.fn()
-    const fakeManager = { resumeSessions: mockResumeSessions }
-
-    render(() => (
-      <WalletProvider manager={fakeManager as any as WalletManager}>
-        <div />
-      </WalletProvider>
-    ))
-
-    expect(mockResumeSessions).toHaveBeenCalled()
-  })
-})
diff --git a/packages/use-wallet-solid/src/__tests__/useWallet.test.tsx b/packages/use-wallet-solid/src/__tests__/index.test.tsx
similarity index 80%
rename from packages/use-wallet-solid/src/__tests__/useWallet.test.tsx
rename to packages/use-wallet-solid/src/__tests__/index.test.tsx
index 8bbf5b9c..5c43b690 100644
--- a/packages/use-wallet-solid/src/__tests__/useWallet.test.tsx
+++ b/packages/use-wallet-solid/src/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@solidjs/testing-library'
+import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
 import { Store } from '@tanstack/solid-store'
 import {
   BaseWallet,
@@ -11,8 +11,8 @@ import {
   type WalletAccount
 } from '@txnlab/use-wallet'
 import { For, Show, createSignal } from 'solid-js'
-import { Wallet, useWallet } from '../useWallet'
-import { WalletProvider } from '../WalletProvider'
+import { Wallet, WalletProvider, useWallet, useWalletManager } from '../index'
+import algosdk from 'algosdk'
 
 const mocks = vi.hoisted(() => {
   return {
@@ -51,13 +51,6 @@ vi.mock('@txnlab/use-wallet', async (importOriginal) => {
   }
 })
 
-const mockSubscribe: (callback: (state: State) => void) => () => void = vi.fn(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (callback: (state: State) => void) => {
-    return () => console.log('unsubscribe')
-  }
-)
-
 const testAccount1 = { name: 'Account 1', address: 'address1' }
 const testAccount2 = { name: 'Account 2', address: 'address2' }
 
@@ -75,7 +68,9 @@ const TestComponent = () => {
     isWalletActive,
     isWalletConnected,
     walletStore,
-    wallets
+    wallets,
+    algodClient,
+    setAlgodClient
   } = useWallet()
 
   const [magicEmail, setMagicEmail] = createSignal('')
@@ -101,6 +96,7 @@ const TestComponent = () => {
       <div data-testid="active-wallet-state">{JSON.stringify(activeWalletState())}</div>
       <div data-testid="wallet-store">{JSON.stringify(walletStore())}</div>
       <div data-testid="wallets">{wallets.map((wallet) => wallet.id).join(', ')}</div>
+      <div data-testid="algod-client">{JSON.stringify(algodClient())}</div>
 
       <For each={wallets}>
         {(wallet) => (
@@ -175,6 +171,13 @@ const TestComponent = () => {
       >
         Set Active Network to Mainnet
       </button>
+
+      <button
+        data-testid="set-algod-client-btn"
+        onClick={() => setAlgodClient(new algosdk.Algodv2('new-token', 'https://new-server', ''))}
+      >
+        Set Algod Client
+      </button>
     </div>
   )
 }
@@ -185,6 +188,9 @@ describe('useWallet', () => {
   let mockDeflyWallet: DeflyWallet
   let mockMagicAuth: MagicAuth
   let mockWallets: Wallet[]
+  let mockSetAlgodClient: (client: algosdk.Algodv2) => void
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let mockAlgodClient: algosdk.Algodv2
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -202,7 +208,7 @@ describe('useWallet', () => {
       metadata: { name: 'Defly', icon: 'icon' },
       getAlgodClient: () => ({}) as any,
       store: mockStore,
-      subscribe: mockSubscribe
+      subscribe: vi.fn()
     })
 
     mockMagicAuth = new MagicAuth({
@@ -210,7 +216,7 @@ describe('useWallet', () => {
       metadata: { name: 'Magic', icon: 'icon' },
       getAlgodClient: () => ({}) as any,
       store: mockStore,
-      subscribe: mockSubscribe
+      subscribe: vi.fn()
     })
 
     mockWalletManager = new WalletManager()
@@ -246,6 +252,12 @@ describe('useWallet', () => {
         setActiveAccount: expect.any(Function)
       }
     ]
+
+    mockAlgodClient = new algosdk.Algodv2('token', 'https://server', '')
+
+    mockSetAlgodClient = (client: algosdk.Algodv2) => {
+      mockAlgodClient = client
+    }
   })
 
   it('initializes wallets and active wallet correctly', () => {
@@ -351,7 +363,7 @@ describe('useWallet', () => {
     expect(mocks.setActiveAccount).toHaveBeenCalledWith(testAccount1.address)
   })
 
-  it('calls setActiveNetwork correctly', () => {
+  it('calls setActiveNetwork correctly', async () => {
     render(() => (
       <WalletProvider manager={mockWalletManager}>
         <TestComponent />
@@ -362,7 +374,54 @@ describe('useWallet', () => {
 
     const setActiveNetworkButton = screen.getByTestId('set-active-network-btn')
     fireEvent.click(setActiveNetworkButton)
-    expect(screen.getByTestId('active-network')).toHaveTextContent(NetworkId.MAINNET)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-network')).toHaveTextContent(NetworkId.MAINNET)
+    })
+  })
+
+  it('reactively updates the algodClient', async () => {
+    render(() => (
+      <WalletProvider manager={mockWalletManager}>
+        <TestComponent />
+      </WalletProvider>
+    ))
+
+    const newAlgodClient = new algosdk.Algodv2('new-token', 'https://new-server', '')
+
+    const setAlgodClientButton = screen.getByTestId('set-algod-client-btn')
+    fireEvent.click(setAlgodClientButton)
+
+    // Wait for state update
+    await waitFor(() => {
+      expect(screen.getByTestId('algod-client')).toHaveTextContent(JSON.stringify(newAlgodClient))
+    })
+  })
+
+  it('updates algodClient when setActiveNetwork is called', async () => {
+    render(() => (
+      <WalletProvider manager={mockWalletManager}>
+        <TestComponent />
+      </WalletProvider>
+    ))
+
+    const newAlgodClient = new algosdk.Algodv2('', 'https://mainnet-api.algonode.cloud/', '')
+
+    mockWalletManager.setActiveNetwork = async (networkId: NetworkId) => {
+      mockSetAlgodClient(newAlgodClient)
+      mockWalletManager.store.setState((state) => ({
+        ...state,
+        activeNetwork: networkId
+      }))
+    }
+
+    const setActiveNetworkButton = screen.getByTestId('set-active-network-btn')
+    fireEvent.click(setActiveNetworkButton)
+
+    // Wait for state update
+    await waitFor(() => {
+      expect(screen.getByTestId('algod-client')).toHaveTextContent(JSON.stringify(newAlgodClient))
+    })
   })
 
   it('calls signTransactions and transactionSigner correctly', async () => {
@@ -481,3 +540,53 @@ describe('useWallet', () => {
     expect(screen.getByTestId('active-network')).toHaveTextContent(NetworkId.MAINNET)
   })
 })
+
+describe('WalletProvider', () => {
+  it('provides the WalletManager to its children', () => {
+    const TestComponent = () => {
+      const manager = useWalletManager()
+      return <h1>{manager ? 'Manager provided' : 'No manager'}</h1>
+    }
+
+    const walletManager = new WalletManager({
+      wallets: [WalletId.DEFLY]
+    })
+
+    render(() => (
+      <WalletProvider manager={walletManager}>
+        <TestComponent />
+      </WalletProvider>
+    ))
+
+    expect(screen.getByText('Manager provided')).toBeInTheDocument()
+  })
+
+  it('throws an error when useWalletManager is used outside of WalletProvider', () => {
+    const TestComponent = () => {
+      try {
+        useWalletManager()
+        return <div>No error thrown</div>
+      } catch (error: any) {
+        return <div>{error.message}</div>
+      }
+    }
+
+    render(() => <TestComponent />)
+    expect(
+      screen.getByText('useWalletManager must be used within a WalletProvider')
+    ).toBeInTheDocument()
+  })
+
+  it('calls resumeSessions on mount', async () => {
+    const mockResumeSessions = vi.fn()
+    const fakeManager = { resumeSessions: mockResumeSessions }
+
+    render(() => (
+      <WalletProvider manager={fakeManager as any as WalletManager}>
+        <div />
+      </WalletProvider>
+    ))
+
+    expect(mockResumeSessions).toHaveBeenCalled()
+  })
+})
diff --git a/packages/use-wallet-solid/src/index.tsx b/packages/use-wallet-solid/src/index.tsx
index 2cb4bb8e..87fab313 100644
--- a/packages/use-wallet-solid/src/index.tsx
+++ b/packages/use-wallet-solid/src/index.tsx
@@ -1,3 +1,151 @@
+import { useStore } from '@tanstack/solid-store'
+import algosdk from 'algosdk'
+import { JSX, createContext, createMemo, createSignal, onMount, useContext } from 'solid-js'
+import type {
+  NetworkId,
+  WalletAccount,
+  WalletId,
+  WalletManager,
+  WalletMetadata,
+  WalletState
+} from '@txnlab/use-wallet'
+
 export * from '@txnlab/use-wallet'
-export { WalletProvider } from './WalletProvider'
-export { useWallet } from './useWallet'
+
+interface WalletProviderProps {
+  manager: WalletManager
+  children: JSX.Element
+}
+
+const WalletContext = createContext<() => WalletManager>()
+
+export const WalletProvider = (props: WalletProviderProps) => {
+  const store = () => props.manager
+
+  onMount(async () => {
+    try {
+      await props.manager.resumeSessions()
+    } catch (error) {
+      console.error('Error resuming sessions:', error)
+    }
+  })
+
+  return <WalletContext.Provider value={store}>{props.children}</WalletContext.Provider>
+}
+
+export const useWalletManager = (): WalletManager => {
+  const manager = useContext(WalletContext)
+  if (!manager) {
+    throw new Error('useWalletManager must be used within a WalletProvider')
+  }
+  return manager()
+}
+
+export interface Wallet {
+  id: () => string
+  metadata: () => WalletMetadata
+  accounts: () => WalletAccount[]
+  activeAccount: () => WalletAccount | null
+  isConnected: () => boolean
+  isActive: () => boolean
+  connect: (args?: Record<string, any>) => Promise<WalletAccount[]>
+  disconnect: () => Promise<void>
+  setActive: () => void
+  setActiveAccount: (address: string) => void
+}
+
+export function useWallet() {
+  const manager = createMemo(() => useWalletManager())
+
+  const [algodClient, setAlgodClient] = createSignal<algosdk.Algodv2>(manager().algodClient)
+
+  const walletStore = useStore(manager().store, (state) => state.wallets)
+
+  const walletState = (walletId: WalletId): WalletState | null => walletStore()[walletId] || null
+
+  const activeWalletId = useStore(manager().store, (state) => state.activeWallet)
+
+  const activeWallet = () => manager().getWallet(activeWalletId() as WalletId) || null
+
+  const activeWalletState = () => walletState(activeWalletId() as WalletId)
+
+  const activeWalletAccounts = () => activeWalletState()?.accounts ?? null
+
+  const activeWalletAddresses = () =>
+    activeWalletAccounts()?.map((account) => account.address) ?? null
+
+  const activeAccount = () => activeWalletState()?.activeAccount ?? null
+
+  const activeAddress = () => activeAccount()?.address ?? null
+
+  const isWalletActive = (walletId: WalletId) => walletId === activeWalletId()
+  const isWalletConnected = (walletId: WalletId) =>
+    !!walletState(walletId)?.accounts.length || false
+
+  const activeNetwork = useStore(manager().store, (state) => state.activeNetwork)
+
+  const setActiveNetwork = async (networkId: NetworkId): Promise<void> => {
+    if (activeNetwork() === networkId) {
+      return
+    }
+    // Disconnect any connected wallets
+    await manager().disconnect()
+
+    console.info(`[Solid] Creating Algodv2 client for ${networkId}...`)
+
+    const { token, baseServer, port, headers } = manager().networkConfig[networkId]
+    const newClient = new algosdk.Algodv2(token, baseServer, port, headers)
+    setAlgodClient(newClient)
+
+    manager().algodClient = newClient
+
+    manager().store.setState((state) => ({
+      ...state,
+      activeNetwork: networkId
+    }))
+
+    console.info(`[Solid] ✅ Active network set to ${networkId}.`)
+  }
+
+  const signTransactions = <T extends algosdk.Transaction[] | Uint8Array[]>(
+    txnGroup: T | T[],
+    indexesToSign?: number[]
+  ): Promise<Uint8Array[]> => {
+    const wallet = activeWallet()
+    if (!wallet) {
+      throw new Error('No active wallet')
+    }
+    return wallet.signTransactions(txnGroup, indexesToSign)
+  }
+
+  const transactionSigner = (
+    txnGroup: algosdk.Transaction[],
+    indexesToSign: number[]
+  ): Promise<Uint8Array[]> => {
+    const wallet = activeWallet()
+    if (!wallet) {
+      throw new Error('No active wallet')
+    }
+    return wallet.transactionSigner(txnGroup, indexesToSign)
+  }
+
+  return {
+    activeWalletId,
+    walletStore,
+    algodClient,
+    activeNetwork,
+    activeWallet,
+    activeWalletAccounts,
+    activeWalletAddresses,
+    activeWalletState,
+    activeAccount,
+    activeAddress,
+    isWalletActive,
+    isWalletConnected,
+    setActiveNetwork,
+    setAlgodClient,
+    signTransactions,
+    transactionSigner,
+    wallets: manager().wallets
+  }
+}
diff --git a/packages/use-wallet-solid/src/useWallet.ts b/packages/use-wallet-solid/src/useWallet.ts
deleted file mode 100644
index 79b78709..00000000
--- a/packages/use-wallet-solid/src/useWallet.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useStore } from '@tanstack/solid-store'
-import { createMemo } from 'solid-js'
-import { useWalletManager } from './WalletProvider'
-import type {
-  NetworkId,
-  WalletAccount,
-  WalletId,
-  WalletMetadata,
-  WalletState
-} from '@txnlab/use-wallet'
-import type algosdk from 'algosdk'
-
-export interface Wallet {
-  id: () => string
-  metadata: () => WalletMetadata
-  accounts: () => WalletAccount[]
-  activeAccount: () => WalletAccount | null
-  isConnected: () => boolean
-  isActive: () => boolean
-  connect: (args?: Record<string, any>) => Promise<WalletAccount[]>
-  disconnect: () => Promise<void>
-  setActive: () => void
-  setActiveAccount: (address: string) => void
-}
-
-export function useWallet() {
-  const manager = createMemo(() => useWalletManager())
-
-  const walletStore = useStore(manager().store, (state) => {
-    return state.wallets
-  })
-
-  const walletState = (walletId: WalletId): WalletState | null => walletStore()[walletId] || null
-
-  const activeWalletId = useStore(manager().store, (state) => {
-    return state.activeWallet
-  })
-
-  const activeWallet = () => manager().getWallet(activeWalletId() as WalletId) || null
-
-  const activeWalletState = () => walletState(activeWalletId() as WalletId)
-
-  const activeWalletAccounts = () => activeWalletState()?.accounts ?? null
-
-  const activeWalletAddresses = () =>
-    activeWalletAccounts()?.map((account) => account.address) ?? null
-
-  const activeAccount = () => activeWalletState()?.activeAccount ?? null
-
-  const activeAddress = () => activeAccount()?.address ?? null
-
-  const isWalletActive = (walletId: WalletId) => walletId === activeWalletId()
-  const isWalletConnected = (walletId: WalletId) =>
-    !!walletState(walletId)?.accounts.length || false
-
-  const activeNetworkState = createMemo(() => {
-    return useStore(manager().store, (state) => state.activeNetwork)
-  })
-
-  // Returning a function to access the current value allows for lazy evaluation
-  // while ensuring the use of `createMemo` above keeps the reactivity intact.
-  const activeNetwork = () => activeNetworkState()()
-
-  const setActiveNetwork = (network: NetworkId) => manager().setActiveNetwork(network)
-
-  // @todo: Not reactive when intDecoding is changed
-  const algodClient = createMemo(() => manager().algodClient)
-
-  const signTransactions = <T extends algosdk.Transaction[] | Uint8Array[]>(
-    txnGroup: T | T[],
-    indexesToSign?: number[]
-  ): Promise<Uint8Array[]> => {
-    const wallet = activeWallet()
-    if (!wallet) {
-      throw new Error('No active wallet')
-    }
-    return wallet.signTransactions(txnGroup, indexesToSign)
-  }
-
-  const transactionSigner = (
-    txnGroup: algosdk.Transaction[],
-    indexesToSign: number[]
-  ): Promise<Uint8Array[]> => {
-    const wallet = activeWallet()
-    if (!wallet) {
-      throw new Error('No active wallet')
-    }
-    return wallet.transactionSigner(txnGroup, indexesToSign)
-  }
-
-  return {
-    activeWalletId,
-    walletStore,
-    algodClient,
-    activeNetwork,
-    activeWallet,
-    activeWalletAccounts,
-    activeWalletAddresses,
-    activeWalletState,
-    activeAccount,
-    activeAddress,
-    isWalletActive,
-    isWalletConnected,
-    setActiveNetwork,
-    signTransactions,
-    transactionSigner,
-    wallets: manager().wallets
-  }
-}
diff --git a/packages/use-wallet-vue/src/__tests__/useWallet.test.ts b/packages/use-wallet-vue/src/__tests__/useWallet.test.ts
index 82f99307..a73ab09b 100644
--- a/packages/use-wallet-vue/src/__tests__/useWallet.test.ts
+++ b/packages/use-wallet-vue/src/__tests__/useWallet.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-extra-semi */
 import { Store } from '@tanstack/vue-store'
 import {
   BaseWallet,
@@ -11,8 +12,10 @@ import {
   type WalletAccount
 } from '@txnlab/use-wallet'
 import { mount } from '@vue/test-utils'
-import { inject, nextTick } from 'vue'
+import algosdk from 'algosdk'
+import { inject, nextTick, ref, type InjectionKey } from 'vue'
 import { useWallet, type Wallet } from '../useWallet'
+import type { Mock } from 'vitest'
 
 const mocks = vi.hoisted(() => {
   return {
@@ -51,21 +54,21 @@ vi.mock('@txnlab/use-wallet', async (importOriginal) => {
   }
 })
 
+let mockWalletManager: WalletManager
+
 vi.mock('vue', async (importOriginal) => {
   const mod = await importOriginal<typeof import('vue')>()
   return {
     ...mod,
-    inject: vi.fn().mockImplementation(() => new WalletManager())
+    inject: vi.fn((token: string | InjectionKey<unknown>) => {
+      if (token === 'walletManager') return mockWalletManager
+      if (token === 'setAlgodClient') return mockSetAlgodClient
+      if (token === 'algodClient') return ref(mockAlgodClient)
+      return null
+    })
   }
 })
 
-const mockSubscribe: (callback: (state: State) => void) => () => void = vi.fn(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (callback: (state: State) => void) => {
-    return () => console.log('unsubscribe')
-  }
-)
-
 const mockStore = new Store<State>(defaultState)
 
 const mockDeflyWallet = new DeflyWallet({
@@ -73,7 +76,7 @@ const mockDeflyWallet = new DeflyWallet({
   metadata: { name: 'Defly', icon: 'icon' },
   getAlgodClient: () => ({}) as any,
   store: mockStore,
-  subscribe: mockSubscribe
+  subscribe: vi.fn()
 })
 
 const mockMagicAuth = new MagicAuth({
@@ -84,13 +87,25 @@ const mockMagicAuth = new MagicAuth({
   metadata: { name: 'Magic', icon: 'icon' },
   getAlgodClient: () => ({}) as any,
   store: mockStore,
-  subscribe: mockSubscribe
+  subscribe: vi.fn()
 })
 
+const mockAlgodClient = ref(new algosdk.Algodv2('token', 'https://server', ''))
+
+const mockSetAlgodClient = (client: algosdk.Algodv2) => {
+  mockAlgodClient.value = client
+}
+
 describe('useWallet', () => {
-  let mockWalletManager: WalletManager
   let mockWallets: Wallet[]
 
+  const mockInjectImplementation = (token: string | InjectionKey<unknown>) => {
+    if (token === 'walletManager') return mockWalletManager
+    if (token === 'setAlgodClient') return mockSetAlgodClient
+    if (token === 'algodClient') return mockAlgodClient
+    return null
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
 
@@ -128,15 +143,20 @@ describe('useWallet', () => {
       [WalletId.MAGIC, mockMagicAuth]
     ])
     mockWalletManager.store = mockStore
+    ;(inject as Mock).mockImplementation(mockInjectImplementation)
   })
 
   it('throws an error if WalletManager is not installed', () => {
-    vi.mocked(inject).mockImplementation(() => null)
+    ;(inject as Mock).mockImplementation((token: string | InjectionKey<unknown>) => {
+      if (token === 'walletManager') return null
+      if (token === 'setAlgodClient') return null
+      if (token === 'algodClient') return null
+      return null
+    })
     expect(() => useWallet()).toThrow('WalletManager plugin is not properly installed')
   })
 
   it('initializes wallets and active wallet correctly', () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
     const { wallets, activeWallet, activeAccount, activeNetwork } = useWallet()
 
     expect(wallets.value).toEqual(mockWallets)
@@ -146,7 +166,6 @@ describe('useWallet', () => {
   })
 
   it('correctly handles wallet connect/disconnect', async () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
     const { wallets } = useWallet()
 
     const defly = wallets.value[0]
@@ -168,7 +187,6 @@ describe('useWallet', () => {
   })
 
   it('calls setActive and setActiveAccount correctly', () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
     const { wallets } = useWallet()
 
     // Simulate setActive
@@ -180,7 +198,6 @@ describe('useWallet', () => {
   })
 
   it('calls signTransactions and transactionSigner correctly', async () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
     const { signTransactions, transactionSigner } = useWallet()
 
     mockStore.setState((state) => ({
@@ -211,7 +228,6 @@ describe('useWallet', () => {
   })
 
   it('updates wallets when store state changes', () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
     const { wallets } = useWallet()
 
     mockStore.setState((state) => ({
@@ -261,14 +277,40 @@ describe('useWallet', () => {
     ])
   })
 
-  /**
-   * @todo Fix this test
-   *
-   * This test passed before implementing StorageAdapter in core lib. Mocking a state change should
-   * update the activeWallet and activeAddress in the component, but it doesn't.
-   */
-  it.skip('integrates correctly with Vue component', async () => {
-    vi.mocked(inject).mockImplementation(() => mockWalletManager)
+  it('reactively updates the algodClient', async () => {
+    const { algodClient, setAlgodClient } = useWallet()
+
+    const newAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+
+    setAlgodClient(newAlgodClient)
+
+    await nextTick()
+
+    expect(algodClient.value).toStrictEqual(newAlgodClient)
+  })
+
+  it('updates algodClient when setActiveNetwork is called', async () => {
+    const { setActiveNetwork, algodClient } = useWallet()
+
+    const newNetwork = NetworkId.MAINNET
+    const newAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+
+    mockWalletManager.setActiveNetwork = async (networkId: NetworkId) => {
+      mockSetAlgodClient(newAlgodClient)
+      mockWalletManager.store.setState((state) => ({
+        ...state,
+        activeNetwork: networkId
+      }))
+    }
+
+    setActiveNetwork(newNetwork)
+
+    await nextTick()
+
+    expect(algodClient.value).toStrictEqual(newAlgodClient)
+  })
+
+  it('integrates correctly with Vue component', async () => {
     const { wallets, activeWallet, activeAddress, activeNetwork } = useWallet()
 
     const TestComponent = {
@@ -337,7 +379,7 @@ describe('useWallet', () => {
     expect(activeAddress.value).toBe('address1')
 
     expect(wrapper.get('[data-testid="activeNetwork"]').text()).toBe(NetworkId.TESTNET)
-    expect(wrapper.get('[data-testid="activeWallet"]').text()).toBe(WalletId.DEFLY) // fails
-    expect(wrapper.get('[data-testid="activeAddress"]').text()).toBe('address1') // fails
+    expect(wrapper.get('[data-testid="activeWallet"]').text()).toBe(WalletId.DEFLY)
+    expect(wrapper.get('[data-testid="activeAddress"]').text()).toBe('address1')
   })
 })
diff --git a/packages/use-wallet-vue/src/__tests__/walletManagerPlugin.test.ts b/packages/use-wallet-vue/src/__tests__/walletManagerPlugin.test.ts
index ca7f2c40..c0fa7919 100644
--- a/packages/use-wallet-vue/src/__tests__/walletManagerPlugin.test.ts
+++ b/packages/use-wallet-vue/src/__tests__/walletManagerPlugin.test.ts
@@ -1,16 +1,107 @@
-import { createApp } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 import { WalletManagerPlugin } from '../walletManagerPlugin'
-import { WalletId, WalletManager, type WalletManagerConfig } from '@txnlab/use-wallet'
+import { NetworkId, WalletManager, type WalletManagerConfig } from '@txnlab/use-wallet'
+import algosdk from 'algosdk'
+import { mount } from '@vue/test-utils'
+import type { SetAlgodClient } from '../useWallet'
+
+const mockAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+
+vi.mock('@txnlab/use-wallet', async (importOriginal) => {
+  const module = await importOriginal<typeof import('@txnlab/use-wallet')>()
+  return {
+    ...module,
+    WalletManager: vi.fn().mockImplementation(() => ({
+      algodClient: mockAlgodClient,
+      resumeSessions: vi.fn().mockResolvedValue(undefined)
+    }))
+  }
+})
 
 describe('WalletManagerPlugin', () => {
-  it('installs correctly', () => {
-    const app = createApp({})
-    const mockConfig: WalletManagerConfig = {
-      wallets: [WalletId.DEFLY, WalletId.KIBISIS]
+  const TestComponent = defineComponent({
+    setup() {
+      const walletManager = inject<WalletManager>('walletManager')
+      const algodClient = inject<algosdk.Algodv2>('algodClient')
+      const setAlgodClient = inject<SetAlgodClient>('setAlgodClient')
+      return { walletManager, algodClient, setAlgodClient }
+    },
+    render() {
+      return h('div')
+    }
+  })
+
+  it('provides walletManager, algodClient, and setAlgodClient', () => {
+    const options: WalletManagerConfig = {
+      wallets: [],
+      network: NetworkId.TESTNET
+    }
+    const wrapper = mount(TestComponent, {
+      global: {
+        plugins: [[WalletManagerPlugin, options]]
+      }
+    })
+
+    const { walletManager, algodClient, setAlgodClient } = wrapper.vm
+
+    expect(walletManager).toBeDefined()
+    expect(algodClient).toBeDefined()
+    expect(setAlgodClient).toBeDefined()
+  })
+
+  it('initializes with the correct algodClient', () => {
+    const options: WalletManagerConfig = {
+      wallets: [],
+      network: NetworkId.TESTNET
+    }
+    const wrapper = mount(TestComponent, {
+      global: {
+        plugins: [[WalletManagerPlugin, options]]
+      }
+    })
+
+    const { algodClient } = wrapper.vm
+
+    expect(algodClient).toStrictEqual(mockAlgodClient)
+  })
+
+  it('setAlgodClient updates the reactive algodClient and manager.algodClient', () => {
+    const options: WalletManagerConfig = {
+      wallets: [],
+      network: NetworkId.TESTNET
     }
-    app.use(WalletManagerPlugin, mockConfig)
+    const newAlgodClient = new algosdk.Algodv2('mock-token', 'https://mock-server', '')
+
+    const wrapper = mount(TestComponent, {
+      global: {
+        plugins: [[WalletManagerPlugin, options]]
+      }
+    })
+
+    const { algodClient, setAlgodClient, walletManager } = wrapper.vm
+
+    expect(algodClient).toStrictEqual(mockAlgodClient)
+
+    setAlgodClient?.(newAlgodClient)
+
+    expect(algodClient).toStrictEqual(newAlgodClient)
+    expect(walletManager?.algodClient).toStrictEqual(newAlgodClient)
+  })
+
+  it('calls resumeSessions on the walletManager', () => {
+    const options: WalletManagerConfig = {
+      wallets: [],
+      network: NetworkId.TESTNET
+    }
+
+    const wrapper = mount(TestComponent, {
+      global: {
+        plugins: [[WalletManagerPlugin, options]]
+      }
+    })
+
+    const { walletManager } = wrapper.vm
 
-    const manager = app._context.provides.walletManager
-    expect(manager).toBeInstanceOf(WalletManager)
+    expect(walletManager?.resumeSessions).toHaveBeenCalled()
   })
 })
diff --git a/packages/use-wallet-vue/src/useWallet.ts b/packages/use-wallet-vue/src/useWallet.ts
index b6477fb8..be849983 100644
--- a/packages/use-wallet-vue/src/useWallet.ts
+++ b/packages/use-wallet-vue/src/useWallet.ts
@@ -1,7 +1,12 @@
 import { useStore } from '@tanstack/vue-store'
-import { WalletManager, type WalletAccount, type WalletMetadata } from '@txnlab/use-wallet'
-import { computed, inject } from 'vue'
-import type algosdk from 'algosdk'
+import {
+  NetworkId,
+  WalletManager,
+  type WalletAccount,
+  type WalletMetadata
+} from '@txnlab/use-wallet'
+import algosdk from 'algosdk'
+import { computed, inject, ref } from 'vue'
 
 export interface Wallet {
   id: string
@@ -16,17 +21,41 @@ export interface Wallet {
   setActiveAccount: (address: string) => void
 }
 
+export type SetAlgodClient = (client: algosdk.Algodv2) => void
+
 export function useWallet() {
   const manager = inject<WalletManager>('walletManager')
+  const algodClient = inject<ReturnType<typeof ref<algosdk.Algodv2>>>('algodClient')
+  const setAlgodClient = inject<SetAlgodClient>('setAlgodClient') as SetAlgodClient
 
   if (!manager) {
     throw new Error('WalletManager plugin is not properly installed')
   }
-
-  const algodClient: algosdk.Algodv2 = manager.algodClient
+  if (!algodClient || !setAlgodClient) {
+    throw new Error('Algod client or setter not properly installed')
+  }
 
   const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)
-  const setActiveNetwork = manager.setActiveNetwork
+  const setActiveNetwork = async (networkId: NetworkId): Promise<void> => {
+    if (networkId === activeNetwork.value) {
+      return
+    }
+    // Disconnect any connected wallets
+    await manager.disconnect()
+
+    console.info(`[Vue] Creating Algodv2 client for ${networkId}...`)
+
+    const { token, baseServer, port, headers } = manager.networkConfig[networkId]
+    const newClient = new algosdk.Algodv2(token, baseServer, port, headers)
+    setAlgodClient(newClient)
+
+    manager.store.setState((state) => ({
+      ...state,
+      activeNetwork: networkId
+    }))
+
+    console.info(`[Vue] ✅ Active network set to ${networkId}.`)
+  }
 
   const walletStateMap = useStore(manager.store, (state) => state.wallets)
   const activeWalletId = useStore(manager.store, (state) => state.activeWallet)
@@ -97,7 +126,12 @@ export function useWallet() {
 
   return {
     wallets,
-    algodClient,
+    algodClient: computed(() => {
+      if (!algodClient.value) {
+        throw new Error('Algod client is undefined')
+      }
+      return algodClient.value
+    }),
     activeNetwork,
     activeWallet,
     activeWalletAccounts,
@@ -105,6 +139,7 @@ export function useWallet() {
     activeAccount,
     activeAddress,
     setActiveNetwork,
+    setAlgodClient,
     signTransactions,
     transactionSigner
   }
diff --git a/packages/use-wallet-vue/src/walletManagerPlugin.ts b/packages/use-wallet-vue/src/walletManagerPlugin.ts
index 655c57fa..2183525a 100644
--- a/packages/use-wallet-vue/src/walletManagerPlugin.ts
+++ b/packages/use-wallet-vue/src/walletManagerPlugin.ts
@@ -1,9 +1,20 @@
 import { WalletManager, type WalletManagerConfig } from '@txnlab/use-wallet'
+import { ref } from 'vue'
+import type algosdk from 'algosdk'
 
 export const WalletManagerPlugin = {
   install(app: any, options: WalletManagerConfig) {
     const manager = new WalletManager(options)
+    const algodClient = ref(manager.algodClient)
+
+    const setAlgodClient = (client: algosdk.Algodv2) => {
+      algodClient.value = client
+      manager.algodClient = client
+    }
+
     app.provide('walletManager', manager)
+    app.provide('algodClient', algodClient)
+    app.provide('setAlgodClient', setAlgodClient)
 
     manager.resumeSessions().catch((error) => {
       console.error('Error resuming sessions:', error)
diff --git a/packages/use-wallet/src/__tests__/manager.test.ts b/packages/use-wallet/src/__tests__/manager.test.ts
index d04fe29c..cf68071e 100644
--- a/packages/use-wallet/src/__tests__/manager.test.ts
+++ b/packages/use-wallet/src/__tests__/manager.test.ts
@@ -1,10 +1,13 @@
+import { Store } from '@tanstack/store'
 import { NetworkId } from 'src/network'
 import { LOCAL_STORAGE_KEY, State, defaultState } from 'src/store'
 import { WalletManager } from 'src/manager'
 import { StorageAdapter } from 'src/storage'
-// import { DeflyWallet } from 'src/wallets/defly'
-// import { PeraWallet } from 'src/wallets/pera'
+import { BaseWallet } from 'src/wallets/base'
+import { DeflyWallet } from 'src/wallets/defly'
+import { KibisisWallet } from 'src/wallets/kibisis'
 import { WalletId } from 'src/wallets/types'
+import type { Mock } from 'vitest'
 
 // Mock storage adapter
 vi.mock('src/storage', () => ({
@@ -23,12 +26,59 @@ const mockConsoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
 // Mock console.error
 const mockConsoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
 
-// const deflyResumeSession = vi
-//   .spyOn(DeflyWallet.prototype, 'resumeSession')
-//   .mockImplementation(() => Promise.resolve())
-// const peraResumeSession = vi
-//   .spyOn(PeraWallet.prototype, 'resumeSession')
-//   .mockImplementation(() => Promise.resolve())
+vi.mock('src/wallets/defly', () => ({
+  DeflyWallet: class DeflyWallet {
+    constructor() {
+      this.resumeSession = vi.fn().mockImplementation(() => Promise.resolve())
+      this.disconnect = vi.fn().mockImplementation(() => Promise.resolve())
+    }
+    static defaultMetadata = {
+      name: 'Defly',
+      icon: 'icon-data'
+    }
+    resumeSession: Mock
+    disconnect: Mock
+    get isConnected() {
+      return true
+    }
+  }
+}))
+
+vi.mock('src/wallets/kibisis', () => ({
+  KibisisWallet: class KibisisWallet {
+    constructor() {
+      this.resumeSession = vi.fn().mockImplementation(() => Promise.resolve())
+      this.disconnect = vi.fn().mockImplementation(() => Promise.resolve())
+    }
+    static defaultMetadata = {
+      name: 'Kibisis',
+      icon: 'icon-data'
+    }
+    resumeSession: Mock
+    disconnect: Mock
+    get isConnected() {
+      return true
+    }
+  }
+}))
+
+const mockStore = new Store<State>(defaultState)
+
+const mockDeflyWallet = new DeflyWallet({
+  id: WalletId.DEFLY,
+  metadata: { name: 'Defly', icon: 'icon' },
+  getAlgodClient: () => ({}) as any,
+  store: mockStore,
+  subscribe: vi.fn()
+})
+
+const mockKibisisWallet = new KibisisWallet({
+  id: WalletId.KIBISIS,
+  metadata: { name: 'Kibisis', icon: 'icon' },
+  getAlgodClient: () => ({}) as any,
+  store: mockStore,
+  subscribe: vi.fn()
+})
 
 describe('WalletManager', () => {
   let mockInitialState: State | null = null
@@ -151,19 +201,49 @@ describe('WalletManager', () => {
   })
 
   describe('setActiveNetwork', () => {
-    it('sets active network correctly', () => {
+    it('sets active network correctly', async () => {
       const manager = new WalletManager({
         wallets: [WalletId.DEFLY, WalletId.KIBISIS]
       })
-      manager.setActiveNetwork(NetworkId.MAINNET)
+      manager._clients = new Map<WalletId, BaseWallet>([
+        [WalletId.DEFLY, mockDeflyWallet],
+        [WalletId.KIBISIS, mockKibisisWallet]
+      ])
+
+      // Mock isConnected to return true
+      vi.spyOn(mockDeflyWallet, 'isConnected', 'get').mockReturnValue(true)
+      vi.spyOn(mockKibisisWallet, 'isConnected', 'get').mockReturnValue(true)
+
+      const disconnectMock = vi.spyOn(manager, 'disconnect')
+
+      await manager.setActiveNetwork(NetworkId.MAINNET)
+
+      expect(disconnectMock).toHaveBeenCalled()
       expect(manager.activeNetwork).toBe(NetworkId.MAINNET)
     })
 
-    // @todo: Test for handling of invalid network
+    it('does not call disconnect if the network is already active', async () => {
+      const manager = new WalletManager({
+        wallets: [WalletId.DEFLY, WalletId.KIBISIS]
+      })
+      manager._clients = new Map<WalletId, BaseWallet>([
+        [WalletId.DEFLY, mockDeflyWallet],
+        [WalletId.KIBISIS, mockKibisisWallet]
+      ])
+
+      const disconnectMock = vi.spyOn(manager, 'disconnect')
+
+      // Set initial active network
+      manager.store.setState((state) => ({ ...state, activeNetwork: NetworkId.MAINNET }))
+
+      await manager.setActiveNetwork(NetworkId.MAINNET)
+
+      expect(disconnectMock).not.toHaveBeenCalled()
+    })
   })
 
   describe('subscribe', () => {
-    it('adds and removes a subscriber', () => {
+    it('adds and removes a subscriber', async () => {
       const manager = new WalletManager({
         wallets: [WalletId.DEFLY, WalletId.KIBISIS]
       })
@@ -171,7 +251,7 @@ describe('WalletManager', () => {
       const unsubscribe = manager.subscribe(callback)
 
       // Trigger a state change
-      manager.setActiveNetwork(NetworkId.MAINNET)
+      await manager.setActiveNetwork(NetworkId.MAINNET)
 
       expect(callback).toHaveBeenCalled()
 
@@ -249,7 +329,7 @@ describe('WalletManager', () => {
   })
 
   describe('savePersistedState', () => {
-    it('saves state to local storage', () => {
+    it('saves state to local storage', async () => {
       const stateToSave: State = {
         wallets: {},
         activeWallet: null,
@@ -259,7 +339,7 @@ describe('WalletManager', () => {
       const manager = new WalletManager({
         wallets: [WalletId.DEFLY, WalletId.KIBISIS]
       })
-      manager.setActiveNetwork(NetworkId.MAINNET)
+      await manager.setActiveNetwork(NetworkId.MAINNET)
 
       expect(vi.mocked(StorageAdapter.setItem)).toHaveBeenCalledWith(
         LOCAL_STORAGE_KEY,
@@ -342,16 +422,74 @@ describe('WalletManager', () => {
     // @todo: Tests for successful signing
   })
 
-  // @todo: Find out why this fails in Vitest
-  describe.skip('resumeSessions', () => {
+  describe('resumeSessions', () => {
     it('resumes sessions for all wallets', async () => {
       const manager = new WalletManager({
         wallets: [WalletId.DEFLY, WalletId.KIBISIS]
       })
+      manager._clients = new Map<WalletId, BaseWallet>([
+        [WalletId.DEFLY, mockDeflyWallet],
+        [WalletId.KIBISIS, mockKibisisWallet]
+      ])
       await manager.resumeSessions()
 
-      // expect(deflyResumeSession).toHaveBeenCalled()
-      // expect(peraResumeSession).toHaveBeenCalled()
+      const deflyResumeSessionMock = mockDeflyWallet.resumeSession as Mock
+      const kibisisResumeSessionMock = mockKibisisWallet.resumeSession as Mock
+
+      expect(deflyResumeSessionMock).toHaveBeenCalled()
+      expect(kibisisResumeSessionMock).toHaveBeenCalled()
+
+      const calls = [
+        deflyResumeSessionMock.mock.calls.length,
+        kibisisResumeSessionMock.mock.calls.length
+      ]
+      expect(calls).toEqual([1, 1])
+    })
+  })
+
+  describe('disconnect', () => {
+    it('disconnects all connected wallets', async () => {
+      const manager = new WalletManager({
+        wallets: [WalletId.DEFLY, WalletId.KIBISIS]
+      })
+      manager._clients = new Map<WalletId, BaseWallet>([
+        [WalletId.DEFLY, mockDeflyWallet],
+        [WalletId.KIBISIS, mockKibisisWallet]
+      ])
+
+      // Mock isConnected to return true for the test
+      vi.spyOn(mockDeflyWallet, 'isConnected', 'get').mockReturnValue(true)
+      vi.spyOn(mockKibisisWallet, 'isConnected', 'get').mockReturnValue(true)
+
+      const deflyDisconnectMock = mockDeflyWallet.disconnect as Mock
+      const kibisisDisconnectMock = mockKibisisWallet.disconnect as Mock
+
+      await manager.disconnect()
+
+      expect(deflyDisconnectMock).toHaveBeenCalled()
+      expect(kibisisDisconnectMock).toHaveBeenCalled()
+    })
+
+    it('does not call disconnect on wallets that are not connected', async () => {
+      const manager = new WalletManager({
+        wallets: [WalletId.DEFLY, WalletId.KIBISIS]
+      })
+      manager._clients = new Map<WalletId, BaseWallet>([
+        [WalletId.DEFLY, mockDeflyWallet],
+        [WalletId.KIBISIS, mockKibisisWallet]
+      ])
+
+      // Mock isConnected to return false for the test
+      vi.spyOn(mockDeflyWallet, 'isConnected', 'get').mockReturnValue(false)
+      vi.spyOn(mockKibisisWallet, 'isConnected', 'get').mockReturnValue(false)
+
+      const deflyDisconnectMock = mockDeflyWallet.disconnect as Mock
+      const kibisisDisconnectMock = mockKibisisWallet.disconnect as Mock
+
+      await manager.disconnect()
+
+      expect(deflyDisconnectMock).not.toHaveBeenCalled()
+      expect(kibisisDisconnectMock).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/packages/use-wallet/src/manager.ts b/packages/use-wallet/src/manager.ts
index c58b6b1f..eab6041d 100644
--- a/packages/use-wallet/src/manager.ts
+++ b/packages/use-wallet/src/manager.ts
@@ -176,6 +176,14 @@ export class WalletManager {
     await Promise.all(promises)
   }
 
+  public async disconnect(): Promise<void> {
+    const promises = this.wallets
+      .filter((wallet) => wallet.isConnected)
+      .map((wallet) => wallet?.disconnect())
+
+    await Promise.all(promises)
+  }
+
   // ---------- Network ----------------------------------------------- //
 
   private initNetworkConfig(network: NetworkId, config: NetworkConfig): NetworkConfigMap {
@@ -206,9 +214,17 @@ export class WalletManager {
     return this.algodClient
   }
 
-  public setActiveNetwork = (networkId: NetworkId): void => {
+  public setActiveNetwork = async (networkId: NetworkId): Promise<void> => {
+    if (this.activeNetwork === networkId) {
+      return
+    }
+    // Disconnect any connected wallets
+    await this.disconnect()
+
     setActiveNetwork(this.store, { networkId })
     this.algodClient = this.createAlgodClient(this.networkConfig[networkId])
+
+    console.info(`[Manager] ✅ Active network set to ${networkId}.`)
   }
 
   public get activeNetwork(): NetworkId {