@gluwa/connect-kit 0.1.0-next.2 → 0.2.0-next.1

package/src/components/QRFrame.tsx

@@ -14,7 +14,7 @@ export const QRFrame: FC<QRFrameProps> = ({ qrUri, logoUrl }) => (
         size={196}
         level="H"
         imageSettings={
-          logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
+          logoUrl ? { src: logoUrl, width: 50, height: 50, excavate: true } : undefined
         }
       />
     ) : (
@@ -34,7 +34,7 @@ export const CopyLinkButton: FC<CopyLinkButtonProps> = ({ qrUri }) => {
       type="button"
       className="ck-copy-link"
       onClick={() => {
-        navigator.clipboard.writeText(qrUri);
+        navigator.clipboard?.writeText(qrUri).catch(() => {});
       }}
     >
       Copy link

package/src/core/config.ts

@@ -0,0 +1,83 @@
+import { createConfig, createStorage } from 'wagmi';
+import { metaMask, walletConnect, injected } from 'wagmi/connectors';
+import type { Config } from 'wagmi';
+import type { ConnectKitConfig } from '../types';
+
+type KitSlot = {
+  config: Config | null;
+  kitConfig: ConnectKitConfig | null;
+};
+
+const SLOT_KEY = Symbol.for('@gluwa/connect-kit:slot');
+
+type GlobalWithSlot = typeof globalThis & {
+  [SLOT_KEY]?: KitSlot;
+};
+
+const getSlot = (): KitSlot => {
+  const g = globalThis as GlobalWithSlot;
+  if (!g[SLOT_KEY]) {
+    g[SLOT_KEY] = { config: null, kitConfig: null };
+  }
+  return g[SLOT_KEY];
+};
+
+export const initConfig = (kitConfig: ConnectKitConfig): Config => {
+  const slot = getSlot();
+  if (slot.config) {
+    if (slot.kitConfig !== kitConfig) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[connect-kit] initConfig called again with a different kitConfig — new chains/transports ignored. Call resetConfig() first to re-init.',
+      );
+    }
+    return slot.config;
+  }
+
+  const connectors = [];
+
+  if (kitConfig.wcProjectId) {
+    connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: false }));
+  }
+
+  connectors.push(metaMask({ storage: { enabled: true } }), injected({ shimDisconnect: false }));
+
+  if (kitConfig.extraConnectors?.length) {
+    connectors.push(...kitConfig.extraConnectors);
+  }
+
+  const isBrowser = typeof window !== 'undefined';
+
+  slot.config = createConfig({
+    ssr: true,
+    chains: kitConfig.chains,
+    connectors,
+    transports: kitConfig.transports,
+    storage: isBrowser ? createStorage({ storage: window.localStorage }) : undefined,
+  });
+  slot.kitConfig = kitConfig;
+
+  return slot.config;
+};
+
+export const getConfig = (): Config => {
+  const slot = getSlot();
+  if (!slot.config) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.config;
+};
+
+export const getKitConfig = (): ConnectKitConfig => {
+  const slot = getSlot();
+  if (!slot.kitConfig) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.kitConfig;
+};
+
+export const resetConfig = (): void => {
+  const slot = getSlot();
+  slot.config = null;
+  slot.kitConfig = null;
+};

package/src/credit-connect.ts

@@ -0,0 +1,2 @@
+export { creditConnectConnector } from './creditConnectConnector';
+export type { CreditConnectConnectorOptions } from './creditConnectConnector';

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;
@@ -128,6 +129,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,
@@ -261,11 +419,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;
       },
 
@@ -285,6 +445,8 @@ export const creditConnectConnector = (
         } finally {
           isLocalDisconnect = false;
         }
+        provider = null;
+        providerPromise = null;
         resetState();
         config.emitter.emit('disconnect');
       },
@@ -313,165 +475,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 (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 (providerPromise) return providerPromise;
 
-            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;
-            }
+        providerPromise = (async (): Promise<CreditConnectProvider> => {
+          await ensureManagerInitialized();
+          const createdProvider = buildProvider();
+          provider = createdProvider;
+          return createdProvider;
+        })();
 
-            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,49 @@
+import {
+  watchAccount as wagmiWatchAccount,
+  watchConnections as wagmiWatchConnections,
+  reconnect as wagmiReconnect,
+  disconnect as wagmiDisconnect,
+  type WatchAccountParameters,
+  type WatchConnectionsParameters,
+  type ReconnectReturnType,
+} from '@wagmi/core';
+import { getConfig } 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 = (): Promise<ReconnectReturnType> => {
+  return wagmiReconnect(getConfig());
+};
+
+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/useWCState.ts

@@ -1,18 +1,19 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import type { WCWallet, WCSubView } from '../types';
 
