@gluwa/connect-kit 0.2.0-next.9 → 0.2.1-next.4

package/src/components/toast/style.scss

@@ -0,0 +1,108 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-toast-stack {
+  position: fixed;
+  top: clamp(20px, 9.2vh, 99px);
+  left: 50%;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100vw - 40px);
+  transform: translateX(-50%);
+
+  @include tablet {
+    top: clamp(
+      calc(env(safe-area-inset-top, 0px) + 20px),
+      calc(env(safe-area-inset-top, 0px) + 20px),
+      calc(env(safe-area-inset-top, 0px) + 20px)
+    );
+    left: 20px;
+    right: 20px;
+    align-items: stretch;
+    max-width: none;
+    transform: none;
+  }
+}
+
+.ck-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: max-content;
+  min-width: min(400px, calc(100vw - 40px));
+  max-width: 100%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: var(--semantic-paper-sheet);
+  border: 1px solid var(--semantic-divider-divider-1);
+  animation: ck-toast-in 0.2s ease;
+
+  @include tablet {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+@keyframes ck-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ck-toast-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @include tablet {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.ck-toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ck-toast-icon--success {
+  color: var(--semantic-information-success);
+}
+
+.ck-toast-icon--warning {
+  color: var(--semantic-information-caution);
+}
+
+.ck-toast-message {
+  @include textToken('body3-l1-medium');
+  color: var(--scale-gray-900);
+  white-space: nowrap;
+
+  @include tablet {
+    flex: 1;
+    min-width: 0;
+    white-space: normal;
+  }
+}
+
+.ck-root .ck-toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--scale-gray-700);
+  cursor: pointer;
+}

package/src/core/config.ts

@@ -1,5 +1,7 @@
 import { createConfig, createStorage } from 'wagmi';
 import { metaMask, walletConnect, injected } from 'wagmi/connectors';
+import { hasInjectedMobileProvider } from '../utils/platform';
+import { markDeeplinkOpened } from './deeplinkSignal';
 import type { Config } from 'wagmi';
 import type { ConnectKitConfig } from '../types';
 import { creditConnectConnector } from '../creditConnectConnector';
@@ -44,11 +46,26 @@ export const initConfig = (kitConfig: ConnectKitConfig): Config => {
     connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: false }));
   }
 
+  // MetaMask는 metaMaskSDK 커넥터 하나로만 연결한다.
+  // generic injected 커넥터를 함께 두면 같은 window.ethereum에 이중 바인딩되어
+  // wagmi connections 가 2개가 되고, dApp의 다중연결 감지 로직이 오작동한다.
   connectors.push(
-    metaMask({ headless: true, storage: { enabled: true } }),
-    injected({ shimDisconnect: false }),
+    metaMask({
+      headless: true,
+      useDeeplink: true,
+      storage: { enabled: true },
+      openDeeplink: (url) => {
+        markDeeplinkOpened();
+        window.location.replace(url);
+      },
+    }),
   );
 
