Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): return isReconnecting from useWallet #330

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(react): return isReconnecting from useWallet #330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/guides/react-quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div>Reconnecting to wallet...</div>
}

return (
<div>
Expand All @@ -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.
Expand Down
9 changes: 7 additions & 2 deletions packages/use-wallet-react/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export * from '@txnlab/use-wallet'

interface IWalletContext {
manager: WalletManager
isReconnecting: boolean
algodClient: algosdk.Algodv2
setAlgodClient: React.Dispatch<React.SetStateAction<algosdk.Algodv2>>
}
Expand All @@ -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)

Expand Down Expand Up @@ -108,6 +109,7 @@ export const useWallet = () => {

return {
wallets,
isReconnecting,
algodClient,
activeNetwork,
activeWallet,
Expand All @@ -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
Expand All @@ -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)
}
}

Expand All @@ -152,7 +157,7 @@ export const WalletProvider = ({ manager, children }: WalletProviderProps): JSX.
}, [manager])

return (
<WalletContext.Provider value={{ manager, algodClient, setAlgodClient }}>
<WalletContext.Provider value={{ manager, isReconnecting, algodClient, setAlgodClient }}>
{children}
</WalletContext.Provider>
)
Expand Down
Loading