/// <reference types="react" />
import { Theme } from "../../design-system";
import type { Chain } from "@thirdweb-dev/chains";
export type NetworkSelectorChainProps = {
    /**
     * `Chain` object for the chain to be displayed
     */
    chain: Chain;
    /**
     * function to be called for switching to the given chain
     */
    switchChain: () => void;
    /**
     * flag indicating whether the SDK is currently switching to the given chain
     */
    switching: boolean;
    /**
     * flag indicating whether the SDK failed to switch to the given chain
     */
    switchFailed: boolean;
    /**
     * function to close the modal
     */
    close?: () => void;
};
export type NetworkSelectorProps = {
    /**
     * Theme to use in Modal
     *
     * Either specify string "dark" or "light" to use the default themes, or provide a custom theme object.
     *
     * You can also use `darkTheme` or `lightTheme` functions to use the default themes as base and override it.
     *
     * @example
     * ```tsx
     * import { darkTheme } from "@thirdweb-dev/react";
     *
     * <NetworkSelector
     *  open={true}
     *  theme={darkTheme({
     *    colors: {
     *      modalBg: "#000000",
     *    }
     *  })}
     * />
     * ```
     */
    theme?: "dark" | "light" | Theme;
    /**
     * Callback to be called when modal is closed by the user
     */
    onClose?: () => void;
    /**
     * Specify whether the Modal should be open or closed
     */
    open: boolean;
    /**
     * Array of chains to be displayed in the modal
     */
    chains?: Chain[];
    /**
     * Array of chains to be displayed under "Popular" section
     * @deprecated Use `sections` prop instead
     *
     * If `sections` prop is provided, this prop will be ignored
     */
    popularChains?: Chain[];
    /**
     * Array of chains to be displayed under "Recent" section
     * @deprecated Use `sections` prop instead
     *
     * If `sections` prop is provided, this prop will be ignored
     */
    recentChains?: Chain[];
    /**
     * Specify sections of chains to be displayed in the Network Selector Modal
     *
     * @example
     * To display "Polygon", "Avalanche" chains under "Recently used" section and "Ethereum", "Arbitrum" chains under "Popular" section, you can set the prop with the following value
     * ```ts
     * import { Polygon, Avalanche, Ethereum, Arbitrum } from "@thirdweb-dev/chains";
     *
     * const sections = [
     *  { label: 'Recently used', chains: [Polygon, Avalanche] },
     *  { label: 'Popular', chains: [Ethereum, Arbitrum] },
     * ]
     * ```
     */
    sections?: Array<{
        label: string;
        chains: Chain[];
    }>;
    /**
     * Override how the chain button is rendered in the Modal
     */
    renderChain?: React.FC<NetworkSelectorChainProps>;
    /**
     * Callback to be called when a chain is successfully switched
     * @param chain - The new chain that is switched to
     */
    onSwitch?: (chain: Chain) => void;
    /**
     * Callback to be called when the "Add Custom Network" button is clicked
     *
     * The "Add Custom Network" button is displayed at the bottom of the modal - only if this prop is provided
     */
    onCustomClick?: () => void;
};
/**
 * Renders a Network Switcher Modal that allows users to switch their wallet to a different network.
 *
 * @example
 * ```tsx
 * import { NetworkSelector } from "@thirdweb-dev/react";
 *
 * function Example() {
 *  const [open, setOpen] = useState(false);
 *  return (
 *    <div>
 *      <button onClick={() => setOpen(true)}>Open Modal</button>
 *      <NetworkSelector open={open} onClose={() => setOpen(false)} />
 *    </div>
 *  )
 * }
 * ```
 *
 * @internal
 */
export declare function NetworkSelector(props: NetworkSelectorProps): import("react/jsx-runtime").JSX.Element;
export declare function NetworkSelectorContent(props: NetworkSelectorProps & {
    onBack?: () => void;
    showTabs?: boolean;
}): import("react/jsx-runtime").JSX.Element;
export declare const ChainButton: import("react").NamedExoticComponent<{
    confirming: boolean;
    switchingFailed: boolean;
    onClick: () => void;
    chain: Chain;
}>;
//# sourceMappingURL=NetworkSelector.d.ts.map