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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gluwa/wallet-kit
 
+## 0.2.0-next.8
+
+### Patch Changes
+
+- e3789b4: emit OnSessionExpired when credit-connect QR session times out
+- Updated dependencies [e3789b4]
+  - @gluwa/credit-connect-hub-node-ws@0.1.0-next.4
+  - @gluwa/credit-connect-sdk@0.2.0-next.4
+  - @gluwa/credit-connect-e2ee-tweetnacl@0.2.0-next.4
+  - @gluwa/credit-connect-storage-local@0.2.0-next.4
+
 ## 0.2.0-next.7
 
 ### Patch Changes

package/dist/{chunk-EDNRW47A.js → chunk-VE5LB7BN.js}

@@ -65,6 +65,10 @@ var creditConnectConnector = /* @__PURE__ */ __name((options) => {
         emitWagmiDisconnect == null ? void 0 : emitWagmiDisconnect();
       }
     });
+    manager.on("sessionExpired", (payload) => {
+      console.log("[CC connector] session expired \u2192 emit session_expired", payload);
+      emitWagmiMessage == null ? void 0 : emitWagmiMessage("session_expired", payload);
+    });
     return manager;
   }, "createManagerIfNeeded");
   const ensureManagerInitialized = /* @__PURE__ */ __name(async () => {

package/dist/credit-connect.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {
   creditConnectConnector
-} from "./chunk-EDNRW47A.js";
+} from "./chunk-VE5LB7BN.js";
 export {
   creditConnectConnector
 };

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 useEffect5, useMemo as useMemo2, useRef as useRef5, useState as useState5 } 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 useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { useConfig as useConfig2 } from "wagmi";
 
 // src/layout/connectDialog/asset/closeIcon.tsx
@@ -919,7 +919,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 +950,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,
@@ -1060,29 +1062,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);
+  const onSessionExpiredRef = useRef(onSessionExpired);
   useEffect(() => {
     onConnectRef.current = onConnect;
     onErrorRef.current = onError;
     onQrUriRef.current = onQrUri;
+    onSessionExpiredRef.current = onSessionExpired;
   }, [
     onConnect,
     onError,
-    onQrUri
+    onQrUri,
+    onSessionExpired
   ]);
   const { connectAsync, reset, isPending } = useConnect();
   useEffect(() => {
     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,8 +1154,58 @@ var useWagmiConnect = /* @__PURE__ */ __name(({ onConnect, onError, onQrUri }) =
   };
 }, "useWagmiConnect");
 
