@gluwa/connect-kit 0.2.0-next.9 → 0.2.1-next.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.9",
+  "version": "0.2.1-next.1",
   "type": "module",
   "exports": {
     ".": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.2.0-next.9",
+  "version": "0.2.1-next.1",
   "type": "module",
   "exports": {
     ".": {
@@ -26,10 +26,10 @@
     "qrcode.react": "^4.2.0",
     "wagmi": "^2.15.6",
     "@wagmi/core": "^2.16.7",
-    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.0-next.4",
-    "@gluwa/credit-connect-hub-node-ws": "0.1.0-next.4",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.4",
-    "@gluwa/credit-connect-storage-local": "0.2.0-next.4"
+    "@gluwa/credit-connect-storage-local": "0.2.1-next.7",
+    "@gluwa/credit-connect-e2ee-tweetnacl": "0.2.1-next.7",
+    "@gluwa/credit-connect-sdk": "0.2.1-next.7",
+    "@gluwa/credit-connect-hub-node-ws": "0.1.1-next.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.62.0",
@@ -43,7 +43,7 @@
     "typescript-eslint": "^8.18.2",
     "viem": "^2.31.7",
     "wagmi": "^2.15.6",
-    "@gluwa/credit-connect-sdk": "0.2.0-next.4"
+    "@gluwa/credit-connect-sdk": "0.2.1-next.7"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/src/ConnectKitProvider.tsx

@@ -18,6 +18,7 @@ import { getConfig, getKitConfig, initConfig } from './core/config';
 import { resolveConnectorId } from './connector-meta';
 import type {
   ConnectErrorContext,
+  ConnectBannerSiteKey,
   ConnectKitConfig,
   ConnectKitTheme,
   ConnectResult,
@@ -30,6 +31,8 @@ const internalQueryClient = new QueryClient();
 
 export interface ConnectKitProviderProps {
   children: ReactNode;
+  siteKey: ConnectBannerSiteKey;
+  connectBannerUrl: string;
   kitConfig?: ConnectKitConfig;
   connectors: Connectors;
   requiredChainId?: number;
@@ -90,6 +93,8 @@ type ConnectKitProviderInnerProps = Omit<ConnectKitProviderProps, 'kitConfig'> &
 
 const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   children,
+  siteKey,
+  connectBannerUrl,
   connectors,
   kitConfig,
   requiredChainId,
@@ -154,7 +159,7 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
     } finally {
       if (isMountedRef.current) setIsSwitchingChain(false);
     }
-  }, [requiredChainId, switchChainAsync]);
+  }, [requiredChainId, switchChainAsync, account.chainId]);
 
   // ConnectDialog 의 wagmi connect 성공 → pendingResult set → 아래 useEffect 가
   // account.status === 'connected' 확인 후 외부 onConnect 호출 + modal close.
@@ -229,6 +234,8 @@ const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
       {children}
       <ConnectDialog
         open={effectiveOpen}
+        siteKey={siteKey}
+        connectBannerUrl={connectBannerUrl}
         theme={theme}
         connectors={resolveConnectorsFromConfig(connectors)}
         wcProjectId={kitConfig.wcProjectId}

package/src/components/qrArea/index.tsx

