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

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 };
+};

package/src/hooks/useConnectTimeout.ts

@@ -3,16 +3,19 @@ import { type ConnectorId } from '../types';
 
 // MM / CC 폴백용 기본 타임아웃. (CC 는 원칙적으로 서버 push 로 만료가 오지만,
 // 서버 값이 없거나 신호가 유실된 경우를 대비한 폴백 용도로도 쓸 수 있음.)
-export const DEFAULT_CONNECT_TIMEOUT_MS = 600_000;
+export const DEFAULT_CONNECT_TIMEOUT_MS = 300_000;
 
 interface UseConnectTimeoutParams {
   /** 현재 연결 시도 중인 커넥터. null = 유휴 상태. */
   connectorId: ConnectorId | null;
   /** 타임아웃 감시 활성화 여부 — pending/QR 표시 중일 때 true. */
   active: boolean;
+  /** Wagmi connect promise가 실제로 대기 중인지 여부. */
+  isConnecting: boolean;
   /**
-   * 외부 이벤트 기반 만료 신호 (MM 제외). 값이 증가할 때마다 "만료 발생" 으로 간주.
+   * 외부 이벤트 기반 실패/만료 신호. 값이 증가할 때마다 연결 실패로 간주.
    * - CC: dialog 가 connector 의 `session_expired`(서버 push) 를 받아 올림.
+   * - MM: connect promise reject.
    * - WC: dialog 가 WC connect promise reject(프로토콜 ~5분 만료 등) 를 받아 올림.
    */
   expiredSignal?: number;
@@ -23,6 +26,8 @@ interface UseConnectTimeoutParams {
 interface UseConnectTimeoutResult {
   /** 타임아웃 발생 여부 — true 면 dialog 가 <Timeout> 을 렌더. */
   timedOut: boolean;
+  /** 다른 지갑 연결을 시작하기 전에 이전 타임아웃 상태를 즉시 초기화. */
+  reset: () => void;
   /** "Try Again" 버튼에 연결할 함수 — 상태 리셋 + onRetry 실행. */
   retry: () => void;
 }
@@ -36,6 +41,7 @@ interface UseConnectTimeoutResult {
 export const useConnectTimeout = ({
   connectorId,
   active,
+  isConnecting,
   expiredSignal = 0,
   onRetry,
 }: UseConnectTimeoutParams): UseConnectTimeoutResult => {
@@ -54,16 +60,18 @@ export const useConnectTimeout = ({
   // MM 만 client 타이머로 강제 (승인 대기에 네이티브 상한이 없음).
   // CC(서버 push) / WC(connect reject) 는 아래 expiredSignal effect 에서 처리.
   useEffect(() => {
-    if (!active || connectorId !== 'METAMASK') return;
-    const timer = setTimeout(fire, DEFAULT_CONNECT_TIMEOUT_MS);
+    if (!active || !isConnecting || connectorId !== 'METAMASK') return;
+    const timer = setTimeout(() => {
+      fire();
+    }, DEFAULT_CONNECT_TIMEOUT_MS);
     return () => clearTimeout(timer);
-  }, [active, connectorId, fire]);
+  }, [active, isConnecting, connectorId, fire]);
 
-  // 외부 만료 신호 처리 (CC 서버 push / WC connect reject) — MM 은 client 타이머라 제외.
+  // 외부 실패/만료 신호 처리 (CC 서버 push / MM·WC connect reject).
   // signal 값이 올라가면(새 만료 이벤트) 발화.
   const prevSignal = useRef(expiredSignal);
   useEffect(() => {
-    if (!active || connectorId === 'METAMASK' || !connectorId) {
+    if (!active || !connectorId) {
       prevSignal.current = expiredSignal;
       return;
     }
@@ -76,7 +84,11 @@ export const useConnectTimeout = ({
   const retry = useCallback(() => {
     setTimedOut(false);
     onRetry?.();
-  }, [onRetry]);
+  }, [connectorId, onRetry]);
+
+  const reset = useCallback(() => {
+    setTimedOut(false);
+  }, []);
 
-  return { timedOut, retry };
+  return { timedOut, reset, retry };
 };

package/src/hooks/useMetaMaskExtension.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+const METAMASK_RDNS = 'io.metamask';
+
+// EIP-6963 응답의 rdns 로 MetaMask 확장을 식별.
+const isMetaMaskAnnouncement = (event: Event): boolean => {
+  const detail = (event as CustomEvent<{ info?: { rdns?: string }; provider?: unknown }>).detail;
+  return detail?.info?.rdns?.toLowerCase() === METAMASK_RDNS && detail.provider != null;
+};
+
+export const useMetaMaskExtension = (): boolean => {
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    const handleAnnouncement = (event: Event): void => {
+      const isMetaMask = isMetaMaskAnnouncement(event);
+      if (isMetaMask) setIsInstalled(true);
+    };
+
+    // 응답 listener를 먼저 등록한 뒤 설치된 provider 목록을 요청.
+    window.addEventListener('eip6963:announceProvider', handleAnnouncement);
+    window.dispatchEvent(new Event('eip6963:requestProvider'));
+
+    return () => {
+      window.removeEventListener('eip6963:announceProvider', handleAnnouncement);
+    };
+  }, []);
+
+  return isInstalled;
+};

package/src/hooks/useWCState.ts

@@ -1,19 +1,20 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import type { WCWallet, WCSubView } from '../types';
-
-// WalletConnect Explorer 에 등록된 Credit Wallet 의 정식 wallet name (API 응답 그대로).
-// CONNECTOR_META.CREDIT_CONNECT.label 은 selector button 표시용 ('Continue with Credit Wallet')
-// 이라 다름 — 별도 상수로 분리.
-const WC_EXPLORER_CREDIT_WALLET_NAME = 'Credit Wallet';
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+import { CREDIT_WALLET_LISTING_ID, overrideWalletDisplay } from '../wallet-display-override';
 
 const sortCreditWalletFirst = (list: WCWallet[]): WCWallet[] =>
   [...list].sort((a, b) => {
-    if (a.name === WC_EXPLORER_CREDIT_WALLET_NAME) return -1;
-    if (b.name === WC_EXPLORER_CREDIT_WALLET_NAME) return 1;
+    // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+    if (a.id === CREDIT_WALLET_LISTING_ID) return -1;
+    if (b.id === CREDIT_WALLET_LISTING_ID) return 1;
     return 0;
   });
 
-const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promise<WCWallet[]> => {
+const fetchWCWalletList = async (
+  projectId: string,
+  signal: AbortSignal | undefined,
+): Promise<WCWallet[]> => {
   // WC Explorer API 가 page 경계에서 같은 wallet 을 중복 emit 하는 케이스 관찰됨
   // (paginate 사이 sort/dedup 보장 X). id 기준 first-write-wins dedup.
   const byId = new Map<string, WCWallet>();
@@ -108,14 +109,17 @@ export const useWCState = (): WCState => {
   }, []);
 
   const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
-    if (loadedRef.current) return;
+    if (loadedRef.current) {
+      return;
+    }
     loadedRef.current = true;
     const controller = new AbortController();
     abortControllerRef.current = controller;
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      const sorted = sortCreditWalletFirst(list);
+      // TODO-CRCN-11: WC에 PenguinWallet 추가 시 변경
+      const sorted = sortCreditWalletFirst(list).map(overrideWalletDisplay);
       // Credit Wallet 을 최상단으로 정렬한 상태로 state 저장 — view 측은 정렬 신경 X.
       if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {

package/src/hooks/useWagmiConnect.ts

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useCallback } from 'react';
 import { useConnect, useConfig } from 'wagmi';
+import { getAccount } from '@wagmi/core';
 import type { ConnectorId, ConnectResult } from '../types';
+import { resolveConnectorId } from '../connector-meta';
+import { resetDeeplinkSignal } from '../core/deeplinkSignal';
 
 type WagmiConnectorLike = {
   id: string;
@@ -13,15 +16,10 @@ const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().inclu
 const hasWalletConnectKeyword = (value: string): boolean =>
   value.toLowerCase().includes('walletconnect');
 
+// 전역 provider 대신 wagmi connector 메타데이터로 MetaMask를 판별.
 const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
   if (connector.id === 'metaMaskSDK') return true;
 
-  if (connector.id === 'injected') {
-    if (typeof window === 'undefined') return false;
-    const eth = (window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum;
-    return eth?.isMetaMask === true;
-  }
-
   if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
 
   if (connector.rdns) {
@@ -78,6 +76,7 @@ export const useWagmiConnect = ({
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
+  const pendingAttemptId = useRef<string | null>(null);
   const attemptCounter = useRef(0);
 
   const onConnectRef = useRef(onConnect);
@@ -94,17 +93,27 @@ export const useWagmiConnect = ({
   const { connectAsync, reset, isPending } = useConnect();
 
   useEffect(() => {
-    const handler = (data: unknown): void => {
-      const msg = data as { type?: string; data?: unknown };
-      if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
-        onQrUriRef.current(msg.data);
-      }
-      if (msg?.type === 'session_expired') {
-        onSessionExpiredRef.current?.();
-      }
-    };
-
     const unsubscribers = config.connectors.map((connector) => {
+      const emitterConnectorId = resolveConnectorId(connector.id);
+      const handler = (data: unknown): void => {
+        const msg = data as { type?: string; data?: unknown };
+        const pendingId = pendingConnectorId.current;
+        const belongsToPendingAttempt =
+          pendingId !== null && emitterConnectorId !== null && pendingId === emitterConnectorId;
+
+        if (msg?.type === 'display_uri' && typeof msg.data === 'string') {
+          if (!belongsToPendingAttempt) {
+            return;
+          }
+          onQrUriRef.current(msg.data);
+        }
+        if (msg?.type === 'session_expired') {
+          if (pendingId !== null && !belongsToPendingAttempt) {
+            return;
+          }
+          onSessionExpiredRef.current?.();
+        }
+      };
       connector.emitter.on('message', handler);
       return (): void => {
         connector.emitter.off('message', handler);
@@ -122,26 +131,38 @@ export const useWagmiConnect = ({
     (connectorId: ConnectorId): void => {
       const connector = resolveWagmiConnector(config.connectors, connectorId);
       if (!connector) {
+        pendingAttemptId.current = null;
         onErrorRef.current(new Error(`No wagmi connector found for ${connectorId}`), connectorId);
         return;
       }
 
       onQrUriRef.current(null);
+      resetDeeplinkSignal();
       const attemptId = ++attemptCounter.current;
       pendingConnectorId.current = connectorId;
       connectAsync({ connector })
         .then((result) => {
-          if (attemptCounter.current !== attemptId) return;
-          const address = result.accounts?.[0];
+          if (attemptCounter.current !== attemptId) {
+            return;
+          }
+          // connectAsync 의 resolve 값에 계정이 비어 오는 경우가 있다 (MetaMask 모바일에서
+          // authorized 직후 accounts 채워짐이 한 tick 늦는 race). 그때도 wagmi 스토어에는
+          // 이미 주소가 들어와 있으므로 '연결됐는가'의 원본인 스토어를 fallback 으로 쓴다.
+          // 이 fallback 이 없으면 성공한 연결 위에 실패/타임아웃 화면이 덮인다.
+          const address = result.accounts?.[0] ?? getAccount(config).address;
           if (!address) {
             throw new Error('Connected but no account returned');
           }
           pendingConnectorId.current = null;
+          pendingAttemptId.current = null;
           onConnectRef.current({ address, connectorId });
         })
         .catch((error) => {
-          if (attemptCounter.current !== attemptId) return;
+          if (attemptCounter.current !== attemptId) {
+            return;
+          }
           pendingConnectorId.current = null;
+          pendingAttemptId.current = null;
           onErrorRef.current(error as Error, connectorId);
         });
     },
@@ -151,9 +172,10 @@ export const useWagmiConnect = ({
   const cancelConnect = useCallback((): void => {
     attemptCounter.current += 1;
     pendingConnectorId.current = null;
+    pendingAttemptId.current = null;
     onQrUriRef.current(null);
     reset();
-  }, [reset]);
+  }, [isPending, reset]);
 
   return { triggerConnect, cancelConnect, isConnecting: isPending };
 };

package/src/index.ts

@@ -14,6 +14,7 @@ export { initConfig } from './core/config';
 export type {
   ConnectErrorContext,
   ConnectErrorReason,
+  ConnectBannerSiteKey,
   ConnectModalProps,
   ConnectKitConfig,
   ConnectKitTheme,

package/src/layout/allWallets/index.tsx

@@ -34,15 +34,29 @@ export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWa
   return (
     <div className="ck-all-wallets">
       <div className="ck-all-wallets-controls">
-        <SearchBar value={search} onChange={setSearch} onClear={() => setSearch('')} />
+        <SearchBar
+          value={search}
+          onChange={(value) => {
+            setSearch(value);
+          }}
+          onClear={() => {
+            setSearch('');
+          }}
+        />
         <div className="ck-wc-filter-btn">
           <img className="ck-wc-filter-logo" src={wcLogo} alt="" aria-hidden="true" />
-          <Toggle checked={filterInstalled} label="" onChange={setFilterInstalled} />
+          <Toggle
+            checked={filterInstalled}
+            label=""
+            onChange={(checked) => {
+              setFilterInstalled(checked);
+            }}
+          />
         </div>
       </div>
       {!isLoading && filtered.length === 0 ? (
         <div className="ck-all-wallets-empty" role="status">
-          <p>No wallets found</p>
+          <p>No Wallet found</p>
         </div>
       ) : (
         <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />

package/src/layout/allWallets/style.scss

@@ -19,13 +19,8 @@
   gap: 8px;
   flex-shrink: 0;
 
-  @include max-width(392px) {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 12px;
-    .ck-search {
-      width: 100%;
-    }
+  .ck-search {
+    min-width: 0;
   }
 }
 

package/src/layout/connectDialog/asset/warningIcon.tsx

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const WarningIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={18}
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M9.05688 0.833252C9.47596 0.107398 10.5234 0.107541 10.9426 0.833252L19.6663 15.9417C20.0852 16.6675 19.561 17.5744 18.7229 17.5745H1.27759C0.43938 17.5745 -0.0848319 16.6676 0.334229 15.9417L9.05688 0.833252ZM9.26685 13.0491V14.5149H10.7327V13.0491H9.26685ZM9.26685 6.65747V12.1018H10.7327V6.65747H9.26685Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

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

@@ -1,32 +1,56 @@
 import { type FC } from 'react';
-import './style.scss';
-import graphic from '../../../../assets/graphic.png';
 import { LinkIcon } from '../asset/linkIcon';
+import placeholderImage from './assets/banner-placeholder.png';
+import './style.scss';
+
+interface IdleProps {
+  title?: string;
+  description?: string;
+  linkText?: string;
+  linkUrl?: string;
+  imageUrl?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+  linkTextColor?: string;
+}
 
-export const Idle: FC = () => {
+export const Idle: FC<IdleProps> = ({
+  title = 'PenguinWallet',
+  description = `Your non-custodial gateway to the Creditcoin network.
+    Hold tokens, swap, and play ecosystem games in one app.`,
+  linkText = 'Download',
+  // TODO: Change to Penguin Wallet
+  linkUrl = 'https://creditcoin.org/Credit-Wallet',
+  imageUrl = placeholderImage,
+  titleColor = '#FFFFFF',
+  descriptionColor = '#888A8C',
+  linkTextColor = '#3374FF',
+}) => {
   return (
     <div className="ck-idle">
-      <figure className="ck-idle-graphic" aria-hidden="true">
-        <img src={graphic} alt="" />
-      </figure>
-      <div className="ck-idle-text">
-        <h3 className="ck-idle-title">Swap anytime, anywhere</h3>
-        <p className="ck-idle-desc">
-          Swap, earn, and build on the leading decentralized
-          <br />
-          crypto trading protocol.
+      <img className="ck-idle-bg" src={imageUrl} alt="" />
+      {title && (
+        <h3 className="ck-idle-title" style={{ color: titleColor }}>
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="ck-idle-desc" style={{ color: descriptionColor }}>
+          {description}
         </p>
+      )}
+      {linkText && linkUrl && (
         <a
           className="ck-idle-link"
-          href="#"
+          href={linkUrl}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Learn more about Credit Connect"
+          style={{ color: linkTextColor }}
         >
-          <span>Learn more</span>
+          <span>{linkText}</span>
           <LinkIcon />
         </a>
-      </div>
+      )}
     </div>
   );
 };

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

@@ -1,61 +1,52 @@
 @use '../../../style/mixin.scss' as *;
+.ck-root {
+  .ck-idle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    padding: 60px;
+    box-sizing: border-box;
+  }
 
-.ck-idle {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  height: 100%;
-  padding: 0px 40px;
-  margin-top: -30px;
-}
-
-.ck-idle-graphic {
-  max-width: 440px;
-  height: auto;
-  max-height: 240px;
-  flex-shrink: 0;
-  margin: 0;
-
-  img {
+  .ck-idle-bg {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
+    z-index: -1;
   }
-}
-
-.ck-idle-text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-}
-
-.ck-idle-title {
-  @include textToken('title1-bold'); 
-  color: var(--scale-gray-900);
-  text-align: center;
-  width: 100%;
-  letter-spacing: -0.96px;
-}
 
-.ck-idle-desc {
-  @include textToken('body4-l1-regular'); 
-  color: var(--scale-gray-600);
-  text-align: center;
-  width: 100%;
-}
+  .ck-idle-title {
+    @include textToken('title1-bold'); 
+    color: var(--scale-gray-900);
+  }
 
-.ck-root .ck-idle-link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--scale-gray-600);
-  span {
+  .ck-idle-desc {
+    color: var(--scale-gray-600);
+    margin-top: 6px;
+    white-space: pre-line;
     @include textToken('body4-l1-regular');
   }
-  svg {
-    flex-shrink: 0;
+
+  .ck-idle-link {
+    display: flex;
+    align-items: center;
+    margin: -2px -8px -8px -8px;
+    padding: 8px;
+
+    span {
+      @include textToken('body4-l1-bold');
+      color: inherit;
+    }
+
+    svg {
+      flex-shrink: 0;
+      color: inherit;
+    }
   }
-}
+}