blockiesui/dist/components/connectWallet/connectWalletSheet.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 { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../UI/sheet.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 Wallet from '../../node_modules/.pnpm/lucide-react@0.483.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/wallet.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 { motion } from '../../node_modules/.pnpm/framer-motion@12.5.0_@emoti_d0d92d6100b800832f36adb0ef57a534/node_modules/framer-motion/dist/es/render/components/motion/proxy.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 ConnectWalletSheet() {
    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 balance = useBalance({ address: address });
    var _j = useState(""), selectedConnector = _j[0], setSelectedConnector = _j[1];
    var _k = useState(false), isCopied = _k[0], setIsCopied = _k[1];
    var truncateAddress = function (addr) {
        return addr.slice(0, 6) + "..." + addr.slice(-4);
    };
    return (jsxs(Sheet, { children: [jsx(SheetTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: "border-primaryColor/20 group relative h-12 w-[220px] overflow-hidden rounded-xl border text-sm font-bold text-[#F27405] shadow-lg transition-all duration-300 hover:bg-[#F27405] hover:text-white hover:shadow-xl", children: [jsxs("span", { className: "relative z-10 flex w-full items-center justify-center", children: [jsx(Wallet, { className: "mr-3 h-5 w-5" }), isConnected ? truncateAddress(address !== null && address !== void 0 ? address : "") : "Connect Wallet"] }), jsx("span", { className: "absolute inset-0 origin-left scale-x-0 transform bg-orange-500 transition-transform duration-300 group-hover:scale-x-100" })] }) }), jsxs(SheetContent, { side: "right", className: "w-[400px] border-l border-orange-900/20 sm:w-[540px]", children: [jsxs(SheetHeader, { className: "flex flex-col gap-2", children: [jsx(SheetTitle, { className: "text-3xl font-light text-orange-950 dark:text-orange-100", children: jsxs("div", { className: "flex w-full flex-row items-center justify-center gap-2", children: [jsx("span", { className: "text-xl font-bold", children: "Blockies" }), jsx(Badge, { className: "text-primaryColor text-xs", children: "Wallet" })] }) }), jsx(SheetDescription, { className: "text-base font-light text-black dark:text-zinc-300", children: isConnected
                                    ? "Manage your connected wallet"
                                    : "Connect your wallet to get started" })] }), jsx("div", { className: "grid gap-6 pt-3", children: !isConnected ? (jsx(Fragment, { children: jsx("div", { className: "grid gap-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)); }) }) })) : (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", 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: [jsxs("div", { children: [jsx("p", { className: "text-sm font-light text-gray-600 dark:text-gray-400", children: "Your Wallet" }), 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" })] }) })) : (jsx(Fragment, { children: 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: "text-sm font-light 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: "text-sm font-light 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 { ConnectWalletSheet as default };
//# sourceMappingURL=connectWalletSheet.js.map