blockiesui/dist/components/connectWallet/connectWalletAccountModal.js

A UI library for Blockies

import { __awaiter, __generator } from '../../node_modules/.pnpm/@rollup_plugin-typescript@1_1c5553510af13619ab22a8c63104fe51/node_modules/tslib/tslib.es6.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { Button } from '../UI/button.js';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '../UI/dialog.js';
import { CryptoIcon as x } from '../../node_modules/.pnpm/@ledgerhq_crypto-icons@1.0._c5cfe881f949f4cf5447a2932778fb43/node_modules/@ledgerhq/crypto-icons/dist/index.esm.js';
import { Badge } from '../UI/badge.js';
import { useChainId } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useChainId.js';
import { useConnect } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useConnect.js';
import { useDisconnect } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useDisconnect.js';
import { useAccount } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useAccount.js';
import { useBalance } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useBalance.js';
import ArrowRight from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-right.js';
import { AnimatePresence } from '../../node_modules/.pnpm/framer-motion@12.5.0_@emoti_d0d92d6100b800832f36adb0ef57a534/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
import { motion } from '../../node_modules/.pnpm/framer-motion@12.5.0_@emoti_d0d92d6100b800832f36adb0ef57a534/node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
import LoaderCircle from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/loader-circle.js';
import Check from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/check.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';

