Use-wallet-UI Update

Author: Ganainmtech

projects/Saver-frontend/package-lock.json

@@ -34,13 +34,15 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
-    "@algorandfoundation/algokit-utils": "^6.0.2",
+    "@algorandfoundation/algokit-utils": "^6.2.1",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
     "@txnlab/use-wallet": "^2.8.2",
+    "@txnlab/use-wallet-react": "^4.1.0",
+    "@txnlab/use-wallet-ui-react": "^0.2.3",
     "@walletconnect/modal-sign-html": "^2.6.1",
-    "algosdk": "^2.7.0",
+    "algosdk": "^3.3.1",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

projects/Saver-frontend/package.json

@@ -1,67 +1,38 @@
-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 { NetworkId, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
+import { WalletButton, WalletUIProvider } from '@txnlab/use-wallet-ui-react'
+import '@txnlab/use-wallet-ui-react/dist/style.css'
+
 import { SnackbarProvider } from 'notistack'
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'
+
 import Home from './Home'
+import AboutSaver from './components/AboutSaver'
 import StartSaver from './components/StartSaver'
 import ViewSavings from './components/ViewSavings'
-import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
-import AboutSaver from './components/AboutSaver'
 
-let providersArray: ProvidersArray
-
-if (import.meta.env.VITE_ALGOD_NETWORK === '') {
-  const kmdConfig = getKmdConfigFromViteEnvironment()
-  providersArray = [
-    {
-      id: PROVIDER_ID.KMD,
-      clientOptions: {
-        wallet: kmdConfig.wallet,
-        password: kmdConfig.password,
-        host: 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 },
-    // For WalletConnect v2 provider, refer to https://github.com/TxnLab/use-wallet for integration instructions
-  ]
-}
+const walletManager = new WalletManager({
+  wallets: [WalletId.PERA, WalletId.DEFLY, WalletId.EXODUS],
+  defaultNetwork: NetworkId.TESTNET,
+})
 
 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),
-    },
-    algosdkStatic: algosdk,
-  })
-
   return (
     <SnackbarProvider maxSnack={3}>
-      <WalletProvider value={walletProviders}>
-        <Router>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/StartSuperSaver" element={<StartSaver openModal={true} setModalState={() => {}} />} />
-            <Route path="/ViewSavings" element={<ViewSavings />} />
-            <Route path="/AboutSaver" element={<AboutSaver />} />
-          </Routes>
-        </Router>
+      <WalletProvider manager={walletManager}>
+        <WalletUIProvider>
+          <Router>
+            {/* Wallet Connect Button (top right corner) */}
+            <div data-wallet-ui style={{ position: 'fixed', top: 20, right: 20, zIndex: 1000 }}>
+              <WalletButton />
+            </div>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/StartSuperSaver" element={<StartSaver openModal={true} setModalState={() => {}} />} />
+              <Route path="/ViewSavings" element={<ViewSavings />} />
+              <Route path="/AboutSaver" element={<AboutSaver />} />
+            </Routes>
+          </Router>
+        </WalletUIProvider>
       </WalletProvider>
     </SnackbarProvider>
   )

projects/Saver-frontend/src/App.tsx

