diff --git a/docs/guides/react-quick-start.md b/docs/guides/react-quick-start.md
index 80f81517..677e7791 100644
--- a/docs/guides/react-quick-start.md
+++ b/docs/guides/react-quick-start.md
@@ -49,7 +49,11 @@ Now, in any component, you can use the `useWallet` hook to access the wallet man
import { useWallet } from '@txnlab/use-wallet-react'
function WalletMenu() {
- const { wallets, activeWallet, activeAccount } = useWallet()
+ const { wallets, activeWallet, activeAccount, isReconnecting } = useWallet()
+
+ if (isReconnecting) {
+ return
Reconnecting to wallet...
+ }
return (
@@ -76,6 +80,8 @@ function WalletMenu() {
}
```
+The `isReconnecting` state is a boolean that helps manage wallet reconnection flows. It starts as `true` during both SSR and initial client-side mounting. During the first mount, the `WalletProvider` automatically attempts to restore any previously connected wallet sessions. Once this reconnection process completes - whether successful or not - `isReconnecting` switches to `false`.
+
## Signing Transactions
To sign and send transactions, you can use the library's `algodClient` instance and the `transactionSigner` provided by the active wallet.
diff --git a/packages/use-wallet-react/src/index.tsx b/packages/use-wallet-react/src/index.tsx
index 6d8e2b4b..a8755a1f 100644
--- a/packages/use-wallet-react/src/index.tsx
+++ b/packages/use-wallet-react/src/index.tsx
@@ -7,6 +7,7 @@ export * from '@txnlab/use-wallet'
interface IWalletContext {
manager: WalletManager
+ isReconnecting: boolean
algodClient: algosdk.Algodv2
setAlgodClient: React.Dispatch>
}
@@ -33,7 +34,7 @@ export const useWallet = () => {
throw new Error('useWallet must be used within the WalletProvider')
}
- const { manager, algodClient, setAlgodClient } = context
+ const { manager, isReconnecting, algodClient, setAlgodClient } = context
const activeNetwork = useStore(manager.store, (state) => state.activeNetwork)
@@ -108,6 +109,7 @@ export const useWallet = () => {
return {
wallets,
+ isReconnecting,
algodClient,
activeNetwork,
activeWallet,
@@ -129,6 +131,7 @@ interface WalletProviderProps {
export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.Element => {
const [algodClient, setAlgodClient] = React.useState(manager.algodClient)
+ const [isReconnecting, setIsReconnecting] = React.useState(true)
React.useEffect(() => {
manager.algodClient = algodClient
@@ -142,6 +145,8 @@ export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.
await manager.resumeSessions()
} catch (error) {
console.error('Error resuming sessions:', error)
+ } finally {
+ setIsReconnecting(false)
}
}
@@ -152,7 +157,7 @@ export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.
}, [manager])
return (
-
+
{children}
)