Crypto Payments
Production-ready Web3 wallet integration demonstrating React Context API with useReducer for complex state management, network switching, and server-side cryptographic verification.
State Pattern
Context + Reducer
Wallet Library
ethers.js v6
Networks
6 Supported
Verification
Server-Side
Implementation Details
React Context + useReducer
Complex state management pattern recommended by React docs for multi-value state with related actions.
type WalletAction =
| { type: "CONNECT_START" }
| { type: "CONNECT_SUCCESS"; payload: {...} }
| { type: "NETWORK_CHANGE"; payload: NetworkInfo }
| { type: "TRANSACTION_ADD"; payload: Transaction }
// ... 12 action types total
function walletReducer(state, action) {
switch (action.type) {
case "CONNECT_START":
return { ...state, isConnecting: true }
// ... immutable state updates
}
}Network Detection & Switching
Real-time chain change detection via event listeners, with programmatic network switching via wallet_switchEthereumChain.
// Listen for network changes
ethereum.on("chainChanged", (chainIdHex) => {
const chainId = parseInt(chainIdHex, 16)
const network = getNetworkByChainId(chainId)
dispatch({ type: "NETWORK_CHANGE", payload: network })
})
// Programmatic switch
await ethereum.request({
method: "wallet_switchEthereumChain",
params: [{ chainId: `0x${chainId.toString(16)}` }],
})Server-Side Verification
Cryptographic signature verification on the backend using ethers.verifyMessage to recover the signer address.
// Server API route
import { ethers } from "ethers"
export function verifySignature(
message: string,
signature: string,
address: string
) {
const recovered = ethers.verifyMessage(message, signature)
return recovered.toLowerCase() === address.toLowerCase()
}Production-Ready Patterns
Enterprise State Management
Scalable architecture using React Context API for global state, useReducer for complex state transitions, and TypeScript for complete type safety across the application.
Multi-Chain Architecture
Production wallet integration with dynamic network detection, programmatic chain switching, comprehensive error handling, and real-time event subscriptions.
Cryptographic Security
End-to-end signature verification: client-side signing with ethers.js v6, secure API transport, and server-side cryptographic address recovery.
Fintech-Grade UX
Thoughtful UX with loading states, error messages, transaction history, and network indicators—the polish that separates production apps from prototypes.
Explore More
Check out the full source code or other projects