@openfort/react 0.3.1 → 1.0.0

package/build/utils/oauthErrorHandler.js

@@ -0,0 +1,42 @@
+import { logger } from './logger.js';
+
+/**
+ * Utility to handle and provide better error messages for OAuth configuration errors
+ */
+function handleOAuthConfigError(error) {
+    const message = error instanceof Error
+        ? error.message
+        : typeof error === 'object' && error && 'message' in error
+            ? String(error.message)
+            : '';
+    if (message.includes('OAuth Config with provider') && message.includes('not found')) {
+        const providerMatch = message.match(/provider\s+(\w+)\s+not found/i);
+        const provider = providerMatch ? providerMatch[1] : 'unknown';
+        const providerLower = provider.toLowerCase();
+        // Provider-specific configuration hints
+        const configHints = {
+            playfab: '- PlayFab title ID: Your PlayFab title ID',
+            firebase: '- Firebase project ID: Your Firebase project ID (e.g., test-d3dd3)',
+            'better-auth': '- Better Auth backend url: Your Better Auth service URL (e.g., https://your-domain.com/api/auth)',
+            supabase: '- Supabase url: Your Supabase project URL (e.g., https://xxxxx.supabase.co)\n   - Supabase key: Your Supabase anon/public key',
+            lootlocker: '- Enable LootLocker authentication in your Openfort dashboard',
+            oidc: '- JWKS URL: URL to JSON Web Key Set for OIDC provider\n   - Verifiable Public Key: PEM encoded public key to verify JWT tokens (if JWKS URL not provided)\n   - Audience: Expected audience value in the ID token',
+            custom: '- Authentication URL: Your custom authentication endpoint (e.g., https://your-domain.com/api/openfort/verify)\n' +
+                '   - Headers: Comma-separated list of headers to include (e.g., X-Openfort-Secret: your-shared-secret)',
+        };
+        const hint = configHints[providerLower] || configHints.custom;
+        logger.error(`❌ Openfort OAuth Configuration Error:\n\n` +
+            `The OAuth provider "${provider}" is not configured in your Openfort account.\n\n` +
+            `To fix this:\n` +
+            `1. Go to https://dashboard.openfort.io\n` +
+            `2. Navigate to Configuration → Providers\n` +
+            `3. Enable "${provider}" in the Third Party Authentication section\n` +
+            `4. Configure the required fields:\n` +
+            `   ${hint}\n` +
+            `5. Click "Save"\n\n` +
+            `See: https://www.openfort.io/docs/configuration/external-auth`);
+    }
+}
+
+export { handleOAuthConfigError };
+//# sourceMappingURL=oauthErrorHandler.js.map

package/build/utils/oauthErrorHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauthErrorHandler.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/utils/p3.js

@@ -0,0 +1,14 @@
+const hexToP3 = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result == null)
+        return hex;
+    const values = {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+    };
+    return `color(display-p3 ${values.r / 255} ${values.g / 255} ${values.b / 255})`;
+};
+
+export { hexToP3 };
+//# sourceMappingURL=p3.js.map

package/build/utils/p3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/utils/rpc.d.ts

@@ -0,0 +1,34 @@
+/**
+ * RPC Utilities
+ *
+ * Default RPC URLs and chain metadata — sourced from viem/chains where possible.
+ * Production apps must provide their own RPCs via walletConfig.ethereum.rpcUrls.
+ */
+import type { Chain } from 'viem';
+import type { SolanaCluster } from '../solana/types';
+/**
+ * Get default Ethereum RPC URL for a chain ID.
+ * Returns the viem/chains default RPC when known, falls back to Sepolia.
+ */
+export declare function getDefaultEthereumRpcUrl(chainId: number): string;
+/**
+ * Get default Solana RPC URL for a cluster.
+ */
+export declare function getDefaultSolanaRpcUrl(cluster: SolanaCluster): string;
+/**
+ * Get chain name by chain ID.
+ */
+export declare function getChainName(chainId: number): string;
+/**
+ * Get native currency configuration for a chain.
+ */
+export declare function getNativeCurrency(chainId: number): {
+    name: string;
+    symbol: string;
+    decimals: number;
+};
+/**
+ * Build a viem Chain from chainId and optional rpcUrls (e.g. from walletConfig.ethereum.rpcUrls).
+ * Returns the viem/chains object directly when the chain is known and no custom RPC is provided.
+ */
+export declare function buildChainFromConfig(chainId: number, rpcUrls?: Record<number, string>): Chain;

