### Install Dependencies and Run Storybook

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/CONTRIBUTING.md

Use these commands to install project dependencies and start Storybook for development and testing.

```zsh
npm i
npm run storybook
```

--------------------------------

### Install Cardano Connect with Wallet

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Install the library using npm. This is the first step to integrate wallet connectivity into your React application.

```zsh
npm i @cardano-foundation/cardano-connect-with-wallet
```

--------------------------------

### Install Core Package

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Install the framework-independent core package using npm.

```zsh
npm i @cardano-foundation/cardano-connect-with-wallet-core
```

--------------------------------

### Import Wallet Class (NPM)

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Import the Wallet class from the installed package for use in your TypeScript or JavaScript project.

```ts
import { Wallet } from '@cardano-foundation/cardano-connect-with-wallet-core';
```

--------------------------------

### Estimate and Filter Available Wallets

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Use `estimateAvailableWallets` to get a filtered list of wallets based on installation status and visibility preferences. The `UnavailableWalletVisibility` enum controls how unavailable wallets are displayed.

```typescript
import {
  estimateAvailableWallets,
  UnavailableWalletVisibility,
  getWalletIcon,
  isWalletInstalled,
  formatSupportedWallets,
} from '@cardano-foundation/cardano-connect-with-wallet-core';

// Returns the filtered list of wallets to display
const wallets = estimateAvailableWallets(
  ['Eternl', 'Nami', 'Yoroi'],
  UnavailableWalletVisibility.SHOW_UNAVAILABLE_ON_MOBILE, // default
  [], // alwaysVisibleWallets
  installedExtensions,
);

// UnavailableWalletVisibility options:
// HIDE_UNAVAILABLE             – show only installed wallets
// SHOW_UNAVAILABLE             – show all wallets regardless of device
// SHOW_UNAVAILABLE_ON_MOBILE   – show all on mobile, only installed on desktop

// Returns a base64 data-URI icon for the given wallet name
const icon = getWalletIcon('eternl');

// Returns true when window.cardano[walletName] exists
const installed = isWalletInstalled('eternl');

// Returns a human-readable comma-separated list e.g. "Eternl, Nami, Yoroi"
const label = formatSupportedWallets(['Eternl', 'Nami', 'Yoroi']);
```

--------------------------------

### Copy Cardano HTML DApp Code

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/html/index.html

Utility function to copy the HTML code for the Cardano DApp example to the clipboard. It replaces HTML entities for angle brackets before copying.

```javascript
function copyCode() {
  const code = gettingStarted.replaceAll('&lt;', '<').replaceAll('&gt;', '>').replaceAll('&quot;', '"');
  navigator.clipboard.writeText(code);
}
```

--------------------------------

### Create Project Bundle

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/CONTRIBUTING.md

Run this command to create the project bundle using Rollup.

```zsh
npm run rollup
```

--------------------------------

### Browser Import

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Include the core library via a script tag for use in a browser environment. The Wallet class will be available globally.

```html
<script src="https://cardano-foundation.github.io/cardano-connect-with-wallet/bundle-latest/index.js"></script>
<script>
  const wallet = CardanoConnectWithWalletCore.Wallet;
  ...
</script>
```

--------------------------------

### Initialize CardanoConnectWallet in HTML

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/html/index.html

This snippet shows how to include the necessary scripts and initialize the CardanoConnectWallet component within an HTML structure. It demonstrates creating a basic wallet button and buttons with custom labels and messages, including peer connect functionality.

```html
<head>
  <script src="https://cardano-foundation.github.io/cardano-connect-with-wallet/bundle-latest/index.js"></script>
  <script src="https://cardano-foundation.github.io/cardano-connect-with-wallet/cardano-connect-js-latest/cardano-connect.min.js"></script>
  <link rel="stylesheet" href="https://cardano-foundation.github.io/cardano-connect-with-wallet/cardano-connect-js-latest/cardano-connect.min.css">
  <script>
    window.onload = () => {
      const container = document.getElementById('cardano-connect-container')
      cardanoConnectWallet = new CardanoConnectWallet(container)
    }
  </script>
</head>
<body >
  <div id="cardano-connect-container" />
</body>
```

```javascript
window.onload = () => {
  const container = document.getElementById('cardano-connect-container');
  // create a standard CardanoConnectWallet button
  new CardanoConnectWallet(container);
  // create a CardanoConnectWallet button with a sign message option
  new CardanoConnectWallet(container, { label: 'Custom Connect', message: 'Augusta Ada King, Countess of Lovelace' });
  // create a CardanoConnectWallet button with peer connect
  new CardanoConnectWallet(container, { label: 'P2P Connect', message: 'Augusta Ada King, Countess of Lovelace', peerConnectEnabled: true });
  console.log(document.querySelectorAll('div.code')[0].innerHTML)
  document.querySelectorAll('div.code')[0].innerHTML = gettingStarted;
  document.querySelectorAll('div.code').forEach(element => {
    hljs.highlightElement(element);
  });
}
```

--------------------------------

### Connect to a Specific Wallet using Core API

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Use the Wallet.connectToWallet function from the core library to establish a connection with a specified wallet and network.

