@gluwa/connect-kit 0.2.0-next.1 → 0.2.0-next.3

package/src/layout/connectDialog/index.tsx

@@ -0,0 +1,286 @@
+import { type FC, useEffect, useRef, useState } from 'react';
+import { useConfig } from 'wagmi';
+import './style.scss';
+import {
+  type ConnectorId,
+  type ConnectKitTheme,
+  type WCWallet,
+  type ConnectResult,
+} from '../../types';
+import { type DetailContent } from '../detailPanel';
+import { SelectorPanel } from '../selectorPanel';
+import { DetailPanel } from '../detailPanel';
+import { Snackbar } from '../../components/snackbar';
+import { resolveConnectorId } from '../../connector-meta';
+import { useWagmiConnect } from '../../hooks/useWagmiConnect';
+import { useWCState } from '../../hooks/useWCState';
+import {
+  detectMetaMaskExtension,
+  isMobileDevice,
+  tryOpenDeepLink,
+  tryOpenCreditWalletDeeplink,
+} from '../../utils/platform';
+
+export type DialogStep = 'selector' | 'detail';
+
+export interface ConnectDialogProps {
+  open: boolean;
+  theme?: ConnectKitTheme;
+  connectors?: ConnectorId[];
+  selectedConnector?: ConnectorId | null;
+  step?: DialogStep;
+  /** DEV: force initial content state for UI preview */
+  initialContent?: DetailContent;
+  /** WalletConnect Cloud projectId — useWCState.loadWalletList 호출 시 필요. */
+  wcProjectId?: string;
+  onSelectConnector?: (id: ConnectorId) => void;
+  onBack?: () => void;
+  onClose?: () => void;
+  onConnect?: (result: ConnectResult) => void;
+  onError?: (error: Error, connectorId: ConnectorId) => void;
+}
+
+const getContentForConnector = (id: ConnectorId): DetailContent => {
+  if (id === 'CREDIT_CONNECT') return 'qr';
+  if (id === 'METAMASK') return 'metamask-ext';
+  if (id === 'WALLET_CONNECT') return 'walletconnect';
+  return 'idle';
+};
+
+export const ConnectDialog: FC<ConnectDialogProps> = ({
+  open,
+  theme = 'dark',
+  connectors = ['CREDIT_CONNECT', 'METAMASK', 'WALLET_CONNECT'],
+  selectedConnector: selectedConnectorProp = null,
+  // NOTE: default values below are for dev/markup preview only
+  step: stepProp = 'detail',
+  wcProjectId,
+  onSelectConnector,
+  onBack,
+  onClose = () => undefined,
+  onConnect,
+  onError,
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(
+    selectedConnectorProp,
+  );
+  const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
+  const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
+  const [step, setStep] = useState<DialogStep>(stepProp);
+  /**
+   * change this initial value to preview a specific content state.
+   * - 'idle'          selector만 표시 (detail 없음)
+   * - 'loading'       스피너
+   * - 'qr'            Credit Wallet QR
+   * - 'timeout'       연결 실패 화면
+   * - 'metamask-ext'  MetaMask 익스텐션 연결 요청
+   * - 'metamask-qr'   MetaMask QR
+   * - 'walletconnect' WalletConnect QR + All Wallets 버튼
+   * - 'all-wallets'   지갑 목록 그리드
+   * - 'wallet-qr'     개별 지갑 QR
+   */
+  const [content, setContent] = useState<DetailContent>('idle');
+  const [showCopySnackbar, setShowCopySnackbar] = useState(false);
+  const [qrUri, setQrUri] = useState<string | null>(null);
+
+  const config = useConfig();
+
+  // wagmi connect + display_uri 이벤트 → qrUri state.
+  // 모든 wagmi connector 의 message 이벤트를 구독하므로 CC connector 의 display_uri emit 도 자동 포착.
+  const { triggerConnect, cancelConnect } = useWagmiConnect({
+    onConnect: (result) => {
+      // recent = 연결 성공 기준. wagmi 가 recentConnectorId 를 localStorage 에 저장하므로
+      // UI state 만 동기화. 다음 마운트 시 아래 effect 가 storage 에서 복원.
+      setRecentConnector(result.connectorId);
+      onConnect?.(result);
+    },
+    onError: (err, connectorId) => onError?.(err, connectorId),
+    onQrUri: (uri) => setQrUri(uri),
+  });
+
+  // 마운트 시 wagmi storage 의 recentConnectorId(연결 성공 시 wagmi 가 저장) 복원.
+  useEffect(() => {
+    const restoreRecent = async (): Promise<void> => {
+      const wagmiId = await config.storage?.getItem('recentConnectorId');
+      const resolved = resolveConnectorId(wagmiId ?? undefined);
+      if (resolved) setRecentConnector(resolved);
+    };
+    restoreRecent().catch(() => undefined);
+  }, [config]);
+
+  // WalletConnect Explorer API (walletList + loading + 등)
+  const wc = useWCState();
+
+  const handleSelect = (id: ConnectorId) => {
+    setSelectedConnector(id);
+    // recent 는 클릭이 아니라 연결 성공(onConnect) 시점에 기록 — 위 useWagmiConnect onConnect 참조.
+    // MetaMask 는 확장이 있으면 즉시 extension 연결, 아니면 QR.
+    const initialContent: DetailContent =
+      id === 'METAMASK' && !detectMetaMaskExtension() ? 'metamask-qr' : getContentForConnector(id);
+    setContent(initialContent);
+    setStep('detail');
+    // wagmi connect 시작 (display_uri 도착 시 setQrUri 자동 호출)
+    triggerConnect(id);
+    onSelectConnector?.(id);
+  };
+
+  const handleSelectWallet = (wallet: WCWallet) => {
+    setSelectedWallet(wallet);
+    setContent('wallet-qr');
+    // 자동 deeplink 는 아래 useEffect (selectedWallet + qrUri + content === 'wallet-qr') 에서.
+    // 모바일 + display_uri 도착 시 native/universal scheme 으로 redirect, 아니면 WalletQR fallback.
+  };
+
+  const handleBack = () => {
+    if (content === 'wallet-qr') {
+      setSelectedWallet(null);
+      setContent('all-wallets');
+      return;
+    }
+    if (content === 'all-wallets') {
+      setContent('walletconnect');
+      return;
+    }
+    // selector 로 복귀 → wagmi connect attempt 취소 + qrUri 초기화
+    cancelConnect();
+    setQrUri(null);
+    setSelectedConnector(null);
+    setContent('idle');
+    setStep('selector');
+    onBack?.();
+  };
+
+  const handleShowAllWallets = () => {
+    setContent('all-wallets');
+    // 처음 진입 시 WC Explorer API fetch (loadedRef guard 로 중복 호출 없음)
+    if (wcProjectId) {
+      wc.loadWalletList(wcProjectId).catch(() => undefined);
+    }
+  };
+
+  // showModal / close driven by open prop
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  // selectedWallet 가 먼저 set 됐고 qrUri 가 뒤늦게 도착한 경우 자동 deeplink.
+  // handleSelectWallet 의 inline 호출과 중복 방지를 위해 deeplinkTriedRef 가드.
+  const deeplinkTriedRef = useRef(false);
+  useEffect(() => {
+    deeplinkTriedRef.current = false;
+  }, [selectedWallet]);
+  useEffect(() => {
+    if (deeplinkTriedRef.current) return;
+    if (!selectedWallet || !qrUri || content !== 'wallet-qr') return;
+    if (!isMobileDevice()) return;
+    const base = selectedWallet.mobileNative || selectedWallet.mobileUniversal;
+    if (!base) return;
+    deeplinkTriedRef.current = true;
+    tryOpenDeepLink(qrUri, base);
+  }, [selectedWallet, qrUri, content]);
+
+  // CC connector direct path: selector 의 'Continue with Credit Wallet' → content='qr'.
+  // wagmi MM connector 는 SDK 가 자체 deeplink 하지만 CC connector 는 emit display_uri 만 함 —
+  // kit 가 mobile redirect 책임. payload 는 full URL (`https://app.creditcoin.org/?creditconnect=...`).
+  const creditConnectDeeplinkTriedRef = useRef(false);
+  useEffect(() => {
+    creditConnectDeeplinkTriedRef.current = false;
+  }, [selectedConnector]);
+  useEffect(() => {
+    if (creditConnectDeeplinkTriedRef.current) return;
+    if (content !== 'qr' || !qrUri) return;
+    if (selectedConnector !== 'CREDIT_CONNECT') return;
+    if (!isMobileDevice()) return;
+    creditConnectDeeplinkTriedRef.current = true;
+    tryOpenCreditWalletDeeplink(qrUri);
+  }, [content, qrUri, selectedConnector]);
+
+  // Prevent background scroll while dialog is open
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    if (open) document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Reset on close
+  useEffect(() => {
+    if (!open) {
+      cancelConnect();
+      setQrUri(null);
+      setSelectedConnector(null);
+      setContent('idle');
+      setStep('selector');
+      setShowCopySnackbar(false);
+    }
+  }, [open, cancelConnect]);
+
+  // Intercept native Escape (cancel event) and delegate to onClose
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return undefined;
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      setShowCopySnackbar(false);
+      onClose();
+    };
+    dialog.addEventListener('cancel', handleCancel);
+    return () => dialog.removeEventListener('cancel', handleCancel);
+  }, [onClose]);
+
+  return (
+    <div className="ck-root" data-theme={theme} data-open={open}>
+      <dialog
+        ref={dialogRef}
+        className="ck-dialog"
+        data-step={step}
+        aria-label="Connect Wallet"
+        onClick={(e) => {
+          if (e.target === dialogRef.current) onClose();
+        }}
+      >
+        <SelectorPanel
+          connectors={connectors}
+          selectedConnector={selectedConnector}
+          recentConnector={recentConnector}
+          onSelect={handleSelect}
+          onClose={onClose}
+        />
+        <DetailPanel
+          selectedConnector={selectedConnector}
+          selectedWallet={selectedWallet}
+          content={content}
+          qrUri={qrUri}
+          wallets={wc.walletList}
+          walletListLoading={wc.walletListLoading}
+          walletCount={wc.walletList.length}
+          onBack={handleBack}
+          onClose={onClose}
+          onShowAllWallets={handleShowAllWallets}
+          onSelectWallet={handleSelectWallet}
+          onCopyLink={() => {
+            // qrUri 미도착 시 silent no-op (사용자가 잘못 누른 게 아니라 wagmi 가 아직 안 emit).
+            if (!qrUri) return;
+            navigator.clipboard
+              .writeText(qrUri)
+              .then(() => setShowCopySnackbar(true))
+              .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.warn('[copyLink] clipboard write failed', err);
+              });
+          }}
+        />
+        {showCopySnackbar && (
+          <div className="ck-dialog-snackbar">
+            <Snackbar message="Link copied" onClose={() => setShowCopySnackbar(false)} />
+          </div>
+        )}
+      </dialog>
+    </div>
+  );
+};

