Connect Wallet Modal

Component 82

About

Connect Wallet Modal A responsive and theme-adaptive modal dialog that allows users to select from a list of crypto wallets. The component is highly reusable, accepting a list of wallets as a prop. It features subtle hover animations and an entrance animation for the wallet list, creating a polished user experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Connect Wallet Modal to your project and fits it to your theme.

Code

How Connect Wallet Modal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { ConnectWalletModal } from "@/components/ui/connect-wallet-modal"; // Adjust the import path
import { Button } from "@/components/ui/button";

// --- DEMO ICONS (reuse from component or define separately) ---
const MetamaskIcon = (props: { className?: string }) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.414 12.707l-2.121-2.121a1 1 0 00-1.414 0l-1.414 1.414a1 1 0 01-1.414 0l-1.061-1.061a1 1 0 00-1.414 0l-2.121 2.121a1 1 0 01-1.414 0l-1.061-1.061a1 1 0 00-1.414 0l-1.414 1.414a1 1 0 01-1.414 0L3 11.293a1 1 0 00-1.414 1.414l7.071 7.071a1 1 0 001.414 0l2.121-2.121a1 1 0 011.414 0l1.061 1.061a1 1 0 001.414 0l2.121-2.121a1 1 0 011.414 0l1.061 1.061a1 1 0 001.414 0l1.414-1.414a1 1 0 000-1.414zM12 2a10 10 0 100 20 10 10 0 000-20z" fill="#F6851B"/></svg>
);
const PhantomIcon = (props: { className?: string }) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-9.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm4 0c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-2 4.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" fill="#5E53F8"/></svg>
);
const CoinbaseWalletIcon = (props: { className?: string }) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-2-5h4v-2h-4v2zm0-4h4v-2h-4v2z" fill="#0052FF"/></svg>
);
const MoreHorizontalIcon = (props: { className?: string }) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
);

export default function ConnectWalletModalDemo() {
  const [isOpen, setIsOpen] = React.useState(false);

  // Sample wallet data
  const sampleWallets = [
    {
      id: "metamask",
      name: "Metamask",
      icon: MetamaskIcon,
      onConnect: () => console.log("Connecting with Metamask..."),
    },
    {
      id: "phantom",
      name: "Phantom",
      icon: PhantomIcon,
      onConnect: () => console.log("Connecting with Phantom..."),
    },
    {
      id: "coinbase",
      name: "Coinbase Wallet",
      icon: CoinbaseWalletIcon,
      onConnect: () => console.log("Connecting with Coinbase..."),
    },
    {
      id: "other",
      name: "Other Wallets",
      icon: MoreHorizontalIcon,
      onConnect: () => console.log("Showing other wallets..."),
    },
  ];

  return (
    <div className="min-h-[200px] flex items-center justify-center">
      <Button onClick={() => setIsOpen(true)}>Connect</Button>

      <ConnectWalletModal
        open={isOpen}
        onOpenChange={setIsOpen}
        wallets={sampleWallets}
        termsUrl="/terms"
        policyUrl="/privacy"
      />
    </div>
  );
}