package/build/utils/rpc.js

@@ -0,0 +1,93 @@
+import { defineChain } from 'viem';
+import { polygonAmoy, baseSepolia, beamTestnet, sepolia, optimismSepolia, arbitrumSepolia } from 'viem/chains';
+import { logger } from './logger.js';
+
+/**
+ * RPC Utilities
+ *
+ * Default RPC URLs and chain metadata — sourced from viem/chains where possible.
+ * Production apps must provide their own RPCs via walletConfig.ethereum.rpcUrls.
+ */
+/** Known chains sourced from viem/chains — authoritative metadata (name, nativeCurrency, rpcUrls, blockExplorers). */
+const KNOWN_CHAINS = {
+    [polygonAmoy.id]: polygonAmoy,
+    [baseSepolia.id]: baseSepolia,
+    [beamTestnet.id]: beamTestnet,
+    [sepolia.id]: sepolia,
+    [optimismSepolia.id]: optimismSepolia,
+    [arbitrumSepolia.id]: arbitrumSepolia,
+};
+/**
+ * Default Solana RPC URLs by cluster.
+ * Production apps should provide their own RPCs via walletConfig.solana.rpcUrls.
+ */
+const DEFAULT_SOLANA_RPC_URLS = {
+    'mainnet-beta': 'https://api.mainnet-beta.solana.com',
+    devnet: 'https://api.devnet.solana.com',
+    testnet: 'https://api.testnet.solana.com',
+};
+/**
+ * Get default Ethereum RPC URL for a chain ID.
+ * Returns the viem/chains default RPC when known, falls back to Sepolia.
+ */
+function getDefaultEthereumRpcUrl(chainId) {
+    const chain = KNOWN_CHAINS[chainId];
+    const rpcUrl = chain === null || chain === void 0 ? void 0 : chain.rpcUrls.default.http[0];
+    if (!rpcUrl) {
+        logger.warn(`No default Ethereum RPC URL found for chain ${chainId}. Configure rpcUrls in OpenfortProvider for better reliability and rate limits.`);
+        return sepolia.rpcUrls.default.http[0];
+    }
+    return rpcUrl;
+}
+/**
+ * Get default Solana RPC URL for a cluster.
+ */
+function getDefaultSolanaRpcUrl(cluster) {
+    if (!DEFAULT_SOLANA_RPC_URLS[cluster]) {
+        logger.warn(`No default Solana RPC URL found for cluster ${cluster}. Configure rpcUrls in OpenfortProvider for better reliability and rate limits.`);
+        return 'https://api.devnet.solana.com';
+    }
+    return DEFAULT_SOLANA_RPC_URLS[cluster];
+}
+/**
+ * Get chain name by chain ID.
+ */
+function getChainName(chainId) {
+    var _a, _b;
+    return (_b = (_a = KNOWN_CHAINS[chainId]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : `Chain ${chainId}`;
+}
+/**
+ * Get native currency configuration for a chain.
+ */
+function getNativeCurrency(chainId) {
+    var _a, _b;
+    return (_b = (_a = KNOWN_CHAINS[chainId]) === null || _a === void 0 ? void 0 : _a.nativeCurrency) !== null && _b !== void 0 ? _b : { name: 'Ether', symbol: 'ETH', decimals: 18 };
+}
+/**
+ * Build a viem Chain from chainId and optional rpcUrls (e.g. from walletConfig.ethereum.rpcUrls).
+ * Returns the viem/chains object directly when the chain is known and no custom RPC is provided.
+ */
+function buildChainFromConfig(chainId, rpcUrls) {
+    var _a, _b, _c;
+    const customRpcUrl = rpcUrls === null || rpcUrls === void 0 ? void 0 : rpcUrls[chainId];
+    const knownChain = KNOWN_CHAINS[chainId];
+    if (knownChain && !customRpcUrl) {
+        return knownChain;
+    }
+    const rpcUrl = customRpcUrl !== null && customRpcUrl !== void 0 ? customRpcUrl : knownChain === null || knownChain === void 0 ? void 0 : knownChain.rpcUrls.default.http[0];
+    if (!rpcUrl) {
+        throw new Error(`No RPC URL configured for chain ${chainId}. Provide walletConfig.ethereum.rpcUrls[${chainId}].`);
+    }
+    const native = (_a = knownChain === null || knownChain === void 0 ? void 0 : knownChain.nativeCurrency) !== null && _a !== void 0 ? _a : { name: 'Ether', symbol: 'ETH', decimals: 18 };
+    const explorerUrl = (_b = knownChain === null || knownChain === void 0 ? void 0 : knownChain.blockExplorers) === null || _b === void 0 ? void 0 : _b.default.url;
+    return defineChain({
+        id: chainId,
+        name: (_c = knownChain === null || knownChain === void 0 ? void 0 : knownChain.name) !== null && _c !== void 0 ? _c : `Chain ${chainId}`,
+        nativeCurrency: native,
+        rpcUrls: { default: { http: [rpcUrl] } },
+        ...(explorerUrl && { blockExplorers: { default: { name: 'Explorer', url: explorerUrl } } }),
+    });
+}
+
+export { buildChainFromConfig, getChainName, getDefaultEthereumRpcUrl, getDefaultSolanaRpcUrl, getNativeCurrency };
+//# sourceMappingURL=rpc.js.map

package/build/utils/rpc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rpc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/utils/useOnUserReturn.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+function useOnUserReturn(callback) {
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                callback();
+            }
+        };
+        const handleFocus = () => {
+            callback();
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        window.addEventListener('focus', handleFocus);
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            window.removeEventListener('focus', handleFocus);
+        };
+    }, [callback]);
+}
+
+export { useOnUserReturn };
+//# sourceMappingURL=useOnUserReturn.js.map

