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

package/dist/package.json

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

package/package.json

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

package/src/ConnectModal.tsx

@@ -1,16 +1,22 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type FC } from 'react';
 import './ConnectModal.scss';
 import { useConfig } from 'wagmi';
-import { type ConnectModalProps, type ConnectorId, type WCWallet, type WCSubView } from './types';
+import {
+  type ConnectModalProps,
+  type Connectors,
+  type ConnectorId,
+  type WCWallet,
+  type WCSubView,
+} from './types';
 import { CONNECTOR_META } from './connector-meta';
 import { detectMetaMaskExtension } from './utils/platform';
-import { useWagmiConnect, WAGMI_CONNECTOR_ID } from './hooks/useWagmiConnect';
+import { useWagmiConnect, resolveWagmiConnector } from './hooks/useWagmiConnect';
+import { useWCState, type WCState } from './hooks/useWCState';
 import { IdleView } from './views/IdleView';
 import { CreditWalletView } from './views/CreditWalletView';
 import { MetaMaskView } from './views/MetaMaskView';
 import { WalletConnectView } from './views/WalletConnectView';
 
-// 최근 연결 기록
 const RECENT_KEY = 'connect-kit:recent';
 const readRecentConnector = (): ConnectorId | null => {
   try {
@@ -26,60 +32,6 @@ const writeRecentConnector = (id: ConnectorId): void => {
   } catch {}
 };
 
-// WC 지갑 목록 가져오기
-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;
-};
-
 interface SelectorPaneProps {
   connectors: ConnectorId[];
   selected: ConnectorId | null;
@@ -196,18 +148,9 @@ interface DetailPaneProps {
   qrUri: string | null;
   hasMetaMaskExtension: boolean;
   connectorLogoMap: Partial<Record<ConnectorId, string>>;
-  wcSubView: WCSubView;
-  wcWalletList: WCWallet[];
-  wcWalletListLoading: boolean;
-  wcWalletListSearch: string;
-  wcSelectedWallet: WCWallet | null;
+  wc: WCState;
   onBack: () => void;
   onClose: () => void;
-  wcFilterActive: boolean;
-  onWCShowList: () => void;
-  onWCSelectWallet: (wallet: WCWallet) => void;
-  onWCSearchChange: (q: string) => void;
-  onWCFilterToggle: () => void;
 }
 
 const DetailPane: FC<DetailPaneProps> = ({
@@ -215,24 +158,15 @@ const DetailPane: FC<DetailPaneProps> = ({
   qrUri,
   hasMetaMaskExtension,
   connectorLogoMap,
-  wcSubView,
-  wcWalletList,
-  wcWalletListLoading,
-  wcWalletListSearch,
-  wcSelectedWallet,
-  wcFilterActive,
+  wc,
   onBack,
   onClose,
-  onWCShowList,
-  onWCSelectWallet,
-  onWCSearchChange,
-  onWCFilterToggle,
 }) => {
   const title = getDetailTitle(
     selectedConnector,
     hasMetaMaskExtension,
-    wcSubView,
-    wcSelectedWallet,
+    wc.subView,
+    wc.selectedWallet,
   );
   const showBack = selectedConnector !== null;
 
@@ -263,18 +197,18 @@ const DetailPane: FC<DetailPaneProps> = ({
 
         {selectedConnector === 'WALLET_CONNECT' && (
           <WalletConnectView
-            subView={wcSubView}
+            subView={wc.subView}
             qrUri={qrUri}
             logoUrl={connectorLogoMap.WALLET_CONNECT}
-            walletList={wcWalletList}
-            walletListLoading={wcWalletListLoading}
-            walletListSearch={wcWalletListSearch}
-            walletListFilterActive={wcFilterActive}
-            selectedWallet={wcSelectedWallet}
-            onShowList={onWCShowList}
-            onSelectWallet={onWCSelectWallet}
-            onSearchChange={onWCSearchChange}
-            onFilterToggle={onWCFilterToggle}
+            walletList={wc.walletList}
+            walletListLoading={wc.walletListLoading}
+            walletListSearch={wc.walletListSearch}
+            walletListFilterActive={wc.filterActive}
+            selectedWallet={wc.selectedWallet}
+            onShowList={wc.onShowList}
+            onSelectWallet={wc.onSelectWallet}
+            onSearchChange={wc.onSearchChange}
+            onFilterToggle={wc.onFilterToggle}
           />
         )}
       </div>
@@ -301,20 +235,43 @@ const getDetailTitle = (
   return CONNECTOR_META[connector].detailTitle;
 };
 
+const resolveConnectorsFromConfig = (connectorsConfig?: Connectors): ConnectorId[] => {
+  if (!connectorsConfig) return [];
+
+  const connectors: ConnectorId[] = [];
+
+  if (connectorsConfig.creditWallet === 'walletConnect') connectors.push('CREDIT_WALLET');
+  if (connectorsConfig.creditWallet === 'creditConnect') connectors.push('CREDIT_CONNECT');
+  if (connectorsConfig.metamask) connectors.push('METAMASK');
+  if (connectorsConfig.walletConnect) connectors.push('WALLET_CONNECT');
+
+  return connectors;
+};
+
 export const ConnectModal: FC<ConnectModalProps> = (props) => {
+  // open=false면 내부 컴포넌트를 마운트하지 않음
+  // → useConfig 등 wagmi hooks가 실행되지 않아 WagmiProvider 없이도 렌더링 가능
+  if (!props.open) return null;
+
+  const resolvedConnectors = resolveConnectorsFromConfig(props.connectors);
+
   if (
-    (props.connectors as ConnectorId[]).includes('CREDIT_WALLET') &&
-    (props.connectors as ConnectorId[]).includes('CREDIT_CONNECT')
+    resolvedConnectors.includes('CREDIT_WALLET') &&
+    resolvedConnectors.includes('CREDIT_CONNECT')
   ) {
     throw new Error('CREDIT_WALLET and CREDIT_CONNECT cannot be used together');
   }
-  // open=false면 내부 컴포넌트를 마운트하지 않음
-  // → useConfig 등 wagmi hooks가 실행되지 않아 WagmiProvider 없이도 렌더링 가능
-  if (!props.open) return null;
-  return <ConnectModalInner {...props} />;
+  if (resolvedConnectors.length === 0) {
+    throw new Error('At least one connector must be configured');
+  }
+  return <ConnectModalInner {...props} connectors={resolvedConnectors} />;
 };
 
-const ConnectModalInner: FC<ConnectModalProps> = ({
+type ConnectModalInnerProps = Omit<ConnectModalProps, 'connectors'> & {
+  connectors: ConnectorId[];
+};
+
+const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   open,
   connectors,
   onConnect,
@@ -323,20 +280,12 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
   wcProjectId,
 }) => {
   const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(null);
-  // 커넥터별 QR URI 캐시 — 만료 전까지 재사용
   const [qrUriMap, setQrUriMap] = useState<Partial<Record<ConnectorId, string>>>({});
-  // handleQrUri 호출 시점에 어떤 커넥터의 QR인지 추적
   const pendingQrConnectorRef = useRef<ConnectorId | null>(null);
   const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
   const [hasMetaMaskExtension, setHasMetaMaskExtension] = useState<boolean>(false);
 
-  const [wcSubView, setWcSubView] = useState<WCSubView>('qr');
-  const [wcWalletList, setWcWalletList] = useState<WCWallet[]>([]);
-  const [wcWalletListLoading, setWcWalletListLoading] = useState<boolean>(false);
-  const [wcWalletListSearch, setWcWalletListSearch] = useState<string>('');
-  const [wcFilterActive, setWcFilterActive] = useState<boolean>(false);
-  const [wcSelectedWallet, setWcSelectedWallet] = useState<WCWallet | null>(null);
-  const wcLoadedRef = useRef<boolean>(false);
+  const wc = useWCState();
 
   // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
   const handleQrUri = useCallback((uri: string | null) => {
@@ -365,10 +314,9 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
         delete next[connectorId];
         return next;
       });
-      setWcSubView('qr');
-      setWcSelectedWallet(null);
+      wc.resetView();
     },
-    [onLog],
+    [onLog, wc.resetView],
   );
 
   // 연결 시도
@@ -382,10 +330,14 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
   const wagmiConfig = useConfig();
   const connectorLogoMap = useMemo(() => {
     const map: Partial<Record<ConnectorId, string>> = {};
-    for (const [connectorId, wagmiId] of Object.entries(WAGMI_CONNECTOR_ID) as Array<
-      [ConnectorId, string]
-    >) {
-      const wagmiConnector = wagmiConfig.connectors.find((c) => c.id === wagmiId);
+    const connectorIds: ConnectorId[] = [
+      'CREDIT_CONNECT',
+      'CREDIT_WALLET',
+      'METAMASK',
+      'WALLET_CONNECT',
+    ];
+    for (const connectorId of connectorIds) {
+      const wagmiConnector = resolveWagmiConnector(wagmiConfig.connectors, connectorId);
       if (wagmiConnector?.icon) map[connectorId] = wagmiConnector.icon;
     }
     return map;
@@ -403,28 +355,10 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
       setSelectedConnector(null);
       setQrUriMap({});
       pendingQrConnectorRef.current = null;
-      setWcSubView('qr');
-      setWcWalletListSearch('');
-      setWcFilterActive(false);
-      setWcSelectedWallet(null);
+      wc.reset();
       cancelConnect();
     }
-  }, [open, cancelConnect]);
-
-  // WC 지갑 목록 로드
-  const loadWCWalletList = useCallback(async (projectId: string): Promise<void> => {
-    if (wcLoadedRef.current) return;
-    wcLoadedRef.current = true;
-    setWcWalletListLoading(true);
-    try {
-      const list = await fetchWCWalletList(projectId);
-      setWcWalletList(list);
-    } catch {
-      wcLoadedRef.current = false;
-    } finally {
-      setWcWalletListLoading(false);
-    }
-  }, []);
+  }, [open, cancelConnect, wc.reset]);
 
   // 커넥터 선택 — 같은 커넥터 재선택 시 무시, 다른 커넥터 선택 시 이전 연결 취소 후 새 연결
   const handleSelectConnector = useCallback(
@@ -433,53 +367,34 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
 
       pendingQrConnectorRef.current = id;
       setSelectedConnector(id);
-      setWcSubView('qr');
-      setWcSelectedWallet(null);
+      wc.resetView();
       writeRecentConnector(id);
       setRecentConnector(id);
 
       if (id === 'WALLET_CONNECT' && wcProjectId) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        loadWCWalletList(wcProjectId);
+        wc.loadWalletList(wcProjectId);
       }
 
       cancelConnect();
       triggerConnect(id);
     },
-    [selectedConnector, triggerConnect, cancelConnect, wcProjectId, loadWCWalletList],
+    [
+      selectedConnector,
+      triggerConnect,
+      cancelConnect,
+      wcProjectId,
+      wc.resetView,
+      wc.loadWalletList,
+    ],
   );
 
-  // WC 서브뷰 핸들러
-  const handleWCShowList = useCallback((): void => {
-    setWcSubView('list');
-  }, []);
-
-  const handleWCSelectWallet = useCallback((wallet: WCWallet): void => {
-    setWcSelectedWallet(wallet);
-    setWcSubView('wallet');
-  }, []);
-
-  const handleWCFilterToggle = useCallback((): void => {
-    setWcFilterActive((prev) => !prev);
-  }, []);
-
   // 뒤로가기 — QR 캐시는 유지, wagmi만 reset
   const handleBack = useCallback((): void => {
-    if (selectedConnector === 'WALLET_CONNECT') {
-      if (wcSubView === 'wallet') {
-        setWcSelectedWallet(null);
-        setWcSubView('list');
-        return;
-      }
-      if (wcSubView === 'list') {
-        setWcSubView('qr');
-        return;
-      }
-    }
+    if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
     pendingQrConnectorRef.current = null;
     setSelectedConnector(null);
     cancelConnect();
-  }, [selectedConnector, wcSubView, cancelConnect]);
+  }, [selectedConnector, wc.handleBack, cancelConnect]);
 
   return (
     <div className="ck-root">
@@ -502,18 +417,9 @@ const ConnectModalInner: FC<ConnectModalProps> = ({
           qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
           hasMetaMaskExtension={hasMetaMaskExtension}
           connectorLogoMap={connectorLogoMap}
-          wcSubView={wcSubView}
-          wcWalletList={wcWalletList}
-          wcWalletListLoading={wcWalletListLoading}
-          wcWalletListSearch={wcWalletListSearch}
-          wcFilterActive={wcFilterActive}
-          wcSelectedWallet={wcSelectedWallet}
+          wc={wc}
           onBack={handleBack}
           onClose={onClose}
-          onWCShowList={handleWCShowList}
-          onWCSelectWallet={handleWCSelectWallet}
-          onWCSearchChange={setWcWalletListSearch}
-          onWCFilterToggle={handleWCFilterToggle}
         />
       </div>
     </div>

package/src/components/QRFrame.tsx

@@ -0,0 +1,43 @@
+import { type FC } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+interface QRFrameProps {
+  qrUri: string | null;
+  logoUrl?: string;
+}
+
+export const QRFrame: FC<QRFrameProps> = ({ qrUri, logoUrl }) => (
+  <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>
+);
+
+interface CopyLinkButtonProps {
+  qrUri: string | null;
+}
+
+export const CopyLinkButton: FC<CopyLinkButtonProps> = ({ qrUri }) => {
+  if (!qrUri) return null;
+  return (
+    <button
+      type="button"
+      className="ck-copy-link"
+      onClick={() => {
+        navigator.clipboard.writeText(qrUri);
+      }}
+    >
+      Copy link
+    </button>
+  );
+};

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