blockiesui/dist/components/connectWallet/connectWalletAccount.js

A UI library for Blockies

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Avatar, AvatarImage, AvatarFallback } from '../UI/avatar.js';
import { Badge } from '../UI/badge.js';
import { Button } from '../UI/button.js';
import ModalComponent from './modalComponent.js';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '../UI/dropdownMenu.js';
import { useAccount } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useAccount.js';
import { useDisconnect } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useDisconnect.js';
import Copy from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/copy.js';
import ExternalLink from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/external-link.js';
import LogOut from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/log-out.js';
import Wallet from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/wallet.js';

function ConnectWalletAccount() {
    var _a = useAccount(), address = _a.address, isConnected = _a.isConnected;
    var disconnect = useDisconnect().disconnect;
    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
    var _c = useState(false), isModalOpen = _c[0], setIsModalOpen = _c[1];
    var truncateAddress = function (addr) {
        return addr.slice(0, 6) + "..." + addr.slice(-6);
    };
    return (jsxs(Fragment, { children: [isConnected && address ? (jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("div", { className: "flex cursor-pointer items-center space-x-2 rounded-full border p-1", children: [jsxs(Avatar, { children: [jsx(AvatarImage, { src: "/placeholder.svg?height=40&width=40", alt: "Wallet" }), jsx(AvatarFallback, { children: "W" })] }), jsxs("div", { children: [jsx("p", { className: "text-sm font-medium", children: "Connected" }), jsx("p", { className: "text-xs text-muted-foreground", children: truncateAddress(address) })] }), jsx(Badge, { className: "bg-primaryColor hover:bg-primaryColor/80 text-muted-foreground", children: "Connected" })] }) }), jsxs(DropdownMenuContent, { className: "w-60 rounded-lg border border-orange-100/20 p-1 shadow-lg backdrop-blur-sm", children: [jsxs(DropdownMenuItem, { onClick: function () {
                                    navigator.clipboard
                                        .writeText(address)
                                        .then(function () {
                                        console.log("Address copied to clipboard");
                                    })
                                        .catch(function () {
                                        console.log("Failed to copy address");
                                    });
                                }, className: "flex cursor-pointer items-center rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-orange-50 dark:text-zinc-300", children: [jsx(Copy, { className: "mr-2 h-4 w-4 text-orange-500" }), "Copy Address"] }), jsxs(DropdownMenuItem, { onClick: function () {
                                    return window.open("https://etherscan.io/address/".concat(address), "_blank");
                                }, className: "flex cursor-pointer items-center rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-orange-50 dark:text-zinc-300", children: [jsx(ExternalLink, { className: "mr-2 h-4 w-4 text-orange-500" }), "View on Explorer"] }), jsx(DropdownMenuSeparator, { className: "my-1 border-orange-100" }), jsxs(DropdownMenuItem, { onClick: function () {
                                    disconnect();
                                }, className: "flex cursor-pointer items-center rounded-md px-3 py-2 text-sm text-red-600 hover:bg-red-50", children: [jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Disconnect"] })] })] })) : (jsxs(Button, { onClick: function () { return setIsModalOpen(true); }, className: "h-12 w-[220px] rounded-xl border border-white/20 bg-transparent text-sm font-bold text-muted-foreground shadow-lg transition-all duration-300 hover:from-[#D66400] hover:to-[#F27405] hover:text-white hover:shadow-xl", children: [jsx(Wallet, { className: "mr-3 h-4 w-4" }), " Connect Wallet"] })), jsx(ModalComponent, { isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen })] }));
}

export { ConnectWalletAccount as default };
//# sourceMappingURL=connectWalletAccount.js.map