+// src/hooks/useConnectTimeout.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var DEFAULT_CONNECT_TIMEOUT_MS = 6e5;
+var useConnectTimeout = /* @__PURE__ */ __name(({ connectorId, active, expiredSignal = 0, onRetry }) => {
+  const [timedOut, setTimedOut] = useState2(false);
+  const fire = useCallback2(() => {
+    setTimedOut(true);
+  }, []);
+  useEffect2(() => {
+    setTimedOut(false);
+  }, [
+    connectorId
+  ]);
+  useEffect2(() => {
+    if (!active || connectorId !== "METAMASK") return;
+    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [
+    active,
+    connectorId,
+    fire
+  ]);
+  const prevSignal = useRef2(expiredSignal);
+  useEffect2(() => {
+    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 useState2, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
 var WC_EXPLORER_CREDIT_WALLET_NAME = "Credit Wallet";
 var sortCreditWalletFirst = /* @__PURE__ */ __name((list) => [
   ...list
@@ -1193,16 +1252,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] = useState3("qr");
+  const [walletList, setWalletList] = useState3([]);
+  const [walletListLoading, setWalletListLoading] = useState3(false);
+  const [walletListSearch, setWalletListSearch] = useState3("");
+  const [filterActive, setFilterActive] = useState3(false);
+  const [selectedWallet, setSelectedWallet] = useState3(null);
+  const loadedRef = useRef3(false);
+  const abortControllerRef = useRef3(null);
+  const isMountedRef = useRef3(true);
+  useEffect3(() => {
     isMountedRef.current = true;
     return () => {
       var _a;
@@ -1211,7 +1270,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();
@@ -1229,14 +1288,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 +1309,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);
@@ -1302,6 +1361,7 @@ var getContentForConnector = /* @__PURE__ */ __name((id) => {
   if (id === "WALLET_CONNECT") return "walletconnect";
   return "idle";
 }, "getContentForConnector");
+var getInitialContentForConnector = /* @__PURE__ */ __name((id) => id === "METAMASK" && !detectMetaMaskExtension() ? "metamask-qr" : getContentForConnector(id), "getInitialContentForConnector");
 var ConnectDialog = /* @__PURE__ */ __name(({
   open,
   theme = "dark",
@@ -1320,24 +1380,59 @@ 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] = useState4(selectedConnectorProp);
+  const [recentConnector, setRecentConnector] = useState4(null);
+  const [selectedWallet, setSelectedWallet] = useState4(null);
+  const [step, setStep] = useState4(stepProp);
+  const [content, setContent] = useState4("idle");
+  const [showCopySnackbar, setShowCopySnackbar] = useState4(false);
+  const [qrUri, setQrUri] = useState4(null);
+  const [expiredSignal, setExpiredSignal] = useState4(0);
+  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);
+      setContent(nextContent);
+      triggerConnect(selectedConnector);
+    }, "onRetry")
+  });
+  useEffect4(() => {
+    if (!timedOut) return;
+    preTimeoutContentRef.current = contentRef.current;
+    cancelConnect();
+    setContent("timeout");
+  }, [
+    timedOut,
+    cancelConnect
+  ]);
+  useEffect4(() => {
     const restoreRecent = /* @__PURE__ */ __name(async () => {
       var _a;
       const wagmiId = await ((_a = config.storage) == null ? void 0 : _a.getItem("recentConnectorId"));
@@ -1351,8 +1446,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));
     setStep("detail");
     triggerConnect(id);
     onSelectConnector == null ? void 0 : onSelectConnector(id);
@@ -1384,7 +1478,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
       wc.loadWalletList(wcProjectId).catch(() => void 0);
     }
   }, "handleShowAllWallets");
-  useEffect3(() => {
+  useEffect4(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (open && !dialog.open) dialog.showModal();
@@ -1392,13 +1486,13 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   }, [
     open
   ]);
-  const deeplinkTriedRef = useRef3(false);
-  useEffect3(() => {
+  const deeplinkTriedRef = useRef4(false);
+  useEffect4(() => {
     deeplinkTriedRef.current = false;
   }, [
     selectedWallet
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (deeplinkTriedRef.current) return;
     if (!selectedWallet || !qrUri || content !== "wallet-qr") return;
     if (!isMobileDevice()) return;
@@ -1411,13 +1505,13 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     qrUri,
     content
   ]);
-  const creditConnectDeeplinkTriedRef = useRef3(false);
-  useEffect3(() => {
+  const creditConnectDeeplinkTriedRef = useRef4(false);
+  useEffect4(() => {
     creditConnectDeeplinkTriedRef.current = false;
   }, [
     selectedConnector
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (creditConnectDeeplinkTriedRef.current) return;
     if (content !== "qr" || !qrUri) return;
     if (selectedConnector !== "CREDIT_CONNECT") return;
@@ -1429,7 +1523,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     qrUri,
     selectedConnector
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     const prev = document.body.style.overflow;
     if (open) document.body.style.overflow = "hidden";
     return () => {
@@ -1438,7 +1532,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
   }, [
     open
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) {
       cancelConnect();
       setQrUri(null);
@@ -1451,7 +1545,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     open,
     cancelConnect
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     const dialog = dialogRef.current;
     if (!dialog) return void 0;
     const handleCancel = /* @__PURE__ */ __name((e) => {
@@ -1492,6 +1586,7 @@ var ConnectDialog = /* @__PURE__ */ __name(({
     walletCount: wc.walletList.length,
     onBack: handleBack,
     onClose,
+    onRetry: retry,
     onShowAllWallets: handleShowAllWallets,
     onSelectWallet: handleSelectWallet,
     onCopyLink: /* @__PURE__ */ __name(() => {
@@ -1538,32 +1633,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] = useState5(false);
+  const [pendingResult, setPendingResult] = useState5(null);
   const account = useAccount();
   const wagmiConfig = useConfig3();
   const { disconnectAsync } = useDisconnect();
   const { switchChainAsync } = useSwitchChain();
-  const onConnectRef = useRef4(onConnect);
-  useEffect4(() => {
+  const onConnectRef = useRef5(onConnect);
+  useEffect5(() => {
     onConnectRef.current = onConnect;
   }, [
     onConnect
   ]);
-  const isMountedRef = useRef4(true);
-  useEffect4(() => {
+  const isMountedRef = useRef5(true);
+  useEffect5(() => {
     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] = useState5(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 +1668,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 +1687,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(() => {
+  useEffect5(() => {
     if (!effectiveOpen) return;
     if (account.status !== "connected") return;
     setIsOpen(false);
@@ -1608,7 +1703,7 @@ var ConnectKitProviderInner = /* @__PURE__ */ __name(({ children, connectors, ki
     effectiveOpen,
     account.status
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     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.8",
   "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.8",
   "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-sdk": "0.2.0-next.4",
+    "@gluwa/credit-connect-storage-local": "0.2.0-next.4",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.4",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.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/creditConnectConnector.ts

@@ -107,6 +107,12 @@ export const creditConnectConnector = (
       }
     });
 
+    manager.on('sessionExpired', (payload) => {
+      // eslint-disable-next-line no-console
+      console.log('[CC connector] session expired → emit session_expired', payload);
+      emitWagmiMessage?.('session_expired', payload);
+    });
+
     return manager;
   };
 

package/src/hooks/useConnectTimeout.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type ConnectorId } from '../types';
+
+// MM / CC 폴백용 기본 타임아웃. (CC 는 원칙적으로 서버 push 로 만료가 오지만,
+// 서버 값이 없거나 신호가 유실된 경우를 대비한 폴백 용도로도 쓸 수 있음.)
+export const DEFAULT_CONNECT_TIMEOUT_MS = 600_000;
+
+interface UseConnectTimeoutParams {
+  /** 현재 연결 시도 중인 커넥터. null = 유휴 상태. */
+  connectorId: ConnectorId | null;
+  /** 타임아웃 감시 활성화 여부 — pending/QR 표시 중일 때 true. */
+  active: boolean;
+  /**
+   * 외부 이벤트 기반 만료 신호 (MM 제외). 값이 증가할 때마다 "만료 발생" 으로 간주.
+   * - CC: dialog 가 connector 의 `session_expired`(서버 push) 를 받아 올림.
+   * - WC: dialog 가 WC connect promise reject(프로토콜 ~5분 만료 등) 를 받아 올림.
+   */
+  expiredSignal?: number;
+  /** "Try Again" 시 실행할 재연결 로직 (dialog 가 주입). */
+  onRetry?: () => void;
+}
+
+interface UseConnectTimeoutResult {
+  /** 타임아웃 발생 여부 — true 면 dialog 가 <Timeout> 을 렌더. */
+  timedOut: boolean;
+  /** "Try Again" 버튼에 연결할 함수 — 상태 리셋 + onRetry 실행. */
+  retry: () => void;
+}
+
+/**
+ * 커넥터별로 타임아웃 신호원을 분기해 하나의 `timedOut` 으로 수렴시키는 훅.
+ * - CC: 서버 push (`OnSessionExpired` → connector → expiredSignal).
+ * - MM: 네이티브 타임아웃 없음 → client 타이머(DEFAULT_CONNECT_TIMEOUT_MS).
+ * - WC: 프로토콜 자체 ~5분 proposal reject → connect promise reject → expiredSignal.
+ */
+export const useConnectTimeout = ({
+  connectorId,
+  active,
+  expiredSignal = 0,
+  onRetry,
+}: UseConnectTimeoutParams): UseConnectTimeoutResult => {
+  const [timedOut, setTimedOut] = useState(false);
+
+  const fire = useCallback(() => {
+    setTimedOut(true);
+  }, []);
+
+  // 커넥터가 바뀌면(=새 연결 시도) 타임아웃 상태 리셋.
+  // active 가 false 로 떨어질 때는 리셋하지 않는다 — timeout UI 표시 중 상태가 날아가지 않도록.
+  useEffect(() => {
+    setTimedOut(false);
+  }, [connectorId]);
+
+  // MM 만 client 타이머로 강제 (승인 대기에 네이티브 상한이 없음).
+  // CC(서버 push) / WC(connect reject) 는 아래 expiredSignal effect 에서 처리.
+  useEffect(() => {
+    if (!active || connectorId !== 'METAMASK') return;
+    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [active, connectorId, fire]);
+
+  // 외부 만료 신호 처리 (CC 서버 push / WC connect reject) — MM 은 client 타이머라 제외.
+  // signal 값이 올라가면(새 만료 이벤트) 발화.
+  const prevSignal = useRef(expiredSignal);
+  useEffect(() => {
+    if (!active || connectorId === 'METAMASK' || !connectorId) {
+      prevSignal.current = expiredSignal;
+      return;
+    }
+    if (expiredSignal !== prevSignal.current) {
+      prevSignal.current = expiredSignal;
+      fire();
+    }
+  }, [expiredSignal, connectorId, active, fire]);
+
+  const retry = useCallback(() => {
+    setTimedOut(false);
+    onRetry?.();
+  }, [onRetry]);
+
+  return { timedOut, retry };
+};

package/src/hooks/useWagmiConnect.ts

@@ -61,6 +61,7 @@ interface Options {
   onConnect: (result: ConnectResult) => void;
   onError: (error: Error, connectorId: ConnectorId) => void;
   onQrUri: (uri: string | null) => void;
+  onSessionExpired?: () => void;
 }
 
 interface UseWagmiConnectResult {
@@ -73,6 +74,7 @@ export const useWagmiConnect = ({
   onConnect,
   onError,
   onQrUri,
+  onSessionExpired,
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
@@ -81,11 +83,13 @@ export const useWagmiConnect = ({
   const onConnectRef = useRef(onConnect);
   const onErrorRef = useRef(onError);
   const onQrUriRef = useRef(onQrUri);
+  const onSessionExpiredRef = useRef(onSessionExpired);
   useEffect(() => {
     onConnectRef.current = onConnect;
     onErrorRef.current = onError;
     onQrUriRef.current = onQrUri;
-  }, [onConnect, onError, onQrUri]);
+    onSessionExpiredRef.current = onSessionExpired;
+  }, [onConnect, onError, onQrUri, onSessionExpired]);
 
   const { connectAsync, reset, isPending } = useConnect();
 
@@ -95,6 +99,9 @@ export const useWagmiConnect = ({
       if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
         onQrUriRef.current(msg.data);
       }
+      if (msg?.type === 'session_expired') {
+        onSessionExpiredRef.current?.();
+      }
     };
 
     const unsubscribers = config.connectors.map((connector) => {

package/src/layout/connectDialog/index.tsx

@@ -13,6 +13,7 @@ import { DetailPanel } from '../detailPanel';
 import { Snackbar } from '../../components/snackbar';
 import { resolveConnectorId } from '../../connector-meta';
 import { useWagmiConnect } from '../../hooks/useWagmiConnect';
+import { useConnectTimeout } from '../../hooks/useConnectTimeout';
 import { useWCState } from '../../hooks/useWCState';
 import {
   detectMetaMaskExtension,
@@ -47,6 +48,10 @@ const getContentForConnector = (id: ConnectorId): DetailContent => {
   return 'idle';
 };
 
+// MM 은 확장 감지 시 즉시 extension 연결, 아니면 QR. (select / retry 공통)
+const getInitialContentForConnector = (id: ConnectorId): DetailContent =>
+  id === 'METAMASK' && !detectMetaMaskExtension() ? 'metamask-qr' : getContentForConnector(id);
+
 export const ConnectDialog: FC<ConnectDialogProps> = ({
   open,
   theme = 'dark',
@@ -83,6 +88,14 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
   const [content, setContent] = useState<DetailContent>('idle');
   const [showCopySnackbar, setShowCopySnackbar] = useState(false);
   const [qrUri, setQrUri] = useState<string | null>(null);
+  // 외부 만료 신호 카운터 — CC(서버 push session_expired) / WC(connect reject) 수신 시 증가.
+  const [expiredSignal, setExpiredSignal] = useState(0);
+
+  // 현재 content 를 ref 로 추적 (effect deps 없이 최신값 참조용).
+  const contentRef = useRef<DetailContent>(content);
+  contentRef.current = content;
+  // 타임아웃 직전 화면 — retry 시 이 화면으로 복원 (예: WC 의 wallet-qr).
+  const preTimeoutContentRef = useRef<DetailContent>('idle');
 
   const config = useConfig();
 
@@ -95,10 +108,50 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
       setRecentConnector(result.connectorId);
       onConnect?.(result);
     },
-    onError: (err, connectorId) => onError?.(err, connectorId),
+    onError: (err, connectorId) => {
+      // WC: connect reject(사용자 거절 / 프로토콜 ~5분 만료 / 네트워크 등)는
+      //     모두 timeout UI("Connection Failed")로 통일.
+      if (connectorId === 'WALLET_CONNECT') {
+        setExpiredSignal((n) => n + 1);
+      }
+      onError?.(err, connectorId);
+    },
     onQrUri: (uri) => setQrUri(uri),
+    // CC connector 가 서버 OnSessionExpired 를 릴레이 → 만료 신호 증가.
+    onSessionExpired: () => setExpiredSignal((n) => n + 1),
   });
 
+  // 연결 타임아웃 (CC=서버 push / MM=client 타이머 / WC=connect reject) → timedOut.
+  const timeoutActive = step === 'detail' && !!selectedConnector && content !== 'timeout';
+  const { timedOut, retry } = useConnectTimeout({
+    connectorId: selectedConnector,
+    active: timeoutActive,
+    expiredSignal,
+    onRetry: () => {
+      if (!selectedConnector) return;
+      cancelConnect();
+      setQrUri(null);
+      // 타임아웃 직전 화면으로 복원 (예: WC 의 wallet-qr → 선택 지갑 QR 유지).
+      // idle/timeout 처럼 복원 불가한 값이면 커넥터 초기 화면으로.
+      const restore = preTimeoutContentRef.current;
+      const nextContent: DetailContent =
+        restore !== 'idle' && restore !== 'timeout'
+          ? restore
+          : getInitialContentForConnector(selectedConnector);
+      setContent(nextContent);
+      triggerConnect(selectedConnector);
+    },
+  });
+
+  // 타임아웃 발생 → 진행 중 연결 취소 + timeout 화면 표시.
+  // 전환 전 화면을 저장해 retry 시 복원 (WC wallet-qr 등).
+  useEffect(() => {
+    if (!timedOut) return;
+    preTimeoutContentRef.current = contentRef.current;
+    cancelConnect();
+    setContent('timeout');
+  }, [timedOut, cancelConnect]);
+
   // 마운트 시 wagmi storage 의 recentConnectorId(연결 성공 시 wagmi 가 저장) 복원.
   useEffect(() => {
     const restoreRecent = async (): Promise<void> => {
@@ -115,10 +168,7 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
   const handleSelect = (id: ConnectorId) => {
     setSelectedConnector(id);
     // recent 는 클릭이 아니라 연결 성공(onConnect) 시점에 기록 — 위 useWagmiConnect onConnect 참조.
-    // MetaMask 는 확장이 있으면 즉시 extension 연결, 아니면 QR.
-    const initialContent: DetailContent =
-      id === 'METAMASK' && !detectMetaMaskExtension() ? 'metamask-qr' : getContentForConnector(id);
-    setContent(initialContent);
+    setContent(getInitialContentForConnector(id));
     setStep('detail');
     // wagmi connect 시작 (display_uri 도착 시 setQrUri 자동 호출)
     triggerConnect(id);
@@ -261,6 +311,7 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
           walletCount={wc.walletList.length}
           onBack={handleBack}
           onClose={onClose}
+          onRetry={retry}
           onShowAllWallets={handleShowAllWallets}
           onSelectWallet={handleSelectWallet}
           onCopyLink={() => {

package/src/layout/detailPanel/index.tsx

@@ -40,6 +40,8 @@ interface DetailPanelProps {
   onShowAllWallets?: () => void;
   onSelectWallet?: (wallet: WCWallet) => void;
   onCopyLink?: () => void;
+  /** timeout 화면의 "Try Again" 버튼 핸들러. */
+  onRetry?: () => void;
 }
 
 const getTitle = (content: DetailContent, connector: ConnectorId | null): string => {
@@ -78,6 +80,7 @@ export const DetailPanel: FC<DetailPanelProps> = ({
   onShowAllWallets,
   onSelectWallet,
   onCopyLink,
+  onRetry,
 }) => {
   // CONNECTOR_META 에서 활성 connector 의 logo / downloadUrl 가져옴.
   const connectorMeta = selectedConnector ? CONNECTOR_META[selectedConnector] : null;
@@ -112,7 +115,7 @@ export const DetailPanel: FC<DetailPanelProps> = ({
         {content === 'qr' && (
           <QR uri={qrUri} logoUrl={connectorLogoUrl} downloadUrl={connectorDownloadUrl} />
         )}
-        {content === 'timeout' && <Timeout />}
+        {content === 'timeout' && <Timeout onRetry={onRetry} />}
         {(content === 'metamask-ext' || content === 'metamask-qr') && (
           <MetaMask
             variant={content === 'metamask-ext' ? 'extension' : 'qr'}