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

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.1",
+  "version": "0.2.0-next.3",
   "type": "module",
   "exports": {
     ".": {
@@ -11,6 +11,7 @@
       "types": "./src/credit-connect.ts",
       "default": "./src/credit-connect.ts"
     },
+    "./index.css": "./dist/index.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -45,7 +46,11 @@
   "dependencies": {
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
-    "@wagmi/core": "^2.16.7"
+    "@wagmi/core": "^2.16.7",
+    "@gluwa/credit-connect-sdk": "workspace:*",
+    "@gluwa/credit-connect-storage-local": "workspace:*",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "workspace:*",
+    "@gluwa/credit-connect-hub-node-ws": "workspace:*"
   },
   "devDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
@@ -62,15 +67,11 @@
     "wagmi": "^2.15.6"
   },
   "peerDependencies": {
-    "@gluwa/credit-connect-sdk": "workspace:*",
     "@tanstack/react-query": ">=5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "viem": ">=2.0.0"
   },
   "peerDependenciesMeta": {
-    "@gluwa/credit-connect-sdk": {
-      "optional": true
-    },
     "@tanstack/react-query": {
       "optional": true
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.1",
+  "version": "0.2.0-next.3",
   "type": "module",
   "exports": {
     ".": {
@@ -25,7 +25,11 @@
   "dependencies": {
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
-    "@wagmi/core": "^2.16.7"
+    "@wagmi/core": "^2.16.7",
+    "@gluwa/credit-connect-sdk": "0.2.0-next.3",
+    "@gluwa/credit-connect-storage-local": "0.2.0-next.3",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.3",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.3"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",
@@ -39,18 +43,14 @@
     "typescript-eslint": "^8.18.2",
     "viem": "^2.31.7",
     "wagmi": "^2.15.6",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.1"
+    "@gluwa/credit-connect-sdk": "0.2.0-next.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "viem": ">=2.0.0",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.1"
+    "viem": ">=2.0.0"
   },
   "peerDependenciesMeta": {
-    "@gluwa/credit-connect-sdk": {
-      "optional": true
-    },
     "@tanstack/react-query": {
       "optional": true
     }

package/src/ConnectKitProvider.tsx

@@ -9,15 +9,20 @@ import {
   type FC,
   type ReactNode,
 } from 'react';
-import { WagmiProvider, useAccount, useDisconnect, useSwitchChain } from 'wagmi';
+import { WagmiProvider, useAccount, useConfig, useDisconnect, useSwitchChain } from 'wagmi';
+import { getAccount } from '@wagmi/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ConnectModal } from './ConnectModal';
+// import { ConnectModal } from './ConnectModal';
+import { ConnectDialog } from './layout/connectDialog';
 import { getConfig, getKitConfig, initConfig } from './core/config';
+import { resolveConnectorId } from './connector-meta';
 import type {
   ConnectErrorContext,
   ConnectKitConfig,
+  ConnectKitTheme,
   ConnectResult,
   ConnectorId,
+  ConnectorKey,
   Connectors,
 } from './types';
 
@@ -28,16 +33,21 @@ export interface ConnectKitProviderProps {
   kitConfig?: ConnectKitConfig;
   connectors: Connectors;
   requiredChainId?: number;
+  theme: ConnectKitTheme;
   onConnect?: (result: ConnectResult) => void;
   onLog?: (message: string, error?: Error) => void;
   renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
 }
-
 export interface ConnectKitContextValue {
   isOpen: boolean;
   open: () => void;
   close: () => void;
   isConnected: boolean;
+  needsChainSwitch: boolean;
+  requiredChainId: number | undefined;
+  currentChainId: number | undefined;
+  isSwitchingChain: boolean;
+  switchToRequiredChain: () => Promise<void>;
   address: `0x${string}` | undefined;
   connectorId: ConnectorId | null;
   disconnect: () => Promise<void>;
@@ -45,14 +55,16 @@ export interface ConnectKitContextValue {
 
 const ConnectKitContext = createContext<ConnectKitContextValue | null>(null);
 
-const resolveConnectorId = (wagmiConnectorId: string | undefined): ConnectorId | null => {
-  if (!wagmiConnectorId) return null;
-  if (wagmiConnectorId === 'credit-connect') return 'CREDIT_CONNECT';
-  if (wagmiConnectorId === 'walletConnect') return 'WALLET_CONNECT';
-  const lower = wagmiConnectorId.toLowerCase();
-  if (lower.includes('metamask') || wagmiConnectorId === 'injected') return 'METAMASK';
-  if (lower.includes('walletconnect')) return 'WALLET_CONNECT';
-  return null;
+// 외부 API Connectors (ConnectorKey 배열) → 내부 ConnectorId[] 매핑.
+// 입력 순서 그대로 selector 표시 순서.
+const CONNECTOR_KEY_TO_ID: Record<ConnectorKey, ConnectorId> = {
+  creditWallet: 'CREDIT_CONNECT',
+  metamask: 'METAMASK',
+  walletConnect: 'WALLET_CONNECT',
+};
+const resolveConnectorsFromConfig = (connectorsConfig?: Connectors): ConnectorId[] => {
+  if (!connectorsConfig) return [];
+  return connectorsConfig.map((key) => CONNECTOR_KEY_TO_ID[key]);
 };
 
 export const ConnectKitProvider: FC<ConnectKitProviderProps> = (props) => {
@@ -81,14 +93,17 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   connectors,
   kitConfig,
   requiredChainId,
+  theme,
   onConnect,
   onLog,
-  renderConnectError,
 }) => {
+  // NOTE: renderConnectError 는 ConnectDialog 가 아직 error UI customization 을 받지 않으므로
+  // destructure 에서 제외. 추후 ConnectDialog 의 timeout/error content 에 wire 필요 시 복원.
   const [isOpen, setIsOpen] = useState(false);
   const [pendingResult, setPendingResult] = useState<ConnectResult | null>(null);
 
   const account = useAccount();
+  const wagmiConfig = useConfig();
   const { disconnectAsync } = useDisconnect();
   const { switchChainAsync } = useSwitchChain();
 
@@ -97,14 +112,6 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
     onConnectRef.current = onConnect;
   }, [onConnect]);
 
-  const chainMismatch =
-    requiredChainId != null &&
-    account.status === 'connected' &&
-    account.chainId != null &&
-    account.chainId !== requiredChainId;
-
-  const [autoSwitchFailedKey, setAutoSwitchFailedKey] = useState<string | null>(null);
-  const autoSwitchInFlightRef = useRef(false);
   const isMountedRef = useRef(true);
   useEffect(() => {
     isMountedRef.current = true;
@@ -113,39 +120,15 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
     };
   }, []);
 
-  const mismatchKey =
-    chainMismatch && account.chainId != null && requiredChainId != null
-      ? `${account.chainId}->${requiredChainId}`
-      : null;
+  const needsChainSwitch =
+    requiredChainId != null &&
+    account.status === 'connected' &&
+    account.chainId != null &&
+    account.chainId !== requiredChainId;
 
-  useEffect(() => {
-    if (!chainMismatch || requiredChainId == null) return;
-    if (autoSwitchInFlightRef.current) return;
-    if (mismatchKey != null && mismatchKey === autoSwitchFailedKey) return;
-
-    autoSwitchInFlightRef.current = true;
-    switchChainAsync({ chainId: requiredChainId })
-      .catch((err: unknown) => {
-        if (!isMountedRef.current) return;
-        const normalized = err instanceof Error ? err : new Error(String(err));
-        onLog?.(`[connect-kit] silent switch chain failed: ${normalized.message}`, normalized);
-        if (mismatchKey != null) {
-          setAutoSwitchFailedKey(mismatchKey);
-        }
-      })
-      .finally(() => {
-        autoSwitchInFlightRef.current = false;
-      });
-  }, [chainMismatch, mismatchKey, requiredChainId, autoSwitchFailedKey, switchChainAsync, onLog]);
+  const [isSwitchingChain, setIsSwitchingChain] = useState(false);
 
-  useEffect(() => {
-    if (!chainMismatch && autoSwitchFailedKey != null) {
-      setAutoSwitchFailedKey(null);
-    }
-  }, [chainMismatch, autoSwitchFailedKey]);
-
-  const autoSwitchFailedForCurrent = mismatchKey != null && mismatchKey === autoSwitchFailedKey;
-  const effectiveOpen = isOpen || (chainMismatch && autoSwitchFailedForCurrent);
+  const effectiveOpen = isOpen;
 
   const open = useCallback((): void => {
     setIsOpen(true);
@@ -153,29 +136,62 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
 
   const close = useCallback((): void => {
     setIsOpen(false);
-  }, []);
+    const status = getAccount(wagmiConfig).status;
+    if (status === 'connecting' || status === 'reconnecting') {
+      disconnectAsync().catch(() => undefined);
+    }
+  }, [wagmiConfig, disconnectAsync]);
 
   const disconnect = useCallback(async (): Promise<void> => {
     await disconnectAsync();
   }, [disconnectAsync]);
 
-  const handleModalConnect = useCallback((result: ConnectResult): void => {
+  const switchToRequiredChain = useCallback(async (): Promise<void> => {
+    if (requiredChainId == null) return;
+    setIsSwitchingChain(true);
+    try {
+      await switchChainAsync({ chainId: requiredChainId });
+    } finally {
+      if (isMountedRef.current) setIsSwitchingChain(false);
+    }
+  }, [requiredChainId, switchChainAsync]);
+
+  // ConnectDialog 의 wagmi connect 성공 → pendingResult set → 아래 useEffect 가
+  // account.status === 'connected' 확인 후 외부 onConnect 호출 + modal close.
+  // wagmi state 가 비동기로 'connected' 로 전환되는 race 흡수용.
+  const handleDialogConnect = useCallback((result: ConnectResult): void => {
     setPendingResult(result);
   }, []);
 
-  useEffect(() => {
+  const handleDialogError = useCallback(
+    (error: Error, connectorId: ConnectorId): void => {
+      onLog?.(`[connect-kit] connect failed: ${connectorId} — ${error.message}`, error);
+    },
+    [onLog],
+  );
+
+  // 연결 성공 시 modal 자동 close — wagmi state 만 기준으로.
+  // 이전 구현은 pendingResult 가 set 된 경우만 close 했는데, `setPendingResult` 는
+  // ConnectDialog 의 onConnect (`connectAsync.then`) 안에서만 호출됨. MM deeplink 같은
+  // 시나리오 (앱 이동 → 승인 → 복귀) 에서 wagmi 가 자체적으로 'connected' 로 전이하지만
+  // connectAsync 의 promise 는 resolve 안 될 수 있음 → pendingResult set 안 됨 → modal 안 닫힘.
+  // 모든 connector (WC/CC/MM) 의 connected 가 일관된 close 트리거가 되도록 단순화.
+  useEffect((): void => {
+    if (!effectiveOpen) return;
+    if (account.status !== 'connected') return;
+    setIsOpen(false);
+  }, [effectiveOpen, account.status]);
+
+  // 외부 onConnect 콜백은 best-effort — pendingResult 가 set 된 경우만 호출.
+  useEffect((): void => {
     if (!pendingResult) return;
     if (account.status !== 'connected') {
       setPendingResult(null);
       return;
     }
-    if (requiredChainId != null && account.chainId !== requiredChainId) {
-      return;
-    }
     onConnectRef.current?.(pendingResult);
     setPendingResult(null);
-    setIsOpen(false);
-  }, [pendingResult, account.status, account.chainId, requiredChainId]);
+  }, [pendingResult, account.status]);
 
   const value = useMemo<ConnectKitContextValue>(
     () => ({
@@ -183,6 +199,11 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
       open,
       close,
       isConnected: account.status === 'connected',
+      needsChainSwitch,
+      requiredChainId,
+      currentChainId: account.chainId,
+      isSwitchingChain,
+      switchToRequiredChain,
       address: account.address,
       connectorId: resolveConnectorId(account.connector?.id),
       disconnect,
@@ -192,6 +213,11 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
       open,
       close,
       account.status,
+      needsChainSwitch,
+      requiredChainId,
+      account.chainId,
+      isSwitchingChain,
+      switchToRequiredChain,
       account.address,
       account.connector?.id,
       disconnect,
@@ -201,15 +227,14 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   return (
     <ConnectKitContext.Provider value={value}>
       {children}
-      <ConnectModal
+      <ConnectDialog
         open={effectiveOpen}
-        connectors={connectors}
+        theme={theme}
+        connectors={resolveConnectorsFromConfig(connectors)}
         wcProjectId={kitConfig.wcProjectId}
-        requiredChainId={requiredChainId}
-        renderConnectError={renderConnectError}
-        onConnect={handleModalConnect}
         onClose={close}
-        onLog={onLog}
+        onConnect={handleDialogConnect}
+        onError={handleDialogError}
       />
     </ConnectKitContext.Provider>
   );

package/src/assets.d.ts

@@ -2,3 +2,8 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

package/src/components/actionItem/index.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode, type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import './style.scss';
+
+interface ActionItemContent {
+  label?: string;
+  description?: string;
+  action?: string;
+  children?: ReactNode;
+}
+
+type ActionItemAsAnchor = { as: 'a' } & AnchorHTMLAttributes<HTMLAnchorElement> & ActionItemContent;
+type ActionItemAsButton = { as: 'button' } & ButtonHTMLAttributes<HTMLButtonElement> &
+  ActionItemContent;
+
+type ActionItemProps = ActionItemAsAnchor | ActionItemAsButton;
+
+const ActionItemBody = ({ label, description, action, children }: ActionItemContent): ReactNode => {
+  if (children) return <>{children}</>;
+  return (
+    <>
+      <span className="ck-action-item-content">
+        <span className="ck-action-item-label">{label}</span>
+        {description && <span className="ck-action-item-desc">{description}</span>}
+      </span>
+      {action && <span className="ck-action-item-action">{action}</span>}
+    </>
+  );
+};
+
+export const ActionItem = (props: ActionItemProps) => {
+  if (props.as === 'a') {
+    const { as: _, label, description, action, children, className, ...rest } = props;
+    return (
+      <a className={`ck-action-item${className ? ` ${className}` : ''}`} {...rest}>
+        <ActionItemBody label={label} description={description} action={action}>
+          {children}
+        </ActionItemBody>
+      </a>
+    );
+  }
+
+  const { as: _, label, description, action, children, className, ...rest } = props;
+  return (
+    <button className={`ck-action-item${className ? ` ${className}` : ''}`} {...rest}>
+      <ActionItemBody label={label} description={description} action={action}>
+        {children}
+      </ActionItemBody>
+    </button>
+  );
+};

package/src/components/actionItem/style.scss

@@ -0,0 +1,47 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-action-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: var(--scale-gray-100);
+  cursor: pointer;
+  margin-top: auto;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.ck-action-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ck-action-item-label {
+  @include textToken('subtitle2-bold');
+  color: var(--scale-gray-900);
+}
+
+.ck-action-item-desc {
+  @include textToken('label5-regular');
+  color: var(--scale-gray-600);
+}
+
+.ck-action-item-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  height: 44px;
+  border-radius: 6px;
+  background: var(--scale-blue2-alpha-100);
+  @include textToken('label5-bold');
+  color: var(--semantic-brand-trugi-primary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}

package/src/components/copyLink/index.tsx

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+import './style.scss';
+import { CopyIcon } from '../../layout/connectDialog/asset/copyIcon';
+
+interface CopyLinkProps {
+  onCopy?: () => void;
+}
+
+export const CopyLink: FC<CopyLinkProps> = ({ onCopy }) => {
+  return (
+    <button type="button" className="ck-copy-link" onClick={onCopy}>
+      <CopyIcon className="ck-copy-link-icon" />
+      Copy link
+    </button>
+  );
+};

package/src/components/copyLink/style.scss

@@ -0,0 +1,16 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-copy-link {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 6px;
+  @include textToken('body3-l1-regular');
+  color: var(--scale-gray-500);
+  cursor: pointer;
+}
+
+.ck-copy-link-icon {
+  flex-shrink: 0;
+  color: var(--scale-gray-500);
+}

package/src/components/qrArea/index.tsx

@@ -0,0 +1,70 @@
+import { type FC, type CSSProperties } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { CopyLink } from '../copyLink';
+import './style.scss';
+
+export type QrAreaStatus = 'loading' | 'ready' | 'timeout';
+
+interface QrAreaProps {
+  uri?: string | null;
+  status: QrAreaStatus;
+  logoUrl?: string;
+  hasBg?: boolean;
+  label?: string;
+  onCopy?: () => void;
+}
+
+const BG_COLOR = '#ffffff';
+const FG_COLOR = '#000000';
+const FG_GRADIENT = 'url(#ck-qr-gradient)';
+
+export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, label, onCopy }) => {
+  const bgColor = hasBg ? BG_COLOR : 'transparent';
+  const fgColor = hasBg ? FG_COLOR : FG_GRADIENT;
+
+  return (
+    <div className="ck-qr-area">
+      <div className="ck-qr-group">
+        <figure className={`ck-qr ck-qr-${status}`} aria-label="QR Code">
+          {status === 'loading' && (
+            <div className="ck-qr-skeleton" aria-busy="true" aria-label="Loading QR code" />
+          )}
+          {status === 'ready' && uri && (
+            <div
+              className="ck-qr-frame"
+              style={{ 'background': bgColor, '--ck-qr-bg': bgColor } as CSSProperties}
+            >
+              {!hasBg && (
+                <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
+                  <defs>
+                    <linearGradient id="ck-qr-gradient" x1="67%" y1="11%" x2="45%" y2="99%">
+                      <stop offset="0%" stopColor="#7B91FF" />
+                      <stop offset="100%" stopColor="#61BCFF" />
+                    </linearGradient>
+                  </defs>
+                </svg>
+              )}
+              <QRCodeSVG
+                value={uri}
+                size={288}
+                bgColor={bgColor}
+                fgColor={fgColor}
+                level="M"
+                marginSize={0}
+                imageSettings={
+                  logoUrl ? { src: logoUrl, width: 68, height: 68, excavate: true } : undefined
+                }
+              />
+            </div>
+          )}
+        </figure>
+        {(label || onCopy) && (
+          <div className="ck-qr-text">
+            {label && <p className="ck-qr-label">{label}</p>}
+            {onCopy && <CopyLink onCopy={onCopy} />}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};