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
TxnLab · Jun 19, 2024 · ef07c4d · ef07c4d
1 parent 2c1762d
commit ef07c4d
Show file tree

Hide file tree

Showing 28 changed files with 1,323 additions and 416 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;