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

package/dist/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.1",
+  "version": "0.1.0-next.3",
   "type": "module",
   "exports": {
     ".": {
       "default": "./src/index.ts"
     },
+    "./credit-connect": {
+      "default": "./src/credit-connect.ts"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -17,6 +20,10 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       },
+      "./credit-connect": {
+        "types": "./dist/credit-connect.d.ts",
+        "default": "./dist/credit-connect.js"
+      },
       "./index.css": "./dist/index.css"
     }
   },
@@ -35,6 +42,7 @@
   },
   "devDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
+    "@tanstack/react-query": "^5.62.0",
     "@types/react": "catalog:react18",
     "@wagmi/core": "^2.16.7",
     "esbuild-sass-plugin": "^3.7.0",
@@ -48,6 +56,7 @@
   },
   "peerDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
+    "@tanstack/react-query": ">=5.0.0",
     "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "viem": ">=2.0.0",
@@ -56,6 +65,9 @@
   "peerDependenciesMeta": {
     "@gluwa/credit-connect-sdk": {
       "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
     }
   },
   "repository": {

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.1",
+  "version": "0.1.0-next.3",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./credit-connect": {
+      "types": "./dist/credit-connect.d.ts",
+      "default": "./dist/credit-connect.js"
+    },
     "./index.css": "./dist/index.css"
   },
   "publishConfig": {
@@ -19,6 +23,7 @@
     "qrcode.react": "^3.2.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.62.0",
     "@types/react": "^18.3.18",
     "@wagmi/core": "^2.16.7",
     "esbuild-sass-plugin": "^3.7.0",
@@ -32,6 +37,7 @@
     "@gluwa/credit-connect-sdk": "0.2.0-next.1"
   },
   "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
     "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "viem": ">=2.0.0",
