solariskit 1.2.0 → 1.4.0

package/dist/{WalletButton-B-bj9FNL.d.ts → WalletButton-BiMfdrFz.d.ts}

@@ -259,26 +259,19 @@ declare namespace ConnectButtonRenderer {
 //#endregion
 //#region src/components/ConnectButton/ConnectButton.d.ts
 type AccountStatus = "full" | "avatar" | "address";
-type ChainStatus = "full" | "icon" | "name" | "none";
 interface ConnectButtonProps {
   accountStatus?: ResponsiveValue<AccountStatus>;
   showBalance?: ResponsiveValue<boolean>;
-  chainStatus?: ResponsiveValue<ChainStatus>;
   label?: string;
 }
 declare function ConnectButton({
   accountStatus,
-  chainStatus,
   label,
   showBalance
 }: ConnectButtonProps): React.JSX.Element | null;
 declare namespace ConnectButton {
   var __defaultProps: {
     readonly accountStatus: "full";
-    readonly chainStatus: {
-      readonly largeScreen: "full";
-      readonly smallScreen: "icon";
-    };
     readonly label: "Connect Wallet";
     readonly showBalance: {
       readonly largeScreen: true;
@@ -288,6 +281,25 @@ declare namespace ConnectButton {
   var Custom: typeof ConnectButtonRenderer;
 }
 //#endregion
+//#region src/components/ChainSelectButton/ChainSelectButton.d.ts
+type ChainStatus = "full" | "icon" | "name" | "none";
+interface ChainSelectButtonProps {
+  chainStatus?: ResponsiveValue<ChainStatus>;
+  fullWidth?: boolean;
+}
+declare function ChainSelectButton({
+  chainStatus,
+  fullWidth
+}: ChainSelectButtonProps): React.JSX.Element | null;
+declare namespace ChainSelectButton {
+  var __defaultProps: {
+    readonly chainStatus: {
+      readonly largeScreen: "full";
+      readonly smallScreen: "icon";
+    };
+  };
+}
+//#endregion
 //#region src/wallets/useWalletConnectors.d.ts
 interface WalletConnector extends WalletInstance {
   ready?: boolean;
@@ -322,4 +334,4 @@ declare const WalletButton: {
   Custom: (props: WalletButtonRendererProps) => ReactNode;
 };
 //#endregion
-export { ConnectButtonProps as a, RainbowKitAuthenticationProvider as c, RainbowKitProviderProps as d, Theme as f, ThemeVars as g, DisclaimerComponent as h, ConnectButton as i, createAuthenticationAdapter as l, AvatarComponentProps as m, WalletButtonProps as n, AuthenticationConfig as o, AvatarComponent as p, WalletButtonRendererProps as r, AuthenticationStatus as s, WalletButton as t, RainbowKitProvider as u };
+export { AvatarComponentProps as _, ChainSelectButtonProps as a, ConnectButtonProps as c, RainbowKitAuthenticationProvider as d, createAuthenticationAdapter as f, AvatarComponent as g, Theme as h, ChainSelectButton as i, AuthenticationConfig as l, RainbowKitProviderProps as m, WalletButtonProps as n, ChainStatus as o, RainbowKitProvider as p, WalletButtonRendererProps as r, ConnectButton as s, WalletButton as t, AuthenticationStatus as u, DisclaimerComponent as v, ThemeVars as y };

package/dist/{WalletButton-CsbqNc5l.js → WalletButton-D8U16Q_4.js}

@@ -1530,100 +1530,6 @@ const Box = React.forwardRef(({ as = "div", className, testId, ...props }, ref)
 });
 Box.displayName = "Box";
 
-//#endregion
-//#region src/components/AsyncImage/useAsyncImage.ts
-const cachedUrls = /* @__PURE__ */ new Map();
-const cachedRequestPromises = /* @__PURE__ */ new Map();
-async function loadAsyncImage(asyncImage) {
-	const cachedRequestPromise = cachedRequestPromises.get(asyncImage);
-	if (cachedRequestPromise) return cachedRequestPromise;
-	const load = async () => asyncImage().then(async (url) => {
-		cachedUrls.set(asyncImage, url);
-		return url;
-	});
-	const requestPromise = load().catch((_err) => {
-		return load().catch((_err) => {
-			cachedRequestPromises.delete(asyncImage);
-		});
-	});
-	cachedRequestPromises.set(asyncImage, requestPromise);
-	return requestPromise;
-}
-async function loadImages(...urls) {
-	return await Promise.all(urls.map((url) => typeof url === "function" ? loadAsyncImage(url) : url));
-}
-function useForceUpdate() {
-	const [, forceUpdate] = useReducer((x) => x + 1, 0);
-	return forceUpdate;
-}
-function useAsyncImage(url) {
-	const cachedUrl = typeof url === "function" ? cachedUrls.get(url) : void 0;
-	const forceUpdate = useForceUpdate();
-	useEffect(() => {
-		if (typeof url === "function" && !cachedUrl) loadAsyncImage(url).then(forceUpdate);
-	}, [
-		url,
-		cachedUrl,
-		forceUpdate
-	]);
-	return typeof url === "function" ? cachedUrl : url;
-}
-
-//#endregion
-//#region src/components/AsyncImage/AsyncImage.tsx
-function AsyncImage({ alt, background, borderColor, borderRadius, useAsImage, boxShadow, height, src: srcProp, width, testId }) {
-	const ios = isIOS();
-	const src = useAsyncImage(srcProp);
-	const isRemoteImage = src && src.startsWith("http");
-	const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer(() => true, false);
-	return /* @__PURE__ */ jsxs(Box, {
-		"aria-label": alt,
-		borderRadius,
-		boxShadow,
-		height: typeof height === "string" ? height : void 0,
-		overflow: "hidden",
-		position: "relative",
-		role: "img",
-		style: {
-			background,
-			height: typeof height === "number" ? height : void 0,
-			width: typeof width === "number" ? width : void 0
-		},
-		width: typeof width === "string" ? width : void 0,
-		testId,
-		children: [/* @__PURE__ */ jsx(Box, {
-			...src ? isRemoteImage ? {
-				"aria-hidden": true,
-				as: "img",
-				onLoad: setRemoteImageLoaded,
-				src
-			} : {
-				"aria-hidden": true,
-				as: "img",
-				src
-			} : { "aria-hidden": true },
-			height: "full",
-			position: "absolute",
-			...ios ? { WebkitUserSelect: "none" } : {},
-			style: {
-				WebkitTouchCallout: "none",
-				transition: "opacity .15s linear",
-				userSelect: "none",
-				...!useAsImage && isRemoteImage ? { opacity: isRemoteImageLoaded ? 1 : 0 } : {}
-			},
-			width: "full"
-		}), borderColor ? /* @__PURE__ */ jsx(Box, {
-			...typeof borderColor === "object" && "custom" in borderColor ? { style: { borderColor: borderColor.custom } } : { borderColor },
-			borderRadius,
-			borderStyle: "solid",
-			borderWidth: "1",
-			height: "full",
-			position: "relative",
-			width: "full"
-		}) : null]
-	});
-}
-
 //#endregion
 //#region src/components/Icons/Icons.css.ts
 var SpinnerIconClassName = "_1kl0wmk2";
@@ -1777,6 +1683,37 @@ const DropdownIcon = () => /* @__PURE__ */ jsxs("svg", {
 	})]
 });
 
+//#endregion
+//#region src/components/RainbowKitProvider/ShowBalanceContext.tsx
+const ShowBalanceContext = createContext({
+	showBalance: void 0,
+	setShowBalance: () => {}
+});
+function ShowBalanceProvider({ children }) {
+	const [showBalance, setShowBalance] = useState();
+	return /* @__PURE__ */ jsx(ShowBalanceContext.Provider, {
+		value: {
+			showBalance,
+			setShowBalance
+		},
+		children
+	});
+}
+const useShowBalance = () => useContext(ShowBalanceContext);
+
+//#endregion
+//#region src/hooks/useIsMounted.ts
+function useIsMounted() {
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => {
+		setIsMounted(true);
+		return () => {
+			setIsMounted(false);
+		};
+	}, []);
+	return useCallback(() => isMounted, [isMounted]);
+}
+
 //#endregion
 //#region src/utils/isChainIdSupported.ts
 function isChainIdSupported(chains, chainId) {
@@ -1842,37 +1779,6 @@ const useRainbowKitChainsById = () => {
 	}, [rainbowkitChains]);
 };
 