+  // 인앱 지갑 웹뷰(모바일 + 호스트 window.ethereum 주입)
+  if (hasInjectedMobileProvider()) {
+    connectors.push(injected({ shimDisconnect: false }));
+  }
+
   if (kitConfig.creditConnect) {
     connectors.push(
       creditConnectConnector({
@@ -73,6 +90,10 @@ export const initConfig = (kitConfig: ConnectKitConfig): Config => {
     connectors,
     transports: kitConfig.transports,
     storage: isBrowser ? createStorage({ storage: window.localStorage }) : undefined,
+    // EIP-6963 자동 탐지 비활성화: 켜두면 MetaMask 가 io.metamask(type='injected')로
+    // 다시 발견되어 metaMaskSDK 와 이중 커넥터가 되고 connections 가 2개로 잡힌다.
+    // MetaMask 는 위 metaMaskSDK 커넥터로만 붙이므로 탐지가 필요 없다.
+    multiInjectedProviderDiscovery: false,
   });
   slot.kitConfig = kitConfig;
 

package/src/core/deeplinkSignal.ts

@@ -0,0 +1,25 @@
+type Signal = { opened: boolean };
+
+const SIGNAL_KEY = Symbol.for('@gluwa/connect-kit:deeplink-signal');
+
+type GlobalWithSignal = typeof globalThis & {
+  [SIGNAL_KEY]?: Signal;
+};
+
+const getSignal = (): Signal => {
+  const g = globalThis as GlobalWithSignal;
+  if (!g[SIGNAL_KEY]) {
+    g[SIGNAL_KEY] = { opened: false };
+  }
+  return g[SIGNAL_KEY];
+};
+
+export const resetDeeplinkSignal = (): void => {
+  getSignal().opened = false;
+};
+
+export const markDeeplinkOpened = (): void => {
+  getSignal().opened = true;
+};
+
+export const hasDeeplinkOpened = (): boolean => getSignal().opened;

package/src/creditConnectConnector.ts

@@ -29,7 +29,10 @@ const CONNECTOR_TYPE = 'credit-connect';
 const castConnectResult = <withCapabilities extends boolean>(value: unknown) =>
   value as {
     accounts: withCapabilities extends true
-      ? ReadonlyArray<{ address: Address; capabilities: Record<string, unknown> }>
+      ? ReadonlyArray<{
+          address: Address;
+          capabilities: Record<string, unknown>;
+        }>
       : readonly Address[];
     chainId: number;
   };
@@ -92,7 +95,7 @@ export const creditConnectConnector = (
       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),
+          ready: true,
         });
         options.onDisplayUri?.(state.connectingPayload);
         emitWagmiMessage?.('display_uri', state.connectingPayload);
@@ -109,7 +112,9 @@ export const creditConnectConnector = (
 
     manager.on('sessionExpired', (payload) => {
       // eslint-disable-next-line no-console
-      console.log('[CC connector] session expired → emit session_expired', payload);
+      console.log('[CC connector] session expired → emit session_expired', {
+        reason: payload.reason,
+      });
       emitWagmiMessage?.('session_expired', payload);
     });
 
@@ -318,7 +323,10 @@ export const creditConnectConnector = (
         withCapabilities?: withCapabilities | boolean;
       }): Promise<{
         accounts: withCapabilities extends true
-          ? ReadonlyArray<{ address: Address; capabilities: Record<string, unknown> }>
+          ? ReadonlyArray<{
+              address: Address;
+              capabilities: Record<string, unknown>;
+            }>
           : readonly Address[];
         chainId: number;
       }> {
@@ -412,7 +420,9 @@ export const creditConnectConnector = (
         );
 
         if (!supported) {
-          const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
+          const err = new Error(`Unsupported chain: ${chainId}`) as Error & {
+            code?: number;
+          };
           err.code = 4902;
           throw err;
         }

package/src/events/account.ts

@@ -1,51 +1,48 @@
 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
+      // 자동 재연결
+      // 인앱 지갑 웹뷰: 호스트 주입 provider 는 injected 커넥터로만
+      const injectedConnector = config.connectors.find(
+        (connector) => connector.type === 'injected',
+      );
+      const metaMaskConnector = config.connectors.find(
+        (connector) => connector.id === 'metaMaskSDK',
+      );
+      const target = injectedConnector ?? metaMaskConnector;
+      if (target) {
+        const provider = (await target.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 });
+          await wagmiConnect(config, { connector: target });
         }
       }
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.warn('injected auto-connect skipped (non-fatal):', error);
+      console.warn('auto-connect skipped (non-fatal):', error);
     }
   }
 
   if (wagmiGetAccount(config).status === 'connected') {
     return [];
   }
-  return wagmiReconnect(config);
+  const result = await wagmiReconnect(config);
+  return result;
 };
 
 export const disconnectAll = async (

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 };
+};

package/src/hooks/useConnectTimeout.ts