package/build/utils/useOnUserReturn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnUserReturn.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/utils/validation.js

@@ -0,0 +1,7 @@
+const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+
+export { isValidEmail };
+//# sourceMappingURL=validation.js.map

package/build/utils/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/utils/wallets.d.ts

@@ -1,10 +1,16 @@
+/** EIP-1193 provider injected by wallets (MetaMask, etc.); may have providers array when multiple injected */
+type EthereumWindowProvider = Record<string, unknown> & {
+    providers?: Record<string, unknown>[];
+};
 declare global {
     interface Window {
         trustWallet: any;
         trustwallet: any;
+        ethereum?: EthereumWindowProvider;
     }
 }
 export declare const isFamily: () => boolean;
 export declare const isPhantom: () => boolean;
 export declare const isArgent: () => boolean;
 export declare const isSafe: () => boolean;
+export {};

package/build/utils/wallets.js

@@ -0,0 +1,14 @@
+const isWalletInstalled = (name) => {
+    var _a;
+    if (typeof window === 'undefined')
+        return false;
+    const { ethereum } = window;
+    return !!((ethereum === null || ethereum === void 0 ? void 0 : ethereum[`is${name}`]) || ((_a = ethereum === null || ethereum === void 0 ? void 0 : ethereum.providers) === null || _a === void 0 ? void 0 : _a.find((provider) => provider === null || provider === void 0 ? void 0 : provider[`is${name}`])));
+};
+const isFamily = () => isWalletInstalled('Family');
+const isPhantom = () => isWalletInstalled('Phantom');
+const isArgent = () => isWalletInstalled('Argent');
+const isSafe = () => isWalletInstalled('Safe');
+
+export { isArgent, isFamily, isPhantom, isSafe };
+//# sourceMappingURL=wallets.js.map

package/build/utils/wallets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallets.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "0.3.1";
+export declare const OPENFORT_VERSION = "1.0.0";

package/build/version.js

