chore: upgrade to use-wallet v4 (#40)

* chore: update to use-wallet@4, algosdk@3 and utils-ts@8

Author: PatrickDinh

examples/cloud_provider/production_react_netlify/.env.template

@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

examples/cloud_provider/production_react_netlify/package.json

@@ -12,7 +12,7 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^4.0.0",
+    "@algorandfoundation/algokit-client-generator": "^4.0.6",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
@@ -35,12 +35,12 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^7.0.0",
-    "@blockshake/defly-connect": "1.1.6",
-    "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "1.3.5",
-    "@txnlab/use-wallet": "^2.8.2",
-    "algosdk": ">=2.9.0 <3.0",
+    "@algorandfoundation/algokit-utils": "^8.1.0",
+    "@blockshake/defly-connect": "^1.2.1",
+    "@perawallet/connect": "^1.4.1",
+    "@txnlab/use-wallet": "^4.0.0",
+    "@txnlab/use-wallet-react": "^4.0.0",
+    "algosdk": "^3.0.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

examples/cloud_provider/production_react_netlify/src/App.tsx

@@ -1,33 +1,26 @@
-import { DeflyWalletConnect } from '@blockshake/defly-connect'
-import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
+import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 import { SnackbarProvider } from 'notistack'
 import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
-let providersArray: ProvidersArray
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
+let supportedWallets: SupportedWallet[]
+if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
   const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
+  supportedWallets = [
     {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: kmdConfig.server,
+      id: WalletId.KMD,
+      options: {
+        baseServer: kmdConfig.server,
         token: String(kmdConfig.token),
         port: String(kmdConfig.port),
       },
     },
   ]
 } else {
-  providersArray = [
-    { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
-    { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
-    { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
-    { id: PROVIDER_ID.EXODUS },
+  supportedWallets = [
+    { id: WalletId.DEFLY },
+    { id: WalletId.PERA },
+    { id: WalletId.EXODUS },
     // If you are interested in WalletConnect v2 provider
     // refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
   ]
@@ -36,20 +29,26 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
-  const walletProviders = useInitializeProviders({
-    providers: providersArray,
-    nodeConfig: {
-      network: algodConfig.network,
-      nodeServer: algodConfig.server,
-      nodePort: String(algodConfig.port),
-      nodeToken: String(algodConfig.token),
+  const walletManager = new WalletManager({
+    wallets: supportedWallets,
+    defaultNetwork: algodConfig.network,
+    networks: {
+      [algodConfig.network]: {
+        algod: {
+          baseServer: algodConfig.server,
+          port: algodConfig.port,
+          token: String(algodConfig.token),
+        },
+      },
+    },
+    options: {
+      resetNetwork: true,
     },
-    algosdkStatic: algosdk,
   })
 
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
+      <WalletProvider manager={walletManager}>
         <Home />
       </WalletProvider>
     </SnackbarProvider>

examples/cloud_provider/production_react_netlify/src/Home.tsx

@@ -1,5 +1,5 @@
 // src/components/Home.tsx
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'

examples/cloud_provider/production_react_netlify/src/components/Account.tsx

@@ -1,4 +1,4 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'

examples/cloud_provider/production_react_netlify/src/components/ConnectWallet.tsx

@@ -1,4 +1,4 @@
-import { Provider, useWallet } from '@txnlab/use-wallet'
+import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,9 +7,9 @@ interface ConnectWalletInterface {
 }
 
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { providers, activeAddress } = useWallet()
+  const { wallets, activeAddress } = useWallet()
 
-  const isKmd = (provider: Provider) => provider.metadata.name.toLowerCase() === 'kmd'
+  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
 
   return (
     <dialog id="connect_wallet_modal" className={`modal ${openModal ? 'modal-open' : ''}`}>
@@ -25,23 +25,23 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           )}
 
           {!activeAddress &&
-            providers?.map((provider) => (
+            wallets?.map((wallet) => (
               <button
-                data-test-id={`${provider.metadata.id}-connect`}
+                data-test-id={`${wallet.id}-connect`}
                 className="btn border-teal-800 border-1  m-2"
-                key={`provider-${provider.metadata.id}`}
+                key={`provider-${wallet.id}`}
                 onClick={() => {
-                  return provider.connect()
+                  return wallet.connect()
                 }}
               >
-                {!isKmd(provider) && (
+                {!isKmd(wallet) && (
                   <img
-                    alt={`wallet_icon_${provider.metadata.id}`}
-                    src={provider.metadata.icon}
+                    alt={`wallet_icon_${wallet.id}`}
+                    src={wallet.metadata.icon}
                     style={{ objectFit: 'contain', width: '30px', height: 'auto' }}
                   />
                 )}
-                <span>{isKmd(provider) ? 'LocalNet Wallet' : provider.metadata.name}</span>
+                <span>{isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}</span>
               </button>
             ))}
         </div>
@@ -60,16 +60,16 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
             <button
               className="btn btn-warning"
               data-test-id="logout"
-              onClick={() => {
-                if (providers) {
-                  const activeProvider = providers.find((p) => p.isActive)
-                  if (activeProvider) {
-                    activeProvider.disconnect()
+              onClick={async () => {
+                if (wallets) {
+                  const activeWallet = wallets.find((w) => w.isActive)
+                  if (activeWallet) {
+                    await activeWallet.disconnect()
                   } else {
                     // Required for logout/cleanup of inactive providers
                     // For instance, when you login to localnet wallet and switch network
                     // to testnet/mainnet or vice verse.
-                    localStorage.removeItem('txnlab-use-wallet')
+                    localStorage.removeItem('@txnlab/use-wallet:v3')
                     window.location.reload()
                   }
                 }

examples/cloud_provider/production_react_netlify/src/components/Transact.tsx

@@ -1,5 +1,5 @@
 import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,20 +18,20 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress } = useWallet()
+  const { transactionSigner, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
 
-    if (!signer || !activeAddress) {
+    if (!transactionSigner || !activeAddress) {
       enqueueSnackbar('Please connect wallet first', { variant: 'warning' })
       return
     }
 
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
       const result = await algorand.send.payment({
-        signer,
+        signer: transactionSigner,
         sender: activeAddress,
         receiver: receiverAddress,
         amount: algo(1),

examples/cloud_provider/production_react_netlify/src/utils/ellipseAddress.ts

@@ -1,3 +1,3 @@
-export function ellipseAddress(address = ``, width = 6): string {
-  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : address
+export function ellipseAddress(address: string | null, width = 6): string {
+  return address ? `${address.slice(0, width)}...${address.slice(-width)}` : (address ?? '')
 }

examples/cloud_provider/production_react_netlify/tests/example.spec.ts

@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test'
 const localnet = algorandFixture()
 
 test.beforeEach(async ({ page }) => {
-  await localnet.beforeEach()
+  await localnet.newScope()
   await page.goto('http://localhost:5173/')
 })
 
@@ -30,7 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.toString())
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent

examples/cloud_provider/production_react_vercel/.env.template

@@ -9,7 +9,7 @@ VITE_ENVIRONMENT=local
 VITE_ALGOD_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 VITE_ALGOD_SERVER=http://localhost
 VITE_ALGOD_PORT=4001
-VITE_ALGOD_NETWORK=""
+VITE_ALGOD_NETWORK=localnet
 
 # Indexer
 VITE_INDEXER_TOKEN=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa