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

package/src/creditConnectConnector.ts

@@ -17,11 +17,23 @@ export type CreditConnectConnectorOptions = {
 
 type CreditConnectProvider = EIP1193Provider;
 type ProviderListener = (...args: unknown[]) => void;
+type CreditConnectProviderWithEvents = CreditConnectProvider & {
+  on: (event: string, listener: ProviderListener) => CreditConnectProviderWithEvents;
+  removeListener: (event: string, listener: ProviderListener) => CreditConnectProviderWithEvents;
+};
 
 const CONNECTOR_ID = 'credit-connect';
 const CONNECTOR_NAME = 'Credit Wallet';
 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> }>
+      : readonly Address[];
+    chainId: number;
+  };
+
 export const creditConnectConnector = (
   options: CreditConnectConnectorOptions,
 ): ReturnType<typeof createConnector> => {
@@ -157,7 +169,20 @@ export const creditConnectConnector = (
             const chainId = Number.parseInt(getEvmAddressInfo(session)[0].networkIdentifier, 10);
             if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
             selectedChainId = chainId;
-            return { accounts, chainId } as any;
+            if (parameters?.withCapabilities === true) {
+              return castConnectResult<withCapabilities>({
+                accounts: accounts.map((address) => ({
+                  address,
+                  capabilities: {} as Record<string, unknown>,
+                })),
+                chainId,
+              });
+            }
+
+            return castConnectResult<withCapabilities>({
+              accounts,
+              chainId,
+            });
           }
 
           if (m.state.status === 'CONNECTING' && m.state.connectingPayload) {
@@ -202,7 +227,20 @@ export const creditConnectConnector = (
           if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
 
           selectedChainId = chainId;
-          return { accounts, chainId } as any;
+          if (parameters?.withCapabilities === true) {
+            return castConnectResult<withCapabilities>({
+              accounts: accounts.map((address) => ({
+                address,
+                capabilities: {} as Record<string, unknown>,
+              })),
+              chainId,
+            });
+          }
+
+          return castConnectResult<withCapabilities>({
+            accounts,
+            chainId,
+          });
         } catch (error) {
           resetState();
           throw error;
@@ -277,9 +315,17 @@ export const creditConnectConnector = (
         if (provider) return provider;
         await ensureManagerInitialized();
 
-        provider = {
-          request: async (args: unknown) => {
-            const { method, params } = args as { method: string; params?: unknown[] };
+        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) => {
@@ -409,20 +455,22 @@ export const creditConnectConnector = (
           },
 
           on: (event: string, listener: ProviderListener) => {
-            if (!providerListeners.has(event)) providerListeners.set(event, new Set());
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            providerListeners.get(event)!.add(listener);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return provider!;
+            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);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return provider!;
+            return createdProvider;
           },
-        } as unknown as CreditConnectProvider;
+        } as CreditConnectProviderWithEvents;
 
+        provider = createdProvider;
         return provider;
       },
 

package/src/hooks/useWCState.ts

@@ -0,0 +1,150 @@
+import { useState, useRef, useCallback } from 'react';
+import type { WCWallet, WCSubView } from '../types';
+
+const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
+  const all: WCWallet[] = [];
+  let page = 1;
+  const entries = 100;
+
+  while (page <= 10) {
+    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());
+    if (!res.ok) throw new Error(`Failed to fetch wallet list: ${res.status}`);
+
+    const json = (await res.json()) as {
+      listings: Record<
+        string,
+        {
+          id: string;
+          name: string;
+          homepage?: string;
+          image_url?: { sm?: string; md?: string };
+          mobile?: { native?: string; universal?: string };
+          desktop?: { native?: string; universal?: string };
+          app?: { ios?: string; android?: string };
+        }
+      >;
+      total: number;
+    };
+
+    const listings = Object.values(json.listings ?? {});
+    for (const w of listings) {
+      all.push({
+        id: w.id,
+        name: w.name,
+        imageUrl: w.image_url?.md ?? w.image_url?.sm ?? '',
+        mobileNative: w.mobile?.native ?? '',
+        mobileUniversal: w.mobile?.universal ?? '',
+        desktopNative: w.desktop?.native ?? '',
+        desktopUniversal: w.desktop?.universal ?? '',
+        appIos: w.app?.ios ?? '',
+        appAndroid: w.app?.android ?? '',
+        homepage: w.homepage ?? '',
+      });
+    }
+
+    if (listings.length < entries || all.length >= json.total) break;
+    page += 1;
+  }
+
+  return all;
+};
+
+export interface WCState {
+  subView: WCSubView;
+  walletList: WCWallet[];
+  walletListLoading: boolean;
+  walletListSearch: string;
+  filterActive: boolean;
+  selectedWallet: WCWallet | null;
+  loadWalletList: (projectId: string) => Promise<void>;
+  onShowList: () => void;
+  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;
+}
+
+export const useWCState = (): WCState => {
+  const [subView, setSubView] = useState<WCSubView>('qr');
+  const [walletList, setWalletList] = useState<WCWallet[]>([]);
+  const [walletListLoading, setWalletListLoading] = useState(false);
+  const [walletListSearch, setWalletListSearch] = useState('');
+  const [filterActive, setFilterActive] = useState(false);
+  const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
+  const loadedRef = useRef(false);
+
+  const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
+    if (loadedRef.current) return;
+    loadedRef.current = true;
+    setWalletListLoading(true);
+    try {
+      const list = await fetchWCWalletList(projectId);
+      setWalletList(list);
+    } catch {
+      loadedRef.current = false;
+    } finally {
+      setWalletListLoading(false);
+    }
+  }, []);
+
+  const onShowList = useCallback((): void => setSubView('list'), []);
+
+  const onSelectWallet = useCallback((wallet: WCWallet): void => {
+    setSelectedWallet(wallet);
+    setSubView('wallet');
+  }, []);
+
+  const onSearchChange = useCallback((q: string): void => setWalletListSearch(q), []);
+
+  const onFilterToggle = useCallback((): void => setFilterActive((prev) => !prev), []);
+
+  const handleBack = useCallback((): boolean => {
+    if (subView === 'wallet') {
+      setSelectedWallet(null);
+      setSubView('list');
+      return true;
+    }
+    if (subView === 'list') {
+      setSubView('qr');
+      return true;
+    }
+    return false;
+  }, [subView]);
+
+  const resetView = useCallback((): void => {
+    setSubView('qr');
+    setSelectedWallet(null);
+  }, []);
+
+  const reset = useCallback((): void => {
+    setSubView('qr');
+    setWalletListSearch('');
+    setFilterActive(false);
+    setSelectedWallet(null);
+  }, []);
+
+  return {
+    subView,
+    walletList,
+    walletListLoading,
+    walletListSearch,
+    filterActive,
+    selectedWallet,
+    loadWalletList,
+    onShowList,
+    onSelectWallet,
+    onSearchChange,
+    onFilterToggle,
+    handleBack,
+    resetView,
+    reset,
+  };
+};

