Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/connect-wallet-modalimport * 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>
);
}