@gluwa/connect-kit 0.2.0-next.7 → 0.2.0-next.9

package/dist/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import {
   __name,
   creditConnectConnector
-} from "./chunk-EDNRW47A.js";
+} from "./chunk-VE5LB7BN.js";
 
 // src/api/contract.ts
 import { readContract as wagmiReadContract, writeContract as wagmiWriteContract } from "@wagmi/core";
@@ -194,13 +194,13 @@ var disconnectAll = /* @__PURE__ */ __name(async (onLog) => {
 }, "disconnectAll");
 
 // src/ConnectKitProvider.tsx
-import { createContext, useCallback as useCallback3, useContext, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
 import { WagmiProvider, useAccount, useConfig as useConfig3, useDisconnect, useSwitchChain } from "wagmi";
 import { getAccount as getAccount2 } from "@wagmi/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // src/layout/connectDialog/index.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { useConfig as useConfig2 } from "wagmi";
 
 // src/layout/connectDialog/asset/closeIcon.tsx
@@ -504,7 +504,9 @@ var QrArea = /* @__PURE__ */ __name(({ uri, status, logoUrl, hasBg = false, labe
     className: "ck-qr-skeleton",
     "aria-busy": "true",
     "aria-label": "Loading QR code"
-  }), status === "ready" && uri && /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "ck-qr-skeleton-inner"
+  })), status === "ready" && uri && /* @__PURE__ */ React.createElement("div", {
     className: "ck-qr-frame",
     style: {
       "background": bgColor,
@@ -869,7 +871,7 @@ var AllWallets = /* @__PURE__ */ __name(({ wallets, isLoading, onSelectWallet })
   }))), !isLoading && filtered.length === 0 ? /* @__PURE__ */ React.createElement("div", {
     className: "ck-all-wallets-empty",
     role: "status"
-  }, /* @__PURE__ */ React.createElement("p", null, "No wallets found")) : /* @__PURE__ */ React.createElement(WalletGrid, {
+  }, /* @__PURE__ */ React.createElement("p", null, "No Wallet found")) : /* @__PURE__ */ React.createElement(WalletGrid, {
     wallets: filtered,
     isLoading,
     onSelect: onSelectWallet
@@ -919,7 +921,7 @@ var getTitle = /* @__PURE__ */ __name((content, connector) => {
       return "";
   }
 }, "getTitle");
-var DetailPanel = /* @__PURE__ */ __name(({ selectedConnector, selectedWallet = null, content = "idle", qrUri = null, wallets = [], walletListLoading = false, walletCount, onBack, onClose, onShowAllWallets, onSelectWallet, onCopyLink }) => {
+var DetailPanel = /* @__PURE__ */ __name(({ selectedConnector, selectedWallet = null, content = "idle", qrUri = null, wallets = [], walletListLoading = false, walletCount, onBack, onClose, onShowAllWallets, onSelectWallet, onCopyLink, onRetry }) => {
   const connectorMeta = selectedConnector ? CONNECTOR_META[selectedConnector] : null;
   const connectorLogoUrl = connectorMeta == null ? void 0 : connectorMeta.logoUrl;
   const connectorDownloadUrl = connectorMeta == null ? void 0 : connectorMeta.downloadUrl;
@@ -950,7 +952,9 @@ var DetailPanel = /* @__PURE__ */ __name(({ selectedConnector, selectedWallet =
     uri: qrUri,
     logoUrl: connectorLogoUrl,
     downloadUrl: connectorDownloadUrl
-  }), content === "timeout" && /* @__PURE__ */ React.createElement(Timeout, null), (content === "metamask-ext" || content === "metamask-qr") && /* @__PURE__ */ React.createElement(MetaMask, {
+  }), content === "timeout" && /* @__PURE__ */ React.createElement(Timeout, {
+    onRetry
+  }), (content === "metamask-ext" || content === "metamask-qr") && /* @__PURE__ */ React.createElement(MetaMask, {
     variant: content === "metamask-ext" ? "extension" : "qr",
     logoUrl: connectorLogoUrl,
     uri: qrUri,
@@ -1022,18 +1026,36 @@ var Snackbar = /* @__PURE__ */ __name(({ message, onClose }) => {
   })));
 }, "Snackbar");
 
+// src/hooks/useMetaMaskExtension.ts
+import { useEffect, useState as useState2 } from "react";
+var METAMASK_RDNS = "io.metamask";
+var isMetaMaskAnnouncement = /* @__PURE__ */ __name((event) => {
+  var _a, _b;
+  const detail = event.detail;
+  return ((_b = (_a = detail == null ? void 0 : detail.info) == null ? void 0 : _a.rdns) == null ? void 0 : _b.toLowerCase()) === METAMASK_RDNS && detail.provider != null;
+}, "isMetaMaskAnnouncement");
+var useMetaMaskExtension = /* @__PURE__ */ __name(() => {
+  const [isInstalled, setIsInstalled] = useState2(false);
+  useEffect(() => {
+    const handleAnnouncement = /* @__PURE__ */ __name((event) => {
+      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+    }, "handleAnnouncement");
+    window.addEventListener("eip6963:announceProvider", handleAnnouncement);
+    window.dispatchEvent(new Event("eip6963:requestProvider"));
+    return () => {
+      window.removeEventListener("eip6963:announceProvider", handleAnnouncement);
+    };
+  }, []);
+  return isInstalled;
+}, "useMetaMaskExtension");
+
 // src/hooks/useWagmiConnect.ts
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect as useEffect2, useRef, useCallback } from "react";
 import { useConnect, useConfig } from "wagmi";
 var hasMetaMaskKeyword = /* @__PURE__ */ __name((value) => value.toLowerCase().includes("metamask"), "hasMetaMaskKeyword");
 var hasWalletConnectKeyword = /* @__PURE__ */ __name((value) => value.toLowerCase().includes("walletconnect"), "hasWalletConnectKeyword");
 var isMetaMaskConnector = /* @__PURE__ */ __name((connector) => {
   if (connector.id === "metaMaskSDK") return true;
-  if (connector.id === "injected") {
-    if (typeof window === "undefined") return false;
-    const eth = window.ethereum;
-    return (eth == null ? void 0 : eth.isMetaMask) === true;
-  }
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
   if (connector.rdns) {
     const rdnsList = Array.isArray(connector.rdns) ? connector.rdns : [
@@ -1060,29 +1082,36 @@ var resolveWagmiConnector = /* @__PURE__ */ __name((connectors, connectorId) =>
       return void 0;
   }
 }, "resolveWagmiConnector");
-var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri }) => {
+var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri, onSessionExpired }) => {
   const config = useConfig();
   const pendingConnectorId = useRef(null);
   const attemptCounter = useRef(0);
   const onConnectRef = useRef(onConnect);
   const onErrorRef = useRef(onError);
   const onQrUriRef = useRef(onQrUri);
-  useEffect(() => {
+  const onSessionExpiredRef = useRef(onSessionExpired);
+  useEffect2(() => {
     onConnectRef.current = onConnect;
     onErrorRef.current = onError;
     onQrUriRef.current = onQrUri;
+    onSessionExpiredRef.current = onSessionExpired;
   }, [
     onConnect,
     onError,
-    onQrUri
+    onQrUri,
+    onSessionExpired
   ]);
   const { connectAsync, reset, isPending } = useConnect();
-  useEffect(() => {
+  useEffect2(() => {
     const handler = /* @__PURE__ */ __name((data) => {
+      var _a;
       const msg = data;
       if ((msg == null ? void 0 : msg.type) === "display_uri" && typeof msg.data === "string") {
         onQrUriRef.current(msg.data);
       }
+      if ((msg == null ? void 0 : msg.type) === "session_expired") {
+        (_a = onSessionExpiredRef.current) == null ? void 0 : _a.call(onSessionExpiredRef);
+      }
     }, "handler");
     const unsubscribers = config.connectors.map((connector) => {
       connector.emitter.on("message", handler);
@@ -1145,14 +1174,73 @@ var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri }) =
   };
 }, "useWagmiConnect");
 
+// src/hooks/useConnectTimeout.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+var DEFAULT_CONNECT_TIMEOUT_MS = 6e5;
+var useConnectTimeout = /* @__PURE__ */ __name(({ connectorId, active, expiredSignal = 0, onRetry }) => {
+  const [timedOut, setTimedOut] = useState3(false);
+  const fire = useCallback2(() => {
+    setTimedOut(true);
+  }, []);
+  useEffect3(() => {
+    setTimedOut(false);
+  }, [
+    connectorId
+  ]);
+  useEffect3(() => {
+    if (!active || connectorId !== "METAMASK") return;
+    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [
+    active,
+    connectorId,
+    fire
+  ]);
+  const prevSignal = useRef2(expiredSignal);
+  useEffect3(() => {
+    if (!active || connectorId === "METAMASK" || !connectorId) {
+      prevSignal.current = expiredSignal;
+      return;
+    }
+    if (expiredSignal !== prevSignal.current) {
+      prevSignal.current = expiredSignal;
+      fire();
+    }
+  }, [
+    expiredSignal,
+    connectorId,
+    active,
+    fire
+  ]);
+  const retry = useCallback2(() => {
+    setTimedOut(false);
+    onRetry == null ? void 0 : onRetry();
+  }, [
+    onRetry
+  ]);
+  return {
+    timedOut,
+    retry
+  };
+}, "useConnectTimeout");
+
+// src/hooks/useWCState.ts
+import { useState as useState4, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+
+// src/wallet-display-override.ts
+var CREDIT_WALLET_LISTING_ID = "ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f";
+var overrideWalletDisplay = /* @__PURE__ */ __name((wallet) => wallet.id === CREDIT_WALLET_LISTING_ID ? {
+  ...wallet,
+  name: "PenguinWallet",
+  imageUrl: penguinwallet_default
+} : wallet, "overrideWalletDisplay");
+
 // src/hooks/useWCState.ts
-import { useState as useState2, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
-var WC_EXPLORER_CREDIT_WALLET_NAME = "Credit Wallet";
 var sortCreditWalletFirst = /* @__PURE__ */ __name((list) => [
   ...list
 ].sort((a, b) => {
-  if (a.name === WC_EXPLORER_CREDIT_WALLET_NAME) return -1;
-  if (b.name === WC_EXPLORER_CREDIT_WALLET_NAME) return 1;
+  if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+  if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
   return 0;
 }), "sortCreditWalletFirst");
 var fetchWCWalletList = /* @__PURE__ */ __name(async (projectId, signal) => {
@@ -1193,16 +1281,16 @@ var fetchWCWalletList = /* @__PURE__ */ __name(async (projectId, signal) => {
   return Array.from(byId.values());
 }, "fetchWCWalletList");
 var useWCState = /* @__PURE__ */ __name(() => {
-  const [subView, setSubView] = useState2("qr");
-  const [walletList, setWalletList] = useState2([]);
-  const [walletListLoading, setWalletListLoading] = useState2(false);
-  const [walletListSearch, setWalletListSearch] = useState2("");
-  const [filterActive, setFilterActive] = useState2(false);
-  const [selectedWallet, setSelectedWallet] = useState2(null);
-  const loadedRef = useRef2(false);
-  const abortControllerRef = useRef2(null);
-  const isMountedRef = useRef2(true);
-  useEffect2(() => {
+  const [subView, setSubView] = useState4("qr");
+  const [walletList, setWalletList] = useState4([]);
+  const [walletListLoading, setWalletListLoading] = useState4(false);
+  const [walletListSearch, setWalletListSearch] = useState4("");
+  const [filterActive, setFilterActive] = useState4(false);
+  const [selectedWallet, setSelectedWallet] = useState4(null);
+  const loadedRef = useRef3(false);
+  const abortControllerRef = useRef3(null);
+  const isMountedRef = useRef3(true);
+  useEffect4(() => {
     isMountedRef.current = true;
     return () => {
       var _a;
@@ -1211,7 +1299,7 @@ var useWCState = /* @__PURE__ */ __name(() => {
       abortControllerRef.current = null;
     };
   }, []);
-  const loadWalletList = useCallback2(async (projectId) => {
+  const loadWalletList = useCallback3(async (projectId) => {
     if (loadedRef.current) return;
     loadedRef.current = true;
     const controller = new AbortController();
@@ -1219,7 +1307,7 @@ var useWCState = /* @__PURE__ */ __name(() => {
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      const sorted = sortCreditWalletFirst(list);
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
       if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {
       const isAbort = err instanceof DOMException && err.name === "AbortError";
@@ -1229,14 +1317,14 @@ var useWCState = /* @__PURE__ */ __name(() => {
       if (abortControllerRef.current === controller) abortControllerRef.current = null;
     }
   }, []);
-  const onShowList = useCallback2(() => setSubView("list"), []);
-  const onSelectWallet = useCallback2((wallet) => {
+  const onShowList = useCallback3(() => setSubView("list"), []);
+  const onSelectWallet = useCallback3((wallet) => {
     setSelectedWallet(wallet);
     setSubView("wallet");
   }, []);
-  const onSearchChange = useCallback2((q) => setWalletListSearch(q), []);
-  const onFilterToggle = useCallback2(() => setFilterActive((prev) => !prev), []);
-  const handleBack = useCallback2(() => {
+  const onSearchChange = useCallback3((q) => setWalletListSearch(q), []);
+  const onFilterToggle = useCallback3(() => setFilterActive((prev) => !prev), []);
+  const handleBack = useCallback3(() => {
     if (subView === "wallet") {
       setSelectedWallet(null);
       setSubView("list");
@@ -1250,11 +1338,11 @@ var useWCState = /* @__PURE__ */ __name(() => {
   }, [
     subView
   ]);
-  const resetView = useCallback2(() => {
+  const resetView = useCallback3(() => {
     setSubView("qr");
     setSelectedWallet(null);
   }, []);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     setSubView("qr");
     setWalletListSearch("");
     setFilterActive(false);
@@ -1290,10 +1378,6 @@ var tryOpenDeepLink = /* @__PURE__ */ __name((uri, deepLinkBase) => {
 var tryOpenCreditWalletDeeplink = /* @__PURE__ */ __name((payloadUrl) => {
   window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
 }, "tryOpenCreditWalletDeeplink");
-var detectMetaMaskExtension = /* @__PURE__ */ __name(() => {
-  var _a;
-  return typeof window !== "undefined" && Boolean((_a = window.ethereum) == null ? void 0 : _a.isMetaMask);
-}, "detectMetaMaskExtension");
 
 // src/layout/connectDialog/index.tsx
 var getContentForConnector = /* @__PURE__ */ __name((id) => {
@@ -1302,6 +1386,7 @@ var getContentForConnector = /* @__PURE__ */ __name((id) => {
   if (id === "WALLET_CONNECT") return "walletconnect";
   return "idle";
 }, "getContentForConnector");
+var getInitialContentForConnector = /* @__PURE__ */ __name((id, isMetaMaskExtensionInstalled) => id === "METAMASK" && !isMetaMaskExtensionInstalled ? "metamask-qr" : getContentForConnector(id), "getInitialContentForConnector");
 var ConnectDialog = /* @__PURE__ */ __name(({
   open,
   theme = "dark",
@@ -1320,24 +1405,69 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   onConnect,
   onError
 }) => {
-  const dialogRef = useRef3(null);
-  const [selectedConnector, setSelectedConnector] = useState3(selectedConnectorProp);
-  const [recentConnector, setRecentConnector] = useState3(null);
-  const [selectedWallet, setSelectedWallet] = useState3(null);
-  const [step, setStep] = useState3(stepProp);
-  const [content, setContent] = useState3("idle");
-  const [showCopySnackbar, setShowCopySnackbar] = useState3(false);
-  const [qrUri, setQrUri] = useState3(null);
+  const dialogRef = useRef4(null);
+  const [selectedConnector, setSelectedConnector] = useState5(selectedConnectorProp);
+  const [recentConnector, setRecentConnector] = useState5(null);
+  const [selectedWallet, setSelectedWallet] = useState5(null);
+  const [step, setStep] = useState5(stepProp);
+  const [content, setContent] = useState5("idle");
+  const [showCopySnackbar, setShowCopySnackbar] = useState5(false);
+  const [qrUri, setQrUri] = useState5(null);
+  const [expiredSignal, setExpiredSignal] = useState5(0);
+  const isMetaMaskExtensionInstalled = useMetaMaskExtension();
+  const contentRef = useRef4(content);
+  contentRef.current = content;
+  const preTimeoutContentRef = useRef4("idle");
   const config = useConfig2();
   const { triggerConnect, cancelConnect } = useWagmiConnect({
     onConnect: /* @__PURE__ */ __name((result) => {
       setRecentConnector(result.connectorId);
       onConnect == null ? void 0 : onConnect(result);
     }, "onConnect"),
-    onError: /* @__PURE__ */ __name((err, connectorId) => onError == null ? void 0 : onError(err, connectorId), "onError"),
-    onQrUri: /* @__PURE__ */ __name((uri) => setQrUri(uri), "onQrUri")
+    onError: /* @__PURE__ */ __name((err, connectorId) => {
+      if (connectorId === "WALLET_CONNECT") {
+        setExpiredSignal((n) => n + 1);
+      }
+      onError == null ? void 0 : onError(err, connectorId);
+    }, "onError"),
+    onQrUri: /* @__PURE__ */ __name((uri) => setQrUri(uri), "onQrUri"),
+    // CC connector 가 서버 OnSessionExpired 를 릴레이 → 만료 신호 증가.
+    onSessionExpired: /* @__PURE__ */ __name(() => setExpiredSignal((n) => n + 1), "onSessionExpired")
   });
-  useEffect3(() => {
+  const timeoutActive = step === "detail" && !!selectedConnector && content !== "timeout";
+  const { timedOut, retry } = useConnectTimeout({
+    connectorId: selectedConnector,
+    active: timeoutActive,
+    expiredSignal,
+    onRetry: /* @__PURE__ */ __name(() => {
+      if (!selectedConnector) return;
+      cancelConnect();
+      setQrUri(null);
+      const restore = preTimeoutContentRef.current;
+      const nextContent = restore !== "idle" && restore !== "timeout" ? restore : getInitialContentForConnector(selectedConnector, isMetaMaskExtensionInstalled);
+      setContent(nextContent);
+      triggerConnect(selectedConnector);
+    }, "onRetry")
+  });
+  useEffect5(() => {
+    if (!timedOut) return;
+    preTimeoutContentRef.current = contentRef.current;
+    cancelConnect();
+    setContent("timeout");
+  }, [
+    timedOut,
+    cancelConnect
+  ]);
+  useEffect5(() => {
+    if (isMetaMaskExtensionInstalled && selectedConnector === "METAMASK" && content === "metamask-qr") {
+      setContent("metamask-ext");
+    }
+  }, [
+    isMetaMaskExtensionInstalled,
+    selectedConnector,
+    content
+  ]);
+  useEffect5(() => {
     const restoreRecent = /* @__PURE__ */ __name(async () => {
       var _a;
       const wagmiId = await ((_a = config.storage) == null ? void 0 : _a.getItem("recentConnectorId"));
@@ -1351,8 +1481,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   const wc = useWCState();
   const handleSelect = /* @__PURE__ */ __name((id) => {
     setSelectedConnector(id);
-    const initialContent = id === "METAMASK" && !detectMetaMaskExtension() ? "metamask-qr" : getContentForConnector(id);
-    setContent(initialContent);
+    setContent(getInitialContentForConnector(id, isMetaMaskExtensionInstalled));
     setStep("detail");
     triggerConnect(id);
     onSelectConnector == null ? void 0 : onSelectConnector(id);
@@ -1384,7 +1513,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
       wc.loadWalletList(wcProjectId).catch(() => void 0);
     }
   }, "handleShowAllWallets");
-  useEffect3(() => {
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (open && !dialog.open) dialog.showModal();
@@ -1392,13 +1521,13 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   }, [
     open
   ]);
-  const deeplinkTriedRef = useRef3(false);
-  useEffect3(() => {
+  const deeplinkTriedRef = useRef4(false);
+  useEffect5(() => {
     deeplinkTriedRef.current = false;
   }, [
     selectedWallet
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (deeplinkTriedRef.current) return;
     if (!selectedWallet || !qrUri || content !== "wallet-qr") return;
     if (!isMobileDevice()) return;
@@ -1411,13 +1540,13 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     qrUri,
     content
   ]);
-  const creditConnectDeeplinkTriedRef = useRef3(false);
-  useEffect3(() => {
+  const creditConnectDeeplinkTriedRef = useRef4(false);
+  useEffect5(() => {
     creditConnectDeeplinkTriedRef.current = false;
   }, [
     selectedConnector
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (creditConnectDeeplinkTriedRef.current) return;
     if (content !== "qr" || !qrUri) return;
     if (selectedConnector !== "CREDIT_CONNECT") return;
@@ -1429,7 +1558,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     qrUri,
     selectedConnector
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     const prev = document.body.style.overflow;
     if (open) document.body.style.overflow = "hidden";
     return () => {
@@ -1438,7 +1567,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   }, [
     open
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) {
       cancelConnect();
       setQrUri(null);
@@ -1451,7 +1580,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     open,
     cancelConnect
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return void 0;
     const handleCancel = /* @__PURE__ */ __name((e) => {
@@ -1492,6 +1621,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     walletCount: wc.walletList.length,
     onBack: handleBack,
     onClose,
+    onRetry: retry,
     onShowAllWallets: handleShowAllWallets,
     onSelectWallet: handleSelectWallet,
     onCopyLink: /* @__PURE__ */ __name(() => {
@@ -1538,32 +1668,32 @@ var ConnectKitProvider = /* @__PURE__ */ __name((props) => {
 }, "ConnectKitProvider");
 var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, kitConfig, requiredChainId, theme, onConnect, onLog }) => {
   var _a;
-  const [isOpen, setIsOpen] = useState4(false);
-  const [pendingResult, setPendingResult] = useState4(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [pendingResult, setPendingResult] = useState6(null);
   const account = useAccount();
   const wagmiConfig = useConfig3();
   const { disconnectAsync } = useDisconnect();
   const { switchChainAsync } = useSwitchChain();
-  const onConnectRef = useRef4(onConnect);
-  useEffect4(() => {
+  const onConnectRef = useRef5(onConnect);
+  useEffect6(() => {
     onConnectRef.current = onConnect;
   }, [
     onConnect
   ]);
-  const isMountedRef = useRef4(true);
-  useEffect4(() => {
+  const isMountedRef = useRef5(true);
+  useEffect6(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
   const needsChainSwitch = requiredChainId != null && account.status === "connected" && account.chainId != null && account.chainId !== requiredChainId;
-  const [isSwitchingChain, setIsSwitchingChain] = useState4(false);
+  const [isSwitchingChain, setIsSwitchingChain] = useState6(false);
   const effectiveOpen = isOpen;
-  const open = useCallback3(() => {
+  const open = useCallback4(() => {
     setIsOpen(true);
   }, []);
-  const close = useCallback3(() => {
+  const close = useCallback4(() => {
     setIsOpen(false);
     const status = getAccount2(wagmiConfig).status;
     if (status === "connecting" || status === "reconnecting") {
@@ -1573,12 +1703,12 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
     wagmiConfig,
     disconnectAsync
   ]);
-  const disconnect = useCallback3(async () => {
+  const disconnect = useCallback4(async () => {
     await disconnectAsync();
   }, [
     disconnectAsync
   ]);
-  const switchToRequiredChain = useCallback3(async () => {
+  const switchToRequiredChain = useCallback4(async () => {
     if (requiredChainId == null) return;
     setIsSwitchingChain(true);
     try {
@@ -1592,15 +1722,15 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
     requiredChainId,
     switchChainAsync
   ]);
-  const handleDialogConnect = useCallback3((result) => {
+  const handleDialogConnect = useCallback4((result) => {
     setPendingResult(result);
   }, []);
-  const handleDialogError = useCallback3((error, connectorId) => {
+  const handleDialogError = useCallback4((error, connectorId) => {
     onLog == null ? void 0 : onLog(`[connect-kit] connect failed: ${connectorId} \u2014 ${error.message}`, error);
   }, [
     onLog
   ]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!effectiveOpen) return;
     if (account.status !== "connected") return;
     setIsOpen(false);
@@ -1608,7 +1738,7 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
     effectiveOpen,
     account.status
   ]);
-  useEffect4(() => {
+  useEffect6(() => {
     var _a2;
     if (!pendingResult) return;
     if (account.status !== "connected") {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.7",
+  "version": "0.2.0-next.9",
   "type": "module",
   "exports": {
     ".": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.7",
+  "version": "0.2.0-next.9",
   "type": "module",
   "exports": {
     ".": {
@@ -26,10 +26,10 @@
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
     "@wagmi/core": "^2.16.7",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.3",
-    "@gluwa/credit-connect-storage-local": "0.2.0-next.3",
-    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.3",
-    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.3"
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.4",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.4",
+    "@gluwa/credit-connect-sdk": "0.2.0-next.4",
+    "@gluwa/credit-connect-storage-local": "0.2.0-next.4"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",
@@ -43,7 +43,7 @@
     "typescript-eslint": "^8.18.2",
     "viem": "^2.31.7",
     "wagmi": "^2.15.6",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.3"
+    "@gluwa/credit-connect-sdk": "0.2.0-next.4"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/src/components/qrArea/index.tsx

@@ -27,7 +27,9 @@ export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, l
       <div className="ck-qr-group">
         <figure className={`ck-qr ck-qr-${status}`} aria-label="QR Code">
           {status === 'loading' && (
-            <div className="ck-qr-skeleton" aria-busy="true" aria-label="Loading QR code" />
+            <div className="ck-qr-skeleton" aria-busy="true" aria-label="Loading QR code">
+              <div className="ck-qr-skeleton-inner" />
+            </div>
           )}
           {status === 'ready' && uri && (
             <div