Fastest Way to Integrate Cardano Wallets

Mesh SDK offers the fastest path to Cardano wallet integration, reducing days of development to minutes. With a unified API that works across all CIP-30 compatible wallets and pre-built React components, you can add professional wallet connectivity to your dApp without writing wallet-specific code or handling provider variations manually.

Quick Start

Get wallet connectivity working in your Cardano dApp with four simple steps:

Step 1: Install Mesh packages

npm install @meshsdk/core @meshsdk/react

Step 2: Add MeshProvider

import { MeshProvider } from "@meshsdk/react";

function App() {
  return (
    <MeshProvider>
      <YourApp />
    </MeshProvider>
  );
}

Step 3: Add the wallet component

import { CardanoWallet } from "@meshsdk/react";

function Header() {
  return (
    <header>
      <Logo />
      <CardanoWallet />
    </header>
  );
}

Step 4: Access wallet state

import { useWallet } from "@meshsdk/react";

function Dashboard() {
  const { connected, wallet } = useWallet();

  if (!connected) return <p>Please connect your wallet</p>;

  return <WalletDashboard wallet={wallet} />;
}

That's it. Your dApp now supports all major Cardano wallets.

Features

Mesh wallet integration provides comprehensive functionality out of the box:

• Universal Wallet Support: Works with Eternl, Lace, Yoroi, Typhon, and all CIP-30 compatible wallets
• Pre-built Components: CardanoWallet component provides wallet selection, connection, and address display
• React Hooks: useWallet hook offers reactive state management for wallet connection
• Automatic Detection: Identifies all installed wallets without manual configuration
• Normalized API: Consistent method signatures regardless of underlying wallet
• TypeScript Support: Full type definitions for IDE autocompletion and compile-time safety
• Error Normalization: Consistent error types across different wallet implementations
• Connection State: Reactive state updates when wallet connects or disconnects

Key Capabilities

Wallet Detection

Automatically discover installed wallets without hardcoding wallet identifiers:

import { BrowserWallet } from "@meshsdk/core";

const wallets = BrowserWallet.getInstalledWallets();
// Returns: [{ id: 'eternl', name: 'Eternl', icon: '...', ... }, ...]

Unified Connection API

Connect to any wallet with the same code:

// Connect to specific wallet
const wallet = await BrowserWallet.enable("eternl");

// All methods work identically regardless of wallet
const address = await wallet.getChangeAddress();
const utxos = await wallet.getUtxos();
const balance = await wallet.getBalance();
const networkId = await wallet.getNetworkId();

React State Management

The useWallet hook provides everything needed for wallet UI:

const {
  connected,      // boolean - connection status
  wallet,         // wallet instance with methods
  connect,        // function to initiate connection
  disconnect,     // function to disconnect
  connecting,     // boolean - connection in progress
  name,           // connected wallet name
} = useWallet();

Custom Wallet UI

Build branded wallet selectors using Mesh primitives:

function CustomWalletButton() {
  const { connect, connected, disconnect, name } = useWallet();
  const wallets = BrowserWallet.getInstalledWallets();

  if (connected) {
    return (
      <button onClick={disconnect}>
        Disconnect {name}
      </button>
    );
  }

  return (
    <div className="wallet-options">
      {wallets.map(w => (
        <button key={w.id} onClick={() => connect(w.id)}>
          <img src={w.icon} alt={w.name} />
          {w.name}
        </button>
      ))}
    </div>
  );
}

Why Mesh for Wallet Integration

Eliminates Complexity

Without Mesh, you'd write separate handling for each wallet, manage detection logic, normalize API differences, and handle error variations. Mesh encapsulates all this complexity in a clean, consistent interface.

Production Tested

Mesh powers wallet integration for some of the largest Cardano dApps. The wallet handling code has been battle-tested across millions of transactions and thousands of users.

Actively Maintained

When new wallets launch or existing wallets update, Mesh stays current. You don't need to track wallet ecosystem changes—Mesh handles compatibility for you.

Developer Experience

TypeScript types, comprehensive documentation, and intuitive APIs mean less time reading wallet specs and more time building features.

Common Integration Patterns

Connection Persistence

Remember user's wallet choice across sessions:

useEffect(() => {
  const savedWallet = localStorage.getItem("preferredWallet");
  if (savedWallet && !connected) {
    connect(savedWallet);
  }
}, []);

useEffect(() => {
  if (connected && wallet) {
    localStorage.setItem("preferredWallet", wallet.walletId);
  }
}, [connected]);

Network Validation

Ensure users are on the correct network:

const networkId = await wallet.getNetworkId();
if (networkId !== 1) { // 1 = mainnet, 0 = testnet
  throw new Error("Please switch to Mainnet");
}

Graceful Error Handling

Handle common wallet errors:

try {
  await connect(walletId);
} catch (error) {
  if (error.message.includes("User")) {
    showToast("Connection cancelled");
  } else if (error.message.includes("popup")) {
    showToast("Please allow popups for wallet connection");
  } else {
    showToast("Failed to connect wallet");
  }
}

Related Resources

Wallet integration is the foundation for building Cardano dApps. Once connected, explore these related topics:

• Transaction Builder: Build and submit transactions through connected wallets
• React Components: Additional UI components for Cardano dApps
• Wallet Integration Challenges: Deep dive into wallet integration complexity
• BrowserWallet Documentation: Complete API reference

Get Started

Install Mesh and add wallet connectivity to your dApp today:

npm install @meshsdk/core @meshsdk/react

With Mesh, professional-grade wallet integration takes minutes, not days. Focus on building your dApp's unique features while Mesh handles the wallet complexity.