import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NetworkImage } from "../../../icon";
import { Spinner } from "../../../spinner";
import { Numeral } from "../../../text";
import { useGetBalance } from "./useGetBalance";
export const DesktopTokenCell = (props)=>{
    const { token } = props;
    const { balance, loading } = useGetBalance(token, props.fetchBalance);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-token-select-dropdown-menu-item orderly-cursor-pointer hover:orderly-bg-base-contrast/5 orderly-font-semibold orderly-p-3",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-h-[20px] orderly-rounded-sm",
                children: [
                    /*#__PURE__*/ _jsx(NetworkImage, {
                        size: 16,
                        type: "token",
                        name: token.symbol,
                        rounded: true
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-2xs orderly-text-base-contrast orderly-ml-2",
                        children: token.symbol
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-text-3xs orderly-text-base-contrast/50 orderly-leading-[20px]",
                children: [
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-mr-1",
                        children: "Available:"
                    }),
                    loading ? /*#__PURE__*/ _jsx(Spinner, {
                        size: "small",
                        className: "orderly-w-[16px] orderly-h-[16px]"
                    }) : /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-items-center",
                        children: [
                            /*#__PURE__*/ _jsx(Numeral, {
                                precision: 2,
                                padding: false,
                                children: balance
                            }),
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-4xs orderly-ml-1",
                                children: token.symbol
                            })
                        ]
                    })
                ]
            })
        ]
    });
};

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