How users can use connect their different wallets, like MetaMask, mobile wallets and hardware wallets with a dApp?
What wallets are supported?
There are five categories of Ethereum wallets that can interact with dApps
Browser built-in (Opera, Brave, ...)
Browser extension (MetaMask, ...)
Mobile wallets (Trust, Walleth, Pillar, ...)
Account-based web wallets (Fortmatic, 3box, ...)
Hardware wallets (Ledger, Trezor, ...)
Then there is a larger category of wallets that cannot integrate with dApps include generic wallet apps that lack the functionality to integrate with smart contracts.
Many generic wallet apps that hold multiple coins (Xapo, ...)
All cryptocurrecy exchanges (Binance, ...)
Other "hot wallet" / "custodial" wallet services like BitGo
Different wallets have a different user experience to connect. For example, with MetaMask you get a Connect pop up. With mobile wallets, you scan a QR code.
Web3modal is a JavaScript library that allows you easily to pluck in any supported wallet to your dApp. It abstracts away different UX and protocols wallets provide.
Disclaimer: I am one of the contributors to Web3modal project