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

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.0",
+  "version": "0.1.0-next.2",
   "type": "module",
   "exports": {
     ".": {
@@ -48,7 +48,9 @@
   },
   "peerDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
+    "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
+    "viem": ">=2.0.0",
     "wagmi": ">=2.0.0"
   },
   "peerDependenciesMeta": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.0",
+  "version": "0.1.0-next.2",
   "type": "module",
   "exports": {
     ".": {
@@ -32,7 +32,9 @@
     "@gluwa/credit-connect-sdk": "0.2.0-next.1"
   },
   "peerDependencies": {
+    "@wagmi/core": ">=2.0.0",
     "react": "^18.0.0 || ^19.0.0",
+    "viem": ">=2.0.0",
     "wagmi": ">=2.0.0",
     "@gluwa/credit-connect-sdk": "0.2.0-next.1"
   },

package/src/ConnectKitProvider.tsx

@@ -0,0 +1,169 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react';
+import { useAccount, useDisconnect } from 'wagmi';
+import { ConnectModal } from './ConnectModal';
+import type { ConnectErrorContext, ConnectResult, ConnectorId, Connectors } from './types';
+
+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;
+}
+
+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> = ({
+  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 ────────────────────────────────────────