> ## Documentation Index
> Fetch the complete documentation index at: https://www.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# List WalletConnect Wallets

> Use getWalletConnectCatalog to render a simple list of WalletConnect wallets with their names, icons, and deep link URLs.

`getWalletConnectCatalog()` returns the WalletConnect wallets Dynamic knows about, each with a display name, icon, and the deep link URL that opens the wallet app. Use it to render your own "connect with WalletConnect" list.

For the full connection flow (QR codes, deep linking, events), see [Authenticate with WalletConnect](/docs/javascript/reference/wallets/walletconnect-integration).

**Prerequisites:** A configured Dynamic client with a WalletConnect extension added for your chain ([EVM](/docs/javascript/reference/evm/adding-evm-extensions) or Solana). WalletConnect supports EVM and Solana only.

## 1. Get the catalog

```typescript theme={"system"}
import { getWalletConnectCatalog } from '@dynamic-labs-sdk/client';

const catalog = await getWalletConnectCatalog();

// `catalog.wallets` is keyed by wallet id (e.g. "metamask")
const wallets = Object.values(catalog.wallets);
```

Each wallet entry has:

| Field                                               | Description                                            |
| --------------------------------------------------- | ------------------------------------------------------ |
| `name`                                              | Display name (e.g. `"MetaMask"`).                      |
| `chain`                                             | `EVM`, `SOL`, or `BTC`.                                |
| `spriteUrl`                                         | Full URL to the wallet's icon.                         |
| `deeplinks.native`                                  | Native scheme URL (e.g. `metamask://`).                |
| `deeplinks.universal`                               | Universal link URL (e.g. `https://metamask.app.link`). |
| `downloadLinks.iosUrl` / `downloadLinks.androidUrl` | App store install links.                               |

Read the wallet's URL by preferring the universal link and falling back to the native scheme:

```typescript theme={"system"}
const url = wallet.deeplinks.universal ?? wallet.deeplinks.native;
```

## 2. Render the list and connect

Every WalletConnect connection returns `{ uri, approval }`: the `uri` is what the wallet pairs with (a QR code on desktop, or appended to the wallet's deep link on mobile), and `approval()` resolves once the user approves in their wallet.

<Tabs>
  <Tab title="JavaScript">
    This example picks the **first EVM wallet** in the catalog and runs the connect flow for it:

    ```typescript theme={"system"}
    import {
      getWalletConnectCatalog,
      isMobile,
      waitForClientInitialized,
    } from '@dynamic-labs-sdk/client';
    import { connectWithWalletConnectEvm } from '@dynamic-labs-sdk/evm/wallet-connect';
    import { appendWalletConnectUriToDeepLink } from '@dynamic-labs-sdk/wallet-connect';
    import QRCode from 'qrcode';

    async function connectFirstWallet() {
      await waitForClientInitialized();

      const catalog = await getWalletConnectCatalog();

      // Pick the first EVM wallet the catalog returned
      const wallet = Object.values(catalog.wallets).find((w) => w.chain === 'EVM');
      if (!wallet) return;

      // Start the WalletConnect session — `uri` is the pairing string
      const { uri, approval } = await connectWithWalletConnectEvm({
        addToDynamicWalletAccounts: true,
      });

      // Prefer the universal link, fall back to the native scheme
      const url = wallet.deeplinks.universal ?? wallet.deeplinks.native;

      if (isMobile() && url) {
        // On mobile, open the wallet app with the pairing URI appended
        window.location.href = appendWalletConnectUriToDeepLink({
          deepLinkUrl: url,
          walletConnectUri: uri,
        });
      } else {
        // On desktop, render the URI as a QR code for the user to scan
        const qrCode = await QRCode.toDataURL(uri);
        document.querySelector<HTMLImageElement>('img#qrcode')!.src = qrCode;
      }

      // Resolves once the user approves the connection in their wallet
      const { walletAccounts } = await approval();
      return walletAccounts;
    }
    ```
  </Tab>

  <Tab title="React">
    Use the `useGetWalletConnectCatalog` hook to load the list, then connect the wallet the user clicks:

    ```tsx theme={"system"}
    import {
      isMobile,
      waitForClientInitialized,
      type WalletConnectCatalogWallet,
    } from '@dynamic-labs-sdk/client';
    import { useGetWalletConnectCatalog } from '@dynamic-labs-sdk/react-hooks';
    import { connectWithWalletConnectEvm } from '@dynamic-labs-sdk/evm/wallet-connect';
    import { appendWalletConnectUriToDeepLink } from '@dynamic-labs-sdk/wallet-connect';
    import { useState } from 'react';
    import QRCode from 'qrcode';

    function WalletConnectList() {
      const { data: catalog, isLoading } = useGetWalletConnectCatalog();
      const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);

      // Runs the connect flow for the wallet the user clicked
      const connect = async (wallet: WalletConnectCatalogWallet) => {
        await waitForClientInitialized();

        const { uri, approval } = await connectWithWalletConnectEvm({
          addToDynamicWalletAccounts: true,
        });

        const url = wallet.deeplinks.universal ?? wallet.deeplinks.native;

        if (isMobile() && url) {
          // On mobile, hand the pairing URI off to the wallet app
          window.location.href = appendWalletConnectUriToDeepLink({
            deepLinkUrl: url,
            walletConnectUri: uri,
          });
        } else {
          // On desktop, show the URI as a QR code to scan
          setQrCodeUrl(await QRCode.toDataURL(uri));
        }

        // Wait for the user to approve, then clear the QR code
        await approval();
        setQrCodeUrl(null);
      };

      if (isLoading) return <p>Loading wallets…</p>;
      if (!catalog) return <p>Failed to load wallets</p>;

      return (
        <>
          <ul>
            {Object.values(catalog.wallets).map((wallet) => (
              <li key={wallet.name}>
                {/* Clicking a wallet starts its WalletConnect session */}
                <button onClick={() => connect(wallet)}>
                  <img src={wallet.spriteUrl} alt={wallet.name} width={24} />
                  {wallet.name}
                </button>
              </li>
            ))}
          </ul>
          {qrCodeUrl && <img src={qrCodeUrl} alt="WalletConnect QR code" />}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

<Note>
  These examples use the EVM connect function. For Solana, swap in `connectWithWalletConnectSolana` from `@dynamic-labs-sdk/solana/wallet-connect` and filter the catalog by `chain === 'SOL'`. See [Authenticate with WalletConnect](/docs/javascript/reference/wallets/walletconnect-integration) for the full multi-chain flow, events, and error handling.
</Note>

## 3. Filter by chain (optional)

Show only the wallets for the chain you support:

```typescript theme={"system"}
const evmWallets = Object.values(catalog.wallets).filter(
  (wallet) => wallet.chain === 'EVM',
);
```

<Tip>
  If you want a single list that also includes installed browser extensions, in-app browsers, and install links — not just WalletConnect — use [Build a Wallet Picker](/docs/javascript/reference/wallets/build-wallet-picker) instead.
</Tip>

## See also

* [Authenticate with WalletConnect](/docs/javascript/reference/wallets/walletconnect-integration) — the full connect flow.
* [Build a Wallet Picker](/docs/javascript/reference/wallets/build-wallet-picker) — every connection type in one list.
* [Get Available Wallets to Connect](/docs/javascript/reference/wallets/get-available-wallets-to-connect) — installed providers only.