-const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
+const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promise<WCWallet[]> => {
   const all: WCWallet[] = [];
   let page = 1;
   const entries = 100;
 
   while (page <= 10) {
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
     const url = new URL('https://explorer-api.walletconnect.com/v3/wallets');
     url.searchParams.set('projectId', projectId);
     url.searchParams.set('entries', String(entries));
     url.searchParams.set('page', String(page));
 
-    const res = await fetch(url.toString());
+    const res = await fetch(url.toString(), { signal });
     if (!res.ok) throw new Error(`Failed to fetch wallet list: ${res.status}`);
 
     const json = (await res.json()) as {
@@ -66,7 +67,6 @@ export interface WCState {
   onSelectWallet: (wallet: WCWallet) => void;
   onSearchChange: (q: string) => void;
   onFilterToggle: () => void;
-  // Returns true if WC handled the back navigation, false if the parent should handle it
   handleBack: () => boolean;
   resetView: () => void;
   reset: () => void;
@@ -80,18 +80,33 @@ export const useWCState = (): WCState => {
   const [filterActive, setFilterActive] = useState(false);
   const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
   const loadedRef = useRef(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = null;
+    };
+  }, []);
 
   const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
     if (loadedRef.current) return;
     loadedRef.current = true;
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
     setWalletListLoading(true);
     try {
-      const list = await fetchWCWalletList(projectId);
-      setWalletList(list);
-    } catch {
-      loadedRef.current = false;
+      const list = await fetchWCWalletList(projectId, controller.signal);
+      if (isMountedRef.current) setWalletList(list);
+    } catch (err) {
+      const isAbort = err instanceof DOMException && err.name === 'AbortError';
+      if (!isAbort) loadedRef.current = false;
     } finally {
-      setWalletListLoading(false);
+      if (isMountedRef.current) setWalletListLoading(false);
+      if (abortControllerRef.current === controller) abortControllerRef.current = null;
     }
   }, []);
 

package/src/hooks/useWagmiConnect.ts

@@ -14,7 +14,14 @@ const hasWalletConnectKeyword = (value: string): boolean =>
   value.toLowerCase().includes('walletconnect');
 
 const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
-  if (connector.id === 'injected' || connector.id === 'metaMaskSDK') return true;
+  if (connector.id === 'metaMaskSDK') return true;
+
+  if (connector.id === 'injected') {
+    if (typeof window === 'undefined') return false;
+    const eth = (window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum;
+    return eth?.isMetaMask === true;
+  }
+
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
 
   if (connector.rdns) {
@@ -70,8 +77,8 @@ export const useWagmiConnect = ({
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
+  const attemptCounter = useRef(0);
 
-  // 콜백 참조
   const onConnectRef = useRef(onConnect);
   const onErrorRef = useRef(onError);
   const onQrUriRef = useRef(onQrUri);
@@ -81,10 +88,8 @@ export const useWagmiConnect = ({
     onQrUriRef.current = onQrUri;
   }, [onConnect, onError, onQrUri]);
 
-  // 연결 시도
   const { connectAsync, reset, isPending } = useConnect();
 
-  // QR 코드 표시
   useEffect(() => {
     const handler = (data: unknown): void => {
       const msg = data as { type?: string; data?: unknown };
@@ -107,7 +112,6 @@ export const useWagmiConnect = ({
     };
   }, [config.connectors]);
 
-  // 연결 트리거
   const triggerConnect = useCallback(
     (connectorId: ConnectorId): void => {
       const connector = resolveWagmiConnector(config.connectors, connectorId);
@@ -117,10 +121,11 @@ export const useWagmiConnect = ({
       }
 
       onQrUriRef.current(null);
+      const attemptId = ++attemptCounter.current;
       pendingConnectorId.current = connectorId;
       connectAsync({ connector })
         .then((result) => {
-          if (pendingConnectorId.current !== connectorId) return;
+          if (attemptCounter.current !== attemptId) return;
           const address = result.accounts?.[0];
           if (!address) {
             throw new Error('Connected but no account returned');
@@ -129,7 +134,7 @@ export const useWagmiConnect = ({
           onConnectRef.current({ address, connectorId });
         })
         .catch((error) => {
-          if (pendingConnectorId.current !== connectorId) return;
+          if (attemptCounter.current !== attemptId) return;
           pendingConnectorId.current = null;
           onErrorRef.current(error as Error, connectorId);
         });
@@ -137,8 +142,8 @@ export const useWagmiConnect = ({
     [config.connectors, connectAsync],
   );
 
-  // 연결 취소
   const cancelConnect = useCallback((): void => {
+    attemptCounter.current += 1;
     pendingConnectorId.current = null;
     onQrUriRef.current(null);
     reset();