@gluwa/connect-kit 0.1.0-next.0

package/src/ConnectModal.tsx

@@ -0,0 +1,521 @@
+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 { CONNECTOR_META } from './connector-meta';
+import { detectMetaMaskExtension } from './utils/platform';
+import { useWagmiConnect, WAGMI_CONNECTOR_ID } from './hooks/useWagmiConnect';
+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 {
+    return localStorage.getItem(RECENT_KEY) as ConnectorId | null;
+  } catch {
+    return null;
+  }
+};
+
+const writeRecentConnector = (id: ConnectorId): void => {
+  try {
+    localStorage.setItem(RECENT_KEY, id);
+  } 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;
+  recentConnector: ConnectorId | null;
+  onSelect: (id: ConnectorId) => void;
+  onClose: () => void;
+}
+
+const SelectorPane: FC<SelectorPaneProps> = ({
+  connectors,
+  selected,
+  recentConnector,
+  onSelect,
+  onClose,
+}) => {
+  const hasRecent = recentConnector !== null && connectors.includes(recentConnector);
+  const recentConnectors = hasRecent ? [recentConnector] : [];
+  const otherConnectors = connectors.filter((id) => id !== recentConnector);
+
+  const downloadUrl = connectors
+    .map((id) => CONNECTOR_META[id].downloadUrl)
+    .find((url) => url != null);
+
+  return (
+    <div className="ck-pane ck-pane--selector">
+      <div className="ck-pane__header">
+        <h3 className="ck-pane__title">Connect Wallet</h3>
+        <button
+          type="button"
+          className="ck-btn-close ck-mobile-only"
+          onClick={onClose}
+          aria-label="Close"
+        />
+      </div>
+
+      <div className="ck-connector-list">
+        {hasRecent && (
+          <>
+            {recentConnectors.map((id) => (
+              <ConnectorItem
+                key={id}
+                id={id}
+                isSelected={selected === id}
+                isRecent
+                onSelect={onSelect}
+              />
+            ))}
+            {otherConnectors.length > 0 && (
+              <div className="ck-divider">
+                <span>OR</span>
+              </div>
+            )}
+          </>
+        )}
+
+        {otherConnectors.map((id) => (
+          <ConnectorItem
+            key={id}
+            id={id}
+            isSelected={selected === id}
+            isRecent={false}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+
+      {downloadUrl && (
+        <div className="ck-pane__footer">
+          <a
+            href={downloadUrl}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className="ck-link-no-wallet"
+          >
+            I don&apos;t have a wallet &gt;
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface ConnectorItemProps {
+  id: ConnectorId;
+  isSelected: boolean;
+  isRecent: boolean;
+  onSelect: (id: ConnectorId) => void;
+}
+
+const ConnectorItem: FC<ConnectorItemProps> = ({ id, isSelected, isRecent, onSelect }) => {
+  const meta = CONNECTOR_META[id];
+
+  return (
+    <button
+      type="button"
+      className={`ck-connector-item ck-connector-item--${id.toLowerCase().replaceAll('_', '-')} ${isSelected ? 'is-active' : ''}`}
+      onClick={() => {
+        onSelect(id);
+      }}
+    >
+      {meta.logoUrl ? (
+        <img className="ck-connector-item__icon" src={meta.logoUrl} alt="" aria-hidden="true" />
+      ) : (
+        <span className="ck-connector-item__icon" aria-hidden="true" />
+      )}
+      <span className="ck-connector-item__label">{meta.label}</span>
+      {isRecent && <span className="ck-connector-item__badge">Recent</span>}
+    </button>
+  );
+};
+
+interface DetailPaneProps {
+  selectedConnector: ConnectorId | null;
+  qrUri: string | null;
+  hasMetaMaskExtension: boolean;
+  connectorLogoMap: Partial<Record<ConnectorId, string>>;
+  wcSubView: WCSubView;
+  wcWalletList: WCWallet[];
+  wcWalletListLoading: boolean;
+  wcWalletListSearch: string;
+  wcSelectedWallet: WCWallet | null;
+  onBack: () => void;
+  onClose: () => void;
+  wcFilterActive: boolean;
+  onWCShowList: () => void;
+  onWCSelectWallet: (wallet: WCWallet) => void;
+  onWCSearchChange: (q: string) => void;
+  onWCFilterToggle: () => void;
+}
+
+const DetailPane: FC<DetailPaneProps> = ({
+  selectedConnector,
+  qrUri,
+  hasMetaMaskExtension,
+  connectorLogoMap,
+  wcSubView,
+  wcWalletList,
+  wcWalletListLoading,
+  wcWalletListSearch,
+  wcSelectedWallet,
+  wcFilterActive,
+  onBack,
+  onClose,
+  onWCShowList,
+  onWCSelectWallet,
+  onWCSearchChange,
+  onWCFilterToggle,
+}) => {
+  const title = getDetailTitle(
+    selectedConnector,
+    hasMetaMaskExtension,
+    wcSubView,
+    wcSelectedWallet,
+  );
+  const showBack = selectedConnector !== null;
+
+  return (
+    <div className="ck-pane ck-pane--detail">
+      <div className="ck-pane__header">
+        {showBack && (
+          <button type="button" className="ck-btn-back" onClick={onBack} aria-label="Back" />
+        )}
+        <h3 className="ck-pane__title">{title}</h3>
+        <button type="button" className="ck-btn-close" onClick={onClose} aria-label="Close" />
+      </div>
+
+      <div className="ck-pane__body">
+        {!selectedConnector && <IdleView />}
+
+        {(selectedConnector === 'CREDIT_CONNECT' || selectedConnector === 'CREDIT_WALLET') && (
+          <CreditWalletView connectorId={selectedConnector} qrUri={qrUri} />
+        )}
+
+        {selectedConnector === 'METAMASK' && (
+          <MetaMaskView
+            qrUri={qrUri}
+            hasExtension={hasMetaMaskExtension}
+            logoUrl={connectorLogoMap.METAMASK}
+          />
+        )}
+
+        {selectedConnector === 'WALLET_CONNECT' && (
+          <WalletConnectView
+            subView={wcSubView}
+            qrUri={qrUri}
+            logoUrl={connectorLogoMap.WALLET_CONNECT}
+            walletList={wcWalletList}
+            walletListLoading={wcWalletListLoading}
+            walletListSearch={wcWalletListSearch}
+            walletListFilterActive={wcFilterActive}
+            selectedWallet={wcSelectedWallet}
+            onShowList={onWCShowList}
+            onSelectWallet={onWCSelectWallet}
+            onSearchChange={onWCSearchChange}
+            onFilterToggle={onWCFilterToggle}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getDetailTitle = (
+  connector: ConnectorId | null,
+  hasMetaMaskExtension: boolean,
+  wcSubView: WCSubView,
+  wcSelectedWallet: WCWallet | null,
+): string => {
+  if (!connector) return '';
+
+  if (connector === 'WALLET_CONNECT') {
+    if (wcSubView === 'list') return 'All Wallets';
+    if (wcSubView === 'wallet' && wcSelectedWallet) return `Scan with ${wcSelectedWallet.name}`;
+    return 'Scan with WalletConnect';
+  }
+
+  if (connector === 'METAMASK' && hasMetaMaskExtension) return 'MetaMask';
+
+  return CONNECTOR_META[connector].detailTitle;
+};
+
+export const ConnectModal: FC<ConnectModalProps> = (props) => {
+  if (
+    (props.connectors as ConnectorId[]).includes('CREDIT_WALLET') &&
+    (props.connectors as ConnectorId[]).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} />;
+};
+
+const ConnectModalInner: FC<ConnectModalProps> = ({
+  open,
+  connectors,
+  onConnect,
+  onClose,
+  onLog,
+  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);
+
+  // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
+  const handleQrUri = useCallback((uri: string | null) => {
+    if (uri) {
+      const id = pendingQrConnectorRef.current;
+      if (id) setQrUriMap((prev) => ({ ...prev, [id]: uri }));
+    }
+  }, []);
+
+  // 연결 완료
+  const handleConnect = useCallback(
+    (result: Parameters<typeof onConnect>[0]) => {
+      onConnect(result);
+      onClose();
+    },
+    [onConnect, onClose],
+  );
+
+  // 연결 실패 — 실패한 커넥터의 QR 캐시만 삭제
+  const handleError = useCallback(
+    (error: Error, connectorId: ConnectorId): void => {
+      onLog?.(`[connect-kit] connection failed (${connectorId}): ${error.message}`, error);
+      setSelectedConnector(null);
+      setQrUriMap((prev) => {
+        const next = { ...prev };
+        delete next[connectorId];
+        return next;
+      });
+      setWcSubView('qr');
+      setWcSelectedWallet(null);
+    },
+    [onLog],
+  );
+
+  // 연결 시도
+  const { triggerConnect, cancelConnect } = useWagmiConnect({
+    onConnect: handleConnect,
+    onError: handleError,
+    onQrUri: handleQrUri,
+  });
+
+  // wagmi connector icon 매핑
+  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);
+      if (wagmiConnector?.icon) map[connectorId] = wagmiConnector.icon;
+    }
+    return map;
+  }, [wagmiConfig.connectors]);
+
+  // 최근 연결 기록 로드
+  useEffect(() => {
+    setRecentConnector(readRecentConnector());
+    setHasMetaMaskExtension(detectMetaMaskExtension());
+  }, []);
+
+  // 모달 닫힐 때 상태 + QR 캐시 전체 초기화
+  useEffect(() => {
+    if (!open) {
+      setSelectedConnector(null);
+      setQrUriMap({});
+      pendingQrConnectorRef.current = null;
+      setWcSubView('qr');
+      setWcWalletListSearch('');
+      setWcFilterActive(false);
+      setWcSelectedWallet(null);
+      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);
+    }
+  }, []);
+
+  // 커넥터 선택 — 같은 커넥터 재선택 시 무시, 다른 커넥터 선택 시 이전 연결 취소 후 새 연결
+  const handleSelectConnector = useCallback(
+    (id: ConnectorId): void => {
+      if (id === selectedConnector) return;
+
+      pendingQrConnectorRef.current = id;
+      setSelectedConnector(id);
+      setWcSubView('qr');
+      setWcSelectedWallet(null);
+      writeRecentConnector(id);
+      setRecentConnector(id);
+
+      if (id === 'WALLET_CONNECT' && wcProjectId) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        loadWCWalletList(wcProjectId);
+      }
+
+      cancelConnect();
+      triggerConnect(id);
+    },
+    [selectedConnector, triggerConnect, cancelConnect, wcProjectId, loadWCWalletList],
+  );
+
+  // 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;
+      }
+    }
+    pendingQrConnectorRef.current = null;
+    setSelectedConnector(null);
+    cancelConnect();
+  }, [selectedConnector, wcSubView, cancelConnect]);
+
+  return (
+    <div className="ck-root">
+      <div className="ck-overlay" onClick={onClose} />
+      <div
+        className={`ck-modal${selectedConnector ? ' ck-modal--has-detail' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Connect Wallet"
+      >
+        <SelectorPane
+          connectors={connectors}
+          selected={selectedConnector}
+          recentConnector={recentConnector}
+          onSelect={handleSelectConnector}
+          onClose={onClose}
+        />
+        <DetailPane
+          selectedConnector={selectedConnector}
+          qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
+          hasMetaMaskExtension={hasMetaMaskExtension}
+          connectorLogoMap={connectorLogoMap}
+          wcSubView={wcSubView}
+          wcWalletList={wcWalletList}
+          wcWalletListLoading={wcWalletListLoading}
+          wcWalletListSearch={wcWalletListSearch}
+          wcFilterActive={wcFilterActive}
+          wcSelectedWallet={wcSelectedWallet}
+          onBack={handleBack}
+          onClose={onClose}
+          onWCShowList={handleWCShowList}
+          onWCSelectWallet={handleWCSelectWallet}
+          onWCSearchChange={setWcWalletListSearch}
+          onWCFilterToggle={handleWCFilterToggle}
+        />
+      </div>
+    </div>
+  );
+};

package/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

package/src/connector-meta.ts

@@ -0,0 +1,41 @@
+import { type ConnectorId } from './types';
+import creditWalletIcon from '../assets/creditwallet.png';
+import metaMaskIcon from '../assets/metamask.png';
+import wcIcon from '../assets/wc.png';
+
+export interface ConnectorMeta {
+  label: string;
+  detailTitle: string;
+  downloadUrl?: string;
+  logoUrl?: string;
+  deepLinkBase?: string;
+}
+
+export const CONNECTOR_META: Record<ConnectorId, ConnectorMeta> = {
+  CREDIT_CONNECT: {
+    label: 'Continue with Credit Wallet',
+    detailTitle: 'Scan with Credit Wallet',
+    downloadUrl: 'https://creditwallet.onelink.me/Jv54',
+    logoUrl: creditWalletIcon,
+    // deepLinkBase: TODO — 앱 측 CC 딥링크 스킴 확정 후 추가
+  },
+  CREDIT_WALLET: {
+    label: 'Credit Wallet',
+    detailTitle: 'Scan with Credit Wallet',
+    downloadUrl: 'https://creditwallet.onelink.me/Jv54',
+    logoUrl: creditWalletIcon,
+    deepLinkBase: 'creditwallet://',
+  },
+  METAMASK: {
+    label: 'MetaMask',
+    detailTitle: 'Scan with MetaMask',
+    downloadUrl: 'https://metamask.io/download/',
+    logoUrl: metaMaskIcon,
+    deepLinkBase: 'metamask://',
+  },
+  WALLET_CONNECT: {
+    label: 'WalletConnect',
+    detailTitle: 'WalletConnect',
+    logoUrl: wcIcon,
+  },
+};