"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "DesktopWalletConnnectButton", {
    enumerable: true,
    get: function() {
        return DesktopWalletConnnectButton;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _walletConnectButton = require("../sections/walletConnectButton");
const _types = require("@orderly.network/types");
const _hooks = require("@orderly.network/hooks");
const _reactdropdownmenu = require("@radix-ui/react-dropdown-menu");
const _avatar = require("../../../avatar");
const _text = require("../../../text");
const _toast = require("../../../toast");
const _reacttooltip = require("@radix-ui/react-tooltip");
const _divider = require("../../../divider");
const _provider = require("../../../provider");
const _utils = require("@orderly.network/utils");
const _icon = require("../../../icon");
const _utils1 = require("../../../utils");
const IconTooltip = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacttooltip.Tooltip, {
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttooltip.TooltipTrigger, {
                children: props.trigger
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacttooltip.TooltipContent, {
                align: "center",
                className: "data-[state=delayed-open]:data-[side=top]:orderly-animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:orderly-animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:orderly-animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:orderly-animate-slideUpAndFade orderly-text-base-contrast orderly-select-none orderly-rounded orderly-bg-base-400 orderly-px-[15px] orderly-py-[10px] orderly-text-3xs orderly-leading-none orderly-shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] orderly-will-change-[transform,opacity]",
                children: [
                    props.tooltipContent,
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttooltip.TooltipArrow, {
                        className: "orderly-fill-base-400"
                    })
                ]
            })
        ]
    });
const MenuItem = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _utils1.cn)("orderly-flex orderly-cursor-pointer orderly-items-center orderly-w-full orderly-fill-base-contrast-36 orderly-text-base-contrast-36 hover:orderly-fill-base-contrast hover:orderly-text-base-contrast orderly-py-4", props.className),
        onClick: props.onClick,
        children: [
            props.icon,
            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                className: "orderly-text-xs orderly-pl-2 orderly-font-semibold",
                children: props.title
            })
        ]
    });
const DesktopWalletConnnectButton = (props)=>{
    const { status = _types.AccountStatusEnum.NotConnected, dropMenuItem, onClickDropMenuItem } = props;
    const { account, state } = (0, _hooks.useAccount)();
    const [open, setOpen] = (0, _react.useState)(false);
    const { onWalletDisconnect } = (0, _react.useContext)(_provider.OrderlyAppContext);
    const { connectedChain } = (0, _hooks.useWalletConnector)();
    const [allChains] = (0, _hooks.useChains)(undefined, {
        pick: "network_infos",
        filter: (chain)=>chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
    });
    const chains = (0, _react.useMemo)(()=>{
        if (Array.isArray(allChains)) return allChains;
        if (allChains === undefined) return [];
        // @ts-ignore
        if (connectedChain && (0, _utils.isTestnet)(parseInt(connectedChain.id))) {
            return allChains.testnet ?? [];
        }
        return allChains.mainnet;
    }, [
        allChains,
        connectedChain
    ]);
    const onCopy = (0, _react.useCallback)(()=>{
        navigator.clipboard.writeText(state.address).then(()=>{
            _toast.toast.success("Copied to clipboard");
            setOpen(false);
        });
    }, [
        state
    ]);
    const onOpenExploer = (0, _react.useCallback)(()=>{
        const chainInfo = chains.find((item)=>item.chain_id === account.chainId);
        if (chainInfo) {
            // @ts-ignore
            const { explorer_base_url } = chainInfo;
            if (explorer_base_url) {
                if (explorer_base_url.endsWith("/")) {
                    window.open(`${explorer_base_url}address/${account.address}`);
                } else {
                    window.open(`${explorer_base_url}/address/${account.address}`);
                }
            }
        }
        setOpen(false);
    }, [
        state,
        connectedChain
    ]);
    const customsMenuItems = (0, _react.useMemo)(()=>{
        if (Array.isArray(props.dropMenuItem)) {
            return props.dropMenuItem.map((item)=>{
                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
                            icon: item.icon,
                            title: item.title,
                            className: item.className,
                            onClick: ()=>{
                                item.onClick?.();
                                onClickDropMenuItem?.(item);
                            }
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {})
                    ]
                }, item.key || item.title);
            });
        }
        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
            children: props.dropMenuItem
        });
    }, [
        props.dropMenuItem,
        props.onClickDropMenuItem
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactdropdownmenu.DropdownMenu, {
        open: state.address ? open : false,
        onOpenChange: state.address ? setOpen : undefined,
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdropdownmenu.DropdownMenuTrigger, {
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    className: "orderly-h-[48px] orderly-flex orderly-items-center",
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_walletConnectButton.WalletConnectButton, {
                        status: status,
                        address: props.address,
                        className: "orderly-rounded-full",
                        onConnect: props.onConnect
                    })
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactdropdownmenu.DropdownMenuContent, {
                align: "end",
                className: "orderly-bg-base-800 orderly-w-[220px] orderly-px-4 orderly-rounded-borderRadius orderly-shadow-[0px_12px_20px_0px_rgba(0,0,0,0.25)] orderly-z-50",
                alignOffset: 10,
                onCloseAutoFocus: (e)=>e.preventDefault(),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex  orderly-gap-3 orderly-py-5",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex-1 orderly-flex orderly-items-center",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_avatar.Blockie, {
                                        address: state.address
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Text, {
                                        className: "orderly-text-xs orderly-text-base-contrast-80 orderly-ml-2",
                                        rule: "address",
                                        children: account.address
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(IconTooltip, {
                                trigger: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.CopyDesktopIcon, {
                                    onClick: onCopy,
                                    size: 20,
                                    className: "orderly-text-base-contrast-36 hover:orderly-text-base-contrast"
                                }),
                                tooltipContent: "Copy address"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(IconTooltip, {
                                trigger: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.ShareIcon, {
                                    onClick: onOpenExploer,
                                    size: 20,
                                    className: "orderly-text-base-contrast-36 hover:orderly-text-base-contrast"
                                }),
                                tooltipContent: "View in block explorer"
                            })
                        ]
                    }),
                    customsMenuItems,
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(MenuItem, {
                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.DisconnectIcon, {
                            size: 24
                        }),
                        title: "Disconnect",
                        className: "hover:orderly-fill-danger-light hover:orderly-text-danger-light",
                        onClick: ()=>{
                            setOpen(false);
                            onWalletDisconnect?.();
                        }
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=walletConnectButton.desktop.js.map