> ## Documentation Index
> Fetch the complete documentation index at: https://docs.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](https://docs.dynamic.xyz/docs/javascript/reference/wallets/walletconnect-integration.md).

**Prerequisites:** A configured Dynamic client with a WalletConnect extension added for your chain ([EVM](https://docs.dynamic.xyz/docs/javascript/reference/evm/adding-evm-extensions.md) 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.

> [tab] 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] 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<WalletConnectCatalogWallet>(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" />}
>     </>
>   );
> }
> ```

> [!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](https://docs.dynamic.xyz/docs/javascript/reference/wallets/walletconnect-integration.md) for the full multi-chain flow, events, and error handling.

## 3. Filter by chain (optional)

Show only the wallets for the chain you support:

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

const catalog = await getWalletConnectCatalog();
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](https://docs.dynamic.xyz/docs/javascript/reference/wallets/build-wallet-picker.md) instead.

## See also

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.