@gluwa/connect-kit 0.1.0-next.0 → 0.1.0-next.2

package/src/ConnectModal.tsx

@@ -1,16 +1,25 @@
-import { useState, useEffect, useCallback, useRef, useMemo, type FC } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo, type FC, type ReactNode } from 'react';
 import './ConnectModal.scss';
-import { useConfig } from 'wagmi';
-import { type ConnectModalProps, type ConnectorId, type WCWallet, type WCSubView } from './types';
+import { useAccount, useConfig, useDisconnect } from 'wagmi';
+import {
+  type ConnectModalProps,
+  type ConnectErrorContext,
+  type ConnectErrorReason,
+  type Connectors,
+  type ConnectorId,
+  type WCWallet,
+  type WCSubView,
+} from './types';
 import { CONNECTOR_META } from './connector-meta';
 import { detectMetaMaskExtension } from './utils/platform';
-import { useWagmiConnect, WAGMI_CONNECTOR_ID } from './hooks/useWagmiConnect';
+import { useWagmiConnect, resolveWagmiConnector } from './hooks/useWagmiConnect';
+import { useWCState, type WCState } from './hooks/useWCState';
 import { IdleView } from './views/IdleView';
 import { CreditWalletView } from './views/CreditWalletView';
 import { MetaMaskView } from './views/MetaMaskView';
 import { WalletConnectView } from './views/WalletConnectView';
+import { SwitchChainView } from './views/SwitchChainView';
 