@@ -0,0 +1,4 @@
+const OPENFORT_VERSION = '1.0.0';
+
+export { OPENFORT_VERSION };
+//# sourceMappingURL=version.js.map

package/build/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/wagmi/OpenfortWagmiBridge.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+import { type PropsWithChildren } from 'react';
+export declare const OpenfortWagmiBridge: React.FC<PropsWithChildren>;

package/build/wagmi/OpenfortWagmiBridge.js

@@ -0,0 +1,166 @@
+import { getEnsAddress, getEnsName, getEnsAvatar } from '@wagmi/core';
+import { useRef, useMemo, useCallback, createElement } from 'react';
+import { normalize } from 'viem/ens';
+import { useAccount, useChainId, useConfig, useDisconnect, useConnect, useSwitchChain, useSignMessage, useWalletClient, useEnsName, useEnsAvatar } from 'wagmi';
+import { OpenfortEthereumBridgeContext } from '../ethereum/OpenfortEthereumBridgeContext.js';
+import { shouldExcludeConnector } from './connectorFilter.js';
+
+function mapConnector(c) {
+    return { id: c.id, name: c.name, icon: c.icon, type: c.type, getProvider: c.getProvider };
+}
+const OpenfortWagmiBridge = ({ children }) => {
+    var _a, _b;
+    const { address, chain, isConnected, isConnecting, isReconnecting, connector } = useAccount();
+    const chainId = useChainId();
+    const config = useConfig();
+    const { disconnectAsync } = useDisconnect();
+    const { connect, connectAsync: wagmiConnectAsync, connectors, reset } = useConnect();
+    const { chains, switchChain, switchChainAsync, isPending: isSwitchChainPending, error: switchChainError, } = useSwitchChain();
+    const { signMessageAsync } = useSignMessage();
+    const { data: walletClient } = useWalletClient();
+    const accountAddress = (_b = (_a = walletClient === null || walletClient === void 0 ? void 0 : walletClient.account) === null || _a === void 0 ? void 0 : _a.address) !== null && _b !== void 0 ? _b : address;
+    const { data: ensName } = useEnsName({ address: accountAddress, chainId: 1 });
+    const { data: ensAvatar } = useEnsAvatar({ name: ensName ? normalize(ensName) : undefined, chainId: 1 });
+    const connectorKey = connectors.map((c) => c.id).join(',');
+    const connectorsRef = useRef(connectors);
+    if (connectorsRef.current.map((c) => c.id).join(',') !== connectorKey) {
+        connectorsRef.current = connectors;
+    }
+    const stableConnectors = connectorsRef.current;
+    const bridgeConnectors = useMemo(() => {
+        const mapped = stableConnectors.map((c) => mapConnector(c));
+        return mapped
+            .filter((w, i, self) => self.findIndex((x) => x.id === w.id) === i)
+            .filter((w) => !shouldExcludeConnector(w, mapped));
+    }, [stableConnectors]);
+    const connectBridge = useCallback((params) => {
+        const c = stableConnectors.find((x) => x.id === params.connector.id);
+        if (c)
+            connect({ connector: c });
+    }, [stableConnectors, connect]);
+    const connectAsyncBridge = useCallback(async (params) => {
+        const c = stableConnectors.find((x) => x.id === params.connector.id);
+        if (!c)
+            throw new Error('Connector not found');
+        return wagmiConnectAsync({ connector: c });
+    }, [stableConnectors, wagmiConnectAsync]);
+    const getEnsAddress$1 = useCallback(async (name) => {
+        var _a;
+        try {
+            return (_a = (await getEnsAddress(config, { name: normalize(name), chainId: 1 }))) !== null && _a !== void 0 ? _a : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [config]);
+    const getEnsName$1 = useCallback(async (params) => {
+        var _a;
+        try {
+            return (_a = (await getEnsName(config, { address: params.address, chainId: 1 }))) !== null && _a !== void 0 ? _a : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [config]);
+    const getEnsAvatar$1 = useCallback(async (name) => {
+        var _a;
+        try {
+            return (_a = (await getEnsAvatar(config, { name: normalize(name), chainId: 1 }))) !== null && _a !== void 0 ? _a : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, [config]);
+    const getConnectorAccounts = useCallback(async (connectorBridge) => {
+        const c = stableConnectors.find((x) => x.id === connectorBridge.id);
+        if (!(c === null || c === void 0 ? void 0 : c.getAccounts))
+            return [];
+        const accounts = await c.getAccounts();
+        return accounts;
+    }, [stableConnectors]);
+    const signMessage = useCallback(async (params) => {
+        if (!signMessageAsync)
+            throw new Error('signMessage not available');
+        return signMessageAsync({ message: params.message });
+    }, [signMessageAsync]);
+    const getWalletClient = useCallback(async () => walletClient !== null && walletClient !== void 0 ? walletClient : undefined, [walletClient]);
+    const value = useMemo(() => ({
+        account: {
+            address: accountAddress,
+            chain: chain ? { id: chain.id, name: chain.name } : undefined,
+            isConnected: (isConnected !== null && isConnected !== void 0 ? isConnected : false) && !isConnecting && !isReconnecting,
+            isConnecting: isConnecting !== null && isConnecting !== void 0 ? isConnecting : false,
+            isReconnecting: isReconnecting !== null && isReconnecting !== void 0 ? isReconnecting : false,
+            connector: connector ? mapConnector(connector) : undefined,
+            ensName: ensName !== null && ensName !== void 0 ? ensName : undefined,
+            ensAvatar: ensAvatar !== null && ensAvatar !== void 0 ? ensAvatar : undefined,
+        },
+        chainId,
+        config: {
+            chains: config.chains.map((ch) => ({ id: ch.id })),
+            getClient: (opts) => {
+                var _a, _b;
+                const client = config.getClient({ chainId: opts.chainId });
+                return {
+                    transport: {
+                        url: (_b = (_a = client === null || client === void 0 ? void 0 : client.transport) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+                    },
+                };
+            },
+            storage: config.storage
+                ? {
+                    getItem: (key) => { var _a, _b; return Promise.resolve((_b = (_a = config.storage) === null || _a === void 0 ? void 0 : _a.getItem(key)) !== null && _b !== void 0 ? _b : null); },
+                    setItem: (key, value) => { var _a; return (_a = config.storage) === null || _a === void 0 ? void 0 : _a.setItem(key, value); },
+                }
+                : undefined,
+        },
+        disconnect: disconnectAsync,
+        connect: connectBridge,
+        connectAsync: connectAsyncBridge,
+        reset,
+        connectors: bridgeConnectors,
+        switchChain: {
+            chains: chains.map((ch) => ({ id: ch.id, name: ch.name })),
+            switchChain: switchChain !== null && switchChain !== void 0 ? switchChain : undefined,
+            switchChainAsync,
+            isPending: isSwitchChainPending,
+            error: switchChainError !== null && switchChainError !== void 0 ? switchChainError : null,
+        },
+        getEnsAddress: getEnsAddress$1,
+        getEnsName: getEnsName$1,
+        getEnsAvatar: getEnsAvatar$1,
+        getConnectorAccounts,
+        signMessage,
+        getWalletClient,
+    }), [
+        accountAddress,
+        chain,
+        isConnected,
+        isConnecting,
+        isReconnecting,
+        connector,
+        chainId,
+        config,
+        disconnectAsync,
+        connectBridge,
+        connectAsyncBridge,
+        reset,
+        bridgeConnectors,
+        chains,
+        switchChain,
+        isSwitchChainPending,
+        switchChainError,
+        ensName,
+        ensAvatar,
+        getEnsAddress$1,
+        getEnsName$1,
+        getEnsAvatar$1,
+        getConnectorAccounts,
+        signMessage,
+        getWalletClient,
+    ]);
+    return createElement(OpenfortEthereumBridgeContext.Provider, { value }, children);
+};
+
+export { OpenfortWagmiBridge };
+//# sourceMappingURL=OpenfortWagmiBridge.js.map

package/build/wagmi/OpenfortWagmiBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenfortWagmiBridge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/wagmi/components/ChainSelect/index.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { css } from 'styled-components';
+import { useChainId, useSwitchChain } from 'wagmi';
+import Chain from '../../../components/Common/Chain/index.js';
+import Tooltip from '../../../components/Common/Tooltip/index.js';
+import { routes } from '../../../components/Openfort/types.js';
+import { useOpenfort } from '../../../components/Openfort/useOpenfort.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import useLocales from '../../../hooks/useLocales.js';
+import styled from '../../../styles/styled/index.js';
+import { isMobile, flattenChildren } from '../../../utils/index.js';
+import ChainSelectDropdown from '../ChainSelectDropdown/index.js';
+
+const Container = styled(motion.div) ``;
+const SwitchChainButton = styled(motion.button) `
+  --color: var(
+    --ck-dropdown-button-color,
+    var(--ck-button-primary-color, var(--ck-body-color))
+  );
+  --background: var(
+    --ck-dropdown-button-background,
+    var(--ck-secondary-button-background, var(--ck-body-background-secondary))
+  );
+  --box-shadow: var(
+    --ck-dropdown-button-box-shadow,
+    var(
+      --ck-secondary-button-box-shadow,
+      var(--ck-button-primary-box-shadow),
+      none
+    )
+  );
+
+  --hover-color: var(--ck-dropdown-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-dropdown-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-dropdown-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+
+  --active-color: var(--ck-dropdown-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-dropdown-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-dropdown-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+
+  appearance: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 15px;
+  width: 52px;
+  height: 30px;
+  padding: 2px 6px 2px 3px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transform: translateZ(0px);
+
+  transition: 100ms ease;
+  transition-property: transform, background-color, box-shadow, color;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+
+  svg {
+    position: relative;
+    display: block;
+  }
+
+  ${(props) => props.disabled
+    ? css `
+          width: auto;
+          padding: 3px;
+          position: relative;
+          left: -22px;
+        `
+    : css `
+          cursor: pointer;
+
+          @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+            &:hover,
+            &:focus-visible {
+              color: var(--hover-color);
+              background: var(--hover-background);
+              box-shadow: var(--hover-box-shadow);
+            }
+            &:active {
+              color: var(--active-color);
+              background: var(--active-background);
+              box-shadow: var(--active-box-shadow);
+            }
+          }
+        `}
+`;
+const ChevronDown = ({ ...props }) => (jsx("svg", { "aria-hidden": "true", width: "11", height: "6", viewBox: "0 0 11 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M1.5 1L5.5 5L9.5 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChainSelector = () => {
+    var _a;
+    const { open, triggerResize, setRoute } = useOpenfort();
+    const [isOpen, setIsOpen] = useState(false);
+    const chainId = useChainId();
+    const { chains } = useSwitchChain();
+    const chain = chains.find((c) => c.id === chainId);
+    const locales = useLocales({
+        CHAIN: (_a = chain === null || chain === void 0 ? void 0 : chain.name) !== null && _a !== void 0 ? _a : 'UNKNOWN',
+    });
+    const mobile = isMobile() || (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.innerWidth) < defaultTheme.mobileWidth);
+    useEffect(() => {
+        if (!open)
+            setIsOpen(false);
+    }, [open]);
+    useEffect(() => {
+        triggerResize();
+    }, [chainId, triggerResize]);
+    const disabled = chains.length <= 1;
+    return (jsx(Container, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: chain && (jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
+                    if (mobile) {
+                        setRoute(routes.ETH_SWITCH_NETWORK);
+                    }
+                    else {
+                        setIsOpen(!isOpen);
+                    }
+                }, children: [disabled ? (jsx(Tooltip, { message: locales.chainNetwork, xOffset: -6, delay: 0.01, children: jsx(Chain, { id: chain === null || chain === void 0 ? void 0 : chain.id }) })) : (jsx(Chain, { id: chain === null || chain === void 0 ? void 0 : chain.id })), !disabled && jsx(ChevronDown, { style: { top: 1, left: -3 } })] })) }) }));
+};
+
+export { ChainSelector as default };
+//# sourceMappingURL=index.js.map

package/build/wagmi/components/ChainSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}