```ts
// Connect a wallet by name
await Wallet.connectToWallet('eternl', NetworkType.MAINNET);
```

--------------------------------

### Wallet Module API Overview

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

This snippet outlines the static methods available on the Wallet class for managing wallet connections, events, and data retrieval. Use these functions to interact with connected wallets.

```ts
/*
Register a function to those events:

'enabled',
'connecting',
'enabledWallet',
'stakeAddress',
'usedAddresses',
'unusedAddresses',
'accountBalance',
'connected',
'lastConnectedWallet',
'meerkatAddress',
'installedWalletExtensions'
*/
Wallet.addEventListener: void;
Wallet.removeEventListener: void;

// Starts a background thread to listen for new wallets in the window.cardano object
Wallet.startInjectWalletListener(): void;
Wallet.stopInjectWalletListener(): void;

// Connect or disconnect a wallet by name e.g. 'yoroi', 'eternl', 'flint', etc.
Wallet.connectToWallet(walletName: string, networkType: NetworkType, retries?: number, retryIntervalInMs?: number): Promise<void>;
Wallet.connect(walletName: string, network: NetworkType, onConnect?: () => void | undefined, onError?: (code: Error) => void): Promise<void>;
Wallet.disconnect(): void;

Wallet.checkEnabled(network: NetworkType): Promise<void>;
Wallet.getInstalledWalletExtensions(supportedWallets?: Array<string>): Array<string>;

Wallet.getRewardAddresses(): Promise<any>;

// sign a message
Wallet.signMessage(message: string, onSignMessage?: (signature: string, key: string | undefined) => void, onSignError?: (error: Error) => void, limitNetwork?: NetworkType): Promise<void>;

```

--------------------------------

### Import Core Types and Enums

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Import essential types and enums such as `NetworkType`, `UnavailableWalletVisibility`, `Extension`, `Cip95Api`, and `Cip103Api` for wallet interaction and configuration.

```typescript
import {
  NetworkType,
  UnavailableWalletVisibility,
  Extension,
  Cip95Api,
  Cip103Api,
} from '@cardano-foundation/cardano-connect-with-wallet-core';
```

--------------------------------

### useCardano Hook Usage

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Demonstrates direct access to wallet state and functions using the `useCardano` hook. Useful for building custom UIs. Requires specifying network type.

```tsx
import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';

const { 
  isEnabled,
  isConnected,
  isConnecting,
  enabledWallet,
  stakeAddress,
  usedAddresses,
  unusedAddresses,
  accountBalance,
  installedExtensions,
  connect,
  disconnect,
  signMessage,
} = useCardano({ limitNetwork: NetworkType.MAINNET });

// Connect by wallet name
await connect('eternl', onSuccess, onError, [{ cip: 95 }]);

// Disconnect
disconnect();

// Sign a message (CIP-8)
signMessage('Hello Cardano', (signature, key) => console.log(signature));
```

--------------------------------

### Export Wallet Icon

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Add your wallet's icon as a base64-encoded data URI to `core/walletIcons.ts`. This avoids cluttering the registry with large strings. You can also inline the URI directly in the registry entry or omit it to use the wallet extension's injected icon.

```typescript
export const myWalletIcon = `data:image/svg+xml;base64,...`;
```

--------------------------------

### Dynamic Import for SSR with Next.js

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Shows how to use dynamic imports with `ssr: false` to prevent errors when using the library's components or hooks in a Next.js application with Server-Side Rendering.

```tsx
const ConnectWalletButton = dynamic(
  () =>
    import('@cardano-foundation/cardano-connect-with-wallet').then(
      (mod) => mod.ConnectWalletButton
    ),
  { ssr: false }
);
```

--------------------------------

### Add Wallet to Registry

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Add a new entry to `walletRegistry` in `core/wallets.ts` with required and optional fields. This entry defines how the library interacts with your wallet, including display name, icon, and deep link support.

```typescript
import { myWalletIcon } from './walletIcons';

// inside walletRegistry:
{
  // Required
  key: 'mywallet',          // must match window.cardano[key] (lowercase)
  displayName: 'My Wallet', // shown in the UI

  icon: myWalletIcon,       // from walletIcons.ts (or inline data URI, or omit)

  // Desktop browser extension
  chromeExtensionId: 'abcdefghijklmnopqrstuvwxyz012345',
  chromeExtensionName: 'my-wallet', // Chrome Web Store URL slug

  // Mobile app
  playStoreUrl: 'https://play.google.com/store/apps/details?id=com.mywallet',
  appStoreUrl:  'https://apps.apple.com/app/my-wallet/id000000000',
  hasCIP158Support: true,  // true if your app handles web+cardano:// deep links
}
```

--------------------------------

### Mobile Wallet Detection and Metadata

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Import and use utility functions to detect if the dApp is running on a mobile device and to access information about native mobile wallets. This helps in providing a tailored experience for mobile users.