@@ -12,13 +12,22 @@ interface QrAreaProps {
   hasBg?: boolean;
   label?: string;
   onCopy?: () => void;
+  onOpenApp?: () => 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 }) => {
+export const QrArea: FC<QrAreaProps> = ({
+  uri,
+  status,
+  logoUrl,
+  hasBg = false,
+  label,
+  onCopy,
+  onOpenApp,
+}) => {
   const bgColor = hasBg ? BG_COLOR : 'transparent';
   const fgColor = hasBg ? FG_COLOR : FG_GRADIENT;
 
@@ -60,10 +69,23 @@ export const QrArea: FC<QrAreaProps> = ({ uri, status, logoUrl, hasBg = false, l
             </div>
           )}
         </figure>
-        {(label || onCopy) && (
+        {(label || onCopy || onOpenApp) && (
           <div className="ck-qr-text">
             {label && <p className="ck-qr-label">{label}</p>}
-            {onCopy && <CopyLink onCopy={onCopy} />}
+            {onOpenApp &&
+              (status === 'loading' ? (
+                <span className="ck-qr-open-app-skeleton" aria-hidden="true" />
+              ) : (
+                <button type="button" className="ck-qr-open-app" onClick={onOpenApp}>
+                  Open app
+                </button>
+              ))}
+            {onCopy &&
+              (status === 'loading' ? (
+                <span className="ck-qr-copy-skeleton" aria-hidden="true" />
+              ) : (
+                <CopyLink onCopy={onCopy} />
+              ))}
           </div>
         )}
       </div>

package/src/components/qrArea/style.scss

@@ -2,11 +2,11 @@
 
 .ck-qr-area {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   flex: 1;
   width: 100%;
-  padding-bottom: 32px;
+  padding: 32px 0;
 }
 
 // ── Text ──────────────────────────────────────────────────────────────────────
@@ -17,6 +17,10 @@
   gap: 6px;
   width: 100%;
   margin-top: 24px;
+
+  @include tablet {
+    gap: 12px;
+  }
 }
 
 .ck-qr-label {
@@ -25,6 +29,46 @@
   text-align: center;
 }
 
+.ck-root .ck-qr-open-app {
+  display: none;
+  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;
+
+  @include tablet {
+    display: inline-flex;
+  }
+
+  &:hover {
+    background: var(--scale-gray-100);
+  }
+}
+
+.ck-qr-open-app-skeleton {
+  display: none;
+  width: 116px;
+  height: 44px;
+  border-radius: 500px;
+  background: linear-gradient(
+    132deg,
+    var(--scale-gray-100) 36%,
+    var(--scale-gray-200) 51%,
+    var(--scale-gray-100) 66%
+  );
+  background-size: 200% 100%;
+  animation: ck-qr-shimmer 1.5s linear infinite;
+
+  @include tablet {
+    display: block;
+  }
+}
+
 .ck-qr {
   display: flex;
   flex-direction: column;
@@ -76,6 +120,21 @@
   }
 }
 
+.ck-qr-copy-skeleton {
+  display: block;
+  width: 84px;
+  height: 20px;
+  border-radius: 4px;
+  background: linear-gradient(
+    132deg,
+    var(--scale-gray-100) 36%,
+    var(--scale-gray-200) 51%,
+    var(--scale-gray-100) 66%
+  );
+  background-size: 200% 100%;
+  animation: ck-qr-shimmer 1.5s linear infinite;
+}
+
 @keyframes ck-qr-shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }

package/src/components/toast/index.tsx

@@ -0,0 +1,41 @@
+import { type FC, useEffect } from 'react';
+import './style.scss';
+import { CloseIcon } from '../../layout/connectDialog/asset/closeIcon';
+import { CheckIcon } from '../../layout/connectDialog/asset/checkIcon';
+import { WarningIcon } from '../../layout/connectDialog/asset/warningIcon';
+
+export type ToastVariant = 'success' | 'warning';
+
+const AUTO_CLOSE_MS = 3000;
+
+interface ToastProps {
+  message: string;
+  variant?: ToastVariant;
+  onClose?: () => void;
+}
+
+export const Toast: FC<ToastProps> = ({ message, variant = 'success', onClose }) => {
+  useEffect(() => {
+    if (!onClose) return;
+    const timer = setTimeout(onClose, AUTO_CLOSE_MS);
+    return () => clearTimeout(timer);
+  }, [variant, onClose, message]);
+
+  return (
+    <div className="ck-toast" data-variant={variant} role="status" aria-live="polite">
+      <div className="ck-toast-content">
+        {variant === 'warning' ? (
+          <WarningIcon className="ck-toast-icon ck-toast-icon--warning" />
+        ) : (
+          <CheckIcon className="ck-toast-icon ck-toast-icon--success" />
+        )}
+        <p className="ck-toast-message">{message}</p>
+      </div>
+      {onClose && (
+        <button type="button" className="ck-toast-close" onClick={onClose} aria-label="Close">
+          <CloseIcon width={20} height={20} />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/toast/style.scss

@@ -0,0 +1,108 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-toast-stack {
+  position: fixed;
+  top: clamp(20px, 9.2vh, 99px);
+  left: 50%;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100vw - 40px);
+  transform: translateX(-50%);
+
+  @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;
+    align-items: stretch;
+    max-width: none;
+    transform: none;
+  }
+}
+
+.ck-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: max-content;
+  min-width: min(400px, calc(100vw - 40px));
+  max-width: 100%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: var(--semantic-paper-sheet);
+  border: 1px solid var(--semantic-divider-divider-1);
+  animation: ck-toast-in 0.2s ease;
+
+  @include tablet {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+@keyframes ck-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ck-toast-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @include tablet {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.ck-toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.ck-toast-icon--success {
+  color: var(--semantic-information-success);
+}
+
+.ck-toast-icon--warning {
+  color: var(--semantic-information-caution);
+}
+
+.ck-toast-message {
+  @include textToken('body3-l1-medium');
+  color: var(--scale-gray-900);
+  white-space: nowrap;
+
+  @include tablet {
+    flex: 1;
+    min-width: 0;
+    white-space: normal;
+  }
+}
+
+.ck-root .ck-toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--scale-gray-700);
+  cursor: pointer;
+}

package/src/core/config.ts

@@ -1,5 +1,7 @@
 import { createConfig, createStorage } from 'wagmi';
 import { metaMask, walletConnect, injected } from 'wagmi/connectors';
+import { hasInjectedMobileProvider } from '../utils/platform';
+import { markDeeplinkOpened } from './deeplinkSignal';
 import type { Config } from 'wagmi';
 import type { ConnectKitConfig } from '../types';
 import { creditConnectConnector } from '../creditConnectConnector';
@@ -44,11 +46,26 @@ export const initConfig = (kitConfig: ConnectKitConfig): Config => {
     connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: false }));
   }
 
