import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { getNetworkIconId } from "../utils";
import Image from "./Image";
function SwitchNetwork(props) {
    const { currentChainConfig, newChainConfig, appOrigin, onSwitchNetwork, onCancelNetwork } = props;
    const [showModal, setShowModal] = useState(true);
    const [fromNetworkIconId, setFromNetworkIconId] = useState("network-default");
    const [toNetworkIconId, setToNetworkIconId] = useState("network-default");
    const [t] = useTranslation();
    useEffect(() => {
        getNetworkIconId(currentChainConfig.ticker)
            .then((id) => {
            return setFromNetworkIconId(id);
        })
            .catch(() => { });
        getNetworkIconId(newChainConfig.ticker)
            .then((id) => {
            return setToNetworkIconId(id);
        })
            .catch(() => { });
    }, [currentChainConfig.chainId, currentChainConfig.ticker, newChainConfig.chainId, newChainConfig.ticker]);
    return (showModal && (_jsx("div", Object.assign({ id: "w3a-modal-network" }, { children: _jsxs("div", Object.assign({ className: "w3a-switch-network" }, { children: [_jsx("div", Object.assign({ className: "w3a-switch-network__title" }, { children: t("modal.network.switch-request") })), _jsx("div", { children: _jsx("a", Object.assign({ className: "w3a-switch-network__link", href: appOrigin }, { children: appOrigin })) }), _jsxs("div", Object.assign({ className: "w3a-switch-network__connect" }, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: "w3a-switch-network__logo" }, { children: _jsx(Image, { imageId: fromNetworkIconId }) })), _jsxs("div", { children: [_jsxs("div", { children: [t("modal.network.from"), ":"] }), _jsx("div", { children: currentChainConfig.displayName })] })] }), _jsx("div", { children: _jsx("div", Object.assign({ className: "w3a-switch-network__connect-divider" }, { children: _jsx(Image, { imageId: "network-arrow" }) })) }), _jsxs("div", { children: [_jsx("div", Object.assign({ className: "w3a-switch-network__logo" }, { children: _jsx(Image, { imageId: toNetworkIconId }) })), _jsxs("div", { children: [_jsxs("div", { children: [t("modal.network.to"), ":"] }), _jsx("div", { children: newChainConfig.displayName })] })] })] })), _jsxs("div", Object.assign({ className: "w3a-switch-network__buttons" }, { children: [_jsx("button", Object.assign({ type: "button", className: "w3a-button", onClick: () => {
                                setShowModal(false);
                                onCancelNetwork();
                            } }, { children: t("modal.network.cancel") })), _jsx("button", Object.assign({ type: "button", className: "w3a-button w3a-button--primary", onClick: () => {
                                setShowModal(false);
                                onSwitchNetwork(currentChainConfig.chainId, newChainConfig.chainId);
                            } }, { children: t("modal.network.proceed") }))] }))] })) }))));
}
export default SwitchNetwork;
//# sourceMappingURL=SwitchNetwork.js.map