@@ -1,7 +1,6 @@
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import ConnectWallet from './components/ConnectWallet'
 
 const Home: React.FC = () => {
   const [openWalletModal, setOpenWalletModal] = useState(false)
@@ -32,26 +31,6 @@ const Home: React.FC = () => {
       <header className="bg-teal-500 text-white py-5 px-8 shadow-lg">
         <div className="flex justify-between items-center">
           <h1 className="text-3xl font-extrabold tracking-wide">Super Saver App</h1>
-          <nav className="flex items-center space-x-5">
-            <a href="#home" className="hover:underline">
-              Home
-            </a>
-            <a href="/StartSuperSaver" className="hover:underline">
-              Start Saving
-            </a>
-            <a href="/ViewSavings" className="hover:underline">
-              Your Savings
-            </a>
-            <a href="/AboutSaver" className="hover:underline">
-              About
-            </a>
-            <button
-              className="btn btn-outline btn-sm bg-white text-teal-500 border-teal-500 hover:bg-teal-600 hover:text-white"
-              onClick={toggleWalletModal}
-            >
-              {activeAddress ? 'Wallet Connected' : 'Connect Wallet'}
-            </button>
-          </nav>
         </div>
       </header>
 
@@ -117,7 +96,7 @@ const Home: React.FC = () => {
       </footer>
 
       {/* Wallet Modal */}
-      <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+      {/* <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} /> */}
     </div>
   )
 }

projects/Saver-frontend/src/Home.tsx

@@ -1,7 +1,7 @@
 import * as algokit from '@algorandfoundation/algokit-utils'
 import { TransactionSignerAccount } from '@algorandfoundation/algokit-utils/types/account'
 import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { useSnackbar } from 'notistack'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -23,58 +23,76 @@ const StartSaver = ({ openModal, setModalState }: AppCallsInterface) => {
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
-  const { signer, activeAddress } = useWallet()
+  const { activeAddress, transactionSigner } = useWallet()
+  const signer = transactionSigner
 
-  const deployedAppID = 740800501
+  const deployedAppID = 740800501n
   const appAddress = 'NSBKY7G5NNYVF2BKIJL6MAJ4QW6PZSDFMGNQ3EDULAKHBWX2MPK6YZLS2A'
   const algodClient = algokit.getAlgoClient(getAlgodConfigFromViteEnvironment())
 
-  const getAppDetails = (appId: number): AppDetails => ({
-    resolveBy: 'id',
-    sender: { signer, addr: activeAddress } as TransactionSignerAccount,
-    id: appId,
-  })
+  const getAppDetails = (appId: bigint): AppDetails => {
+    console.log('[AppDetails] Active address:', activeAddress)
+    return {
+      resolveBy: 'id',
+      sender: { signer, addr: activeAddress! } as TransactionSignerAccount,
+      id: Number(appId),
+    }
+  }
 
   const showSnackbar = (message: string, variant: 'success' | 'error') => {
     enqueueSnackbar(message, { variant })
   }
 
   const refreshState = async () => {
     if (!activeAddress) return
-
-    const appClient = new SaverClient(getAppDetails(deployedAppID), algodClient)
     try {
-      const local = await appClient.getLocalState(activeAddress)
+      const accountInfo = await algodClient.accountInformation(activeAddress).do()
+      const appLocalState = accountInfo.appsLocalState?.find((app) => app.id === deployedAppID)
+      const keyValue = appLocalState?.keyValue || []
+
+      const getUintValue = (key: string) => {
+        const entry = keyValue.find((kv: any) => {
+          const decodedKey = Buffer.from(kv.key, 'base64').toString()
+          return decodedKey === key
+        })
+        return entry ? Number(entry.value.uint) : 0
+      }
+
       setAlreadyOptedIn(true)
-      setCurrentGoal(local.userGoal?.asNumber() || null)
-      setCurrentBalance(local.userBalance?.asNumber() || null)
-    } catch {
+      setCurrentGoal(getUintValue('user_goal'))
+      setCurrentBalance(getUintValue('user_balance'))
+    } catch (err) {
+      console.error('[refreshState] Failed to get local state:', err)
       setAlreadyOptedIn(false)
       setCurrentGoal(null)
       setCurrentBalance(null)
     }
   }
 
   useEffect(() => {
+    console.log('[useEffect] activeAddress changed:', activeAddress)
     refreshState()
   }, [activeAddress])
 
   const sendAppCall = async () => {
+    if (!activeAddress) return showSnackbar('Connect your wallet first.', 'error')
     setLoading(true)
     try {
       const appClient = new SaverClient(getAppDetails(deployedAppID), algodClient)
       const optInResponse = await appClient.optIn
       await optInResponse.bare()
       showSnackbar('Successfully opted into the app!', 'success')
       await refreshState()
-    } catch {
+    } catch (err) {
+      console.error('[sendAppCall] Error:', err)
       showSnackbar('Error during opt-in.', 'error')
     } finally {
       setLoading(false)
     }
   }
 
   const sendGoalTxn = async () => {
+    if (!activeAddress) return showSnackbar('Connect your wallet first.', 'error')
     setLoading(true)
     try {
       const goalAmount = parseInt(goalInput, 10)
@@ -87,14 +105,16 @@ const StartSaver = ({ openModal, setModalState }: AppCallsInterface) => {
       await appClient.createSaverJar({ goalAmount: microAlgos })
       showSnackbar('Savings goal set!', 'success')
       await refreshState()
-    } catch {
+    } catch (err) {
+      console.error('[sendGoalTxn] Error:', err)
       showSnackbar('Error setting goal.', 'error')
     } finally {
       setLoading(false)
     }
   }
 
   const depositFunds = async () => {
+    if (!activeAddress) return showSnackbar('Connect your wallet first.', 'error')
     setLoading(true)
     try {
       const amount = parseInt(depositInput, 10)
@@ -105,45 +125,47 @@ const StartSaver = ({ openModal, setModalState }: AppCallsInterface) => {
       const appClient = new SaverClient(getAppDetails(deployedAppID), algodClient)
       const paymentTxn = await algokit.transferAlgos(
         {
-          from: { addr: activeAddress || '', signer },
+          from: { addr: activeAddress, signer },
           to: appAddress,
           amount: algokit.algos(amount),
           skipSending: true,
         },
         algodClient,
       )
-      await appClient.deposit({ depositTxn: paymentTxn.transaction }, { sender: { addr: activeAddress!, signer } })
+      await appClient.deposit({ depositTxn: paymentTxn.transaction }, { sender: { addr: activeAddress, signer } })
       showSnackbar('Deposit successful!', 'success')
       await refreshState()
-    } catch {
+    } catch (err) {
+      console.error('[depositFunds] Error:', err)
       showSnackbar('Error during deposit.', 'error')
     } finally {
       setLoading(false)
     }
   }
 
   const withdrawFunds = async () => {
+    if (!activeAddress) return showSnackbar('Connect your wallet first.', 'error')
     setLoading(true)
     try {
       const appClient = new SaverClient(getAppDetails(deployedAppID), algodClient)
       await appClient.withdraw(
         {},
         {
-          sender: { addr: activeAddress || '', signer },
+          sender: { addr: activeAddress, signer },
           sendParams: { fee: algokit.microAlgos(2000) },
         },
       )
       showSnackbar('Withdrawal complete!', 'success')
       await refreshState()
-    } catch {
+    } catch (err) {
+      console.error('[withdrawFunds] Error:', err)
       showSnackbar('Error during withdrawal.', 'error')
     } finally {
       setLoading(false)
     }
   }
 
   const progressPercent = currentGoal && currentBalance ? Math.min(Math.round((currentBalance / currentGoal) * 100), 100) : 0
-
   const progressColor = progressPercent >= 100 ? 'bg-green-500' : 'bg-blue-400'
 
   return (

projects/Saver-frontend/src/components/StartSaver.tsx

@@ -1,3 +1,4 @@
+/*
 import * as algokit from '@algorandfoundation/algokit-utils'
 import { useWallet } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
@@ -92,4 +93,6 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
   )
 }
 
+
 export default Transact
+*/