+  // MetaMask는 metaMaskSDK 커넥터 하나로만 연결한다.
+  // generic injected 커넥터를 함께 두면 같은 window.ethereum에 이중 바인딩되어
+  // wagmi connections 가 2개가 되고, dApp의 다중연결 감지 로직이 오작동한다.
   connectors.push(
-    metaMask({ headless: true, storage: { enabled: true } }),
-    injected({ shimDisconnect: false }),
+    metaMask({
+      headless: true,
+      useDeeplink: true,
+      storage: { enabled: true },
+      openDeeplink: (url) => {
+        markDeeplinkOpened();
+        window.location.replace(url);
+      },
+    }),
   );
 
+  // 인앱 지갑 웹뷰(모바일 + 호스트 window.ethereum 주입)
+  if (hasInjectedMobileProvider()) {
+    connectors.push(injected({ shimDisconnect: false }));
+  }
+
   if (kitConfig.creditConnect) {
     connectors.push(
       creditConnectConnector({
@@ -73,6 +90,10 @@ export const initConfig = (kitConfig: ConnectKitConfig): Config => {
     connectors,
     transports: kitConfig.transports,
     storage: isBrowser ? createStorage({ storage: window.localStorage }) : undefined,
+    // EIP-6963 자동 탐지 비활성화: 켜두면 MetaMask 가 io.metamask(type='injected')로
+    // 다시 발견되어 metaMaskSDK 와 이중 커넥터가 되고 connections 가 2개로 잡힌다.
+    // MetaMask 는 위 metaMaskSDK 커넥터로만 붙이므로 탐지가 필요 없다.
+    multiInjectedProviderDiscovery: false,
   });
   slot.kitConfig = kitConfig;
 

package/src/core/deeplinkSignal.ts

@@ -0,0 +1,25 @@
+type Signal = { opened: boolean };
+
+const SIGNAL_KEY = Symbol.for('@gluwa/connect-kit:deeplink-signal');
+
+type GlobalWithSignal = typeof globalThis & {
+  [SIGNAL_KEY]?: Signal;
+};
+
+const getSignal = (): Signal => {
+  const g = globalThis as GlobalWithSignal;
+  if (!g[SIGNAL_KEY]) {
+    g[SIGNAL_KEY] = { opened: false };
+  }
+  return g[SIGNAL_KEY];
+};
+
+export const resetDeeplinkSignal = (): void => {
+  getSignal().opened = false;
+};
+
+export const markDeeplinkOpened = (): void => {
+  getSignal().opened = true;
+};
+
+export const hasDeeplinkOpened = (): boolean => getSignal().opened;

package/src/creditConnectConnector.ts

@@ -29,7 +29,10 @@ 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> }>
+      ? ReadonlyArray<{
+          address: Address;
+          capabilities: Record<string, unknown>;
+        }>
       : readonly Address[];
     chainId: number;
   };
@@ -92,7 +95,7 @@ export const creditConnectConnector = (
       if (state.status === 'CONNECTING' && state.connectingPayload) {
         // eslint-disable-next-line no-console
         console.log('[CC connector] emit display_uri', {
-          payloadPrefix: state.connectingPayload.slice(0, 80),
+          ready: true,
         });
         options.onDisplayUri?.(state.connectingPayload);
         emitWagmiMessage?.('display_uri', state.connectingPayload);
@@ -109,7 +112,9 @@ export const creditConnectConnector = (
 
     manager.on('sessionExpired', (payload) => {
       // eslint-disable-next-line no-console
-      console.log('[CC connector] session expired → emit session_expired', payload);
+      console.log('[CC connector] session expired → emit session_expired', {
+        reason: payload.reason,
+      });
       emitWagmiMessage?.('session_expired', payload);
     });
 
@@ -318,7 +323,10 @@ export const creditConnectConnector = (
         withCapabilities?: withCapabilities | boolean;
       }): Promise<{
         accounts: withCapabilities extends true
-          ? ReadonlyArray<{ address: Address; capabilities: Record<string, unknown> }>
+          ? ReadonlyArray<{
+              address: Address;
+              capabilities: Record<string, unknown>;
+            }>
           : readonly Address[];
         chainId: number;
       }> {
@@ -412,7 +420,9 @@ export const creditConnectConnector = (
         );
 
         if (!supported) {
-          const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
+          const err = new Error(`Unsupported chain: ${chainId}`) as Error & {
+            code?: number;
+          };
           err.code = 4902;
           throw err;
         }

package/src/events/account.ts

@@ -24,28 +24,37 @@ export const reconnect = async (): Promise<ReconnectReturnType> => {
 
   if (getKitConfig().autoConnectInjected !== false) {
     try {
-      const injected = config.connectors.find((connector) => connector.type === 'injected');
-      if (injected) {
-        const provider = (await injected.getProvider()) as
+      // 자동 재연결
+      // 인앱 지갑 웹뷰: 호스트 주입 provider 는 injected 커넥터로만
+      const injectedConnector = config.connectors.find(
+        (connector) => connector.type === 'injected',
+      );
+      const metaMaskConnector = config.connectors.find(
+        (connector) => connector.id === 'metaMaskSDK',
+      );
+      const target = injectedConnector ?? metaMaskConnector;
+      if (target) {
+        const provider = (await target.getProvider()) as
           | { request?: (args: { method: string }) => Promise<unknown> }
           | undefined;
         const accounts = provider?.request
           ? await provider.request({ method: 'eth_accounts' })
           : [];
         if (Array.isArray(accounts) && accounts.length > 0) {
-          await wagmiConnect(config, { connector: injected });
+          await wagmiConnect(config, { connector: target });
         }
       }
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.warn('injected auto-connect skipped (non-fatal):', error);
+      console.warn('auto-connect skipped (non-fatal):', error);
     }
   }
 
   if (wagmiGetAccount(config).status === 'connected') {
     return [];
   }
-  return wagmiReconnect(config);
+  const result = await wagmiReconnect(config);
+  return result;
 };
 
 export const disconnectAll = async (

package/src/hooks/useConnectBanner.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ConnectBanner, ConnectBannerSiteKey } from '../types';
+
+interface ConnectBannersResponse {
+  banners: ConnectBanner[];
+}
+
+interface UseConnectBannerParams {
+  open: boolean;
+  siteKey: ConnectBannerSiteKey;
+  url: string;
+}
+
+interface UseConnectBannerResult {
+  banner: ConnectBanner | null;
+  loading: boolean;
+}
+
+const pickRandomBanner = (banners: ConnectBanner[]): ConnectBanner | null =>
+  banners[Math.floor(Math.random() * banners.length)] ?? null;
+
+export const useConnectBanner = ({
+  open,
+  siteKey,
+  url,
+}: UseConnectBannerParams): UseConnectBannerResult => {
+  const [candidates, setCandidates] = useState<ConnectBanner[]>([]);
+  const [banner, setBanner] = useState<ConnectBanner | null>(null);
+  const [loading, setLoading] = useState(true);
+  const wasOpenRef = useRef(open);
+
+  useEffect(() => {
+    if (!url) {
+      setCandidates([]);
+      setBanner(null);
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    setCandidates([]);
+    setBanner(null);
+    setLoading(true);
+
+    fetch(url, { signal: controller.signal })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`Failed to fetch connect banners: ${response.status}`);
+        return (await response.json()) as ConnectBannersResponse;
+      })
+      .then(({ banners }) => {
+        if (controller.signal.aborted) return;
+        if (!Array.isArray(banners)) {
+          setLoading(false);
+          return;
+        }
+
+        const nextCandidates = banners.filter((item) => item.siteKey !== siteKey);
+        setCandidates(nextCandidates);
+        setBanner(pickRandomBanner(nextCandidates));
+        setLoading(false);
+      })
+      .catch(() => {
+        // API 실패 시 기존 Idle placeholder를 유지한다.
+        if (!controller.signal.aborted) setLoading(false);
+      });
+
+    return () => controller.abort();
+  }, [siteKey, url]);
+
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = open;
+
+    // 닫힌 dialog 안에서 다음 배너 이미지를 미리 렌더링한다.
+    if (wasOpen && !open) setBanner(pickRandomBanner(candidates));
+  }, [candidates, open]);
+
+  return { banner, loading };
+};