@gluwa/connect-kit 0.1.0-next.3 → 0.2.0-next.10

package/src/creditConnectConnector.ts

@@ -41,6 +41,7 @@ export const creditConnectConnector = (
   let selectedChainId: number | null = null;
   let connectPromise: Promise<boolean> | null = null;
   let provider: CreditConnectProvider | null = null;
+  let providerPromise: Promise<CreditConnectProvider> | null = null;
   let isLocalDisconnect = false;
 
   let emitWagmiMessage: ((type: string, data: unknown) => void) | null = null;
@@ -83,18 +84,35 @@ export const creditConnectConnector = (
     });
 
     manager.on('changeState', (state) => {
+      // eslint-disable-next-line no-console
+      console.log('[CC connector] manager state →', state.status, {
+        hasConnectingPayload: Boolean(state.connectingPayload),
+        hasSession: 'session' in state && Boolean((state as { session?: unknown }).session),
+      });
       if (state.status === 'CONNECTING' && state.connectingPayload) {
+        // eslint-disable-next-line no-console
+        console.log('[CC connector] emit display_uri', {
+          payloadPrefix: state.connectingPayload.slice(0, 80),
+        });
         options.onDisplayUri?.(state.connectingPayload);
         emitWagmiMessage?.('display_uri', state.connectingPayload);
       }
 
       if (state.status === 'DISCONNECTED' && !isLocalDisconnect) {
+        // eslint-disable-next-line no-console
+        console.log('[CC connector] DISCONNECTED (non-local) → resetState + emit');
         resetState();
         emitProviderEvent('disconnect');
         emitWagmiDisconnect?.();
       }
     });
 
+    manager.on('sessionExpired', (payload) => {
+      // eslint-disable-next-line no-console
+      console.log('[CC connector] session expired → emit session_expired', payload);
+      emitWagmiMessage?.('session_expired', payload);
+    });
+
     return manager;
   };
 
@@ -128,6 +146,163 @@ export const creditConnectConnector = (
       config.emitter.emit('disconnect');
     };
 