package/src/hooks/useWagmiConnect.ts

@@ -1,12 +1,54 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useConnect, useAccount, useConfig } from 'wagmi';
+import { useConnect, useConfig } from 'wagmi';
 import type { ConnectorId, ConnectResult } from '../types';
 
-export const WAGMI_CONNECTOR_ID: Partial<Record<ConnectorId, string>> = {
-  METAMASK: 'metaMaskSDK',
-  WALLET_CONNECT: 'walletConnect',
-  CREDIT_WALLET: 'walletConnect',
-  CREDIT_CONNECT: 'credit-connect',
+type WagmiConnectorLike = {
+  id: string;
+  name: string;
+  type?: string;
+  rdns?: string | readonly string[];
+};
+
+const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().includes('metamask');
+const hasWalletConnectKeyword = (value: string): boolean =>
+  value.toLowerCase().includes('walletconnect');
+
+const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
+  if (connector.id === 'injected' || connector.id === 'metaMaskSDK') return true;
+  if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
+
+  if (connector.rdns) {
+    const rdnsList = Array.isArray(connector.rdns) ? connector.rdns : [connector.rdns];
+    if (rdnsList.some((rdns) => hasMetaMaskKeyword(rdns))) return true;
+  }
+
+  return false;
+};
+
+const isWalletConnectConnector = (connector: WagmiConnectorLike): boolean => {
+  if (connector.id === 'walletConnect') return true;
+  if (hasWalletConnectKeyword(connector.id) || hasWalletConnectKeyword(connector.name)) return true;
+  return false;
+};
+
+export const resolveWagmiConnector = <T extends WagmiConnectorLike>(
+  connectors: readonly T[],
+  connectorId: ConnectorId,
+): T | undefined => {
+  switch (connectorId) {
+    case 'CREDIT_CONNECT':
+      return connectors.find((connector) => connector.id === 'credit-connect');
+
+    case 'METAMASK':
+      return connectors.find(isMetaMaskConnector);
+
+    case 'CREDIT_WALLET':
+    case 'WALLET_CONNECT':
+      return connectors.find(isWalletConnectConnector);
+
+    default:
+      return undefined;
+  }
 };
 
 interface Options {
@@ -27,7 +69,6 @@ export const useWagmiConnect = ({
   onQrUri,
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
-  const { address, status } = useAccount();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
 
   // 콜백 참조
@@ -36,26 +77,12 @@ export const useWagmiConnect = ({
   const onQrUriRef = useRef(onQrUri);
   useEffect(() => {
     onConnectRef.current = onConnect;
-  }, [onConnect]);
-  useEffect(() => {
     onErrorRef.current = onError;
-  }, [onError]);
-  useEffect(() => {
     onQrUriRef.current = onQrUri;
-  }, [onQrUri]);
+  }, [onConnect, onError, onQrUri]);
 
   // 연결 시도
-  const { connect, reset, isPending } = useConnect({
-    mutation: {
-      onError(error) {
-        const id = pendingConnectorId.current;
-        if (id) {
-          onErrorRef.current(error as Error, id);
-          pendingConnectorId.current = null;
-        }
-      },
-    },
-  });
+  const { connectAsync, reset, isPending } = useConnect();
 
   // QR 코드 표시
   useEffect(() => {
@@ -80,38 +107,34 @@ export const useWagmiConnect = ({
     };
   }, [config.connectors]);
 
-  // 연결 완료
-  useEffect(() => {
-    if (status === 'connected' && address && pendingConnectorId.current) {
-      const id = pendingConnectorId.current;
-      pendingConnectorId.current = null;
-      onConnectRef.current({ address, connectorId: id });
-    }
-  }, [status, address]);
-
   // 연결 트리거
   const triggerConnect = useCallback(
     (connectorId: ConnectorId): void => {
-      const wagmiId = WAGMI_CONNECTOR_ID[connectorId];
-      if (!wagmiId) {
-        onErrorRef.current(new Error(`No wagmi connector mapped for ${connectorId}`), connectorId);
-        return;
-      }
-
-      const connector = config.connectors.find((c) => c.id === wagmiId);
+      const connector = resolveWagmiConnector(config.connectors, connectorId);
       if (!connector) {
-        onErrorRef.current(
-          new Error(`Wagmi connector '${wagmiId}' not found in config`),
-          connectorId,
-        );
+        onErrorRef.current(new Error(`No wagmi connector found for ${connectorId}`), connectorId);
         return;
       }
 
       onQrUriRef.current(null);
       pendingConnectorId.current = connectorId;
-      connect({ connector });
+      connectAsync({ connector })
+        .then((result) => {
+          if (pendingConnectorId.current !== connectorId) return;
+          const address = result.accounts?.[0];
+          if (!address) {
+            throw new Error('Connected but no account returned');
+          }
+          pendingConnectorId.current = null;
+          onConnectRef.current({ address, connectorId });
+        })
+        .catch((error) => {
+          if (pendingConnectorId.current !== connectorId) return;
+          pendingConnectorId.current = null;
+          onErrorRef.current(error as Error, connectorId);
+        });
     },
-    [config.connectors, connect],
+    [config.connectors, connectAsync],
   );
 
   // 연결 취소

package/src/index.ts

@@ -1,4 +1,16 @@
 export { ConnectModal } from './ConnectModal';
+export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
+export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
 export { creditConnectConnector } from './creditConnectConnector';
 export type { CreditConnectConnectorOptions } from './creditConnectConnector';
-export type { ConnectModalProps, ConnectResult, ConnectorId, WCWallet, WCSubView } from './types';
+export type {
+  ConnectErrorContext,
+  ConnectErrorReason,
+  ConnectModalProps,
+  Connectors,
+  ConnectResult,
+  ConnectorId,
+  CreditWalletStrategy,
+  WCSubView,
+  WCWallet,
+} from './types';

package/src/types.ts

@@ -1,8 +1,14 @@
+import type { ReactNode } from 'react';
+
 export type ConnectorId = 'CREDIT_WALLET' | 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
 
-export type ValidConnectors =
-  | Array<Exclude<ConnectorId, 'WALLET_CONNECT'>>
-  | Array<Exclude<ConnectorId, 'CREDIT_WALLET'>>;
+export type CreditWalletStrategy = 'walletConnect' | 'creditConnect';
+
+export interface Connectors {
+  creditWallet?: CreditWalletStrategy | false;
+  metamask?: boolean;
+  walletConnect?: boolean;
+}
 
 export interface WCWallet {
   id: string;
@@ -24,11 +30,23 @@ export interface ConnectResult {
   connectorId: ConnectorId;
 }
 
+export type ConnectErrorReason = 'rejected' | 'unsupported' | 'unknown';
+
+export interface ConnectErrorContext {
+  connectorId: ConnectorId;
+  reason: ConnectErrorReason;
+  error: Error;
+  retry: () => void;
+  dismiss: () => void;
+}
+
 export interface ConnectModalProps {
   open: boolean;
-  connectors: ValidConnectors;
+  connectors: Connectors;
   onConnect: (result: ConnectResult) => void;
   onClose: () => void;
   onLog?: (message: string, error?: Error) => void;
   wcProjectId?: string;
+  requiredChainId?: number;
+  renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
 }

package/src/views/CreditWalletView.tsx

@@ -1,8 +1,8 @@
-import { type FC, useEffect } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
+import { type FC, useEffect, useMemo } from 'react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { CONNECTOR_META } from '../connector-meta';
 import { type ConnectorId } from '../types';
+import { QRFrame } from '../components/QRFrame';
 
 interface CreditWalletViewProps {
   connectorId: Extract<ConnectorId, 'CREDIT_CONNECT' | 'CREDIT_WALLET'>;
@@ -11,7 +11,7 @@ interface CreditWalletViewProps {
 
 export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri }) => {
   const { downloadUrl, logoUrl, deepLinkBase } = CONNECTOR_META[connectorId];
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   useEffect(() => {
     if (isMobile && qrUri && deepLinkBase) {
@@ -29,20 +29,7 @@ export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri
 
   return (
     <div className="ck-view ck-view--qr">
-      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
-        {qrUri ? (
-          <QRCodeSVG
-            value={qrUri}
-            size={196}
-            level="H"
-            imageSettings={
-              logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
-            }
-          />
-        ) : (
-          <div className="ck-qr-spinner" aria-label="Loading QR code" />
-        )}
-      </div>
+      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
 
       <p className="ck-view__caption">Open the Credit Wallet app and scan the QR</p>
 

package/src/views/MetaMaskView.tsx

@@ -1,7 +1,7 @@
-import { type FC, useEffect } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
+import { type FC, useEffect, useMemo } from 'react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { CONNECTOR_META } from '../connector-meta';
+import { QRFrame, CopyLinkButton } from '../components/QRFrame';
 
 const { downloadUrl, deepLinkBase } = CONNECTOR_META.METAMASK;
 
@@ -12,7 +12,7 @@ interface MetaMaskViewProps {
 }
 
 export const MetaMaskView: FC<MetaMaskViewProps> = ({ qrUri, hasExtension, logoUrl }) => {
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   useEffect(() => {
     if (isMobile && qrUri && deepLinkBase) {
@@ -41,33 +41,8 @@ export const MetaMaskView: FC<MetaMaskViewProps> = ({ qrUri, hasExtension, logoU
 
   return (
     <div className="ck-view ck-view--qr">
-      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
-        {qrUri ? (
-          <QRCodeSVG
-            value={qrUri}
-            size={196}
-            level="H"
-            imageSettings={
-              logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
-            }
-          />
-        ) : (
-          <div className="ck-qr-spinner" aria-label="Loading QR code" />
-        )}
-      </div>
-
-      {qrUri && (
-        <button
-          type="button"
-          className="ck-copy-link"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            navigator.clipboard.writeText(qrUri);
-          }}
-        >
-          Copy link
-        </button>
-      )}
+      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
+      <CopyLinkButton qrUri={qrUri} />
 
       {downloadUrl && (
         <div className="ck-download-card">

package/src/views/SwitchChainView.tsx

@@ -0,0 +1,67 @@
+import { useState, type FC } from 'react';
+import { useSwitchChain } from 'wagmi';
+
+interface SwitchChainViewProps {
+  currentChainId: number | undefined;
+  requiredChainId: number;
+  requiredChainName?: string;
+  onDisconnect: () => void;
+  onLog?: (message: string, error?: Error) => void;
+}
+
+export const SwitchChainView: FC<SwitchChainViewProps> = ({
+  currentChainId,
+  requiredChainId,
+  requiredChainName,
+  onDisconnect,
+  onLog,
+}) => {
+  const { switchChainAsync, isPending } = useSwitchChain();
+  const [error, setError] = useState<Error | null>(null);
+
+  const targetLabel = requiredChainName ?? `chain ${requiredChainId}`;
+
+  const handleSwitch = (): void => {
+    setError(null);
+    switchChainAsync({ chainId: requiredChainId }).catch((err: unknown) => {
+      const normalized = err instanceof Error ? err : new Error(String(err));
+      // wagmi's MetaMask connector handles 4902 (chain not added) via wallet_addEthereumChain
+      // automatically when chain metadata is configured. We only surface what reaches us.
+      const code =
+        typeof err === 'object' && err !== null && 'code' in err
+          ? (err as { code: unknown }).code
+          : undefined;
+      if (code === 4902) {
+        onLog?.('[connect-kit] chain not registered in wallet (4902)', normalized);
+      } else {
+        onLog?.(`[connect-kit] switch chain failed: ${normalized.message}`, normalized);
+      }
+      setError(normalized);
+    });
+  };
+
+  return (
+    <div className="ck-view ck-view--switch-chain">
+      <h4 className="ck-view__title">Wrong network</h4>
+      <p className="ck-view__description">
+        {currentChainId != null
+          ? `Connected to chain ${currentChainId}. Please switch to ${targetLabel} to continue.`
+          : `Please switch to ${targetLabel} to continue.`}
+      </p>
+      <div className="ck-view__actions">
+        <button
+          type="button"
+          className="ck-btn-primary"
+          onClick={handleSwitch}
+          disabled={isPending}
+        >
+          {isPending ? 'Waiting for wallet…' : `Switch to ${targetLabel}`}
+        </button>
+        <button type="button" className="ck-btn-secondary" onClick={onDisconnect}>
+          Disconnect
+        </button>
+      </div>
+      {error && <p className="ck-view__caption ck-view__caption--error">{error.message}</p>}
+    </div>
+  );
+};