Practical overview
When it fits
Use it when implementing a Cardano dApp's wallet connection layer, especially when React components or a no-React core are useful and the listed wallet or mobile connection paths fit the product.
Who it is for
- Developers building Cardano decentralized applications
- React teams seeking ready-made wallet connection components
- Teams using a non-React framework that need wallet connection helpers
- Maintainers extending the library's wallet registry
Documented uses
- Add a wallet-connect button or wallet list to a React dApp.
- Connect a Cardano wallet from a framework-independent application.
- Request wallet message signatures and submit transactions.
- Support mobile-to-desktop QR-code connection or wallet in-app-browser deep links where applicable.
- Register an additional wallet with its display, icon and routing metadata.
Requirements & limits
The repository specifies an Apache-2.0 license and provides npm package installation instructions.
- Choose the React package for its components and hook, or the separate core package for framework-independent helpers.
- Check the documented desktop and mobile wallet lists against the wallets your users need.
- CIP-158 mobile deep links are identified for Eternl and Vespr; other mobile wallets use the documented app-store fallback when not installed.
- The project lists support for CIP-8, CIP-30, CIP-45, CIP-95 and CIP-158, covering different signing, connection, governance and mobile-routing needs.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Set up a React wallet-connect button
Install the React package and add the documented connection button to a React dApp.
Before you start
- A React dApp project using JavaScript or TypeScript
- npm
Steps
Install
@cardano-foundation/cardano-connect-with-walletwith npm.Import
ConnectWalletButtonfrom the package.Add the component with a
supportedWalletslist and anonConnectcallback.
Expected outcome
The dApp has a wallet-connect button configured with the selected wallet names and a connection callback.
Guide limitations
- The documented snippet demonstrates connection-button setup; it does not cover the rest of a dApp's transaction flow.
Add a wallet to the registry
Prepare a wallet registry entry so the library can include the wallet in its connection choices.
Before you start
- A wallet key matching
window.cardano[key] - A display name
- The wallet's applicable extension or mobile-app metadata
Steps
Add an entry to
core/wallets.tswith the lowercase wallet key and display name.Optionally provide an icon in
core/walletIcons.tsas a base64 data URI, or use the injected wallet icon fallback.Add applicable extension identifier and store URLs, and set
hasCIP158Supportwhen the app handles the specified deep links.Open a pull request.
Expected outcome
The repository has a wallet registry entry containing the metadata used for wallet display and connection routing.
Guide limitations
- The README documents preparing and submitting the registry change, not acceptance or release.
Compare options for Wallet connections
These projects document a common task and share a project role. This is a source-based comparison, not an execution benchmark or a guarantee of interchangeability.
| Project | Documented purpose | Platform | Access and requirements |
|---|---|---|---|
| Cardano Connect With Wallet | Add a wallet-connect button or wallet list to a React dApp. | Mobile, Web | The repository specifies an Apache-2.0 license and provides npm package installation instructions. |
| Dioxus Wallet Adapter | Add Solana wallet connectivity to a Dioxus web application. | Web | |
| Vue CLI Plugin Web3Modal | Configure injected browser and WalletConnect provider options. | Web |
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 14 October 2026
- Original website title
- cardano-foundation/cardano-connect-with-wallet · Official homepage title · retained in its source language

