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

package/src/components/qrArea/style.scss

@@ -9,13 +9,6 @@
   padding-bottom: 32px;
 }
 
-// .ck-qr-group {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   gap: 24px;
-// }
-
 // ── Text ──────────────────────────────────────────────────────────────────────
 .ck-qr-text {
   display: flex;
@@ -42,18 +35,16 @@
   outline: none;
 }
 
-.ck-qr-loading {
-  border: 1px solid var(--semantic-divider-divider-1);
-}
-
-.ck-qr-timeout {
+.ck-qr-skeleton {
+  padding: 20px;
   border: 1px solid var(--semantic-divider-divider-1);
+  border-radius: 20px;
 }
 
-// ── Skeleton ──────────────────────────────────────────────────────────────────
-.ck-qr-skeleton {
-  width: 248px;
-  height: 248px;
+.ck-qr-skeleton-inner {
+  display: block;
+  width: 246px;
+  height: 246px;
   background: linear-gradient(
     132deg,
     var(--scale-gray-100) 36%,
@@ -64,8 +55,24 @@
   animation: ck-qr-shimmer 1.5s linear infinite;
 
   @include tablet {
-    width: 200px;
-    height: 200px;
+    width: 198px;
+    height: 198px;
+  }
+}
+
+// ── Timeout ───────────────────────────────────────────────────────────────────
+.ck-qr-timeout {
+  width: 288px;
+  height: 288px;
+  border: 1px solid var(--semantic-divider-divider-1);
+  background: var(--scale-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include tablet {
+    width: 240px;
+    height: 240px;
   }
 }
 
@@ -93,21 +100,6 @@
   }
 }
 
-// ── Timeout ───────────────────────────────────────────────────────────────────
-.ck-qr-timeout {
-  width: 248px;
-  height: 248px;
-  background: var(--scale-gray-100);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  @include tablet {
-    width: 200px;
-    height: 200px;
-  }
-}
-
 .ck-qr-timeout-inner {
   display: flex;
   flex-direction: column;

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/useMetaMaskExtension.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const METAMASK_RDNS = 'io.metamask';
+
+// EIP-6963 응답의 rdns 로 MetaMask 확장을 식별.
+const isMetaMaskAnnouncement = (event: Event): boolean => {
+  const detail = (event as CustomEvent<{ info?: { rdns?: string }; provider?: unknown }>).detail;
+  return detail?.info?.rdns?.toLowerCase() === METAMASK_RDNS && detail.provider != null;
+};
+
+export const useMetaMaskExtension = (): boolean => {
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    const handleAnnouncement = (event: Event): void => {
+      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+    };
+
+    // 응답 listener를 먼저 등록한 뒤 설치된 provider 목록을 요청.
+    window.addEventListener('eip6963:announceProvider', handleAnnouncement);
+    window.dispatchEvent(new Event('eip6963:requestProvider'));
+
+    return () => {
+      window.removeEventListener('eip6963:announceProvider', handleAnnouncement);
+    };
+  }, []);
+
+  return isInstalled;
+};

package/src/hooks/useWCState.ts

@@ -1,15 +1,13 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import type { WCWallet, WCSubView } from '../types';
-
-// WalletConnect Explorer 에 등록된 Credit Wallet 의 정식 wallet name (API 응답 그대로).
-// CONNECTOR_META.CREDIT_CONNECT.label 은 selector button 표시용 ('Continue with Credit Wallet')
-// 이라 다름 — 별도 상수로 분리.
-const WC_EXPLORER_CREDIT_WALLET_NAME = 'Credit Wallet';
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+import { CREDIT_WALLET_LISTING_ID, overrideWalletDisplay } from '../wallet-display-override';
 
 const sortCreditWalletFirst = (list: WCWallet[]): WCWallet[] =>
   [...list].sort((a, b) => {
-    if (a.name === WC_EXPLORER_CREDIT_WALLET_NAME) return -1;
-    if (b.name === WC_EXPLORER_CREDIT_WALLET_NAME) return 1;
+    // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+    if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+    if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
     return 0;
   });
 
@@ -115,7 +113,8 @@ export const useWCState = (): WCState => {
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      const sorted = sortCreditWalletFirst(list);
+      // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
       // Credit Wallet 을 최상단으로 정렬한 상태로 state 저장 — view 측은 정렬 신경 X.
       if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {

package/src/hooks/useWagmiConnect.ts

@@ -13,15 +13,10 @@ const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().inclu
 const hasWalletConnectKeyword = (value: string): boolean =>
   value.toLowerCase().includes('walletconnect');
 
+// 전역 provider 대신 wagmi connector 메타데이터로 MetaMask를 판별.
 const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
   if (connector.id === 'metaMaskSDK') return true;
 
-  if (connector.id === 'injected') {
-    if (typeof window === 'undefined') return false;
-    const eth = (window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum;
-    return eth?.isMetaMask === true;
-  }
-
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
 
   if (connector.rdns) {
@@ -61,6 +56,7 @@ interface Options {
   onConnect: (result: ConnectResult) => void;
   onError: (error: Error, connectorId: ConnectorId) => void;
   onQrUri: (uri: string | null) => void;
+  onSessionExpired?: () => void;
 }
 
 interface UseWagmiConnectResult {
@@ -73,6 +69,7 @@ export const useWagmiConnect = ({
   onConnect,
   onError,
   onQrUri,
+  onSessionExpired,
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
@@ -81,11 +78,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 +94,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/allWallets/index.tsx

@@ -42,7 +42,7 @@ export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWa
       </div>
       {!isLoading && filtered.length === 0 ? (
         <div className="ck-all-wallets-empty" role="status">
-          <p>No wallets found</p>
+          <p>No Wallet found</p>
         </div>
       ) : (
         <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />

package/src/layout/allWallets/style.scss

@@ -19,13 +19,8 @@
   gap: 8px;
   flex-shrink: 0;
 
-  @include max-width(392px) {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 12px;
-    .ck-search {
-      width: 100%;
-    }
+  .ck-search {
+    min-width: 0;
   }
 }
 

package/src/layout/connectDialog/index.tsx

@@ -12,14 +12,11 @@ import { SelectorPanel } from '../selectorPanel';
 import { DetailPanel } from '../detailPanel';
 import { Snackbar } from '../../components/snackbar';
 import { resolveConnectorId } from '../../connector-meta';
+import { useMetaMaskExtension } from '../../hooks/useMetaMaskExtension';
 import { useWagmiConnect } from '../../hooks/useWagmiConnect';
+import { useConnectTimeout } from '../../hooks/useConnectTimeout';
 import { useWCState } from '../../hooks/useWCState';
-import {
-  detectMetaMaskExtension,
-  isMobileDevice,
-  tryOpenDeepLink,
-  tryOpenCreditWalletDeeplink,
-} from '../../utils/platform';
+import { isMobileDevice, tryOpenDeepLink, tryOpenCreditWalletDeeplink } from '../../utils/platform';
 
 export type DialogStep = 'selector' | 'detail';
 
@@ -47,6 +44,13 @@ const getContentForConnector = (id: ConnectorId): DetailContent => {
   return 'idle';
 };
 
+// MM 은 확장 감지 시 즉시 extension 연결, 아니면 QR. (select / retry 공통)
+const getInitialContentForConnector = (
+  id: ConnectorId,
+  isMetaMaskExtensionInstalled: boolean,
+): DetailContent =>
+  id === 'METAMASK' && !isMetaMaskExtensionInstalled ? 'metamask-qr' : getContentForConnector(id);
+
 export const ConnectDialog: FC<ConnectDialogProps> = ({
   open,
   theme = 'dark',
@@ -83,6 +87,16 @@ 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);
+  // EIP-6963 기반 MetaMask 확장 설치 상태.
+  const isMetaMaskExtensionInstalled = useMetaMaskExtension();
+
+  // 현재 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 +109,61 @@ 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, isMetaMaskExtensionInstalled);
+      setContent(nextContent);
+      triggerConnect(selectedConnector);
+    },
+  });
+
+  // 타임아웃 발생 → 진행 중 연결 취소 + timeout 화면 표시.
+  // 전환 전 화면을 저장해 retry 시 복원 (WC wallet-qr 등).
+  useEffect(() => {
+    if (!timedOut) return;
+    preTimeoutContentRef.current = contentRef.current;
+    cancelConnect();
+    setContent('timeout');
+  }, [timedOut, cancelConnect]);
+
+  // provider 응답이 늦게 도착하면 QR에서 확장 연결 화면으로 전환.
+  useEffect(() => {
+    if (
+      isMetaMaskExtensionInstalled &&
+      selectedConnector === 'METAMASK' &&
+      content === 'metamask-qr'
+    ) {
+      setContent('metamask-ext');
+    }
+  }, [isMetaMaskExtensionInstalled, selectedConnector, content]);
+
   // 마운트 시 wagmi storage 의 recentConnectorId(연결 성공 시 wagmi 가 저장) 복원.
   useEffect(() => {
     const restoreRecent = async (): Promise<void> => {
@@ -115,10 +180,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, isMetaMaskExtensionInstalled));
     setStep('detail');
     // wagmi connect 시작 (display_uri 도착 시 setQrUri 자동 호출)
     triggerConnect(id);
@@ -261,6 +323,7 @@ export const ConnectDialog: FC<ConnectDialogProps> = ({
           walletCount={wc.walletList.length}
           onBack={handleBack}
           onClose={onClose}
+          onRetry={retry}
           onShowAllWallets={handleShowAllWallets}
           onSelectWallet={handleSelectWallet}
           onCopyLink={() => {

package/src/layout/connectDialog/style.scss

@@ -37,8 +37,9 @@
     width: 100%;
     max-width: none;
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
     max-height: 82dvh;
-    height: 100%;
+    height: auto;
     border-radius: 12px 12px 0 0;
 
     &[data-step='selector'] .ck-detail { display: none !important; }

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'}

package/src/layout/detailPanel/style.scss

@@ -3,6 +3,7 @@
 .ck-detail {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   background: var(--semantic-paper-dialog);
   min-height: 0;
   position: relative;
@@ -61,4 +62,8 @@
   overflow-y: auto;
   padding: 20px;
   @include themedScrollbar;
+
+  &:has(.ck-all-wallets) {
+    padding-bottom: 0;
+  }
 }

package/src/utils/platform.ts

@@ -13,7 +13,3 @@ export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
 export const tryOpenCreditWalletDeeplink = (payloadUrl: string): void => {
   window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
 };
-
-export const detectMetaMaskExtension = (): boolean =>
-  typeof window !== 'undefined' &&
-  Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);

package/src/wallet-display-override.ts

@@ -0,0 +1,15 @@
+import penguinWalletIcon from '../assets/penguinwallet.png';
+import type { WCWallet } from './types';
+
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 삭제
+export const CREDIT_WALLET_LISTING_ID =
+  'ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f';
+
+export const overrideWalletDisplay = (wallet: WCWallet): WCWallet =>
+  wallet.id === CREDIT_WALLET_LISTING_ID
+    ? {
+        ...wallet,
+        name: 'PenguinWallet',
+        imageUrl: penguinWalletIcon,
+      }
+    : wallet;