blockiesui
Version:
A UI library for Blockies
35 lines (32 loc) • 3.64 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { Button } from '../UI/button.js';
import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../UI/dialog.js';
import { Badge } from '../UI/badge.js';
import { useWallet } from '../../hooks/useWallet.js';
import { useChainId } from '../../node_modules/.pnpm/wagmi@2.14.15_@tanstack_que_adee1ea35d5654fec9ad18a62b41334a/node_modules/wagmi/dist/esm/hooks/useChainId.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';
function ModalComponent(_a) {
var isModalOpen = _a.isModalOpen, setIsModalOpen = _a.setIsModalOpen;
var chainId = useChainId();
var _b = useWallet(), connectors = _b.connectors, connect = _b.connect, isPending = _b.isPending, isError = _b.isError, isSuccess = _b.isSuccess;
var _c = React__default.useState(null), selectedConnector = _c[0], setSelectedConnector = _c[1];
React__default.useEffect(function () {
if (isSuccess) {
setTimeout(function () {
setIsModalOpen(false);
setSelectedConnector(null);
}, 1000);
}
if (isError) {
console.log("Error connecting to wallet");
}
}, [isSuccess, setIsModalOpen, isError]);
return (jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: jsx(DialogContent, { className: "border-border/50 bg-[#fafafa] p-0 backdrop-blur-xl dark:bg-background/50 sm:max-w-[450px]", children: jsxs("div", { className: "space-y-2 p-6", children: [jsxs(DialogTitle, { 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("p", { className: "text-primaryColor pt-4 text-xl font-light", children: "Connect Wallet" })] }), jsx(DialogDescription, { className: "text-sm text-black/50 dark:text-white/50", children: "Choose how you want to connect. There are several wallet providers." }), jsx("div", { className: "grid gap-2 py-4", children: connectors ? (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)); })) : (jsx("p", { children: "No connectors found" })) })] }) }) }));
}
export { ModalComponent as default };
//# sourceMappingURL=modalComponent.js.map