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

package/src/ConnectKitProvider.tsx

@@ -9,10 +9,16 @@ import {
   type FC,
   type ReactNode,
 } from 'react';
-import { useAccount, useDisconnect } from 'wagmi';
+import { WagmiProvider, useAccount, useDisconnect } from 'wagmi';
+import type { Config } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConnectModal } from './ConnectModal';
 import type { ConnectErrorContext, ConnectResult, ConnectorId, Connectors } from './types';
 
+// wagmiConfig prop으로 기존 프로젝트 통합 시 내부에서 사용하는 QueryClient.
+// 모듈 레벨에 한 번만 생성 — 연결 플로우용으로만 쓰이므로 공유해도 무방.
+const internalQueryClient = new QueryClient();
+
 export interface ConnectKitProviderProps {
   children: ReactNode;
   connectors: Connectors;
@@ -33,6 +39,16 @@ export interface ConnectKitProviderProps {
    * 미제공 시 기본 동작은 selector로 복귀.
    */
   renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
+  /**
+   * 기존 프로젝트 통합용. wagmi config를 넘기면 ConnectKitProvider 내부에서
+   * WagmiProvider를 직접 세운다.
+   *
+   * - 기존 프로젝트: 앱에 WagmiProvider가 없으므로 wagmiConfig를 넘긴다.
+   *   ConnectKitProvider가 같은 config 인스턴스로 WagmiProvider를 셀프 마운트하므로
+   *   기존 wagmi 상태 store와 단일 config를 공유한다.
+   * - 신규 프로젝트: 앱이 이미 WagmiProvider를 감싸므로 이 prop은 불필요하다.
+   */
+  wagmiConfig?: Config;
 }
 
 export interface ConnectKitContextValue {
@@ -57,7 +73,20 @@ const resolveConnectorId = (wagmiConnectorId: string | undefined): ConnectorId |
   return null;
 };
 
-export const ConnectKitProvider: FC<ConnectKitProviderProps> = ({
+export const ConnectKitProvider: FC<ConnectKitProviderProps> = (props) => {
+  if (props.wagmiConfig) {
+    return (
+      <WagmiProvider config={props.wagmiConfig}>
+        <QueryClientProvider client={internalQueryClient}>
+          <ConnectKitProviderInner {...props} />
+        </QueryClientProvider>
+      </WagmiProvider>
+    );
+  }
+  return <ConnectKitProviderInner {...props} />;
+};
+
+const ConnectKitProviderInner: FC<ConnectKitProviderProps> = ({
   children,
   connectors,
   wcProjectId,

package/src/ConnectModal.scss

@@ -520,11 +520,11 @@
   }
 }
 
-// 스크롤 wrapper — 520px 고정, 세로 스크롤만 담당
+// 스크롤 wrapper — 세로 스크롤만 담당
 .ck-wallet-grid-scroll {
   flex: 1;
   min-height: 0;
-  width: 520px;
+  width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }

package/src/ConnectModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef, useMemo, type FC, type ReactNode } from 'react';
+import { useState, useEffect, useCallback, useMemo, type FC, type ReactNode } from 'react';
 import './ConnectModal.scss';
 import { useAccount, useConfig, useDisconnect } from 'wagmi';
 import {
@@ -303,8 +303,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   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>(
@@ -329,12 +328,9 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     return wagmiConfig.chains.find((chain) => chain.id === requiredChainId)?.name;
   }, [wagmiConfig.chains, requiredChainId]);
 
-  // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
+  // QR URI 수신
   const handleQrUri = useCallback((uri: string | null) => {
-    if (uri) {
-      const id = pendingQrConnectorRef.current;
-      if (id) setQrUriMap((prev) => ({ ...prev, [id]: uri }));
-    }
+    setQrUri(uri);
   }, []);
 
   // 연결 완료
@@ -349,7 +345,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     [onConnect, onClose],
   );
 
-  // 연결 실패 — 실패한 커넥터의 QR 캐시만 삭제
+  // 연결 실패
   const handleError = useCallback(
     (error: unknown, connectorId: ConnectorId): void => {
       const normalizedError = error instanceof Error ? error : new Error(String(error));
@@ -357,11 +353,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
         `[connect-kit] connection failed (${connectorId}): ${normalizedError.message}`,
         normalizedError,
       );
-      setQrUriMap((prev) => {
-        const next = { ...prev };
-        delete next[connectorId];
-        return next;
-      });
+      setQrUri(null);
       wc.resetView();
       if (renderConnectError) {
         setErrorState({ connectorId, error: normalizedError });
@@ -401,24 +393,23 @@ 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 && !errorState) return;
-      pendingQrConnectorRef.current = id;
       setSelectedConnector(id);
+      setQrUri(null);
       setErrorState(null);
       wc.resetView();
       writeRecentConnector(id);
@@ -442,7 +433,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     ],
   );
 
-  // 뒤로가기 — QR 캐시는 유지, wagmi만 reset
+  // 뒤로가기
   const handleBack = useCallback((): void => {
     if (errorState) {
       setErrorState(null);
@@ -450,8 +441,8 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
       return;
     }
     if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
-    pendingQrConnectorRef.current = null;
     setSelectedConnector(null);
+    setQrUri(null);
     cancelConnect();
   }, [selectedConnector, errorState, wc.handleBack, cancelConnect]);
 
@@ -487,7 +478,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
       retry: () => {
         const id = errorState.connectorId;
         setErrorState(null);
-        pendingQrConnectorRef.current = id;
+        setQrUri(null);
         cancelConnect();
         triggerConnect(id);
       },
@@ -554,7 +545,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
         />
         <DetailPane
           selectedConnector={selectedConnector}
-          qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
+          qrUri={qrUri}
           hasMetaMaskExtension={hasMetaMaskExtension}
           connectorLogoMap={connectorLogoMap}
           wc={wc}

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,8 +1,6 @@
 export { ConnectModal } from './ConnectModal';
 export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
 export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
-export { creditConnectConnector } from './creditConnectConnector';
-export type { CreditConnectConnectorOptions } from './creditConnectConnector';
 export type {
   ConnectErrorContext,
   ConnectErrorReason,

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/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',