Skip to main content

​
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: 
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
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

"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;
}
The modal automatically adapts to your site’s theme and supports dark mode. It’s designed to be unobtrusive and user-friendly.
The modal is created dynamically and doesn’t require any additional CSS or styling. It works out of the box.