package/src/layout/connectDialog/loading/index.tsx

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import './style.scss';
+import { Spinner } from '../asset/spinner';
+
+export const Loading: FC = () => {
+  return (
+    <div className="ck-loading">
+      <span className="ck-loading-spinner" role="status" aria-label="Connecting...">
+        <Spinner />
+      </span>
+    </div>
+  );
+};

package/src/layout/connectDialog/loading/style.scss

@@ -0,0 +1,19 @@
+@use '../../../style/mixin.scss' as *;
+
+.ck-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 200px;
+}
+
+.ck-loading-spinner {
+  display: flex;
+  color: var(--scale-gray-400);
+  animation: ck-spin 2.5s linear infinite;
+}
+
+@keyframes ck-spin {
+  to { transform: rotate(360deg); }
+}

package/src/layout/connectDialog/metaMask/index.tsx

@@ -0,0 +1,61 @@
+import { type FC } from 'react';
+import './style.scss';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+import { Spinner } from '../asset/spinner';
+
+type MetaMaskVariant = 'extension' | 'qr';
+
+interface MetaMaskProps {
+  variant: MetaMaskVariant;
+  uri?: string | null;
+  logoUrl?: string;
+  downloadUrl?: string;
+  onCopy?: () => void;
+}
+
+export const MetaMask: FC<MetaMaskProps> = ({
+  variant,
+  uri,
+  logoUrl,
+  downloadUrl = '',
+  onCopy,
+}) => {
+  if (variant === 'extension') {
+    return (
+      <div className="ck-metamask ck-metamask-extension">
+        {logoUrl && (
+          <img className="ck-metamask-logo" src={logoUrl} alt="MetaMask" width={48} height={48} />
+        )}
+        <div className="ck-metamask-text">
+          <h3 className="ck-metamask-title">Open MetaMask</h3>
+          <p className="ck-metamask-desc">Check the connection in your extension</p>
+        </div>
+        <span className="ck-metamask-spinner" aria-label="Connecting...">
+          <Spinner />
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={!uri ? 'loading' : 'ready'}
+        logoUrl={logoUrl}
+        hasBg
+        label="Scan this QR Code with your phone"
+        onCopy={onCopy}
+      />
+      <ActionItem
+        as="a"
+        href={downloadUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        label="Don't have MetaMask Wallet?"
+        action="Download"
+      />
+    </>
+  );
+};

package/src/layout/connectDialog/metaMask/style.scss

@@ -0,0 +1,65 @@
+@use '../../../style/mixin.scss' as *;
+
+// ── Extension ─────────────────────────────────────────────────────────────────
+.ck-metamask-extension {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.ck-metamask-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ck-metamask-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  text-align: center;
+}
+
+.ck-metamask-title {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-metamask-desc {
+  @include textToken('body3-l1-regular'); 
+  color: var(--scale-gray-600);
+}
+
+.ck-metamask-spinner {
+  display: flex;
+  color: var(--scale-gray-400);
+  animation: ck-spin 2.5s linear infinite;
+}
+
+@keyframes ck-spin {
+  to { transform: rotate(360deg); }
+}
+
+
+
+.ck-root .ck-metamask-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-metamask-copy-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  // Icon SVG will be added later
+}

package/src/layout/connectDialog/qr/index.tsx

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import { QrArea } from '../../../components/qrArea';
+import { ActionItem } from '../../../components/actionItem';
+
+interface QRProps {
+  uri?: string | null;
+  logoUrl?: string;
+  downloadUrl?: string;
+}
+
+export const QR: FC<QRProps> = ({ uri, logoUrl, downloadUrl }) => {
+  const status = !uri ? 'loading' : 'ready';
+
+  return (
+    <>
+      <QrArea
+        uri={uri}
+        status={status}
+        logoUrl={logoUrl}
+        label="Open the Credit Wallet app and scan the QR"
+      />
+      <ActionItem
+        as="a"
+        href={downloadUrl ?? '#'}
+        target="_blank"
+        rel="noopener noreferrer"
+        label="Get Credit Wallet app"
+        description="Once connected, you can log in with it next time"
+        action="Download"
+      />
+    </>
+  );
+};

package/src/layout/connectDialog/style.scss

@@ -0,0 +1,95 @@
+@use '../../style/index.scss';
+@use '../../style/mixin.scss' as *;
+
+.ck-root {
+  display: contents;
+}
+
+.ck-dialog::backdrop {
+  background: var(--dialog-backdrop-color);
+}
+
+.ck-root .ck-dialog:not([open]) {
+  display: none;
+}
+
+.ck-root .ck-dialog {
+  --dialog-backdrop-color: var(--semantic-overlay-overlay-dim);
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(100% - 40px);
+  max-width: 1120px;
+  height: min(620px, calc(100dvh - 40px));
+
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--semantic-paper-dialog);
+  border: none;
+  padding: 0;
+
+  @include tablet {
+    position: fixed;
+    inset: auto 0 0 0;
+    margin: 0;
+    width: 100%;
+    max-width: none;
+    grid-template-columns: 1fr;
+    max-height: 82dvh;
+    height: 100%;
+    border-radius: 12px 12px 0 0;
+
+    &[data-step='selector'] .ck-detail { display: none !important; }
+    &[data-step='detail'] .ck-selector { display: none !important; }
+  }
+}
+
+.ck-root .ck-dialog-snackbar {
+  position: fixed;
+  top: clamp(20px, 9.2vh, 99px);
+  left: 50%;
+  z-index: 1001;
+  width: min(calc(100vw - 40px), 400px);
+  transform: translateX(-50%);
+  animation: ck-dialog-snackbar-in 0.2s ease;
+
+  @include tablet {
+    top: clamp(
+      calc(env(safe-area-inset-top, 0px) + 20px),
+      calc(env(safe-area-inset-top, 0px) + 20px),
+      calc(env(safe-area-inset-top, 0px) + 20px)
+    );
+    left: 20px;
+    right: 20px;
+    width: auto;
+    transform: none;
+  }
+}
+
+@keyframes ck-dialog-snackbar-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@include tablet {
+  @keyframes ck-dialog-snackbar-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/src/layout/connectDialog/timeout/index.tsx

@@ -0,0 +1,31 @@
+import { type FC } from 'react';
+import './style.scss';
+
+interface TimeoutProps {
+  onRetry?: () => void;
+}
+
+export const Timeout: FC<TimeoutProps> = ({ onRetry }) => {
+  return (
+    <div className="ck-timeout">
+      <div className="ck-timeout-text">
+        <h3 className="ck-timeout-title">Connection Failed</h3>
+        <p className="ck-timeout-desc">
+          The connection took too long to respond.
+          <br />
+          Please check your network and try again.
+        </p>
+      </div>
+      <button type="button" className="ck-timeout-retry-btn" onClick={onRetry}>
+        Try Again
+      </button>
+      {/* TODO [D]: add help link after url is confirmed */}
+      {/* <p className="ck-timeout-help">
+        Need more help? 
+        <a href="#" className="ck-timeout-help-link">
+          Click here
+        </a>
+      </p> */}
+    </div>
+  );
+};

package/src/layout/connectDialog/timeout/style.scss

@@ -0,0 +1,64 @@
+@use '../../../style/mixin.scss' as *;
+
+.ck-timeout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 24px;
+  text-align: center;
+}
+
+.ck-timeout-text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ck-timeout-title {
+  @include textToken('title3-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-timeout-desc {
+  @include textToken('body4-l1-regular');
+  color: var(--scale-gray-600);
+}
+
+.ck-root .ck-timeout-retry-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 28px;
+  border: 1px solid var(--semantic-divider-divider-4);
+  border-radius: 500px;
+  @include textToken('label4-bold');
+  color: var(--scale-gray-900);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--scale-gray-100);
+  }
+}
+
+.ck-timeout-help {
+  @include textToken('body4-l1-regular');
+  color: var(--scale-gray-500);
+}
+
+.ck-root .ck-timeout-help-link {
+  color: var(--semantic-brand-trugi-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@include tablet {
+  .ck-timeout {
+    min-height: 491px;
+  }
+}