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} )