Overview
W3Wallet is a browser extension wallet provider for Algorand. It integrates with the W3 Wallet browser extension, providing a native browser-based wallet experience.
The W3 Wallet extension injects a provider into the browser’s window object, which this integration uses to connect and sign transactions.
Installation
Install the core library:
npm install @txnlab/use-wallet algosdk
Users must have the W3 Wallet browser extension installed to use this provider.
Basic Usage
import { WalletId, WalletManager } from '@txnlab/use-wallet'
const walletManager = new WalletManager({
wallets: [
WalletId.W3_WALLET
]
})
Configuration
W3Wallet does not require any configuration options:
import { WalletId, WalletManager } from '@txnlab/use-wallet'
const walletManager = new WalletManager({
wallets: [
{
id: WalletId.W3_WALLET,
// No options needed
}
]
})
Features
Browser Extension Integration
W3Wallet integrates with the browser extension through the injected provider:
interface W3WalletProvider {
isConnected: () => Promise<boolean>
account: () => Promise<WalletAccount>
signTxns: (transactions: WalletTransaction[]) => Promise<(string | null)[]>
}
window.w3walletAlgorand.
Single Account
W3 Wallet currently supports a single active account at a time. When connecting, one account will be returned.
Session Persistence
W3 Wallet maintains its own session state through the browser extension. The connection status persists across page reloads.
Methods
connect()
Initiates the connection flow with W3 Wallet. This will prompt the user to approve the connection in the browser extension.
const accounts = await w3Wallet.connect()
Promise<WalletAccount[]> - Array containing the connected account
disconnect()
Disconnects from W3 Wallet and clears the session.
await w3Wallet.disconnect()
Promise<void>
resumeSession()
Attempts to restore a previous session with W3 Wallet.
await w3Wallet.resumeSession()
Promise<void>
signTransactions()
Signs transactions using W3 Wallet. Supports both algosdk.Transaction objects and raw Uint8Array encoded transactions.
const signedTxns = await w3Wallet.signTransactions(txnGroup, indexesToSign)
txnGroup
algosdk.Transaction[] | Uint8Array[]
required
Array of transactions to sign. Can be Transaction objects or encoded transaction bytes.
Indexes of transactions to sign. If not provided, all transactions will be signed.
Promise<(Uint8Array | null)[]> - Array of signed transactions
transactionSigner()
Returns a transaction signer compatible with algosdk.AtomicTransactionComposer.
const atc = new algosdk.AtomicTransactionComposer()
atc.addTransaction({
txn: transaction,
signer: w3Wallet.transactionSigner
})
algosdk.TransactionSigner
W3 Wallet is a browser extension and only works in desktop web browsers.
| Platform | Supported |
|---|
| Desktop browsers | ✅ Yes (with extension) |
| Mobile browsers | ❌ No |
| Node.js | ❌ No |
Detection
Check if W3 Wallet is available in the browser:
const isAvailable = typeof window !== 'undefined' &&
'w3walletAlgorand' in window
if (!isAvailable) {
console.log('Please install the W3 Wallet browser extension')
}
Example Usage
React
import { useWallet } from '@txnlab/use-wallet-react'
function WalletConnect() {
const { wallets } = useWallet()
const w3Wallet = wallets.find(w => w.id === 'w3-wallet')
const handleConnect = async () => {
try {
await w3Wallet?.connect()
} catch (error) {
console.error('Failed to connect:', error)
}
}
return (
<button onClick={handleConnect}>
Connect W3 Wallet
</button>
)
}
Transaction Signing
import algosdk from 'algosdk'
const txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
from: w3Wallet.activeAccount?.address!,
to: 'RECEIVER_ADDRESS',
amount: 1000000,
suggestedParams: await algodClient.getTransactionParams().do()
})
const signedTxns = await w3Wallet.signTransactions([txn])
const { txId } = await algodClient.sendRawTransaction(signedTxns[0]!).do()
Error Handling
try {
await w3Wallet.connect()
} catch (error) {
if (error instanceof Error) {
if (error.message.includes('not installed')) {
console.log('Please install W3 Wallet extension')
} else {
console.error('Connection error:', error.message)
}
}
}
Class Definition
export class W3Wallet extends BaseWallet {
constructor(args: WalletConstructor<WalletId.W3_WALLET>)
static defaultMetadata: {
name: 'W3 Wallet'
icon: string // SVG data URI
}
connect(): Promise<WalletAccount[]>
disconnect(): Promise<void>
resumeSession(): Promise<void>
signTransactions<T extends algosdk.Transaction[] | Uint8Array[]>(
txnGroup: T | T[],
indexesToSign?: number[]
): Promise<(Uint8Array | null)[]>
}
See Also
View the W3 Wallet implementation: w3wallet.ts