Loading...
}
if (isAuthenticated) {
return (
Welcome!
Address: {address}
{mode === 'login' ? 'Login' : 'Register'}
{error &&{error}
}
@humanwallet/sdk
Transaction pending...
{userOpHash && (User Op: {userOpHash.slice(0, 10)}...
)}
โ
)
}
if (success === false || error) {
return (
Transaction confirmed!
{transactionHash && (Hash: {transactionHash.slice(0, 10)}... View on Etherscan
)}
โ
)
}
return null
}
```
#### Complete Transaction Flow Component
```typescript
import React, { useState } from 'react'
import { useTransaction } from './useTransaction'
import { TransactionStatus } from './TransactionStatus'
import { ClientRepository } from '@humanwallet/sdk'
interface TokenTransferProps {
client: ClientRepository
tokenAddress: string
tokenAbi: any[]
}
export function TokenTransfer({ client, tokenAddress, tokenAbi }: TokenTransferProps) {
const [recipient, setRecipient] = useState('')
const [amount, setAmount] = useState('')
const transaction = useTransaction(client)
const handleTransfer = async (e: React.FormEvent) => {
e.preventDefault()
if (!recipient || !amount) {
alert('Please fill all fields')
return
}
try {
await transaction.executeTransaction({
address: tokenAddress,
abi: tokenAbi,
functionName: 'transfer',
args: [recipient, BigInt(amount)]
})
} catch (error) {
console.error('Transfer failed:', error)
}
}
return (
Transaction failed
{error &&{error}
}Token Transfer
Enable users to connect their existing HumanWallet using secure passkey authentication
๐ Passkey Auth
โก No Extensions
๐ One-Click Connect
Enable new users to create secure HumanWallet accounts with passkey authentication
๐ค New Users
๐ Passkey Creation
โก Instant Setup
Connect your React application to the blockchain in minutes
โก Quick Setup
๐ Secure
๐ Production Ready
โก Quick Add
Existing Wagmi Setup
Just add HumanWallet connector to your current Wagmi configuration. No other changes needed!
npm install @humanwallet/connector
// Add to your connectors array
// Add to your connectors array
๐๏ธ Full Setup
New Wagmi Project
Setting up from scratch? Follow our complete guide below for the full Wagmi + HumanWallet setup.
Complete installation
+ configuration guide
+ configuration guide
@humanwallet/core
{status === 'pending' && (
)
}
```
### Error Handling
#### Timeout Handling
```typescript
async function waitWithTimeout(hash: string, timeoutMs: number = 60000) {
try {
const receipt = await waitForUserOperation(config, hash, {
timeout: timeoutMs,
})
return receipt
} catch (error) {
if (error.message.includes("timeout")) {
// Transaction might still be pending
console.log("Transaction timed out but may still complete")
// Optionally, continue monitoring with longer timeout
return waitForUserOperation(config, hash, {
timeout: timeoutMs * 2,
})
}
throw error
}
}
```
#### Network Error Recovery
```typescript
async function waitWithRetry(hash: string, maxRetries: number = 3) {
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await waitForUserOperation(config, hash)
} catch (error) {
console.log(`Attempt ${attempt} failed:`, error.message)
if (attempt === maxRetries) {
throw new Error(`Failed to confirm transaction after ${maxRetries} attempts`)
}
// Wait before retry
await new Promise((resolve) => setTimeout(resolve, 5000 * attempt))
}
}
}
```
### Best Practices
#### Progress Feedback
```typescript
async function executeWithProgress(contractParams: WriteContractParameters) {
// 1. Show submission state
console.log("๐ Submitting transaction...")
const hash = await writeContract(authenticatedConfig, contractParams)
// 2. Show pending state
console.log("โณ Transaction submitted, waiting for confirmation...")
console.log("Hash:", hash)
// 3. Monitor with timeout
const receipt = await waitForUserOperation(config, hash, {
timeout: 90000, // 1.5 minutes
})
// 4. Show final result
if (receipt.success) {
console.log("โ
Transaction confirmed!")
} else {
console.log("โ Transaction failed")
}
return receipt
}
```
#### Batch Monitoring
```typescript
async function monitorBatchExecution(batchHash: string) {
console.log("Monitoring batch execution...")
const startTime = Date.now()
const receipt = await waitForUserOperation(config, batchHash, {
timeout: 180000, // 3 minutes for complex batches
})
const duration = Date.now() - startTime
console.log(`Batch completed in ${duration}ms`)
if (receipt.success) {
console.log(`โ
All ${receipt.logs.length} operations succeeded`)
} else {
console.log("โ Batch failed - check individual operations")
}
return receipt
}
```
#### Gas Usage Tracking
```typescript
async function trackGasUsage(operations: WriteContractParameters[]) {
const startTime = Date.now()
// Execute operations
const hashes = await Promise.all(operations.map((op) => writeContract(authenticatedConfig, op)))
// Wait for all confirmations
const receipts = await Promise.all(hashes.map((hash) => waitForUserOperation(config, hash)))
// Calculate metrics
const totalGasUsed = receipts.reduce((sum, receipt) => sum + receipt.gasUsed, 0n)
const successfulOps = receipts.filter((r) => r.success).length
const duration = Date.now() - startTime
console.log("Gas usage summary:", {
totalOperations: operations.length,
successfulOperations: successfulOps,
totalGasUsed: totalGasUsed.toString(),
averageGasPerOp: (totalGasUsed / BigInt(receipts.length)).toString(),
executionTime: `${duration}ms`,
})
return receipts
}
```
โณ Transaction pending...
)}
{status === 'confirmed' && (
Hash: {hash}
โ
Transaction confirmed!
)}
{status === 'failed' && (
Block: {receipt?.blockNumber.toString()}
โ Transaction failed
)}
Please try again