import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from "react";
import { ChainCell } from "./chainCell";
export const ChainListView = (props)=>{
    const mainnet = useMemo(()=>{
        if (!props.mainChains || props.mainChains.length === 0) {
            return null;
        }
        return /*#__PURE__*/ _jsxs(_Fragment, {
            children: [
                props.testChains && props.testChains.length > 0 && /*#__PURE__*/ _jsx("div", {
                    className: "orderly-uppercase orderly-text-base-contrast/50 orderly-text-4xs orderly-mb-2 desktop:orderly-ml-3",
                    children: "mainnet"
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex orderly-flex-col",
                    children: props.mainChains.map((chain, index)=>{
                        return /*#__PURE__*/ _jsx(ChainCell, {
                            name: chain.name,
                            id: chain.chain_id,
                            onClick: props.onItemClick,
                            bridgeless: chain.bridgeless,
                            selected: props.currentChainId === chain.chain_id
                        }, chain.chain_id);
                    })
                })
            ]
        });
    }, [
        props.mainChains,
        props.testChains,
        props.currentChainId
    ]);
    const testnet = useMemo(()=>{
        if (!props.testChains || props.testChains.length === 0) {
            return null;
        }
        return /*#__PURE__*/ _jsxs(_Fragment, {
            children: [
                props.mainChains && props.mainChains.length > 0 && /*#__PURE__*/ _jsx("div", {
                    className: "orderly-uppercase orderly-text-base-contrast/50 orderly-text-4xs orderly-mb-2 desktop:orderly-ml-3",
                    children: "testnet"
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex orderly-flex-col",
                    children: props.testChains.map((chain, index)=>{
                        return /*#__PURE__*/ _jsx(ChainCell, {
                            name: chain.name,
                            id: chain.chain_id,
                            onClick: props.onItemClick,
                            bridgeless: chain.bridgeless,
                            selected: props.currentChainId === chain.chain_id
                        }, chain.chain_id);
                    })
                })
            ]
        });
    }, [
        props.testChains,
        props.mainChains,
        props.currentChainId
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-chain-list orderly-pt-5 desktop:orderly-pt-2",
        children: [
            mainnet,
            testnet
        ]
    });
};

//# sourceMappingURL=chainListView.js.map