Web3 Wallet Connect Button — Free HTML CSS JS Snippet

Every decentralized application (dApp) needs some version of the "Connect Wallet" button — the entry point through which a user links their browser-based crypto wallet to a website so it can read their address, network, and balances, and request transaction signatures. This snippet builds the complete front-end interaction for that flow: a provider picker, a simulated connecting state, and a connected account menu with copy-to-clipboard and disconnect actions — entirely in vanilla HTML, CSS, and JS, with no real blockchain calls, since this is a UI pattern demo rather than a working Web3 integration.

The four-state button

The button cycles through four states tracked by a single state variable: disconnected (shows "Connect Wallet"), picking (the provider dropdown is open), connecting (a spinner replaces the label for roughly one second to simulate the real latency of a wallet extension responding to a connection request), and connected (the button itself becomes the truncated address with a green status dot). Each state transition calls renderButton(), which swaps the button's inner HTML and CSS classes to reflect the current state — this centralizes all visual logic in one function rather than scattering conditional class toggles across multiple event handlers.

Provider selection without real trademarked assets

Clicking the button while disconnected opens a dropdown listing three common wallet providers by name — MetaMask, Coinbase Wallet, and WalletConnect — each represented with a simple inline SVG glyph and a distinct accent color rather than the providers' actual trademarked logos, since reproducing real brand marks isn't appropriate for a generic demo component. Selecting any row calls selectProvider(), which immediately transitions to the connecting state and schedules a setTimeout that resolves to connected after 1000ms — standing in for the real async round-trip where a browser extension like MetaMask would pop up its own permission prompt and the page would await a promise from window.ethereum.request({ method: 'eth_requestAccounts' }).

Truncated address and network badge

Once connected, the button displays truncate(fullAddress), which slices the first 6 and last 4 characters of the mock address (0x71C7656EC7ab88b098defB751B7401B5f6d8976 becomes 0x71C7...8976) — the universal convention for displaying Ethereum-style addresses in constrained UI space, since full 42-character addresses are unreadable inline. The account dropdown additionally shows the network the wallet is connected to via a small badge with a colored status dot, which matters because the same address can hold entirely different assets on different chains (Ethereum mainnet vs. an L2 like Arbitrum), and users need to see at a glance which network a dApp believes they're on before approving any transaction.

Real clipboard copy, no fake behavior

The "Copy Address" action in the connected account menu uses the genuine browser Clipboard API — navigator.clipboard.writeText(fullAddress) — rather than faking the copy interaction, so this piece of the demo is fully functional exactly as it would be in production. The button label briefly changes to "Copied!" for 1.5 seconds via a setTimeout-driven revert, giving the user immediate, unambiguous confirmation that the action succeeded.

Why this matters for 2026 trust-driven UX

Wallet-connection flows sit at the highest-stakes trust boundary in any product: a user is about to grant a website visibility into their on-chain identity and, eventually, transaction-signing permission. Interfaces here benefit enormously from trust-driven UX principles — visible, unambiguous state (never leave the user wondering "am I connected or not?"), clearly labeled network context, and a disconnect action that's always one click away. This snippet's explicit state machine, visible spinner during the async gap, and persistent status dot are all in service of that same principle: never leave connection state ambiguous.