@@ -41,6 +47,9 @@
   "peerDependenciesMeta": {
     "@gluwa/credit-connect-sdk": {
       "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
     }
   },
   "repository": {

package/src/ConnectKitProvider.tsx

@@ -0,0 +1,198 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react';
+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;
+  wcProjectId?: string;
+  /**
+   * 연결돼 있는 동안 강제할 체인 ID. 다른 체인에 연결돼 있으면
+   * 자동으로 스위치 모달이 떠서 사용자에게 전환 또는 disconnect를 요구.
+   */
+  requiredChainId?: number;
+  /**
+   * 연결이 정상적으로 끝나고(체인 검증까지 통과) "사용 가능한 상태"가 됐을 때 한 번 호출.
+   * 재연결(reconnect)에서는 호출되지 않음 — 그쪽은 dApp의 watchAccount 책임.
+   */
+  onConnect?: (result: ConnectResult) => void;
+  onLog?: (message: string, error?: Error) => void;
+  /**
+   * 연결 실패(거절/미설치/기타) 시 모달 안에 표시할 fallback UI를 dApp이 직접 그리고 싶을 때.
+   * 미제공 시 기본 동작은 selector로 복귀.
+   */
+  renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
+  /**
+   * 기존 프로젝트 통합용. wagmi config를 넘기면 ConnectKitProvider 내부에서
+   * WagmiProvider를 직접 세운다.
+   *
+   * - 기존 프로젝트: 앱에 WagmiProvider가 없으므로 wagmiConfig를 넘긴다.
+   *   ConnectKitProvider가 같은 config 인스턴스로 WagmiProvider를 셀프 마운트하므로
+   *   기존 wagmi 상태 store와 단일 config를 공유한다.
+   * - 신규 프로젝트: 앱이 이미 WagmiProvider를 감싸므로 이 prop은 불필요하다.
+   */
+  wagmiConfig?: Config;
+}
+
+export interface ConnectKitContextValue {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  isConnected: boolean;
+  address: `0x${string}` | undefined;
+  connectorId: ConnectorId | null;
+  disconnect: () => Promise<void>;
+}
+
+const ConnectKitContext = createContext<ConnectKitContextValue | null>(null);
+
+const resolveConnectorId = (wagmiConnectorId: string | undefined): ConnectorId | null => {
+  if (!wagmiConnectorId) return null;
+  if (wagmiConnectorId === 'credit-connect') return 'CREDIT_CONNECT';
+  if (wagmiConnectorId === 'walletConnect') return 'WALLET_CONNECT';
+  const lower = wagmiConnectorId.toLowerCase();
+  if (lower.includes('metamask') || wagmiConnectorId === 'injected') return 'METAMASK';
+  if (lower.includes('walletconnect')) return 'WALLET_CONNECT';
+  return null;
+};
+
+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,
+  requiredChainId,
+  onConnect,
+  onLog,
+  renderConnectError,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingResult, setPendingResult] = useState<ConnectResult | null>(null);
+
+  const account = useAccount();
+  const { disconnectAsync } = useDisconnect();
+
+  // dApp의 onConnect는 ref로 잡아 effect 재실행 노이즈 차단
+  const onConnectRef = useRef(onConnect);
+  useEffect(() => {
+    onConnectRef.current = onConnect;
+  }, [onConnect]);
+
+  // chain mismatch invariant: 연결돼 있지만 요구 체인이 아니면 modal force-open
+  const chainMismatch =
+    requiredChainId != null &&
+    account.status === 'connected' &&
+    account.chainId != null &&
+    account.chainId !== requiredChainId;
+
+  const effectiveOpen = isOpen || chainMismatch;
+
+  const open = useCallback((): void => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback((): void => {
+    setIsOpen(false);
+  }, []);
+
+  const disconnect = useCallback(async (): Promise<void> => {
+    await disconnectAsync();
+  }, [disconnectAsync]);
+
+  // ConnectModal → Provider: 연결 결과를 일단 보류했다가
+  // chain 검증까지 통과한 후에만 dApp으로 forward
+  const handleModalConnect = useCallback((result: ConnectResult): void => {
+    setPendingResult(result);
+  }, []);
+
+  // pendingResult가 있고, 연결 + chain 매칭이 충족되면 dApp으로 발화
+  useEffect(() => {
+    if (!pendingResult) return;
+    if (account.status !== 'connected') {
+      // 연결이 끊겼거나 진행 중 — pending 폐기
+      setPendingResult(null);
+      return;
+    }
+    if (requiredChainId != null && account.chainId !== requiredChainId) {
+      // chain 아직 안 맞음 — switch 후 다시 평가
+      return;
+    }
+    onConnectRef.current?.(pendingResult);
+    setPendingResult(null);
+    setIsOpen(false);
+  }, [pendingResult, account.status, account.chainId, requiredChainId]);
+
+  const value = useMemo<ConnectKitContextValue>(
+    () => ({
+      isOpen: effectiveOpen,
+      open,
+      close,
+      isConnected: account.status === 'connected',
+      address: account.address,
+      connectorId: resolveConnectorId(account.connector?.id),
+      disconnect,
+    }),
+    [
+      effectiveOpen,
+      open,
+      close,
+      account.status,
+      account.address,
+      account.connector?.id,
+      disconnect,
+    ],
+  );
+
+  return (
+    <ConnectKitContext.Provider value={value}>
+      {children}
+      <ConnectModal
+        open={effectiveOpen}
+        connectors={connectors}
+        wcProjectId={wcProjectId}
+        requiredChainId={requiredChainId}
+        renderConnectError={renderConnectError}
+        onConnect={handleModalConnect}
+        onClose={close}
+        onLog={onLog}
+      />
+    </ConnectKitContext.Provider>
+  );
+};
+
+export const useConnectKit = (): ConnectKitContextValue => {
+  const ctx = useContext(ConnectKitContext);
+  if (!ctx) {
+    throw new Error('useConnectKit must be used within a ConnectKitProvider');
+  }
+  return ctx;
+};

package/src/ConnectModal.scss

@@ -140,6 +140,44 @@
   &:hover {
     background: rgba(255, 255, 255, 0.22);
   }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.ck-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.75);
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+
+  &:hover {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+}
+
+.ck-view__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  margin-top: 16px;
+}
+
+.ck-view__caption--error {
+  color: #ff8080;
+  margin-top: 8px;
 }
 
 // ── Connector list ────────────────────────────────────────
@@ -482,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;
 }