@@ -3,16 +3,19 @@ import { type ConnectorId } from '../types';
 
 // MM / CC 폴백용 기본 타임아웃. (CC 는 원칙적으로 서버 push 로 만료가 오지만,
 // 서버 값이 없거나 신호가 유실된 경우를 대비한 폴백 용도로도 쓸 수 있음.)
-export const DEFAULT_CONNECT_TIMEOUT_MS = 600_000;
+export const DEFAULT_CONNECT_TIMEOUT_MS = 300_000;
 
 interface UseConnectTimeoutParams {
   /** 현재 연결 시도 중인 커넥터. null = 유휴 상태. */
   connectorId: ConnectorId | null;
   /** 타임아웃 감시 활성화 여부 — pending/QR 표시 중일 때 true. */
   active: boolean;
+  /** Wagmi connect promise가 실제로 대기 중인지 여부. */
+  isConnecting: boolean;
   /**
-   * 외부 이벤트 기반 만료 신호 (MM 제외). 값이 증가할 때마다 "만료 발생" 으로 간주.
+   * 외부 이벤트 기반 실패/만료 신호. 값이 증가할 때마다 연결 실패로 간주.
    * - CC: dialog 가 connector 의 `session_expired`(서버 push) 를 받아 올림.
+   * - MM: connect promise reject.
    * - WC: dialog 가 WC connect promise reject(프로토콜 ~5분 만료 등) 를 받아 올림.
    */
   expiredSignal?: number;
@@ -23,6 +26,8 @@ interface UseConnectTimeoutParams {
 interface UseConnectTimeoutResult {
   /** 타임아웃 발생 여부 — true 면 dialog 가 <Timeout> 을 렌더. */
   timedOut: boolean;
+  /** 다른 지갑 연결을 시작하기 전에 이전 타임아웃 상태를 즉시 초기화. */
+  reset: () => void;
   /** "Try Again" 버튼에 연결할 함수 — 상태 리셋 + onRetry 실행. */
   retry: () => void;
 }
@@ -36,6 +41,7 @@ interface UseConnectTimeoutResult {
 export const useConnectTimeout = ({
   connectorId,
   active,
+  isConnecting,
   expiredSignal = 0,
   onRetry,
 }: UseConnectTimeoutParams): UseConnectTimeoutResult => {
@@ -54,16 +60,18 @@ export const useConnectTimeout = ({
   // MM 만 client 타이머로 강제 (승인 대기에 네이티브 상한이 없음).
   // CC(서버 push) / WC(connect reject) 는 아래 expiredSignal effect 에서 처리.
   useEffect(() => {
-    if (!active || connectorId !== 'METAMASK') return;
-    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    if (!active || !isConnecting || connectorId !== 'METAMASK') return;
+    const timer = setTimeout(() => {
+      fire();
+    }, DEFAULT_CONNECT_TIMEOUT_MS);
     return () => clearTimeout(timer);
-  }, [active, connectorId, fire]);
+  }, [active, isConnecting, connectorId, fire]);
 
-  // 외부 만료 신호 처리 (CC 서버 push / WC connect reject) — MM 은 client 타이머라 제외.
+  // 외부 실패/만료 신호 처리 (CC 서버 push / MM·WC connect reject).
   // signal 값이 올라가면(새 만료 이벤트) 발화.
   const prevSignal = useRef(expiredSignal);
   useEffect(() => {
-    if (!active || connectorId === 'METAMASK' || !connectorId) {
+    if (!active || !connectorId) {
       prevSignal.current = expiredSignal;
       return;
     }
@@ -76,7 +84,11 @@ export const useConnectTimeout = ({
   const retry = useCallback(() => {
     setTimedOut(false);
     onRetry?.();
-  }, [onRetry]);
+  }, [connectorId, onRetry]);
+
+  const reset = useCallback(() => {
+    setTimedOut(false);
+  }, []);
 
-  return { timedOut, retry };
+  return { timedOut, reset, retry };
 };

package/src/hooks/useMetaMaskExtension.ts

@@ -13,7 +13,8 @@ export const useMetaMaskExtension = (): boolean => {
 
   useEffect(() => {
     const handleAnnouncement = (event: Event): void => {
-      if (isMetaMaskAnnouncement(event)) setIsInstalled(true);
+      const isMetaMask = isMetaMaskAnnouncement(event);
+      if (isMetaMask) setIsInstalled(true);
     };
 
     // 응답 listener를 먼저 등록한 뒤 설치된 provider 목록을 요청.

package/src/hooks/useWCState.ts

@@ -11,7 +11,10 @@ const sortCreditWalletFirst = (list: WCWallet[]): WCWallet[] =>
     return 0;
   });
 
-const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promise<WCWallet[]> => {
+const fetchWCWalletList = async (
+  projectId: string,
+  signal: AbortSignal | undefined,
+): Promise<WCWallet[]> => {
   // WC Explorer API 가 page 경계에서 같은 wallet 을 중복 emit 하는 케이스 관찰됨
   // (paginate 사이 sort/dedup 보장 X). id 기준 first-write-wins dedup.
   const byId = new Map<string, WCWallet>();
@@ -106,7 +109,9 @@ export const useWCState = (): WCState => {
   }, []);
 
   const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
-    if (loadedRef.current) return;
+    if (loadedRef.current) {
+      return;
+    }
     loadedRef.current = true;
     const controller = new AbortController();
     abortControllerRef.current = controller;

package/src/hooks/useWagmiConnect.ts

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useCallback } from 'react';
 import { useConnect, useConfig } from 'wagmi';
+import { getAccount } from '@wagmi/core';
 import type { ConnectorId, ConnectResult } from '../types';
+import { resolveConnectorId } from '../connector-meta';
+import { resetDeeplinkSignal } from '../core/deeplinkSignal';
 
 type WagmiConnectorLike = {
   id: string;
@@ -73,6 +76,7 @@ export const useWagmiConnect = ({
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
+  const pendingAttemptId = useRef<string | null>(null);
   const attemptCounter = useRef(0);
 
   const onConnectRef = useRef(onConnect);
@@ -89,17 +93,27 @@ export const useWagmiConnect = ({
   const { connectAsync, reset, isPending } = useConnect();
 
   useEffect(() => {
-    const handler = (data: unknown): void => {
-      const msg = data as { type?: string; data?: unknown };
-      if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
-        onQrUriRef.current(msg.data);
-      }
-      if (msg?.type === 'session_expired') {
-        onSessionExpiredRef.current?.();
-      }
-    };
-
     const unsubscribers = config.connectors.map((connector) => {
+      const emitterConnectorId = resolveConnectorId(connector.id);
+      const handler = (data: unknown): void => {
+        const msg = data as { type?: string; data?: unknown };
+        const pendingId = pendingConnectorId.current;
+        const belongsToPendingAttempt =
+          pendingId !== null && emitterConnectorId !== null && pendingId === emitterConnectorId;
+
+        if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
+          if (!belongsToPendingAttempt) {
+            return;
+          }
+          onQrUriRef.current(msg.data);
+        }
+        if (msg?.type === 'session_expired') {
+          if (pendingId !== null && !belongsToPendingAttempt) {
+            return;
+          }
+          onSessionExpiredRef.current?.();
+        }
+      };
       connector.emitter.on('message', handler);
       return (): void => {
         connector.emitter.off('message', handler);
@@ -117,26 +131,38 @@ export const useWagmiConnect = ({
     (connectorId: ConnectorId): void => {
       const connector = resolveWagmiConnector(config.connectors, connectorId);
       if (!connector) {
+        pendingAttemptId.current = null;
         onErrorRef.current(new Error(`No wagmi connector found for ${connectorId}`), connectorId);
         return;
       }
 
       onQrUriRef.current(null);
+      resetDeeplinkSignal();
       const attemptId = ++attemptCounter.current;
       pendingConnectorId.current = connectorId;
       connectAsync({ connector })
         .then((result) => {
-          if (attemptCounter.current !== attemptId) return;
-          const address = result.accounts?.[0];
+          if (attemptCounter.current !== attemptId) {
+            return;
+          }
+          // connectAsync 의 resolve 값에 계정이 비어 오는 경우가 있다 (MetaMask 모바일에서
+          // authorized 직후 accounts 채워짐이 한 tick 늦는 race). 그때도 wagmi 스토어에는
+          // 이미 주소가 들어와 있으므로 '연결됐는가'의 원본인 스토어를 fallback 으로 쓴다.
+          // 이 fallback 이 없으면 성공한 연결 위에 실패/타임아웃 화면이 덮인다.
+          const address = result.accounts?.[0] ?? getAccount(config).address;
           if (!address) {
             throw new Error('Connected but no account returned');
           }
           pendingConnectorId.current = null;
+          pendingAttemptId.current = null;
           onConnectRef.current({ address, connectorId });
         })
         .catch((error) => {
-          if (attemptCounter.current !== attemptId) return;
+          if (attemptCounter.current !== attemptId) {
+            return;
+          }
           pendingConnectorId.current = null;
+          pendingAttemptId.current = null;
           onErrorRef.current(error as Error, connectorId);
         });
     },
@@ -146,9 +172,10 @@ export const useWagmiConnect = ({
   const cancelConnect = useCallback((): void => {
     attemptCounter.current += 1;
     pendingConnectorId.current = null;
+    pendingAttemptId.current = null;
     onQrUriRef.current(null);
     reset();
-  }, [reset]);
+  }, [isPending, reset]);
 
   return { triggerConnect, cancelConnect, isConnecting: isPending };
 };

package/src/index.ts

@@ -1,10 +1,7 @@
-import { readContract, writeContract } from './api/contract';
-import { getBalance } from './api/balance';
-import { switchChain, getPublicClient } from './api/chain';
-import { waitForTransactionReceipt } from './api/transaction';
-import { getAccount, signMessage, signTypedData } from './api/account';
-import { watchAsset } from './api/asset';
-import { watchAccount, watchConnections, reconnect, disconnectAll } from './events/account';
+import * as actions from '@wagmi/core/actions';
+import * as wrappers from './api/wrappers';
+import { reconnect, disconnectAll } from './events/account';
+import { getConfig } from './core/config';
 
 export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
 export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
@@ -14,6 +11,7 @@ export { initConfig } from './core/config';
 export type {
   ConnectErrorContext,
   ConnectErrorReason,
+  ConnectBannerSiteKey,
   ConnectModalProps,
   ConnectKitConfig,
   ConnectKitTheme,
@@ -25,25 +23,32 @@ export type {
   WCWallet,
 } from './types';
 
-export const connectKit = {
-  api: {
-    readContract,
-    writeContract,
-    getBalance,
-    switchChain,
-    getPublicClient,
-    waitForTransactionReceipt,
-    getAccount,
-    signMessage,
-    signTypedData,
-    watchAsset,
-  },
-  events: {
-    watchAccount,
-    watchConnections,
+type StripConfig<T> = T extends (config: any, ...rest: infer A) => infer R
+  ? (...rest: A) => R
+  : never;
+
+type Bridge = { [K in keyof typeof actions]: StripConfig<(typeof actions)[K]> };
+
+const bridged = Object.fromEntries(
+  Object.entries(actions).map(([name, fn]) => [
+    name,
+    (...args: unknown[]) => (fn as (...a: unknown[]) => unknown)(getConfig(), ...args),
+  ]),
+) as Bridge;
+
+type KitActions = Omit<Bridge, keyof typeof wrappers | 'reconnect' | 'disconnectAll'> &
+  typeof wrappers & {
+    reconnect: typeof reconnect;
+    disconnectAll: typeof disconnectAll;
+  };
+
+export const connectKit: { readonly actions: KitActions } = {
+  actions: {
+    ...bridged,
+    ...wrappers,
     reconnect,
     disconnectAll,
   },
-} as const;
+};
 
 export type * from '@wagmi/core';