+    const buildProvider = (): CreditConnectProviderWithEvents => {
+      const createdProvider = {
+        request: async (args) => {
+          const { method, params: rawParams } = args as {
+            method: string;
+            params?: unknown[] | object;
+          };
+          const params = Array.isArray(rawParams)
+            ? [...rawParams]
+            : rawParams === undefined
+              ? []
+              : [rawParams];
+          const session = getCurrentSession();
+
+          const getSelectedAddressInfo = (address?: string) => {
+            if (!session) throw new Error('No active session');
+            const evmInfo = getEvmAddressInfo(session);
+            if (evmInfo.length === 0) throw new Error('No EVM address found');
+            if (!address) return evmInfo[0];
+            const found = evmInfo.find(
+              (info) => info.address.toLowerCase() === address.toLowerCase(),
+            );
+            if (!found) throw new Error(`Address not in session: ${address}`);
+            return found;
+          };
+
+          if (method === 'eth_accounts') {
+            if (!session) return [];
+            return getChecksummedAccounts(session);
+          }
+
+          if (method === 'eth_chainId') {
+            if (!session) throw new Error('No active session');
+            if (selectedChainId !== null) return `0x${selectedChainId.toString(16)}`;
+            const evmInfo = getEvmAddressInfo(session);
+            if (evmInfo.length === 0) throw new Error('No EVM address found');
+            const chainId = Number.parseInt(evmInfo[0].networkIdentifier, 10);
+            if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
+            selectedChainId = chainId;
+            return `0x${chainId.toString(16)}`;
+          }
+
+          if (method === 'wallet_switchEthereumChain') {
+            const [{ chainId: rawChainId }] = (params ?? []) as [{ chainId?: string }];
+            if (!rawChainId) throw new Error('wallet_switchEthereumChain missing chainId param');
+            const chainId = Number.parseInt(rawChainId, 16);
+            if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${rawChainId}`);
+            if (!session) throw new Error('No active session');
+
+            const supported = getEvmAddressInfo(session).some(
+              (info) => Number.parseInt(info.networkIdentifier, 10) === chainId,
+            );
+            if (!supported) {
+              const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
+              err.code = 4902;
+              throw err;
+            }
+            selectedChainId = chainId;
+            config.emitter.emit('change', { chainId });
+            return null;
+          }
+
+          if (method === 'personal_sign') {
+            const [messageParam, addressParam] = (params ?? []) as [unknown, unknown];
+            const message =
+              typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signMessage', {
+              message,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_sign') {
+            const [addressParam, messageParam] = (params ?? []) as [unknown, unknown];
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const message =
+              typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signMessage', {
+              message,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_signTypedData' || method === 'eth_signTypedData_v4') {
+            const [addressParam, typedDataParam] = (params ?? []) as [unknown, unknown];
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const typedData =
+              typeof typedDataParam === 'string'
+                ? typedDataParam
+                : JSON.stringify(typedDataParam ?? '');
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signTypedData', {
+              typedData,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_sendTransaction') {
+            const [txParams] = (params ?? []) as [Record<string, string | undefined>];
+            const addressInfo = getSelectedAddressInfo(txParams?.from);
+            const response = await session?.jsonRpc.request('sendTransaction', {
+              addressInfo,
+              to: txParams?.to,
+              value: txParams?.value,
+              data: txParams?.data,
+              gas: txParams?.gas,
+              gasPrice: txParams?.gasPrice,
+              maxFeePerGas: txParams?.maxFeePerGas,
+              maxPriorityFeePerGas: txParams?.maxPriorityFeePerGas,
+              nonce: txParams?.nonce,
+              chainId: txParams?.chainId,
+            });
+            return response?.txHash;
+          }
+
+          if (method === 'credit_connect_send_message') {
+            if (!session) throw new Error('No active session');
+            const [messageParam] = (params ?? []) as [unknown];
+            const message =
+              typeof messageParam === 'string' ? messageParam : JSON.stringify(messageParam ?? '');
+            await session.msg.sendMessage(message);
+            return true;
+          }
+
+          if (method === 'credit_connect_jsonrpc_ping') {
+            if (!session) throw new Error('No active session');
+            return await session.jsonRpc.request('pingPong', {});
+          }
+
+          throw new Error(`Unsupported provider method: ${method}`);
+        },
+
+        on: (event: string, listener: ProviderListener) => {
+          let listeners = providerListeners.get(event);
+          if (!listeners) {
+            listeners = new Set();
+            providerListeners.set(event, listeners);
+          }
+          listeners.add(listener);
+          return createdProvider;
+        },
+
+        removeListener: (event: string, listener: ProviderListener) => {
+          providerListeners.get(event)?.delete(listener);
+          return createdProvider;
+        },
+      } as CreditConnectProviderWithEvents;
+
+      return createdProvider;
+    };
+
     return {
       id: CONNECTOR_ID,
       name: CONNECTOR_NAME,
@@ -185,32 +360,13 @@ export const creditConnectConnector = (
             });
           }
 
-          if (m.state.status === 'CONNECTING' && m.state.connectingPayload) {
-            options.onDisplayUri?.(m.state.connectingPayload);
-
-            if (!connectPromise) {
-              connectPromise = new Promise<boolean>((resolve) => {
-                const unsub = m.on('changeState', (state) => {
-                  if (state.status === 'CONNECTED') {
-                    unsub();
-                    resolve(true);
-                  } else if (state.status === 'DISCONNECTED') {
-                    unsub();
-                    resolve(false);
-                  }
-                });
-              });
-            }
-          }
-
+          // 새 connect 시도 — stale state (CONNECTING/CONNECTING_WAITING_PAYLOAD) 와
+          // stale connectPromise 는 SDK 의 self-heal (cleanupHub + attempt-id) 에 위임.
+          // connector 는 단순히 새 connectNewSession() 을 호출 — 이전 attempt 는 자연 정리됨.
           if (m.state.status !== 'CONNECTED') {
-            if (!connectPromise) {
-              if (m.state.status !== 'DISCONNECTED') {
-                throw new Error(`Cannot connect from ${m.state.status} state`);
-              }
-              connectPromise = m.connectNewSession();
-            }
-
+            // 이전 attempt 의 await 가 살아있어도, SDK 의 attempt-id 패턴이
+            // 그 결과를 무시하도록 보장한다. connectPromise 는 무조건 새 promise 로.
+            connectPromise = m.connectNewSession();
             const connected = await connectPromise;
             connectPromise = null;
 
@@ -261,11 +417,13 @@ export const creditConnectConnector = (
           throw err;
         }
 
+        const chain = config.chains.find((c) => c.id === chainId);
+        if (!chain) throw new Error(`Chain ${chainId} not in config`);
+
         selectedChainId = chainId;
         config.emitter.emit('change', { chainId });
+        await Promise.resolve();
 
-        const chain = config.chains.find((c) => c.id === chainId);
-        if (!chain) throw new Error(`Chain ${chainId} not in config`);
         return chain;
       },
 
@@ -286,6 +444,7 @@ export const creditConnectConnector = (
           isLocalDisconnect = false;
         }
         provider = null;
+        providerPromise = null;
         resetState();
         config.emitter.emit('disconnect');
       },
@@ -314,165 +473,20 @@ export const creditConnectConnector = (
 
       async getProvider() {
         if (provider) return provider;
-        await ensureManagerInitialized();
-
-        const createdProvider = {
-          request: async (args) => {
-            const { method, params: rawParams } = args as {
-              method: string;
-              params?: unknown[] | object;
-            };
-            const params = Array.isArray(rawParams)
-              ? [...rawParams]
-              : rawParams === undefined
-                ? []
-                : [rawParams];
-            const session = getCurrentSession();
-
-            const getSelectedAddressInfo = (address?: string) => {
-              if (!session) throw new Error('No active session');
-              const evmInfo = getEvmAddressInfo(session);
-              if (evmInfo.length === 0) throw new Error('No EVM address found');
-              if (!address) return evmInfo[0];
-              const found = evmInfo.find(
-                (info) => info.address.toLowerCase() === address.toLowerCase(),
-              );
-              if (!found) throw new Error(`Address not in session: ${address}`);
-              return found;
-            };
-
-            if (method === 'eth_accounts') {
-              if (!session) return [];
-              return getChecksummedAccounts(session);
-            }
+        if (providerPromise) return providerPromise;
 
-            if (method === 'eth_chainId') {
-              if (!session) throw new Error('No active session');
-              if (selectedChainId !== null) return `0x${selectedChainId.toString(16)}`;
-              const evmInfo = getEvmAddressInfo(session);
-              if (evmInfo.length === 0) throw new Error('No EVM address found');
-              const chainId = Number.parseInt(evmInfo[0].networkIdentifier, 10);
-              if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
-              selectedChainId = chainId;
-              return `0x${chainId.toString(16)}`;
-            }
-
-            if (method === 'wallet_switchEthereumChain') {
-              const [{ chainId: rawChainId }] = (params ?? []) as [{ chainId?: string }];
-              if (!rawChainId) throw new Error('wallet_switchEthereumChain missing chainId param');
-              const chainId = Number.parseInt(rawChainId, 16);
-              if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${rawChainId}`);
-              if (!session) throw new Error('No active session');
-
-              const supported = getEvmAddressInfo(session).some(
-                (info) => Number.parseInt(info.networkIdentifier, 10) === chainId,
-              );
-              if (!supported) {
-                const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
-                err.code = 4902;
-                throw err;
-              }
-              selectedChainId = chainId;
-              config.emitter.emit('change', { chainId });
-              return null;
-            }
+        providerPromise = (async (): Promise<CreditConnectProvider> => {
+          await ensureManagerInitialized();
+          const createdProvider = buildProvider();
+          provider = createdProvider;
+          return createdProvider;
+        })();
 
-            if (method === 'personal_sign') {
-              const [messageParam, addressParam] = (params ?? []) as [unknown, unknown];
-              const message =
-                typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signMessage', {
-                message,
-                addressInfo,
-              });
-              return response?.signature;
-            }
-
-            if (method === 'eth_sign') {
-              const [addressParam, messageParam] = (params ?? []) as [unknown, unknown];
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const message =
-                typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signMessage', {
-                message,
-                addressInfo,
-              });
-              return response?.signature;
-            }
-
-            if (method === 'eth_signTypedData' || method === 'eth_signTypedData_v4') {
-              const [addressParam, typedDataParam] = (params ?? []) as [unknown, unknown];
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const typedData =
-                typeof typedDataParam === 'string'
-                  ? typedDataParam
-                  : JSON.stringify(typedDataParam ?? '');
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signTypedData', {
-                typedData,
-                addressInfo,
-              });
-              return response?.signature;
-            }
-
-            if (method === 'eth_sendTransaction') {
-              const [txParams] = (params ?? []) as [Record<string, string | undefined>];
-              const addressInfo = getSelectedAddressInfo(txParams?.from);
-              const response = await session?.jsonRpc.request('sendTransaction', {
-                addressInfo,
-                to: txParams?.to,
-                value: txParams?.value,
-                data: txParams?.data,
-                gas: txParams?.gas,
-                gasPrice: txParams?.gasPrice,
-                maxFeePerGas: txParams?.maxFeePerGas,
-                maxPriorityFeePerGas: txParams?.maxPriorityFeePerGas,
-                nonce: txParams?.nonce,
-                chainId: txParams?.chainId,
-              });
-              return response?.txHash;
-            }
-
-            if (method === 'credit_connect_send_message') {
-              if (!session) throw new Error('No active session');
-              const [messageParam] = (params ?? []) as [unknown];
-              const message =
-                typeof messageParam === 'string'
-                  ? messageParam
-                  : JSON.stringify(messageParam ?? '');
-              await session.msg.sendMessage(message);
-              return true;
-            }
-
-            if (method === 'credit_connect_jsonrpc_ping') {
-              if (!session) throw new Error('No active session');
-              return await session.jsonRpc.request('pingPong', {});
-            }
-
-            throw new Error(`Unsupported provider method: ${method}`);
-          },
-
-          on: (event: string, listener: ProviderListener) => {
-            let listeners = providerListeners.get(event);
-            if (!listeners) {
-              listeners = new Set();
-              providerListeners.set(event, listeners);
-            }
-            listeners.add(listener);
-            return createdProvider;
-          },
-
-          removeListener: (event: string, listener: ProviderListener) => {
-            providerListeners.get(event)?.delete(listener);
-            return createdProvider;
-          },
-        } as CreditConnectProviderWithEvents;
-
-        provider = createdProvider;
-        return provider;
+        try {
+          return await providerPromise;
+        } finally {
+          providerPromise = null;
+        }
       },
 
       onAccountsChanged(accounts) {

package/src/events/account.ts

@@ -0,0 +1,76 @@
+import {
+  watchAccount as wagmiWatchAccount,
+  watchConnections as wagmiWatchConnections,
+  reconnect as wagmiReconnect,
+  connect as wagmiConnect,
+  getAccount as wagmiGetAccount,
+  disconnect as wagmiDisconnect,
+  type WatchAccountParameters,
+  type WatchConnectionsParameters,
+  type ReconnectReturnType,
+} from '@wagmi/core';
+import { getConfig, getKitConfig } from '../core/config';
+
+export const watchAccount = (params: WatchAccountParameters): (() => void) => {
+  return wagmiWatchAccount(getConfig(), params);
+};
+
+export const watchConnections = (params: WatchConnectionsParameters): (() => void) => {
+  return wagmiWatchConnections(getConfig(), params);
+};
+
+export const reconnect = async (): Promise<ReconnectReturnType> => {
+  const config = getConfig();
+
+  if (getKitConfig().autoConnectInjected !== false) {
+    try {
+      const injected = config.connectors.find((connector) => connector.type === 'injected');
+      if (injected) {
+        const provider = (await injected.getProvider()) as
+          | { request?: (args: { method: string }) => Promise<unknown> }
+          | undefined;
+        const accounts = provider?.request
+          ? await provider.request({ method: 'eth_accounts' })
+          : [];
+        if (Array.isArray(accounts) && accounts.length > 0) {
+          await wagmiConnect(config, { connector: injected });
+        }
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn('injected auto-connect skipped (non-fatal):', error);
+    }
+  }
+
+  if (wagmiGetAccount(config).status === 'connected') {
+    return [];
+  }
+  return wagmiReconnect(config);
+};
+
+export const disconnectAll = async (
+  onLog?: (message: string, error?: Error) => void,
+): Promise<void> => {
+  const config = getConfig();
+  const results = await Promise.allSettled(
+    config.connectors.map((connector) =>
+      wagmiDisconnect(config, { connector }).then(() => connector.id),
+    ),
+  );
+
+  const errors: Array<{ connectorId: string; error: Error }> = [];
+  results.forEach((result, idx) => {
+    if (result.status === 'rejected') {
+      const error =
+        result.reason instanceof Error ? result.reason : new Error(String(result.reason));
+      const connectorId = config.connectors[idx].id;
+      errors.push({ connectorId, error });
+      onLog?.(`[connect-kit] disconnect failed for "${connectorId}": ${error.message}`, error);
+    }
+  });
+
+  if (errors.length === config.connectors.length && errors.length > 0) {
+    const messages = errors.map((e) => `${e.connectorId}: ${e.error.message}`).join('; ');
+    throw new Error(`All disconnects failed — ${messages}`);
+  }
+};

package/src/hooks/useConnectBanner.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ConnectBanner, ConnectBannerSiteKey } from '../types';
+
+interface ConnectBannersResponse {
+  banners: ConnectBanner[];
+}
+
+interface UseConnectBannerParams {
+  open: boolean;
+  siteKey: ConnectBannerSiteKey;
+  url: string;
+}
+
+interface UseConnectBannerResult {
+  banner: ConnectBanner | null;
+  loading: boolean;
+}
+
+const pickRandomBanner = (banners: ConnectBanner[]): ConnectBanner | null =>
+  banners[Math.floor(Math.random() * banners.length)] ?? null;
+
+export const useConnectBanner = ({
+  open,
+  siteKey,
+  url,
+}: UseConnectBannerParams): UseConnectBannerResult => {
+  const [candidates, setCandidates] = useState<ConnectBanner[]>([]);
+  const [banner, setBanner] = useState<ConnectBanner | null>(null);
+  const [loading, setLoading] = useState(true);
+  const wasOpenRef = useRef(open);
+
+  useEffect(() => {
+    if (!url) {
+      setCandidates([]);
+      setBanner(null);
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    setCandidates([]);
+    setBanner(null);
+    setLoading(true);
+
+    fetch(url, { signal: controller.signal })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`Failed to fetch connect banners: ${response.status}`);
+        return (await response.json()) as ConnectBannersResponse;
+      })
+      .then(({ banners }) => {
+        if (controller.signal.aborted) return;
+        if (!Array.isArray(banners)) {
+          setLoading(false);
+          return;
+        }
+
+        const nextCandidates = banners.filter((item) => item.siteKey !== siteKey);
+        setCandidates(nextCandidates);
+        setBanner(pickRandomBanner(nextCandidates));
+        setLoading(false);
+      })
+      .catch(() => {
+        // API 실패 시 기존 Idle placeholder를 유지한다.
+        if (!controller.signal.aborted) setLoading(false);
+      });
+
+    return () => controller.abort();
+  }, [siteKey, url]);
+
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = open;
+
+    // 닫힌 dialog 안에서 다음 배너 이미지를 미리 렌더링한다.
+    if (wasOpen && !open) setBanner(pickRandomBanner(candidates));
+  }, [candidates, open]);
+
+  return { banner, loading };
+};