-// 최근 연결 기록
 const RECENT_KEY = 'connect-kit:recent';
 const readRecentConnector = (): ConnectorId | null => {
   try {
@@ -26,58 +35,16 @@ const writeRecentConnector = (id: ConnectorId): void => {
   } catch {}
 };
 
-// WC 지갑 목록 가져오기
-const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
-  const all: WCWallet[] = [];
-  let page = 1;
-  const entries = 100;
-
-  while (page <= 10) {
-    const url = new URL('https://explorer-api.walletconnect.com/v3/wallets');
-    url.searchParams.set('projectId', projectId);
-    url.searchParams.set('entries', String(entries));
-    url.searchParams.set('page', String(page));
-
-    const res = await fetch(url.toString());
-    if (!res.ok) throw new Error(`Failed to fetch wallet list: ${res.status}`);
-
-    const json = (await res.json()) as {
-      listings: Record<
-        string,
-        {
-          id: string;
-          name: string;
-          homepage?: string;
-          image_url?: { sm?: string; md?: string };
-          mobile?: { native?: string; universal?: string };
-          desktop?: { native?: string; universal?: string };
-          app?: { ios?: string; android?: string };
-        }
-      >;
-      total: number;
-    };
-
-    const listings = Object.values(json.listings ?? {});
-    for (const w of listings) {
-      all.push({
-        id: w.id,
-        name: w.name,
-        imageUrl: w.image_url?.md ?? w.image_url?.sm ?? '',
-        mobileNative: w.mobile?.native ?? '',
-        mobileUniversal: w.mobile?.universal ?? '',
-        desktopNative: w.desktop?.native ?? '',
-        desktopUniversal: w.desktop?.universal ?? '',
-        appIos: w.app?.ios ?? '',
-        appAndroid: w.app?.android ?? '',
-        homepage: w.homepage ?? '',
-      });
-    }
-
-    if (listings.length < entries || all.length >= json.total) break;
-    page += 1;
-  }
-
-  return all;
+const classifyError = (error: Error): ConnectErrorReason => {
+  const code =
+    typeof error === 'object' && error !== null && 'code' in error
+      ? (error as unknown as { code: unknown }).code
+      : undefined;
+  if (code === 4001) return 'rejected';
+  const message = error.message?.toLowerCase() ?? '';
+  if (message.includes('user rejected') || message.includes('user denied')) return 'rejected';
+  if (message.includes('unsupported') || message.includes('not installed')) return 'unsupported';
+  return 'unknown';
 };
 
 interface SelectorPaneProps {
@@ -196,18 +163,10 @@ interface DetailPaneProps {
   qrUri: string | null;
   hasMetaMaskExtension: boolean;
   connectorLogoMap: Partial<Record<ConnectorId, string>>;
-  wcSubView: WCSubView;
-  wcWalletList: WCWallet[];
-  wcWalletListLoading: boolean;
-  wcWalletListSearch: string;
-  wcSelectedWallet: WCWallet | null;
+  wc: WCState;
+  errorOverride: ReactNode | null;
   onBack: () => void;
   onClose: () => void;
-  wcFilterActive: boolean;
-  onWCShowList: () => void;
-  onWCSelectWallet: (wallet: WCWallet) => void;
-  onWCSearchChange: (q: string) => void;
-  onWCFilterToggle: () => void;
 }
 
 const DetailPane: FC<DetailPaneProps> = ({
@@ -215,24 +174,16 @@ const DetailPane: FC<DetailPaneProps> = ({
   qrUri,
   hasMetaMaskExtension,
   connectorLogoMap,
-  wcSubView,
-  wcWalletList,
-  wcWalletListLoading,
-  wcWalletListSearch,
-  wcSelectedWallet,
-  wcFilterActive,
+  wc,
+  errorOverride,
   onBack,
   onClose,
-  onWCShowList,
-  onWCSelectWallet,
-  onWCSearchChange,
-  onWCFilterToggle,
 }) => {
   const title = getDetailTitle(
     selectedConnector,
     hasMetaMaskExtension,
-    wcSubView,
-    wcSelectedWallet,
+    wc.subView,
+    wc.selectedWallet,
   );
   const showBack = selectedConnector !== null;
 
@@ -247,35 +198,39 @@ const DetailPane: FC<DetailPaneProps> = ({
       </div>
 
       <div className="ck-pane__body">
-        {!selectedConnector && <IdleView />}
+        {errorOverride || (
+          <>
+            {!selectedConnector && <IdleView />}
 
-        {(selectedConnector === 'CREDIT_CONNECT' || selectedConnector === 'CREDIT_WALLET') && (
-          <CreditWalletView connectorId={selectedConnector} qrUri={qrUri} />
-        )}
+            {(selectedConnector === 'CREDIT_CONNECT' || selectedConnector === 'CREDIT_WALLET') && (
+              <CreditWalletView connectorId={selectedConnector} qrUri={qrUri} />
+            )}
 
-        {selectedConnector === 'METAMASK' && (
-          <MetaMaskView
-            qrUri={qrUri}
-            hasExtension={hasMetaMaskExtension}
-            logoUrl={connectorLogoMap.METAMASK}
-          />
-        )}
+            {selectedConnector === 'METAMASK' && (
+              <MetaMaskView
+                qrUri={qrUri}
+                hasExtension={hasMetaMaskExtension}
+                logoUrl={connectorLogoMap.METAMASK}
+              />
+            )}
 
-        {selectedConnector === 'WALLET_CONNECT' && (
-          <WalletConnectView
-            subView={wcSubView}
-            qrUri={qrUri}
-            logoUrl={connectorLogoMap.WALLET_CONNECT}
-            walletList={wcWalletList}
-            walletListLoading={wcWalletListLoading}
-            walletListSearch={wcWalletListSearch}
-            walletListFilterActive={wcFilterActive}
-            selectedWallet={wcSelectedWallet}
-            onShowList={onWCShowList}
-            onSelectWallet={onWCSelectWallet}
-            onSearchChange={onWCSearchChange}
-            onFilterToggle={onWCFilterToggle}
-          />
+            {selectedConnector === 'WALLET_CONNECT' && (
+              <WalletConnectView
+                subView={wc.subView}
+                qrUri={qrUri}
+                logoUrl={connectorLogoMap.WALLET_CONNECT}
+                walletList={wc.walletList}
+                walletListLoading={wc.walletListLoading}
+                walletListSearch={wc.walletListSearch}
+                walletListFilterActive={wc.filterActive}
+                selectedWallet={wc.selectedWallet}
+                onShowList={wc.onShowList}
+                onSelectWallet={wc.onSelectWallet}
+                onSearchChange={wc.onSearchChange}
+                onFilterToggle={wc.onFilterToggle}
+              />
+            )}
+          </>
         )}
       </div>
     </div>
@@ -301,42 +256,78 @@ const getDetailTitle = (
   return CONNECTOR_META[connector].detailTitle;
 };
 
+const resolveConnectorsFromConfig = (connectorsConfig?: Connectors): ConnectorId[] => {
+  if (!connectorsConfig) return [];
+
+  const connectors: ConnectorId[] = [];
+
+  if (connectorsConfig.creditWallet === 'walletConnect') connectors.push('CREDIT_WALLET');
+  if (connectorsConfig.creditWallet === 'creditConnect') connectors.push('CREDIT_CONNECT');
+  if (connectorsConfig.metamask) connectors.push('METAMASK');
+  if (connectorsConfig.walletConnect) connectors.push('WALLET_CONNECT');
+
+  return connectors;
+};
+
 export const ConnectModal: FC<ConnectModalProps> = (props) => {
+  // open=false면 내부 컴포넌트를 마운트하지 않음
+  // → useConfig 등 wagmi hooks가 실행되지 않아 WagmiProvider 없이도 렌더링 가능
+  if (!props.open) return null;
+
+  const resolvedConnectors = resolveConnectorsFromConfig(props.connectors);
+
   if (
-    (props.connectors as ConnectorId[]).includes('CREDIT_WALLET') &&
-    (props.connectors as ConnectorId[]).includes('CREDIT_CONNECT')
+    resolvedConnectors.includes('CREDIT_WALLET') &&
+    resolvedConnectors.includes('CREDIT_CONNECT')
   ) {
     throw new Error('CREDIT_WALLET and CREDIT_CONNECT cannot be used together');
   }
-  // open=false면 내부 컴포넌트를 마운트하지 않음
-  // → useConfig 등 wagmi hooks가 실행되지 않아 WagmiProvider 없이도 렌더링 가능
-  if (!props.open) return null;
-  return <ConnectModalInner {...props} />;
+  if (resolvedConnectors.length === 0) {
+    throw new Error('At least one connector must be configured');
+  }
+  return <ConnectModalInner {...props} connectors={resolvedConnectors} />;
+};
+
+type ConnectModalInnerProps = Omit<ConnectModalProps, 'connectors'> & {
+  connectors: ConnectorId[];
 };
 
-const ConnectModalInner: FC<ConnectModalProps> = ({
+const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   open,
   connectors,
   onConnect,
   onClose,
   onLog,
   wcProjectId,
+  requiredChainId,
+  renderConnectError,
 }) => {
   const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(null);
-  // 커넥터별 QR URI 캐시 — 만료 전까지 재사용
   const [qrUriMap, setQrUriMap] = useState<Partial<Record<ConnectorId, string>>>({});
-  // handleQrUri 호출 시점에 어떤 커넥터의 QR인지 추적
   const pendingQrConnectorRef = useRef<ConnectorId | null>(null);
   const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
   const [hasMetaMaskExtension, setHasMetaMaskExtension] = useState<boolean>(false);
+  const [errorState, setErrorState] = useState<{ connectorId: ConnectorId; error: Error } | null>(
+    null,
+  );
+
+  const wc = useWCState();
+
+  // wagmi 상태 — chain mismatch invariant 판정용
+  const account = useAccount();
+  const { disconnectAsync } = useDisconnect();
+  const wagmiConfig = useConfig();
 
-  const [wcSubView, setWcSubView] = useState<WCSubView>('qr');
-  const [wcWalletList, setWcWalletList] = useState<WCWallet[]>([]);
-  const [wcWalletListLoading, setWcWalletListLoading] = useState<boolean>(false);
-  const [wcWalletListSearch, setWcWalletListSearch] = useState<string>('');
-  const [wcFilterActive, setWcFilterActive] = useState<boolean>(false);
-  const [wcSelectedWallet, setWcSelectedWallet] = useState<WCWallet | null>(null);
-  const wcLoadedRef = useRef<boolean>(false);
+  const chainMismatch =
+    requiredChainId != null &&
+    account.status === 'connected' &&
+    account.chainId != null &&
+    account.chainId !== requiredChainId;
+
+  const requiredChainName = useMemo<string | undefined>(() => {
+    if (requiredChainId == null) return undefined;
+    return wagmiConfig.chains.find((chain) => chain.id === requiredChainId)?.name;
+  }, [wagmiConfig.chains, requiredChainId]);
 
   // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
   const handleQrUri = useCallback((uri: string | null) => {
@@ -349,7 +340,10 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
   // 연결 완료
   const handleConnect = useCallback(
     (result: Parameters<typeof onConnect>[0]) => {
+      setErrorState(null);
       onConnect(result);
+      // chain mismatch가 있으면 모달은 SwitchChainView로 자동 전환됨 (닫지 않음)
+      // Provider 측에서 requiredChainId가 매칭될 때까지 force-open 유지
       onClose();
     },
     [onConnect, onClose],
@@ -357,18 +351,25 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
 
   // 연결 실패 — 실패한 커넥터의 QR 캐시만 삭제
   const handleError = useCallback(
-    (error: Error, connectorId: ConnectorId): void => {
-      onLog?.(`[connect-kit] connection failed (${connectorId}): ${error.message}`, error);
-      setSelectedConnector(null);
+    (error: unknown, connectorId: ConnectorId): void => {
+      const normalizedError = error instanceof Error ? error : new Error(String(error));
+      onLog?.(
+        `[connect-kit] connection failed (${connectorId}): ${normalizedError.message}`,
+        normalizedError,
+      );
       setQrUriMap((prev) => {
         const next = { ...prev };
         delete next[connectorId];
         return next;
       });
-      setWcSubView('qr');
-      setWcSelectedWallet(null);
+      wc.resetView();
+      if (renderConnectError) {
+        setErrorState({ connectorId, error: normalizedError });
+      } else {
+        setSelectedConnector(null);
+      }
     },
-    [onLog],
+    [onLog, wc.resetView, renderConnectError],
   );
 
   // 연결 시도
@@ -379,13 +380,16 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
   });
 
   // wagmi connector icon 매핑
-  const wagmiConfig = useConfig();
   const connectorLogoMap = useMemo(() => {
     const map: Partial<Record<ConnectorId, string>> = {};
-    for (const [connectorId, wagmiId] of Object.entries(WAGMI_CONNECTOR_ID) as Array<
-      [ConnectorId, string]
-    >) {
-      const wagmiConnector = wagmiConfig.connectors.find((c) => c.id === wagmiId);
+    const connectorIds: ConnectorId[] = [
+      'CREDIT_CONNECT',
+      'CREDIT_WALLET',
+      'METAMASK',
+      'WALLET_CONNECT',
+    ];
+    for (const connectorId of connectorIds) {
+      const wagmiConnector = resolveWagmiConnector(wagmiConfig.connectors, connectorId);
       if (wagmiConnector?.icon) map[connectorId] = wagmiConnector.icon;
     }
     return map;
@@ -403,89 +407,140 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
       setSelectedConnector(null);
       setQrUriMap({});
       pendingQrConnectorRef.current = null;
-      setWcSubView('qr');
-      setWcWalletListSearch('');
-      setWcFilterActive(false);
-      setWcSelectedWallet(null);
+      setErrorState(null);
+      wc.reset();
       cancelConnect();
     }
-  }, [open, cancelConnect]);
-
-  // WC 지갑 목록 로드
-  const loadWCWalletList = useCallback(async (projectId: string): Promise<void> => {
-    if (wcLoadedRef.current) return;
-    wcLoadedRef.current = true;
-    setWcWalletListLoading(true);
-    try {
-      const list = await fetchWCWalletList(projectId);
-      setWcWalletList(list);
-    } catch {
-      wcLoadedRef.current = false;
-    } finally {
-      setWcWalletListLoading(false);
-    }
-  }, []);
+  }, [open, cancelConnect, wc.reset]);
 
-  // 커넥터 선택 — 같은 커넥터 재선택 시 무시, 다른 커넥터 선택 시 이전 연결 취소 후 새 연결
+  // 커넥터 선택
   const handleSelectConnector = useCallback(
     (id: ConnectorId): void => {
-      if (id === selectedConnector) return;
-
+      if (id === selectedConnector && !errorState) return;
       pendingQrConnectorRef.current = id;
       setSelectedConnector(id);
-      setWcSubView('qr');
-      setWcSelectedWallet(null);
+      setErrorState(null);
+      wc.resetView();
       writeRecentConnector(id);
       setRecentConnector(id);
 
       if (id === 'WALLET_CONNECT' && wcProjectId) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        loadWCWalletList(wcProjectId);
+        wc.loadWalletList(wcProjectId);
       }
 
       cancelConnect();
       triggerConnect(id);
     },
-    [selectedConnector, triggerConnect, cancelConnect, wcProjectId, loadWCWalletList],
+    [
+      selectedConnector,
+      errorState,
+      triggerConnect,
+      cancelConnect,
+      wcProjectId,
+      wc.resetView,
+      wc.loadWalletList,
+    ],
   );
 
-  // WC 서브뷰 핸들러
-  const handleWCShowList = useCallback((): void => {
-    setWcSubView('list');
-  }, []);
-
-  const handleWCSelectWallet = useCallback((wallet: WCWallet): void => {
-    setWcSelectedWallet(wallet);
-    setWcSubView('wallet');
-  }, []);
-
-  const handleWCFilterToggle = useCallback((): void => {
-    setWcFilterActive((prev) => !prev);
-  }, []);
-
   // 뒤로가기 — QR 캐시는 유지, wagmi만 reset
   const handleBack = useCallback((): void => {
-    if (selectedConnector === 'WALLET_CONNECT') {
-      if (wcSubView === 'wallet') {
-        setWcSelectedWallet(null);
-        setWcSubView('list');
-        return;
-      }
-      if (wcSubView === 'list') {
-        setWcSubView('qr');
-        return;
-      }
+    if (errorState) {
+      setErrorState(null);
+      setSelectedConnector(null);
+      return;
     }
+    if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
     pendingQrConnectorRef.current = null;
     setSelectedConnector(null);
     cancelConnect();
-  }, [selectedConnector, wcSubView, cancelConnect]);
+  }, [selectedConnector, errorState, wc.handleBack, cancelConnect]);
+
+  // chain mismatch 상태에서의 disconnect (Switch chain pane의 cancel)
+  const handleSwitchChainDisconnect = useCallback((): void => {
+    disconnectAsync().catch((err: unknown) => {
+      const normalized = err instanceof Error ? err : new Error(String(err));
+      onLog?.(`[connect-kit] disconnect failed: ${normalized.message}`, normalized);
+    });
+  }, [disconnectAsync, onLog]);
+
+  // overlay 클릭 — chain mismatch 상태에선 무시 (실수 클릭 방어)
+  const handleOverlayClick = useCallback((): void => {
+    if (chainMismatch) return;
+    onClose();
+  }, [chainMismatch, onClose]);
+
+  // close 버튼 — chain mismatch 상태에선 disconnect
+  const handleCloseClick = useCallback((): void => {
+    if (chainMismatch) {
+      handleSwitchChainDisconnect();
+      return;
+    }
+    onClose();
+  }, [chainMismatch, handleSwitchChainDisconnect, onClose]);
+
+  const renderedError: ReactNode = useMemo(() => {
+    if (!errorState || !renderConnectError) return null;
+    const ctx: ConnectErrorContext = {
+      connectorId: errorState.connectorId,
+      reason: classifyError(errorState.error),
+      error: errorState.error,
+      retry: () => {
+        const id = errorState.connectorId;
+        setErrorState(null);
+        pendingQrConnectorRef.current = id;
+        cancelConnect();
+        triggerConnect(id);
+      },
+      dismiss: () => {
+        setErrorState(null);
+        setSelectedConnector(null);
+      },
+    };
+    return renderConnectError(ctx);
+  }, [errorState, renderConnectError, triggerConnect, cancelConnect]);
+
+  // chain mismatch면 단일 pane (selector/detail 숨김)
+  // requiredChainId != null 재확인은 TS narrowing용 — chainMismatch true면 이미 보장됨
+  if (chainMismatch && requiredChainId != null) {
+    return (
+      <div className="ck-root">
+        <div className="ck-overlay" onClick={handleOverlayClick} />
+        <div
+          className="ck-modal ck-modal--switch-chain"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Switch network"
+        >
+          <div className="ck-pane">
+            <div className="ck-pane__header">
+              <h3 className="ck-pane__title">Switch network</h3>
+              <button
+                type="button"
+                className="ck-btn-close"
+                onClick={handleCloseClick}
+                aria-label="Cancel and disconnect"
+              />
+            </div>
+            <div className="ck-pane__body">
+              <SwitchChainView
+                currentChainId={account.chainId}
+                requiredChainId={requiredChainId}
+                requiredChainName={requiredChainName}
+                onDisconnect={handleSwitchChainDisconnect}
+                onLog={onLog}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="ck-root">
-      <div className="ck-overlay" onClick={onClose} />
+      <div className="ck-overlay" onClick={handleOverlayClick} />
       <div
-        className={`ck-modal${selectedConnector ? ' ck-modal--has-detail' : ''}`}
+        className={`ck-modal${(selectedConnector ?? errorState) ? ' ck-modal--has-detail' : ''}`}
         role="dialog"
         aria-modal="true"
         aria-label="Connect Wallet"
@@ -495,25 +550,17 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
           selected={selectedConnector}
           recentConnector={recentConnector}
           onSelect={handleSelectConnector}
-          onClose={onClose}
+          onClose={handleCloseClick}
         />
         <DetailPane
           selectedConnector={selectedConnector}
           qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
           hasMetaMaskExtension={hasMetaMaskExtension}
           connectorLogoMap={connectorLogoMap}
-          wcSubView={wcSubView}
-          wcWalletList={wcWalletList}
-          wcWalletListLoading={wcWalletListLoading}
-          wcWalletListSearch={wcWalletListSearch}
-          wcFilterActive={wcFilterActive}
-          wcSelectedWallet={wcSelectedWallet}
+          wc={wc}
+          errorOverride={renderedError}
           onBack={handleBack}
-          onClose={onClose}
-          onWCShowList={handleWCShowList}
-          onWCSelectWallet={handleWCSelectWallet}
-          onWCSearchChange={setWcWalletListSearch}
-          onWCFilterToggle={handleWCFilterToggle}
+          onClose={handleCloseClick}
         />
       </div>
     </div>

package/src/components/QRFrame.tsx

@@ -0,0 +1,43 @@
+import { type FC } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+interface QRFrameProps {
+  qrUri: string | null;
+  logoUrl?: string;
+}
+
+export const QRFrame: FC<QRFrameProps> = ({ qrUri, logoUrl }) => (
+  <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
+    {qrUri ? (
+      <QRCodeSVG
+        value={qrUri}
+        size={196}
+        level="H"
+        imageSettings={
+          logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
+        }
+      />
+    ) : (
+      <div className="ck-qr-spinner" aria-label="Loading QR code" />
+    )}
+  </div>
+);
+
+interface CopyLinkButtonProps {
+  qrUri: string | null;
+}
+
+export const CopyLinkButton: FC<CopyLinkButtonProps> = ({ qrUri }) => {
+  if (!qrUri) return null;
+  return (
+    <button
+      type="button"
+      className="ck-copy-link"
+      onClick={() => {
+        navigator.clipboard.writeText(qrUri);
+      }}
+    >
+      Copy link
+    </button>
+  );
+};