@gluwa/connect-kit 0.1.0-next.3 → 0.2.0-next.10

package/src/ConnectModal.tsx

@@ -1,559 +0,0 @@
-import { useState, useEffect, useCallback, useMemo, type FC, type ReactNode } from 'react';
-import './ConnectModal.scss';
-import { useAccount, useConfig, useDisconnect } from 'wagmi';
-import {
-  type ConnectModalProps,
-  type ConnectErrorContext,
-  type ConnectErrorReason,
-  type Connectors,
-  type ConnectorId,
-  type WCWallet,
-  type WCSubView,
-} from './types';
-import { CONNECTOR_META } from './connector-meta';
-import { detectMetaMaskExtension } from './utils/platform';
-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';
-import { SwitchChainView } from './views/SwitchChainView';
-
-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 {}
-};
-
-const classifyError = (error: Error): ConnectErrorReason => {
-  const code =
-    typeof error === 'object' && error !== null && 'code' in error
-      ? (error as unknown as { code: unknown }).code
-      : undefined;
-  if (code === 4001) return 'rejected';
-  const message = error.message?.toLowerCase() ?? '';
-  if (message.includes('user rejected') || message.includes('user denied')) return 'rejected';
-  if (message.includes('unsupported') || message.includes('not installed')) return 'unsupported';
-  return 'unknown';
-};
-
-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>>;
-  wc: WCState;
-  errorOverride: ReactNode | null;
-  onBack: () => void;
-  onClose: () => void;
-}
-
-const DetailPane: FC<DetailPaneProps> = ({
-  selectedConnector,
-  qrUri,
-  hasMetaMaskExtension,
-  connectorLogoMap,
-  wc,
-  errorOverride,
-  onBack,
-  onClose,
-}) => {
-  const title = getDetailTitle(
-    selectedConnector,
-    hasMetaMaskExtension,
-    wc.subView,
-    wc.selectedWallet,
-  );
-  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">
-        {errorOverride || (
-          <>
-            {!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={wc.subView}
-                qrUri={qrUri}
-                logoUrl={connectorLogoMap.WALLET_CONNECT}
-                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>
-    </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;
-};
-
-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 (
-    resolvedConnectors.includes('CREDIT_WALLET') &&
-    resolvedConnectors.includes('CREDIT_CONNECT')
-  ) {
-    throw new Error('CREDIT_WALLET and CREDIT_CONNECT cannot be used together');
-  }
-  if (resolvedConnectors.length === 0) {
-    throw new Error('At least one connector must be configured');
-  }
-  return <ConnectModalInner {...props} connectors={resolvedConnectors} />;
-};
-
-type ConnectModalInnerProps = Omit<ConnectModalProps, 'connectors'> & {
-  connectors: ConnectorId[];
-};
-
-const ConnectModalInner: FC<ConnectModalInnerProps> = ({
-  open,
-  connectors,
-  onConnect,
-  onClose,
-  onLog,
-  wcProjectId,
-  requiredChainId,
-  renderConnectError,
-}) => {
-  const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(null);
-  const [qrUri, setQrUri] = useState<string | null>(null);
-  const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
-  const [hasMetaMaskExtension, setHasMetaMaskExtension] = useState<boolean>(false);
-  const [errorState, setErrorState] = useState<{ connectorId: ConnectorId; error: Error } | null>(
-    null,
-  );
-
-  const wc = useWCState();
-
-  // wagmi 상태 — chain mismatch invariant 판정용
-  const account = useAccount();
-  const { disconnectAsync } = useDisconnect();
-  const wagmiConfig = useConfig();
-
-  const chainMismatch =
-    requiredChainId != null &&
-    account.status === 'connected' &&
-    account.chainId != null &&
-    account.chainId !== requiredChainId;
-
-  const requiredChainName = useMemo<string | undefined>(() => {
-    if (requiredChainId == null) return undefined;
-    return wagmiConfig.chains.find((chain) => chain.id === requiredChainId)?.name;
-  }, [wagmiConfig.chains, requiredChainId]);
-
-  // QR URI 수신
-  const handleQrUri = useCallback((uri: string | null) => {
-    setQrUri(uri);
-  }, []);
-
-  // 연결 완료
-  const handleConnect = useCallback(
-    (result: Parameters<typeof onConnect>[0]) => {
-      setErrorState(null);
-      onConnect(result);
-      // chain mismatch가 있으면 모달은 SwitchChainView로 자동 전환됨 (닫지 않음)
-      // Provider 측에서 requiredChainId가 매칭될 때까지 force-open 유지
-      onClose();
-    },
-    [onConnect, onClose],
-  );
-
-  // 연결 실패
-  const handleError = useCallback(
-    (error: unknown, connectorId: ConnectorId): void => {
-      const normalizedError = error instanceof Error ? error : new Error(String(error));
-      onLog?.(
-        `[connect-kit] connection failed (${connectorId}): ${normalizedError.message}`,
-        normalizedError,
-      );
-      setQrUri(null);
-      wc.resetView();
-      if (renderConnectError) {
-        setErrorState({ connectorId, error: normalizedError });
-      } else {
-        setSelectedConnector(null);
-      }
-    },
-    [onLog, wc.resetView, renderConnectError],
-  );
-
-  // 연결 시도
-  const { triggerConnect, cancelConnect } = useWagmiConnect({
-    onConnect: handleConnect,
-    onError: handleError,
-    onQrUri: handleQrUri,
-  });
-
-  // wagmi connector icon 매핑
-  const connectorLogoMap = useMemo(() => {
-    const map: Partial<Record<ConnectorId, string>> = {};
-    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;
-  }, [wagmiConfig.connectors]);
-
-  // 최근 연결 기록 로드
-  useEffect(() => {
-    setRecentConnector(readRecentConnector());
-    setHasMetaMaskExtension(detectMetaMaskExtension());
-  }, []);
-
-  // 모달 닫힐 때 상태 초기화
-  useEffect(() => {
-    if (!open) {
-      setSelectedConnector(null);
-      setQrUri(null);
-      setErrorState(null);
-      wc.reset();
-      cancelConnect();
-    }
-  }, [open, cancelConnect, wc.reset]);
-
-  // 커넥터 선택 — 선택할 때마다 QR을 초기화해 새 세션 URI가 표시되도록 함
-  const handleSelectConnector = useCallback(
-    (id: ConnectorId): void => {
-      if (id === selectedConnector && !errorState) return;
-      setSelectedConnector(id);
-      setQrUri(null);
-      setErrorState(null);
-      wc.resetView();
-      writeRecentConnector(id);
-      setRecentConnector(id);
-
-      if (id === 'WALLET_CONNECT' && wcProjectId) {
-        wc.loadWalletList(wcProjectId);
-      }
-
-      cancelConnect();
-      triggerConnect(id);
-    },
-    [
-      selectedConnector,
-      errorState,
-      triggerConnect,
-      cancelConnect,
-      wcProjectId,
-      wc.resetView,
-      wc.loadWalletList,
-    ],
-  );
-
-  // 뒤로가기
-  const handleBack = useCallback((): void => {
-    if (errorState) {
-      setErrorState(null);
-      setSelectedConnector(null);
-      return;
-    }
-    if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
-    setSelectedConnector(null);
-    setQrUri(null);
-    cancelConnect();
-  }, [selectedConnector, errorState, wc.handleBack, cancelConnect]);
-
-  // chain mismatch 상태에서의 disconnect (Switch chain pane의 cancel)
-  const handleSwitchChainDisconnect = useCallback((): void => {
-    disconnectAsync().catch((err: unknown) => {
-      const normalized = err instanceof Error ? err : new Error(String(err));
-      onLog?.(`[connect-kit] disconnect failed: ${normalized.message}`, normalized);
-    });
-  }, [disconnectAsync, onLog]);
-
-  // overlay 클릭 — chain mismatch 상태에선 무시 (실수 클릭 방어)
-  const handleOverlayClick = useCallback((): void => {
-    if (chainMismatch) return;
-    onClose();
-  }, [chainMismatch, onClose]);
-
-  // close 버튼 — chain mismatch 상태에선 disconnect
-  const handleCloseClick = useCallback((): void => {
-    if (chainMismatch) {
-      handleSwitchChainDisconnect();
-      return;
-    }
-    onClose();
-  }, [chainMismatch, handleSwitchChainDisconnect, onClose]);
-
-  const renderedError: ReactNode = useMemo(() => {
-    if (!errorState || !renderConnectError) return null;
-    const ctx: ConnectErrorContext = {
-      connectorId: errorState.connectorId,
-      reason: classifyError(errorState.error),
-      error: errorState.error,
-      retry: () => {
-        const id = errorState.connectorId;
-        setErrorState(null);
-        setQrUri(null);
-        cancelConnect();
-        triggerConnect(id);
-      },
-      dismiss: () => {
-        setErrorState(null);
-        setSelectedConnector(null);
-      },
-    };
-    return renderConnectError(ctx);
-  }, [errorState, renderConnectError, triggerConnect, cancelConnect]);
-
-  // chain mismatch면 단일 pane (selector/detail 숨김)
-  // requiredChainId != null 재확인은 TS narrowing용 — chainMismatch true면 이미 보장됨
-  if (chainMismatch && requiredChainId != null) {
-    return (
-      <div className="ck-root">
-        <div className="ck-overlay" onClick={handleOverlayClick} />
-        <div
-          className="ck-modal ck-modal--switch-chain"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Switch network"
-        >
-          <div className="ck-pane">
-            <div className="ck-pane__header">
-              <h3 className="ck-pane__title">Switch network</h3>
-              <button
-                type="button"
-                className="ck-btn-close"
-                onClick={handleCloseClick}
-                aria-label="Cancel and disconnect"
-              />
-            </div>
-            <div className="ck-pane__body">
-              <SwitchChainView
-                currentChainId={account.chainId}
-                requiredChainId={requiredChainId}
-                requiredChainName={requiredChainName}
-                onDisconnect={handleSwitchChainDisconnect}
-                onLog={onLog}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="ck-root">
-      <div className="ck-overlay" onClick={handleOverlayClick} />
-      <div
-        className={`ck-modal${(selectedConnector ?? errorState) ? ' ck-modal--has-detail' : ''}`}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Connect Wallet"
-      >
-        <SelectorPane
-          connectors={connectors}
-          selected={selectedConnector}
-          recentConnector={recentConnector}
-          onSelect={handleSelectConnector}
-          onClose={handleCloseClick}
-        />
-        <DetailPane
-          selectedConnector={selectedConnector}
-          qrUri={qrUri}
-          hasMetaMaskExtension={hasMetaMaskExtension}
-          connectorLogoMap={connectorLogoMap}
-          wc={wc}
-          errorOverride={renderedError}
-          onBack={handleBack}
-          onClose={handleCloseClick}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/QRFrame.tsx

@@ -1,43 +0,0 @@
-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/views/CreditWalletView.tsx

@@ -1,59 +0,0 @@
-import { type FC, useEffect, useMemo, useRef } 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'>;
-  qrUri: string | null;
-}
-
-export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri }) => {
-  const { downloadUrl, logoUrl, deepLinkBase } = CONNECTOR_META[connectorId];
-  const isMobile = useMemo(() => isMobileDevice(), []);
-  // WC 세션 만료로 qrUri가 재발급되더라도 딥링크는 최초 1회만 실행
-  const hasRedirectedRef = useRef(false);
-
-  useEffect(() => {
-    if (isMobile && qrUri && deepLinkBase && !hasRedirectedRef.current) {
-      hasRedirectedRef.current = true;
-      tryOpenDeepLink(qrUri, deepLinkBase);
-    }
-  }, [isMobile, qrUri, deepLinkBase]);
-
-  if (isMobile && deepLinkBase) {
-    return (
-      <div className="ck-view ck-view--mobile-redirect">
-        <p>Opening Credit Wallet...</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="ck-view ck-view--qr">
-      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
-
-      <p className="ck-view__caption">Open the Credit Wallet app and scan the QR</p>
-
-      {downloadUrl && (
-        <div className="ck-download-card">
-          <div className="ck-download-card__text">
-            <p className="ck-download-card__title">Get Credit Wallet app</p>
-            <p className="ck-download-card__sub">
-              Once connected, you can log in with it next time
-            </p>
-          </div>
-          <a
-            href={downloadUrl}
-            target="_blank"
-            rel="nofollow noopener noreferrer"
-            className="ck-btn-primary"
-          >
-            Download
-          </a>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/views/IdleView.tsx

@@ -1,10 +0,0 @@
-import { type FC } from 'react';
-import graphic from '../../assets/graphic.png';
-
-export const IdleView: FC = () => (
-  <div className="ck-view ck-view--idle">
-    <img className="ck-view__illustration" src={graphic} alt="" aria-hidden="true" />
-    <h4 className="ck-view__title">Connect anytime, anywhere</h4>
-    <p className="ck-view__description">Choose a wallet on the left to start connecting.</p>
-  </div>
-);