-//#endregion
-//#region src/components/RainbowKitProvider/ShowBalanceContext.tsx
-const ShowBalanceContext = createContext({
-	showBalance: void 0,
-	setShowBalance: () => {}
-});
-function ShowBalanceProvider({ children }) {
-	const [showBalance, setShowBalance] = useState();
-	return /* @__PURE__ */ jsx(ShowBalanceContext.Provider, {
-		value: {
-			showBalance,
-			setShowBalance
-		},
-		children
-	});
-}
-const useShowBalance = () => useContext(ShowBalanceContext);
-
-//#endregion
-//#region src/hooks/useIsMounted.ts
-function useIsMounted() {
-	const [isMounted, setIsMounted] = useState(false);
-	useEffect(() => {
-		setIsMounted(true);
-		return () => {
-			setIsMounted(false);
-		};
-	}, []);
-	return useCallback(() => isMounted, [isMounted]);
-}
-
 //#endregion
 //#region src/hooks/useIsMainnetConfigured.ts
 function useIsMainnetConfigured() {
@@ -2369,6 +2275,45 @@ function useRecentTransactions() {
 	return transactions;
 }
 
+//#endregion
+//#region src/components/AsyncImage/useAsyncImage.ts
+const cachedUrls = /* @__PURE__ */ new Map();
+const cachedRequestPromises = /* @__PURE__ */ new Map();
+async function loadAsyncImage(asyncImage) {
+	const cachedRequestPromise = cachedRequestPromises.get(asyncImage);
+	if (cachedRequestPromise) return cachedRequestPromise;
+	const load = async () => asyncImage().then(async (url) => {
+		cachedUrls.set(asyncImage, url);
+		return url;
+	});
+	const requestPromise = load().catch((_err) => {
+		return load().catch((_err) => {
+			cachedRequestPromises.delete(asyncImage);
+		});
+	});
+	cachedRequestPromises.set(asyncImage, requestPromise);
+	return requestPromise;
+}
+async function loadImages(...urls) {
+	return await Promise.all(urls.map((url) => typeof url === "function" ? loadAsyncImage(url) : url));
+}
+function useForceUpdate() {
+	const [, forceUpdate] = useReducer((x) => x + 1, 0);
+	return forceUpdate;
+}
+function useAsyncImage(url) {
+	const cachedUrl = typeof url === "function" ? cachedUrls.get(url) : void 0;
+	const forceUpdate = useForceUpdate();
+	useEffect(() => {
+		if (typeof url === "function" && !cachedUrl) loadAsyncImage(url).then(forceUpdate);
+	}, [
+		url,
+		cachedUrl,
+		forceUpdate
+	]);
+	return typeof url === "function" ? cachedUrl : url;
+}
+
 //#endregion
 //#region src/css/cssObjectFromTheme.ts
 const resolveThemeVars = (theme) => typeof theme === "function" ? theme() : theme;
@@ -2608,7 +2553,7 @@ function setRainbowKitVersion({ version }) {
 }
 function useFingerprint() {
 	const fingerprint = useCallback(() => {
-		setRainbowKitVersion({ version: "1.2.0" });
+		setRainbowKitVersion({ version: "1.4.0" });
 	}, []);
 	useEffect(() => {
 		fingerprint();
@@ -2683,6 +2628,7 @@ function useWalletConnectors(mergeEIP6963WithRkConnectors = false) {
 	const initialChainId = useInitialChainId();
 	const selectedChainId = useChainId();
 	const { mutateAsync: connect } = useConnect();
+	const { mutateAsync: switchChain } = useSwitchChain();
 	const defaultCreatedConnectors = useConnectors();
 	const { setIsWalletConnectModalOpen } = useWalletConnectOpenState();
 	const defaultConnectors = defaultCreatedConnectors.map((connector) => ({
@@ -2691,11 +2637,24 @@ function useWalletConnectors(mergeEIP6963WithRkConnectors = false) {
 	}));
 	async function connectWallet(connector, parameters) {
 		const walletChainId = await connector.getChainId();
-		const result = await connect({
+		const targetChainId = parameters?.chainId ?? selectedChainId ?? initialChainId ?? (isChainIdSupported(rainbowKitChains, walletChainId) ? walletChainId : void 0) ?? rainbowKitChains[0]?.id;
+		let result = await connect({
 			...parameters,
-			chainId: parameters?.chainId ?? selectedChainId ?? initialChainId ?? (isChainIdSupported(rainbowKitChains, walletChainId) ? walletChainId : void 0) ?? rainbowKitChains[0]?.id,
+			chainId: targetChainId,
 			connector
 		});
+		if (targetChainId && connector.switchChain) {
+			if (await connector.getChainId() !== targetChainId) {
+				const chain = await switchChain({
+					chainId: targetChainId,
+					connector
+				});
+				result = {
+					...result,
+					chainId: chain.id
+				};
+			}
+		}
 		if (result) addRecentWalletId(connector.id);
 		return result;
 	}
@@ -2771,6 +2730,61 @@ function useWalletConnectors(mergeEIP6963WithRkConnectors = false) {
 	return walletConnectors;
 }
 
+//#endregion
+//#region src/components/AsyncImage/AsyncImage.tsx
+function AsyncImage({ alt, background, borderColor, borderRadius, useAsImage, boxShadow, height, src: srcProp, width, testId }) {
+	const ios = isIOS();
+	const src = useAsyncImage(srcProp);
+	const isRemoteImage = src && src.startsWith("http");
+	const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer(() => true, false);
+	return /* @__PURE__ */ jsxs(Box, {
+		"aria-label": alt,
+		borderRadius,
+		boxShadow,
+		height: typeof height === "string" ? height : void 0,
+		overflow: "hidden",
+		position: "relative",
+		role: "img",
+		style: {
+			background,
+			height: typeof height === "number" ? height : void 0,
+			width: typeof width === "number" ? width : void 0
+		},
+		width: typeof width === "string" ? width : void 0,
+		testId,
+		children: [/* @__PURE__ */ jsx(Box, {
+			...src ? isRemoteImage ? {
+				"aria-hidden": true,
+				as: "img",
+				onLoad: setRemoteImageLoaded,
+				src
+			} : {
+				"aria-hidden": true,
+				as: "img",
+				src
+			} : { "aria-hidden": true },
+			height: "full",
+			position: "absolute",
+			...ios ? { WebkitUserSelect: "none" } : {},
+			style: {
+				WebkitTouchCallout: "none",
+				transition: "opacity .15s linear",
+				userSelect: "none",
+				...!useAsImage && isRemoteImage ? { opacity: isRemoteImageLoaded ? 1 : 0 } : {}
+			},
+			width: "full"
+		}), borderColor ? /* @__PURE__ */ jsx(Box, {
+			...typeof borderColor === "object" && "custom" in borderColor ? { style: { borderColor: borderColor.custom } } : { borderColor },
+			borderRadius,
+			borderStyle: "solid",
+			borderWidth: "1",
+			height: "full",
+			position: "relative",
+			width: "full"
+		}) : null]
+	});
+}
+
 //#endregion
 //#region src/components/Icons/Assets.tsx
 const src$1 = async () => (await import("./assets-DGFjAppz.js")).default;
@@ -5422,9 +5436,7 @@ function ModalProvider({ children }) {
 	const { closeModal: closeChainModal, isModalOpen: chainModalOpen, openModal: openChainModal } = useModalStateValue();
 	const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState(false);
 	const connectionStatus = useConnectionStatus();
-	const { chainId } = useConnection();
 	const { chains } = useConfig();
-	const isCurrentChainSupported = isChainIdSupported(chains, chainId);
 	const closeModals = useCallback(({ keepConnectModalOpen = false } = {}) => {
 		if (!keepConnectModalOpen) closeConnectModal();
 		closeAccountModal();
@@ -5448,7 +5460,7 @@ function ModalProvider({ children }) {
 			chainModalOpen,
 			connectModalOpen,
 			isWalletConnectModalOpen,
-			openAccountModal: isCurrentChainSupported && connectionStatus === "connected" ? openAccountModal : void 0,
+			openAccountModal: connectionStatus === "connected" ? openAccountModal : void 0,
 			openChainModal: chains.length > 0 ? openChainModal : void 0,
 			openConnectModal: connectionStatus === "disconnected" || connectionStatus === "unauthenticated" ? openConnectModal : void 0,
 			setIsWalletConnectModalOpen
@@ -5460,7 +5472,6 @@ function ModalProvider({ children }) {
 			openAccountModal,
 			openChainModal,
 			openConnectModal,
-			isCurrentChainSupported,
 			chains.length,
 			isWalletConnectModalOpen
 		]),
@@ -5586,20 +5597,15 @@ ConnectButtonRenderer.displayName = "ConnectButton.Custom";
 
 //#endregion
 //#region src/components/ConnectButton/ConnectButton.tsx
-const defaultProps = {
+const defaultProps$1 = {
 	accountStatus: "full",
-	chainStatus: {
-		largeScreen: "full",
-		smallScreen: "icon"
-	},
 	label: "Connect Wallet",
 	showBalance: {
 		largeScreen: true,
 		smallScreen: false
 	}
 };
-function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus = defaultProps.chainStatus, label = defaultProps.label, showBalance = defaultProps.showBalance }) {
-	const chains = useRainbowKitChains();
+function ConnectButton({ accountStatus = defaultProps$1.accountStatus, label = defaultProps$1.label, showBalance = defaultProps$1.showBalance }) {
 	const connectionStatus = useConnectionStatus();
 	const { setShowBalance } = useShowBalance();
 	const [ready, setReady] = useState(false);
@@ -5611,65 +5617,10 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
 		setShowBalance,
 		showBalance
 	]);
-	return ready ? /* @__PURE__ */ jsx(ConnectButtonRenderer, { children: ({ account, chain, mounted, openAccountModal, openChainModal, openConnectModal }) => {
+	return ready ? /* @__PURE__ */ jsx(ConnectButtonRenderer, { children: ({ account, mounted, openAccountModal, openConnectModal }) => {
 		const ready = mounted && connectionStatus !== "loading";
-		const unsupportedChain = chain?.unsupported ?? false;
-		const chainButton = chain && (chains.length > 1 || unsupportedChain) ? /* @__PURE__ */ jsxs(Box, {
-			alignItems: "center",
-			"aria-label": "Chain Selector",
-			as: "button",
-			background: unsupportedChain ? "connectButtonBackgroundError" : "connectButtonBackground",
-			borderRadius: "connectButton",
-			boxShadow: "connectButton",
-			className: touchableStyles({
-				active: "shrink",
-				hover: "grow"
-			}),
-			color: unsupportedChain ? "connectButtonTextError" : "connectButtonText",
-			display: mapResponsiveValue(chainStatus, (value) => value === "none" ? "none" : "flex"),
-			fontFamily: "body",
-			fontWeight: "bold",
-			gap: "6",
-			onClick: openChainModal,
-			paddingX: "10",
-			paddingY: "8",
-			testId: unsupportedChain ? "wrong-network-button" : "chain-button",
-			transition: "default",
-			type: "button",
-			children: [unsupportedChain ? /* @__PURE__ */ jsx(Box, {
-				alignItems: "center",
-				display: "flex",
-				height: "24",
-				paddingX: "4",
-				children: t("connect_wallet.wrong_network.label")
-			}) : /* @__PURE__ */ jsxs(Box, {
-				alignItems: "center",
-				display: "flex",
-				gap: "6",
-				children: [chain.hasIcon ? /* @__PURE__ */ jsx(Box, {
-					display: mapResponsiveValue(chainStatus, (value) => value === "full" || value === "icon" ? "block" : "none"),
-					height: "24",
-					width: "24",
-					children: /* @__PURE__ */ jsx(AsyncImage, {
-						alt: chain.name ?? "Chain icon",
-						background: chain.iconBackground,
-						borderRadius: "full",
-						height: "24",
-						src: chain.iconUrl,
-						width: "24"
-					})
-				}) : null, /* @__PURE__ */ jsx(Box, {
-					display: mapResponsiveValue(chainStatus, (value) => {
-						if (value === "icon" && !chain.iconUrl) return "block";
-						return value === "full" || value === "name" ? "block" : "none";
-					}),
-					children: chain.name ?? chain.id
-				})]
-			}), /* @__PURE__ */ jsx(DropdownIcon, {})]
-		}, unsupportedChain ? "unsupported" : "supported") : null;
 		return /* @__PURE__ */ jsx(Box, {
 			display: "flex",
-			gap: "12",
 			...!ready && {
 				"aria-hidden": true,
 				style: {
@@ -5678,7 +5629,7 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
 					userSelect: "none"
 				}
 			},
-			children: ready && account && connectionStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [chainButton, !unsupportedChain && /* @__PURE__ */ jsxs(Box, {
+			children: ready && account && connectionStatus === "connected" ? /* @__PURE__ */ jsxs(Box, {
 				alignItems: "center",
 				as: "button",
 				background: "connectButtonBackground",
@@ -5737,7 +5688,7 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
 						})]
 					})
 				})]
-			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [chainButton, /* @__PURE__ */ jsx(Box, {
+			}) : /* @__PURE__ */ jsx(Box, {
 				as: "button",
 				background: "accentColor",
 				borderRadius: "connectButton",
@@ -5756,13 +5707,114 @@ function ConnectButton({ accountStatus = defaultProps.accountStatus, chainStatus
 				transition: "default",
 				type: "button",
 				children: mounted && label === "Connect Wallet" ? t("connect_wallet.label") : label
-			}, "connect")] })
+			}, "connect")
 		});
 	} }) : null;
 }
-ConnectButton.__defaultProps = defaultProps;
+ConnectButton.__defaultProps = defaultProps$1;
 ConnectButton.Custom = ConnectButtonRenderer;
 
+//#endregion
+//#region src/components/ChainSelectButton/ChainSelectButton.tsx
+const defaultProps = { chainStatus: {
+	largeScreen: "full",
+	smallScreen: "icon"
+} };
+function ChainSelectButton({ chainStatus = defaultProps.chainStatus, fullWidth = false }) {
+	const chains = useRainbowKitChains();
+	const chainsById = useRainbowKitChainsById();
+	const connectionStatus = useConnectionStatus();
+	const { openChainModal } = useChainModal();
+	const { chainId: connectedChainId } = useConnection();
+	const chainId = useSelectedChainId(connectedChainId);
+	const { chains: wagmiChains } = useConfig();
+	const isConnectedChainSupported = connectedChainId ? isChainIdSupported(wagmiChains, connectedChainId) : true;
+	const isMounted = useIsMounted();
+	const [ready, setReady] = useState(false);
+	const chainMetadata = chainId ? chainsById[chainId] : void 0;
+	const resolvedChainIconUrl = useAsyncImage(chainMetadata?.iconUrl ?? void 0);
+	const chain = chainId ? {
+		hasIcon: Boolean(chainMetadata?.iconUrl),
+		iconBackground: chainMetadata?.iconBackground,
+		iconUrl: resolvedChainIconUrl,
+		id: chainId,
+		name: chainMetadata?.name ?? void 0,
+		unsupported: !isConnectedChainSupported
+	} : void 0;
+	useEffect(() => {
+		if (!ready) setReady(true);
+	}, [ready]);
+	if (!ready) return null;
+	const buttonReady = isMounted() && connectionStatus !== "loading";
+	const unsupportedChain = chain?.unsupported ?? false;
+	if (!chain || chains.length <= 1 && !unsupportedChain) return null;
+	return /* @__PURE__ */ jsxs(Box, {
+		alignItems: "center",
+		"aria-label": "Chain Selector",
+		as: "button",
+		background: unsupportedChain ? "connectButtonBackgroundError" : "connectButtonBackground",
+		borderRadius: "connectButton",
+		boxShadow: "connectButton",
+		className: touchableStyles({
+			active: "shrink",
+			hover: "grow"
+		}),
+		color: unsupportedChain ? "connectButtonTextError" : "connectButtonText",
+		disabled: !buttonReady || !openChainModal,
+		display: mapResponsiveValue(chainStatus, (value) => value === "none" ? "none" : "flex"),
+		fontFamily: "body",
+		fontWeight: "bold",
+		gap: "6",
+		justifyContent: fullWidth ? "space-between" : "center",
+		onClick: buttonReady ? openChainModal : void 0,
+		paddingX: "10",
+		paddingY: "8",
+		testId: unsupportedChain ? "wrong-network-button" : "chain-button",
+		transition: "default",
+		type: "button",
+		width: fullWidth ? "full" : void 0,
+		...!buttonReady && {
+			"aria-hidden": true,
+			style: {
+				opacity: 0,
+				pointerEvents: "none",
+				userSelect: "none"
+			}
+		},
+		children: [unsupportedChain ? /* @__PURE__ */ jsx(Box, {
+			alignItems: "center",
+			display: "flex",
+			height: "24",
+			paddingX: "4",
+			children: t("connect_wallet.wrong_network.label")
+		}) : /* @__PURE__ */ jsxs(Box, {
+			alignItems: "center",
+			display: "flex",
+			gap: "6",
+			children: [chain.hasIcon ? /* @__PURE__ */ jsx(Box, {
+				display: mapResponsiveValue(chainStatus, (value) => value === "full" || value === "icon" ? "block" : "none"),
+				height: "24",
+				width: "24",
+				children: /* @__PURE__ */ jsx(AsyncImage, {
+					alt: chain.name ?? "Chain icon",
+					background: chain.iconBackground,
+					borderRadius: "full",
+					height: "24",
+					src: chain.iconUrl,
+					width: "24"
+				})
+			}) : null, /* @__PURE__ */ jsx(Box, {
+				display: mapResponsiveValue(chainStatus, (value) => {
+					if (value === "icon" && !chain.iconUrl) return "block";
+					return value === "full" || value === "name" ? "block" : "none";
+				}),
+				children: chain.name ?? chain.id
+			})]
+		}), /* @__PURE__ */ jsx(DropdownIcon, {})]
+	}, unsupportedChain ? "unsupported" : "supported");
+}
+ChainSelectButton.__defaultProps = defaultProps;
+
 //#endregion
 //#region src/components/WalletButton/WalletButton.css.ts
 var border = "p2yi7o0";
@@ -5922,4 +5974,4 @@ const WalletButton = ({ wallet }) => {
 WalletButton.Custom = WalletButtonRenderer;
 
 //#endregion
-export { createAuthenticationAdapter as S, useTransactionStore as _, useConnectModal as a, EmojiAvatar as b, ChainModal as c, dialogContentMobile as d, RainbowKitProvider as f, cssObjectFromTheme as g, cssStringFromTheme as h, useChainModal as i, AccountModal as l, baseTheme as m, ConnectButton as n, MobileOptions as o, lightTheme as p, useAccountModal as r, DesktopOptions as s, WalletButton as t, dialogContent as u, useChainId$1 as v, RainbowKitAuthenticationProvider as x, Avatar as y };
+export { createAuthenticationAdapter as C, RainbowKitAuthenticationProvider as S, cssObjectFromTheme as _, useChainModal as a, Avatar as b, DesktopOptions as c, dialogContent as d, dialogContentMobile as f, cssStringFromTheme as g, baseTheme as h, useAccountModal as i, ChainModal as l, lightTheme as m, ChainSelectButton as n, useConnectModal as o, RainbowKitProvider as p, ConnectButton as r, MobileOptions as s, WalletButton as t, AccountModal as u, useTransactionStore as v, EmojiAvatar as x, useChainId$1 as y };

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 
-import { a as ConnectButtonProps, d as RainbowKitProviderProps, i as ConnectButton, m as AvatarComponentProps, n as WalletButtonProps, p as AvatarComponent, t as WalletButton, u as RainbowKitProvider } from "../WalletButton-B-bj9FNL.js";
+import { _ as AvatarComponentProps, a as ChainSelectButtonProps, c as ConnectButtonProps, g as AvatarComponent, i as ChainSelectButton, m as RainbowKitProviderProps, n as WalletButtonProps, o as ChainStatus, p as RainbowKitProvider, s as ConnectButton, t as WalletButton } from "../WalletButton-BiMfdrFz.js";
 import React from "react";
 
 //#region src/components/Avatar/Avatar.d.ts
@@ -148,4 +148,4 @@ declare function ChainModal({
   open
 }: ChainModalProps): React.JSX.Element;
 //#endregion
-export { AccountModal, type AccountModalProps, Avatar, type AvatarProps, ChainModal, type ChainModalProps, ConnectButton, type ConnectButtonProps, EmojiAvatar, type AvatarComponentProps as EmojiAvatarProps, RainbowKitProvider, type RainbowKitProviderProps, WalletButton, type WalletButtonProps, emojiAvatarForAddress };
+export { AccountModal, type AccountModalProps, Avatar, type AvatarProps, ChainModal, type ChainModalProps, ChainSelectButton, type ChainSelectButtonProps, type ChainStatus, ConnectButton, type ConnectButtonProps, EmojiAvatar, type AvatarComponentProps as EmojiAvatarProps, RainbowKitProvider, type RainbowKitProviderProps, WalletButton, type WalletButtonProps, emojiAvatarForAddress };

package/dist/components/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { b as EmojiAvatar, c as ChainModal, f as RainbowKitProvider, l as AccountModal, n as ConnectButton, t as WalletButton, y as Avatar } from "../WalletButton-CsbqNc5l.js";
+import { b as Avatar, l as ChainModal, n as ChainSelectButton, p as RainbowKitProvider, r as ConnectButton, t as WalletButton, u as AccountModal, x as EmojiAvatar } from "../WalletButton-D8U16Q_4.js";
 
 //#region src/components/Avatar/emojiAvatarForAddress.ts
 const colors = [
@@ -184,4 +184,4 @@ function emojiAvatarForAddress(address) {
 }
 
 //#endregion
-export { AccountModal, Avatar, ChainModal, ConnectButton, EmojiAvatar, RainbowKitProvider, WalletButton, emojiAvatarForAddress };
+export { AccountModal, Avatar, ChainModal, ChainSelectButton, ConnectButton, EmojiAvatar, RainbowKitProvider, WalletButton, emojiAvatarForAddress };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 
-import { c as RainbowKitAuthenticationProvider, d as RainbowKitProviderProps, f as Theme, g as ThemeVars, h as DisclaimerComponent, i as ConnectButton, l as createAuthenticationAdapter, o as AuthenticationConfig, p as AvatarComponent, r as WalletButtonRendererProps, s as AuthenticationStatus, t as WalletButton, u as RainbowKitProvider } from "./WalletButton-B-bj9FNL.js";
+import { a as ChainSelectButtonProps, d as RainbowKitAuthenticationProvider, f as createAuthenticationAdapter, g as AvatarComponent, h as Theme, i as ChainSelectButton, l as AuthenticationConfig, m as RainbowKitProviderProps, o as ChainStatus, p as RainbowKitProvider, r as WalletButtonRendererProps, s as ConnectButton, t as WalletButton, u as AuthenticationStatus, v as DisclaimerComponent, y as ThemeVars } from "./WalletButton-BiMfdrFz.js";
 import { a as WalletDetailsParams, i as Wallet, r as RainbowKitWalletConnectParameters, s as WalletList, t as CreateConnector } from "./Wallet-epUweMuA.js";
 import React, { ReactNode } from "react";
 import { CreateConfigParameters, CreateConnectorFn } from "wagmi";
@@ -350,4 +350,4 @@ declare const __private__: {
   MobileOptions: typeof MobileOptions;
 };
 //#endregion
-export { type AuthenticationConfig, type AuthenticationStatus, type AvatarComponent, type RainbowKitChain as Chain, ConnectButton, type DisclaimerComponent, RainbowKitAuthenticationProvider, RainbowKitProvider, type RainbowKitProviderProps, type RainbowKitWalletConnectParameters, type Theme, type Wallet, WalletButton, type WalletButtonRendererProps, type WalletDetailsParams, type WalletList, __private__, connectorsForWallets, createAuthenticationAdapter, cssObjectFromTheme, cssStringFromTheme, darkTheme, getDefaultConfig, getDefaultWallets, getWalletConnectConnector, lightTheme, midnightTheme, useAccountModal, useAddRecentTransaction, useChainModal, useConnectModal };
+export { type AuthenticationConfig, type AuthenticationStatus, type AvatarComponent, type RainbowKitChain as Chain, ChainSelectButton, type ChainSelectButtonProps, type ChainStatus, ConnectButton, type DisclaimerComponent, RainbowKitAuthenticationProvider, RainbowKitProvider, type RainbowKitProviderProps, type RainbowKitWalletConnectParameters, type Theme, type Wallet, WalletButton, type WalletButtonRendererProps, type WalletDetailsParams, type WalletList, __private__, connectorsForWallets, createAuthenticationAdapter, cssObjectFromTheme, cssStringFromTheme, darkTheme, getDefaultConfig, getDefaultWallets, getWalletConnectConnector, lightTheme, midnightTheme, useAccountModal, useAddRecentTransaction, useChainModal, useConnectModal };

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { S as createAuthenticationAdapter, _ as useTransactionStore, a as useConnectModal, d as dialogContentMobile, f as RainbowKitProvider, g as cssObjectFromTheme, h as cssStringFromTheme, i as useChainModal, m as baseTheme, n as ConnectButton, o as MobileOptions, p as lightTheme, r as useAccountModal, s as DesktopOptions, t as WalletButton, u as dialogContent, v as useChainId$1, x as RainbowKitAuthenticationProvider } from "./WalletButton-CsbqNc5l.js";
+import { C as createAuthenticationAdapter, S as RainbowKitAuthenticationProvider, _ as cssObjectFromTheme, a as useChainModal, c as DesktopOptions, d as dialogContent, f as dialogContentMobile, g as cssStringFromTheme, h as baseTheme, i as useAccountModal, m as lightTheme, n as ChainSelectButton, o as useConnectModal, p as RainbowKitProvider, r as ConnectButton, s as MobileOptions, t as WalletButton, v as useTransactionStore, y as useChainId$1 } from "./WalletButton-D8U16Q_4.js";
 import { a as injectedWallet, i as getWalletConnectConnector, n as safeWallet, o as base, r as metaMaskWallet, t as walletConnectWallet } from "./walletConnectors-C02JPPxf.js";
 import { useCallback } from "react";
 import { createConfig, http, useConnection } from "wagmi";
@@ -337,4 +337,4 @@ const __private__ = {
 };
 
 //#endregion
-export { ConnectButton, RainbowKitAuthenticationProvider, RainbowKitProvider, WalletButton, __private__, connectorsForWallets, createAuthenticationAdapter, cssObjectFromTheme, cssStringFromTheme, darkTheme, getDefaultConfig, getDefaultWallets, getWalletConnectConnector, lightTheme, midnightTheme, useAccountModal, useAddRecentTransaction, useChainModal, useConnectModal };
+export { ChainSelectButton, ConnectButton, RainbowKitAuthenticationProvider, RainbowKitProvider, WalletButton, __private__, connectorsForWallets, createAuthenticationAdapter, cssObjectFromTheme, cssStringFromTheme, darkTheme, getDefaultConfig, getDefaultWallets, getWalletConnectConnector, lightTheme, midnightTheme, useAccountModal, useAddRecentTransaction, useChainModal, useConnectModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solariskit",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "The best way to connect a wallet",
   "keywords": [
     "blockchain",
@@ -43,38 +43,38 @@
     "@akshatmittal/polycons": "1.1.0"
   },
   "devDependencies": {
-    "@base-org/account": "^2.5.6",
+    "@base-org/account": "^2.5.7",
     "@rollup/plugin-replace": "^6.0.3",
     "@safe-global/safe-apps-provider": "^0.18.6",
     "@safe-global/safe-apps-sdk": "^9.1.0",
-    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-query": "^5.101.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.12.2",
+    "@types/node": "^24.13.2",
     "@types/postcss-prefix-selector": "^1.16.3",
-    "@types/react": "^19.2.16",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vanilla-extract/css-utils": "0.1.6",
     "@vanilla-extract/private": "1.0.9",
     "@vanilla-extract/rollup-plugin": "^1.5.3",
-    "@vanilla-extract/vite-plugin": "^5.2.2",
-    "@walletconnect/ethereum-provider": "^2.23.9",
-    "autoprefixer": "^10.5.0",
+    "@vanilla-extract/vite-plugin": "^5.2.3",
+    "@walletconnect/ethereum-provider": "^2.23.10",
+    "autoprefixer": "^10.5.2",
     "jsdom": "^29.1.1",
     "msw": "^2.14.6",
-    "nock": "^14.0.15",
-    "postcss": "^8.5.15",
+    "nock": "^14.0.16",
+    "postcss": "^8.5.16",
     "postcss-prefix-selector": "^2.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.1",
+    "tsdown": "^0.22.3",
     "typescript": "^6.0.3",
-    "viem": "^2.52.0",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8",
-    "wagmi": "^3.6.16",
+    "viem": "^2.53.1",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
+    "wagmi": "^3.6.21",
     "@workspace/typescript-config": "0.0.0"
   },
   "peerDependencies": {