function ConnectWalletAccountModal() {
    var _this = this;
    var _a, _b, _c, _d, _e, _f;
    var chainId = useChainId();
    var _g = useConnect(), connectors = _g.connectors, connect = _g.connect, isPending = _g.isPending, isSuccess = _g.isSuccess;
    var disconnect = useDisconnect().disconnect;
    var _h = useAccount(), isConnected = _h.isConnected, address = _h.address;
    var _j = useState(false), isOpen = _j[0], setIsOpen = _j[1];
    var _k = useState(false), isCopied = _k[0], setIsCopied = _k[1];
    var balance = useBalance({
        address: address,
    });
    var _l = useState(null), selectedConnector = _l[0], setSelectedConnector = _l[1];
    var truncateAddress = function (address) {
        return address.slice(0, 6) + "..." + address.slice(-4);
    };
    return (jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button, { className: "group h-12 w-[220px] rounded-xl border-4 border-[#F27405] bg-white text-sm font-bold text-[#F27405] shadow-lg transition-all duration-300 hover:bg-[#F27405] hover:text-white hover:shadow-xl", children: [jsx("span", { className: "mr-2", children: isConnected ? truncateAddress(address !== null && address !== void 0 ? address : "") : "Connect Wallet" }), jsx(ArrowRight, { className: "h-6 w-6 transform transition-transform duration-300 group-hover:translate-x-1" })] }) }), jsxs(DialogContent, { className: "w-[550px] overflow-hidden border border-gray-200/20 bg-gradient-to-br from-gray-50 to-gray-100 p-0 text-gray-900 dark:from-zinc-950 dark:to-zinc-800 dark:text-gray-100", children: [jsxs(DialogHeader, { className: "relative overflow-hidden px-8 pt-8", children: [jsxs("div", { className: "flex w-full flex-row items-center justify-center gap-2", children: [jsx("span", { className: "text-xl font-light", children: "Blockies" }), jsx(Badge, { className: "text-xs", children: "Wallet" })] }), jsx(DialogTitle, { className: "text-3xl font-light", children: isConnected ? (jsx("span", { className: "text-xl font-light", children: "Your Wallet" })) : (jsx("span", { className: "text-xl font-light", children: "Connect Your Wallet" })) }), jsx("p", { className: "relative z-10 mt-2 text-sm font-light text-zinc-500 dark:text-gray-500", children: isConnected
                                    ? "Manage your connected wallet"
                                    : "Choose your preferred wallet provider" })] }), jsx(AnimatePresence, { mode: "wait", children: !isConnected ? (jsx(Fragment, { children: jsx(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.2 }, className: "grid gap-3 px-6 pb-6", children: jsx("div", { className: "grid gap-2 py-2", children: connectors.map(function (connector) { return (jsxs(Button, { variant: "outline", className: "flex h-12 w-full items-center justify-between hover:bg-orange-300/20 dark:hover:bg-white/10", onClick: function () {
                                            setSelectedConnector(connector.id);
                                            connect({ connector: connector, chainId: chainId });
                                        }, disabled: isPending, children: [jsxs("div", { className: "flex w-full flex-row items-center gap-3", children: [jsx("div", { className: "relative flex h-10 w-10 items-center justify-center", children: jsx("img", { src: connector.icon, alt: connector.name, width: 30, height: 30, className: "object-contain" }) }), jsx("div", { className: "flex h-full w-full items-center justify-start text-left", children: jsx("p", { className: "font-mono text-sm", children: connector.name }) })] }), isPending && selectedConnector === connector.id && (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-orange-500" })), isSuccess && selectedConnector === connector.id && (jsx(Check, { className: "h-4 w-4 text-green-500" }))] }, connector.id)); }) }) }, "connect") })) : (jsxs(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.2 }, className: "flex flex-col gap-4 px-6 pb-6", children: [jsxs("div", { className: "rounded-xl border border-gray-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900", children: [jsxs("div", { className: "mb-4 flex items-center justify-between p-4", children: [jsx("div", { children: jsx("p", { className: "mt-1 font-mono text-sm font-medium text-gray-800 dark:text-gray-200", children: truncateAddress(address !== null && address !== void 0 ? address : "") }) }), jsxs(Button, { variant: "outline", size: "sm", className: "ml-4 text-xs text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-zinc-800", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                                                        return __generator(this, function (_a) {
                                                            switch (_a.label) {
                                                                case 0: return [4 /*yield*/, navigator.clipboard.writeText(address !== null && address !== void 0 ? address : "")];
                                                                case 1:
                                                                    _a.sent();
                                                                    setIsCopied(true);
                                                                    setTimeout(function () { return setIsCopied(false); }, 2000);
                                                                    return [2 /*return*/];
                                                            }
                                                        });
                                                    }); }, children: [isCopied ? (jsx(Check, { className: "mr-1 h-3 w-3 text-green-500" })) : (jsx(Copy, { className: "mr-1 h-3 w-3" })), isCopied ? "Copied!" : "Copy Address"] })] }), jsxs(Button, { variant: "outline", size: "sm", className: "w-full border-gray-200/40 text-xs text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-zinc-800", onClick: function () {
                                                return window.open("https://etherscan.io/address/".concat(address), "_blank");
                                            }, children: [jsx(ExternalLink, { className: "mr-1 h-3 w-3" }), "View on Explorer"] })] }), jsxs("div", { className: "space-y-2", children: [jsx("h3", { className: "mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200", children: "Assets" }), balance.data === undefined ? (jsx(Fragment, { children: jsxs("div", { className: "flex items-center justify-between rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(x, { ledgerId: "ethereum", ticker: "ETH", size: "24px" }), jsx("div", { children: jsx("p", { className: "text-sm font-light text-gray-800 dark:text-gray-200", children: "ETH" }) })] }), jsx("p", { className: "text-sm font-light text-gray-800 dark:text-gray-200", children: "$0.00" })] }) })) : (jsxs("div", { 
                                            // key={index}
                                            className: "flex items-center justify-between rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900", children: [jsxs("div", { className: "flex items-center gap-2", children: [((_a = balance.data) === null || _a === void 0 ? void 0 : _a.symbol) === "POL" && (jsx(x, { ledgerId: "polygon", ticker: "MATIC", size: "24px" })), ((_b = balance.data) === null || _b === void 0 ? void 0 : _b.symbol) === "ETH" && (jsx(x, { ledgerId: "ethereum", ticker: "ETH", size: "24px" })), jsx("div", { children: jsx("p", { className: "font-semibold text-gray-800 dark:text-gray-200", children: (_d = (_c = balance.data) === null || _c === void 0 ? void 0 : _c.symbol) !== null && _d !== void 0 ? _d : "" }) })] }), jsxs("p", { className: "font-semibold text-gray-800 dark:text-gray-200", children: ["$", (_f = (_e = balance.data) === null || _e === void 0 ? void 0 : _e.formatted.slice(0, 4)) !== null && _f !== void 0 ? _f : ""] })] }))] }), jsxs(Button, { onClick: function () { return disconnect(); }, variant: "outline", className: "w-full border-red-600 text-black transition duration-300 hover:bg-red-700/40 dark:border-red-900 dark:text-white", children: [jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Disconnect Wallet"] })] }, "account")) })] })] }));
}

export { ConnectWalletAccountModal as default };
//# sourceMappingURL=connectWalletAccountModal.js.map