> ## Documentation Index
> Fetch the complete documentation index at: https://magenx404.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet Modal

> Automatic wallet selection modal

## Overview

MagenX404 includes a beautiful, automatic wallet selection modal that appears when no wallet is specified in the configuration. You can also show it programmatically using `showWalletModal()`.

## Automatic Modal

The modal appears automatically when you don't specify a wallet:

```typescript theme={null}
import { X404Blacklist } from "magenx404";

// No wallet specified - modal will appear automatically
const result = await X404Blacklist({
  excluded_mints: ["token_address"],
  max_holdings: {},
  geo_code: "false",
  geo_code_locs: "",
  coords: { latitude: null, longitude: null },
  // wallet is not specified - modal will show automatically
});
```

## Wallet Selection Modal

If you don't provide a `wallet` parameter in the config, a beautiful modal will automatically appear allowing users to select from their installed wallets (Phantom, Solflare, Backpack).

The modal:

* Automatically detects installed wallets
* Shows a user-friendly interface
* Handles wallet selection and cancellation
* Works seamlessly with all authentication features

## Modal Features

The wallet modal includes:

* ✨ Beautiful, modern UI with animations
* 🌙 Dark mode support (automatic)
* 📱 Responsive design
* 🔍 Automatic wallet detection
* ✅ Shows "Installed" badge for detected wallets
* ❌ Handles no wallet found scenario
* 🎨 Framework-agnostic (works with React, Vue, vanilla JS, etc.)

## Example: Custom Wallet Selection

```typescript theme={null}
"use client";

import { X404Blacklist } from "magenx404";

export async function customAuthFlow() {
  // No wallet specified - modal will show automatically
  const result = await X404Blacklist({
    excluded_mints: ["token_address"],
    max_holdings: {},
    geo_code: "false",
    geo_code_locs: "",
    coords: { latitude: null, longitude: null },
  });

  return result;
}
```

## Modal Styling

The modal automatically adapts to your site's theme and supports dark mode. It's designed to be unobtrusive and user-friendly.

<Note>
  The modal is created dynamically and doesn't require any additional CSS or
  styling. It works out of the box.
</Note>