```ts
import {
  checkIsMobile,
  mobileWallets,
  nativeWallets,
  generateCip158DeepLink,
} from '@cardano-foundation/cardano-connect-with-wallet-core';

// true when running on a mobile device (Android / iOS)
const isMobile = checkIsMobile();

// list of wallet names that have a native mobile app
// ['flint', 'eternl', 'vespr', 'begin', 'yoroi']
console.log(mobileWallets);

// per-wallet metadata including app store URLs and CIP-158 support flag
// {
//   eternl: { playStoreUrl, appStoreUrl, walletName, hasCIP158Support: true },
//   vespr:  { playStoreUrl, appStoreUrl, walletName, hasCIP158Support: true },
//   begin:  { playStoreUrl, appStoreUrl, walletName, hasCIP158Support: false },
//   yoroi:  { playStoreUrl, appStoreUrl, walletName, hasCIP158Support: false },
// }
console.log(nativeWallets);

```

--------------------------------

### Enable P2P Wallet Connection

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Enables P2P wallet connection via QR code scanning for mobile wallets. Requires setting `peerConnectEnabled` to true.

```tsx
<ConnectWalletButton
  peerConnectEnabled={true}
  dAppName="My dApp"
  dAppUrl="https://my-dapp.io"
  peerConnectSubtitle="Scan with a CIP-45 compatible wallet such as Eternl"
/>
```

--------------------------------

### Basic React ConnectWalletButton Usage

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Use the ConnectWalletButton component to allow users to connect to supported Cardano wallets. CIP-158 deep links are enabled by default for mobile compatibility.

```tsx
import { ConnectWalletButton } from '@cardano-foundation/cardano-connect-with-wallet';

// Desktop + mobile, CIP-158 deep links enabled by default
<ConnectWalletButton
  supportedWallets={['Eternl', 'Nami', 'Yoroi', 'Vespr']}
  onConnect={(walletName) => console.log('connected:', walletName)}
/>
```

--------------------------------

### ConnectWalletButton Component

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Use the ConnectWalletButton to display a single button that opens a dropdown of available wallets. It handles mobile deep links and redirects automatically.

```tsx
import { ConnectWalletButton } from '@cardano-foundation/cardano-connect-with-wallet';

<ConnectWalletButton
  supportedWallets={['Eternl', 'Nami', 'Yoroi', 'Vespr', 'Begin']}
  onConnect={(walletName) => console.log('connected:', walletName)}
  onDisconnect={() => console.log('disconnected')}
/>
```

--------------------------------

### Handle Wallet Connection Errors

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Catch specific error types like `WrongNetworkTypeError` or `WalletExtensionNotFoundError` when connecting to a wallet. This allows for granular error handling based on the connection issue.

```typescript
import {
  WalletConnectError,
  WrongNetworkTypeError,
  WalletNotCip30CompatibleError,
  WalletNotInstalledError,
  WalletExtensionNotFoundError,
  ExtensionNotInjectedError,
  EnablementFailedError,
} from '@cardano-foundation/cardano-connect-with-wallet-core';

try {
  await Wallet.connectToWallet('eternl', NetworkType.MAINNET);
} catch (e) {
  if (e instanceof WrongNetworkTypeError) {
    // wallet is on a different network (e.g. testnet vs mainnet)
  } else if (e instanceof WalletExtensionNotFoundError) {
    // wallet extension / app not available in the browser
  }
}
```

--------------------------------

### ConnectWalletList Component

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/react/README.md

Embed a flat list of wallet connection buttons inline using ConnectWalletList. This component is suitable when you prefer an embedded wallet picker over a dropdown.

```tsx
import { ConnectWalletList } from '@cardano-foundation/cardano-connect-with-wallet';

<ConnectWalletList
  borderRadius={15}
  gap={12}
  primaryColor="#0538AF"
  onConnect={onConnectWallet}
  customCSS={`
    font-family: Helvetica Light, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    width: 164px;
    & > span { padding: 5px 16px; }
  `}
/>
```

--------------------------------

### Generate CIP-158 Deep Link

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/core/README.md

Create a CIP-158 compliant deep link to open a specific URL within a wallet's in-app browser. This allows for direct access to the dApp's functionality from the wallet.

```ts
// Generates the CIP-158 deep link for the given URL (defaults to window.location.href)
const deepLink = generateCip158DeepLink('https://my-dapp.io/swap');
// → 'web+cardano://browse/v1?uri=https%3A%2F%2Fmy-dapp.io%2Fswap'

window.location.href = deepLink;

```

--------------------------------

### React ConnectWalletButton with CIP-158 Disabled

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Configure the ConnectWalletButton to opt out of using CIP-158 deep links.

```tsx
<ConnectWalletButton cip158Enabled={false} />
```

--------------------------------

### Generate CIP-158 Deep Link

Source: https://github.com/cardano-foundation/cardano-connect-with-wallet/blob/main/README.md

Generate a CIP-158 deep link for the current dApp, useful for mobile wallet connections.

```ts
import { Wallet, generateCip158DeepLink, checkIsMobile } from '@cardano-foundation/cardano-connect-with-wallet-core';

// Generate a CIP-158 deep link for the current page
const deepLink = generateCip158DeepLink();
// → 'web+cardano://browse/v1?uri=https%3A%2F%2Fmy-dapp.io%2F...'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.