@gluwa/connect-kit 0.1.0-next.1 → 0.1.0-next.3

package/src/ConnectModal.tsx

@@ -1,8 +1,10 @@
-import { useState, useEffect, useCallback, useRef, useMemo, type FC } from 'react';
+import { useState, useEffect, useCallback, useMemo, type FC, type ReactNode } from 'react';
 import './ConnectModal.scss';
-import { useConfig } from 'wagmi';
+import { useAccount, useConfig, useDisconnect } from 'wagmi';
 import {
   type ConnectModalProps,
+  type ConnectErrorContext,
+  type ConnectErrorReason,
   type Connectors,
   type ConnectorId,
   type WCWallet,
@@ -16,6 +18,7 @@ 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 => {
@@ -32,6 +35,18 @@ const writeRecentConnector = (id: ConnectorId): void => {
   } catch {}
 };
 
+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 {
   connectors: ConnectorId[];
   selected: ConnectorId | null;
@@ -149,6 +164,7 @@ interface DetailPaneProps {
   hasMetaMaskExtension: boolean;
   connectorLogoMap: Partial<Record<ConnectorId, string>>;
   wc: WCState;
+  errorOverride: ReactNode | null;
   onBack: () => void;
   onClose: () => void;
 }
@@ -159,6 +175,7 @@ const DetailPane: FC<DetailPaneProps> = ({
   hasMetaMaskExtension,
   connectorLogoMap,
   wc,
+  errorOverride,
   onBack,
   onClose,
 }) => {
@@ -181,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={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}
-          />
+            {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>
@@ -278,45 +299,69 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   onClose,
   onLog,
   wcProjectId,
+  requiredChainId,
+  renderConnectError,
 }) => {
   const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(null);
-  const [qrUriMap, setQrUriMap] = useState<Partial<Record<ConnectorId, string>>>({});
-  const pendingQrConnectorRef = useRef<ConnectorId | null>(null);
+  const [qrUri, setQrUri] = useState<string | 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();
 
-  // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
+  // wagmi 상태 — chain mismatch invariant 판정용
+  const account = useAccount();
+  const { disconnectAsync } = useDisconnect();
+  const wagmiConfig = useConfig();
+
+  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 수신
   const handleQrUri = useCallback((uri: string | null) => {
-    if (uri) {
-      const id = pendingQrConnectorRef.current;
-      if (id) setQrUriMap((prev) => ({ ...prev, [id]: uri }));
-    }
+    setQrUri(uri);
   }, []);
 
   // 연결 완료
   const handleConnect = useCallback(
     (result: Parameters<typeof onConnect>[0]) => {
+      setErrorState(null);
       onConnect(result);
+      // chain mismatch가 있으면 모달은 SwitchChainView로 자동 전환됨 (닫지 않음)
+      // Provider 측에서 requiredChainId가 매칭될 때까지 force-open 유지
       onClose();
     },
     [onConnect, onClose],
   );
 
-  // 연결 실패 — 실패한 커넥터의 QR 캐시만 삭제
+  // 연결 실패
   const handleError = useCallback(
-    (error: Error, connectorId: ConnectorId): void => {
-      onLog?.(`[connect-kit] connection failed (${connectorId}): ${error.message}`, error);
-      setSelectedConnector(null);
-      setQrUriMap((prev) => {
-        const next = { ...prev };
-        delete next[connectorId];
-        return next;
-      });
+    (error: unknown, connectorId: ConnectorId): void => {
+      const normalizedError = error instanceof Error ? error : new Error(String(error));
+      onLog?.(
+        `[connect-kit] connection failed (${connectorId}): ${normalizedError.message}`,
+        normalizedError,
+      );
+      setQrUri(null);
       wc.resetView();
+      if (renderConnectError) {
+        setErrorState({ connectorId, error: normalizedError });
+      } else {
+        setSelectedConnector(null);
+      }
     },
-    [onLog, wc.resetView],
+    [onLog, wc.resetView, renderConnectError],
   );
 
   // 연결 시도
@@ -327,7 +372,6 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   });
 
   // wagmi connector icon 매핑
-  const wagmiConfig = useConfig();
   const connectorLogoMap = useMemo(() => {
     const map: Partial<Record<ConnectorId, string>> = {};
     const connectorIds: ConnectorId[] = [
@@ -349,24 +393,24 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     setHasMetaMaskExtension(detectMetaMaskExtension());
   }, []);
 
-  // 모달 닫힐 때 상태 + QR 캐시 전체 초기화
+  // 모달 닫힐 때 상태 초기화
   useEffect(() => {
     if (!open) {
       setSelectedConnector(null);
-      setQrUriMap({});
-      pendingQrConnectorRef.current = null;
+      setQrUri(null);
+      setErrorState(null);
       wc.reset();
       cancelConnect();
     }
   }, [open, cancelConnect, wc.reset]);
 
-  // 커넥터 선택 — 같은 커넥터 재선택 시 무시, 다른 커넥터 선택 시 이전 연결 취소 후 새 연결
+  // 커넥터 선택 — 선택할 때마다 QR을 초기화해 새 세션 URI가 표시되도록 함
   const handleSelectConnector = useCallback(
     (id: ConnectorId): void => {
-      if (id === selectedConnector) return;
-
-      pendingQrConnectorRef.current = id;
+      if (id === selectedConnector && !errorState) return;
       setSelectedConnector(id);
+      setQrUri(null);
+      setErrorState(null);
       wc.resetView();
       writeRecentConnector(id);
       setRecentConnector(id);
@@ -380,6 +424,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     },
     [
       selectedConnector,
+      errorState,
       triggerConnect,
       cancelConnect,
       wcProjectId,
@@ -388,19 +433,105 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     ],
   );
 
-  // 뒤로가기 — QR 캐시는 유지, wagmi만 reset
+  // 뒤로가기
   const handleBack = useCallback((): void => {
+    if (errorState) {
+      setErrorState(null);
+      setSelectedConnector(null);
+      return;
+    }
     if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
-    pendingQrConnectorRef.current = null;
     setSelectedConnector(null);
+    setQrUri(null);
     cancelConnect();
-  }, [selectedConnector, wc.handleBack, 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);
+        setQrUri(null);
+        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"
@@ -410,16 +541,17 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
           selected={selectedConnector}
           recentConnector={recentConnector}
           onSelect={handleSelectConnector}
-          onClose={onClose}
+          onClose={handleCloseClick}
         />
         <DetailPane
           selectedConnector={selectedConnector}
-          qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
+          qrUri={qrUri}
           hasMetaMaskExtension={hasMetaMaskExtension}
           connectorLogoMap={connectorLogoMap}
           wc={wc}
+          errorOverride={renderedError}
           onBack={handleBack}
-          onClose={onClose}
+          onClose={handleCloseClick}
         />
       </div>
     </div>

package/src/credit-connect.ts

@@ -0,0 +1,2 @@
+export { creditConnectConnector } from './creditConnectConnector';
+export type { CreditConnectConnectorOptions } from './creditConnectConnector';

package/src/creditConnectConnector.ts

@@ -285,6 +285,7 @@ export const creditConnectConnector = (
         } finally {
           isLocalDisconnect = false;
         }
+        provider = null;
         resetState();
         config.emitter.emit('disconnect');
       },

package/src/index.ts

@@ -1,7 +1,9 @@
 export { ConnectModal } from './ConnectModal';
-export { creditConnectConnector } from './creditConnectConnector';
-export type { CreditConnectConnectorOptions } from './creditConnectConnector';
+export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
+export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
 export type {
+  ConnectErrorContext,
+  ConnectErrorReason,
   ConnectModalProps,
   Connectors,
   ConnectResult,

package/src/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 export type ConnectorId = 'CREDIT_WALLET' | 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
 
 export type CreditWalletStrategy = 'walletConnect' | 'creditConnect';
@@ -28,6 +30,16 @@ export interface ConnectResult {
   connectorId: ConnectorId;
 }
 
+export type ConnectErrorReason = 'rejected' | 'unsupported' | 'unknown';
+
+export interface ConnectErrorContext {
+  connectorId: ConnectorId;
+  reason: ConnectErrorReason;
+  error: Error;
+  retry: () => void;
+  dismiss: () => void;
+}
+
 export interface ConnectModalProps {
   open: boolean;
   connectors: Connectors;
@@ -35,4 +47,6 @@ export interface ConnectModalProps {
   onClose: () => void;
   onLog?: (message: string, error?: Error) => void;
   wcProjectId?: string;
+  requiredChainId?: number;
+  renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
 }

package/src/views/CreditWalletView.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect, useMemo } from 'react';
+import { type FC, useEffect, useMemo, useRef } from 'react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { CONNECTOR_META } from '../connector-meta';
 import { type ConnectorId } from '../types';
@@ -12,9 +12,12 @@ interface CreditWalletViewProps {
 export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri }) => {
   const { downloadUrl, logoUrl, deepLinkBase } = CONNECTOR_META[connectorId];
   const isMobile = useMemo(() => isMobileDevice(), []);
+  // WC 세션 만료로 qrUri가 재발급되더라도 딥링크는 최초 1회만 실행
+  const hasRedirectedRef = useRef(false);
 
   useEffect(() => {
-    if (isMobile && qrUri && deepLinkBase) {
+    if (isMobile && qrUri && deepLinkBase && !hasRedirectedRef.current) {
+      hasRedirectedRef.current = true;
       tryOpenDeepLink(qrUri, deepLinkBase);
     }
   }, [isMobile, qrUri, deepLinkBase]);

package/src/views/SwitchChainView.tsx

@@ -0,0 +1,67 @@
+import { useState, type FC } from 'react';
+import { useSwitchChain } from 'wagmi';
+
+interface SwitchChainViewProps {
+  currentChainId: number | undefined;
+  requiredChainId: number;
+  requiredChainName?: string;
+  onDisconnect: () => void;
+  onLog?: (message: string, error?: Error) => void;
+}
+
+export const SwitchChainView: FC<SwitchChainViewProps> = ({
+  currentChainId,
+  requiredChainId,
+  requiredChainName,
+  onDisconnect,
+  onLog,
+}) => {
+  const { switchChainAsync, isPending } = useSwitchChain();
+  const [error, setError] = useState<Error | null>(null);
+
+  const targetLabel = requiredChainName ?? `chain ${requiredChainId}`;
+
+  const handleSwitch = (): void => {
+    setError(null);
+    switchChainAsync({ chainId: requiredChainId }).catch((err: unknown) => {
+      const normalized = err instanceof Error ? err : new Error(String(err));
+      // wagmi's MetaMask connector handles 4902 (chain not added) via wallet_addEthereumChain
+      // automatically when chain metadata is configured. We only surface what reaches us.
+      const code =
+        typeof err === 'object' && err !== null && 'code' in err
+          ? (err as { code: unknown }).code
+          : undefined;
+      if (code === 4902) {
+        onLog?.('[connect-kit] chain not registered in wallet (4902)', normalized);
+      } else {
+        onLog?.(`[connect-kit] switch chain failed: ${normalized.message}`, normalized);
+      }
+      setError(normalized);
+    });
+  };
+
+  return (
+    <div className="ck-view ck-view--switch-chain">
+      <h4 className="ck-view__title">Wrong network</h4>
+      <p className="ck-view__description">
+        {currentChainId != null
+          ? `Connected to chain ${currentChainId}. Please switch to ${targetLabel} to continue.`
+          : `Please switch to ${targetLabel} to continue.`}
+      </p>
+      <div className="ck-view__actions">
+        <button
+          type="button"
+          className="ck-btn-primary"
+          onClick={handleSwitch}
+          disabled={isPending}
+        >
+          {isPending ? 'Waiting for wallet…' : `Switch to ${targetLabel}`}
+        </button>
+        <button type="button" className="ck-btn-secondary" onClick={onDisconnect}>
+          Disconnect
+        </button>
+      </div>
+      {error && <p className="ck-view__caption ck-view__caption--error">{error.message}</p>}
+    </div>
+  );
+};

package/tsup.config.ts

@@ -2,7 +2,10 @@ import { defineConfig } from 'tsup';
 import { sassPlugin } from 'esbuild-sass-plugin';
 
 export default defineConfig({
-  entry: { index: 'src/index.ts' },
+  entry: {
+    index: 'src/index.ts',
+    'credit-connect': 'src/credit-connect.ts',
+  },
   format: ['esm'],
   dts: true,
   clean: true,
@@ -13,6 +16,7 @@ export default defineConfig({
     'wagmi',
     '@wagmi/core',
     'viem',
+    '@tanstack/react-query',
     '@gluwa/credit-connect-sdk',
     '@gluwa/credit-connect-sdk/dapp',
     '@gluwa/credit-connect-sdk/storage',