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

package/src/components/walletItem/style.scss

@@ -0,0 +1,70 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-root .ck-wallet-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 20px;
+  border-radius: 12px;
+  background: var(--scale-gray-100);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--scale-gray-200);
+  }
+
+  &.is-selected {
+    background: var(--semantic-brand-trugi-primary);
+
+    .ck-wallet-item-label {
+      color: var(--static-white-main);
+    }
+
+    .ck-wallet-item-badge {
+      background: var(--static-white-alpha-200);
+      color: var(--static-white-main);
+    }
+  }
+}
+
+.ck-wallet-item-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  overflow: hidden;
+  object-fit: cover;
+
+  &.has-bg {
+    background: var(--static-white-main);
+    padding: 2px;
+  }
+}
+
+.ck-wallet-item-txt {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ck-wallet-item-label {
+  @include textToken('label3-bold');
+  color: var(--scale-gray-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+
+.ck-wallet-item-badge {
+  @include textToken('caption3-bold');
+  color: var(--semantic-brand-trugi-primary);
+  background: var(--scale-blue2-alpha-100);
+  padding: 4px 8px;
+  border-radius: 500px;
+  flex-shrink: 0;
+}

package/src/connector-meta.ts

@@ -17,13 +17,6 @@ export const CONNECTOR_META: Record<ConnectorId, ConnectorMeta> = {
     detailTitle: 'Scan with Credit Wallet',
     downloadUrl: 'https://creditwallet.onelink.me/Jv54',
     logoUrl: creditWalletIcon,
-    // deepLinkBase: TODO — 앱 측 CC 딥링크 스킴 확정 후 추가
-  },
-  CREDIT_WALLET: {
-    label: 'Credit Wallet',
-    detailTitle: 'Scan with Credit Wallet',
-    downloadUrl: 'https://creditwallet.onelink.me/Jv54',
-    logoUrl: creditWalletIcon,
     deepLinkBase: 'creditwallet://',
   },
   METAMASK: {
@@ -39,3 +32,15 @@ export const CONNECTOR_META: Record<ConnectorId, ConnectorMeta> = {
     logoUrl: wcIcon,
   },
 };
+
+// wagmi connector id (예: 'credit-connect' · 'metaMaskSDK' · 'walletConnect') → kit ConnectorId.
+// wagmi storage 의 recentConnectorId 복원 · account.connector 식별에 공용 사용.
+export 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;
+};

package/src/core/config.ts

@@ -2,6 +2,10 @@ import { createConfig, createStorage } from 'wagmi';
 import { metaMask, walletConnect, injected } from 'wagmi/connectors';
 import type { Config } from 'wagmi';
 import type { ConnectKitConfig } from '../types';
+import { creditConnectConnector } from '../creditConnectConnector';
+import { LocalStorageProvider } from '@gluwa/credit-connect-storage-local';
+import { tweetNaclE2EE } from '@gluwa/credit-connect-e2ee-tweetnacl';
+import { wsHubFactory } from '@gluwa/credit-connect-hub-node-ws';
 
 type KitSlot = {
   config: Config | null;
@@ -40,7 +44,22 @@ export const initConfig = (kitConfig: ConnectKitConfig): Config => {
     connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: false }));
   }
 
-  connectors.push(metaMask({ storage: { enabled: true } }), injected({ shimDisconnect: false }));
+  connectors.push(
+    metaMask({ headless: true, storage: { enabled: true } }),
+    injected({ shimDisconnect: false }),
+  );
+
+  if (kitConfig.creditConnect) {
+    connectors.push(
+      creditConnectConnector({
+        projectKey: kitConfig.creditConnect.projectId,
+        serverUrl: kitConfig.creditConnect.serverUrl,
+        storage: new LocalStorageProvider(),
+        e2ee: tweetNaclE2EE,
+        createHub: wsHubFactory.createHubFromDapp,
+      }),
+    );
+  }
 
   if (kitConfig.extraConnectors?.length) {
     connectors.push(...kitConfig.extraConnectors);

package/src/creditConnectConnector.ts

@@ -84,12 +84,23 @@ export const creditConnectConnector = (
     });
 
     manager.on('changeState', (state) => {
+      // eslint-disable-next-line no-console
+      console.log('[CC connector] manager state →', state.status, {
+        hasConnectingPayload: Boolean(state.connectingPayload),
+        hasSession: 'session' in state && Boolean((state as { session?: unknown }).session),
+      });
       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),
+        });
         options.onDisplayUri?.(state.connectingPayload);
         emitWagmiMessage?.('display_uri', state.connectingPayload);
       }
 
       if (state.status === 'DISCONNECTED' && !isLocalDisconnect) {
+        // eslint-disable-next-line no-console
+        console.log('[CC connector] DISCONNECTED (non-local) → resetState + emit');
         resetState();
         emitProviderEvent('disconnect');
         emitWagmiDisconnect?.();
@@ -343,32 +354,13 @@ export const creditConnectConnector = (
             });
           }
 
-          if (m.state.status === 'CONNECTING' && m.state.connectingPayload) {
-            options.onDisplayUri?.(m.state.connectingPayload);
-
-            if (!connectPromise) {
-              connectPromise = new Promise<boolean>((resolve) => {
-                const unsub = m.on('changeState', (state) => {
-                  if (state.status === 'CONNECTED') {
-                    unsub();
-                    resolve(true);
-                  } else if (state.status === 'DISCONNECTED') {
-                    unsub();
-                    resolve(false);
-                  }
-                });
-              });
-            }
-          }
-
+          // 새 connect 시도 — stale state (CONNECTING/CONNECTING_WAITING_PAYLOAD) 와
+          // stale connectPromise 는 SDK 의 self-heal (cleanupHub + attempt-id) 에 위임.
+          // connector 는 단순히 새 connectNewSession() 을 호출 — 이전 attempt 는 자연 정리됨.
           if (m.state.status !== 'CONNECTED') {
-            if (!connectPromise) {
-              if (m.state.status !== 'DISCONNECTED') {
-                throw new Error(`Cannot connect from ${m.state.status} state`);
-              }
-              connectPromise = m.connectNewSession();
-            }
-
+            // 이전 attempt 의 await 가 살아있어도, SDK 의 attempt-id 패턴이
+            // 그 결과를 무시하도록 보장한다. connectPromise 는 무조건 새 promise 로.
+            connectPromise = m.connectNewSession();
             const connected = await connectPromise;
             connectPromise = null;
 

package/src/hooks/useWCState.ts

@@ -1,8 +1,22 @@
 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';
+
+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;
+    return 0;
+  });
+
 const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promise<WCWallet[]> => {
-  const all: WCWallet[] = [];
+  // WC Explorer API 가 page 경계에서 같은 wallet 을 중복 emit 하는 케이스 관찰됨
+  // (paginate 사이 sort/dedup 보장 X). id 기준 first-write-wins dedup.
+  const byId = new Map<string, WCWallet>();
   let page = 1;
   const entries = 100;
 
@@ -34,7 +48,8 @@ const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promi
 
     const listings = Object.values(json.listings ?? {});
     for (const w of listings) {
-      all.push({
+      if (byId.has(w.id)) continue;
+      byId.set(w.id, {
         id: w.id,
         name: w.name,
         imageUrl: w.image_url?.md ?? w.image_url?.sm ?? '',
@@ -48,11 +63,11 @@ const fetchWCWalletList = async (projectId: string, signal?: AbortSignal): Promi
       });
     }
 
-    if (listings.length < entries || all.length >= json.total) break;
+    if (listings.length < entries || byId.size >= json.total) break;
     page += 1;
   }
 
-  return all;
+  return Array.from(byId.values());
 };
 
 export interface WCState {
@@ -100,7 +115,9 @@ export const useWCState = (): WCState => {
     setWalletListLoading(true);
     try {
       const list = await fetchWCWalletList(projectId, controller.signal);
-      if (isMountedRef.current) setWalletList(list);
+      const sorted = sortCreditWalletFirst(list);
+      // Credit Wallet 을 최상단으로 정렬한 상태로 state 저장 — view 측은 정렬 신경 X.
+      if (isMountedRef.current) setWalletList(sorted);
     } catch (err) {
       const isAbort = err instanceof DOMException && err.name === 'AbortError';
       if (!isAbort) loadedRef.current = false;

package/src/hooks/useWagmiConnect.ts

@@ -49,7 +49,6 @@ export const resolveWagmiConnector = <T extends WagmiConnectorLike>(
     case 'METAMASK':
       return connectors.find(isMetaMaskConnector);
 
-    case 'CREDIT_WALLET':
     case 'WALLET_CONNECT':
       return connectors.find(isWalletConnectConnector);
 

package/src/index.ts

@@ -5,7 +5,6 @@ import { waitForTransactionReceipt } from './api/transaction';
 import { getAccount, signMessage, signTypedData } from './api/account';
 import { watchAccount, watchConnections, reconnect, disconnectAll } from './events/account';
 
-export { ConnectModal } from './ConnectModal';
 export { ConnectKitProvider, useConnectKit } from './ConnectKitProvider';
 export type { ConnectKitContextValue, ConnectKitProviderProps } from './ConnectKitProvider';
 
@@ -16,10 +15,11 @@ export type {
   ConnectErrorReason,
   ConnectModalProps,
   ConnectKitConfig,
+  ConnectKitTheme,
   Connectors,
+  ConnectorKey,
   ConnectResult,
   ConnectorId,
-  CreditWalletStrategy,
   WCSubView,
   WCWallet,
 } from './types';

package/src/layout/allWallets/index.tsx

@@ -0,0 +1,52 @@
+import { type FC, useState, useMemo } from 'react';
+import './style.scss';
+import { type WCWallet } from '../../types';
+import { SearchBar } from '../../components/searchBar';
+import { Toggle } from '../../components/toggle';
+import { WalletGrid } from '../../components/walletGrid';
+import wcLogo from '../../../assets/wc-search.png';
+
+interface AllWalletsProps {
+  /** Credit Wallet 이 최상단에 오도록 정렬된 상태로 전달됨 — useWCState 의 loadWalletList 에서 처리. */
+  wallets: WCWallet[];
+  isLoading: boolean;
+  onSelectWallet: (wallet: WCWallet) => void;
+}
+
+export const AllWallets: FC<AllWalletsProps> = ({ wallets, isLoading, onSelectWallet }) => {
+  const [search, setSearch] = useState('');
+  const [filterInstalled, setFilterInstalled] = useState(false);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    let list = wallets;
+    if (filterInstalled) {
+      list = list.filter(
+        (w) => w.mobileNative || w.mobileUniversal || w.desktopNative || w.desktopUniversal,
+      );
+    }
+    if (q) {
+      list = list.filter((w) => w.name.toLowerCase().includes(q));
+    }
+    return list;
+  }, [wallets, search, filterInstalled]);
+
+  return (
+    <div className="ck-all-wallets">
+      <div className="ck-all-wallets-controls">
+        <SearchBar value={search} onChange={setSearch} 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} />
+        </div>
+      </div>
+      {!isLoading && filtered.length === 0 ? (
+        <div className="ck-all-wallets-empty" role="status">
+          <p>No wallets found</p>
+        </div>
+      ) : (
+        <WalletGrid wallets={filtered} isLoading={isLoading} onSelect={onSelectWallet} />
+      )}
+    </div>
+  );
+};

package/src/layout/allWallets/style.scss

@@ -0,0 +1,62 @@
+@use '../../style/mixin.scss' as *;
+
+.ck-all-wallets {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 12px;
+
+  @include tablet {
+    min-height: min(420px, 55dvh);
+    max-height: calc(100dvh - 60px);
+  }
+}
+
+.ck-all-wallets-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+
+  @include max-width(392px) {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 12px;
+    .ck-search {
+      width: 100%;
+    }
+  }
+}
+
+.ck-wc-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 100px;
+  background: var(--scale-gray-100);
+  flex-shrink: 0;
+}
+
+.ck-wc-filter-logo {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  object-fit: cover;
+  background: var(--static-white-main);
+}
+
+.ck-all-wallets-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+
+  p {
+    @include textToken('body4-l2-regular');
+    color: var(--scale-gray-600);
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const BackIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={14}
+      height={20}
+      viewBox="0 0 14 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M10 4L4 10L10 16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CheckIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <g clipPath="url(#clip0_check)">
+        <path
+          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM10.4512 15.6953C10.7879 15.973 11.2866 15.9546 11.6016 15.6396L16.7529 10.4883C17.0877 10.1536 17.0877 9.61013 16.7529 9.27539C16.4182 8.94114 15.8756 8.94091 15.541 9.27539L10.9961 13.8223L8.56836 11.3936C8.23374 11.0591 7.69116 11.0593 7.35645 11.3936C7.02171 11.7283 7.02171 12.2717 7.35645 12.6064L10.3867 15.6367C10.4075 15.6575 10.4289 15.6771 10.4512 15.6953Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_check">
+          <rect width="20" height="20" fill="white" transform="translate(2 2)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CloseIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M15.7785 3.2787C16.0389 3.01835 16.4614 3.01835 16.7217 3.2787C16.9819 3.53899 16.9819 3.96077 16.7217 4.22108L10.9421 9.99989L16.7209 15.7787L16.7673 15.8292C16.9809 16.091 16.9658 16.4778 16.7217 16.7219C16.4776 16.9658 16.0908 16.981 15.829 16.7675L15.7785 16.7211L9.99971 10.9422L4.22172 16.7211L4.17126 16.7675C3.90947 16.981 3.52261 16.9658 3.27852 16.7219C3.03445 16.4778 3.0194 16.091 3.23295 15.8292L3.27934 15.7787L9.05733 9.99989L3.27852 4.22108C3.01842 3.96077 3.01839 3.53899 3.27852 3.2787C3.53887 3.01835 3.96137 3.01835 4.22172 3.2787L9.99971 9.05669L15.7785 3.2787Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { type FC, type SVGProps } from 'react';
+
+export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <g clipPath="url(#clip0_copy)">
+        <path
+          d="M16.2247 6.89437C17.1245 6.89437 17.8539 7.6238 17.854 8.5236V16.2246C17.854 17.1244 17.1245 17.8538 16.2247 17.8538H8.52373C7.62388 17.8538 6.89449 17.1244 6.89449 16.2246V8.5236C6.89454 7.6238 7.62391 6.89437 8.52373 6.89437H16.2247ZM8.52373 8.22738C8.36029 8.22738 8.22755 8.36019 8.2275 8.5236V16.2246C8.2275 16.3881 8.36026 16.5208 8.52373 16.5208H16.2247C16.3882 16.5208 16.521 16.3881 16.521 16.2246V8.5236C16.5209 8.36019 16.3881 8.22738 16.2247 8.22738H8.52373ZM13.0225 2.57064C13.8439 2.65419 14.4848 3.34822 14.4848 4.19173V4.91357C14.4848 5.28173 14.1865 5.58002 13.8183 5.58008C13.4501 5.58008 13.1518 5.28176 13.1518 4.91357V4.19173C13.1518 4.04865 13.05 3.92956 12.915 3.90202L12.8556 3.8955H4.19185C4.02839 3.8955 3.89563 4.02827 3.89563 4.19173V12.8555L3.90214 12.9148C3.92968 13.0498 4.04878 13.1517 4.19185 13.1517H4.91369L4.98206 13.1549C5.31816 13.1892 5.5802 13.4731 5.5802 13.8182C5.58014 14.1633 5.31813 14.4473 4.98206 14.4814L4.91369 14.4847H4.19185C3.34833 14.4847 2.65432 13.8438 2.57076 13.0223L2.56262 12.8555V4.19173C2.56262 3.29189 3.29201 2.5625 4.19185 2.5625H12.8556L13.0225 2.57064Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_copy">
+          <rect width="15.8333" height="15.8333" fill="white" transform="translate(2.5 2.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { type FC, type SVGProps } from 'react';
+
+export const LinkIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M6 3L11 8L6 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { type FC, type SVGProps } from 'react';
+
+export const Spinner: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M19.995 3.34375C20.9155 3.34375 21.6617 4.08995 21.6617 5.01042V10.0104C21.6617 10.9309 20.9155 11.6771 19.995 11.6771C19.0745 11.6771 18.3284 10.9309 18.3284 10.0104V5.01042C18.3284 4.08995 19.0745 3.34375 19.995 3.34375ZM19.995 28.3438C20.9155 28.3438 21.6617 29.0899 21.6617 30.0104V35.0104C21.6617 35.9309 20.9155 36.6771 19.995 36.6771C19.0745 36.6771 18.3284 35.9309 18.3284 35.0104V30.0104C18.3284 29.0899 19.0745 28.3438 19.995 28.3438ZM36.6617 20.0104C36.6617 20.9309 35.9155 21.6771 34.995 21.6771H29.995C29.0745 21.6771 28.3284 20.9309 28.3284 20.0104C28.3284 19.0899 29.0745 18.3438 29.995 18.3438H34.995C35.9155 18.3438 36.6617 19.0899 36.6617 20.0104ZM11.6617 20.0104C11.6617 20.9309 10.9155 21.6771 9.99504 21.6771H4.99504C4.07457 21.6771 3.32837 20.9309 3.32837 20.0104C3.32837 19.0899 4.07457 18.3438 4.99504 18.3438H9.99504C10.9155 18.3438 11.6617 19.0899 11.6617 20.0104ZM31.7802 31.7956C31.1292 32.4464 30.074 32.4464 29.4232 31.7956L25.8875 28.2599C25.2367 27.6091 25.2367 26.5539 25.8875 25.9029C26.5385 25.2521 27.5937 25.2521 28.2445 25.9029L31.7802 29.4386C32.431 30.0894 32.431 31.1446 31.7802 31.7956ZM14.1025 14.1179C13.4516 14.7687 12.3963 14.7687 11.7455 14.1179L8.20992 10.5823C7.55905 9.93145 7.55905 8.87618 8.20992 8.2253C8.8608 7.57443 9.91607 7.57443 10.567 8.2253L14.1025 11.7608C14.7534 12.4117 14.7534 13.467 14.1025 14.1179ZM8.20992 31.7956C7.55905 31.1446 7.55905 30.0894 8.20992 29.4386L11.7455 25.9029C12.3963 25.2521 13.4516 25.2521 14.1025 25.9029C14.7534 26.5539 14.7534 27.6091 14.1025 28.2599L10.567 31.7956C9.91607 32.4464 8.8608 32.4464 8.20992 31.7956ZM25.8875 14.1179C25.2367 13.467 25.2367 12.4117 25.8875 11.7608L29.4232 8.2253C30.074 7.57443 31.1292 7.57443 31.7802 8.2253C32.431 8.87618 32.431 9.93145 31.7802 10.5823L28.2445 14.1179C27.5937 14.7687 26.5385 14.7687 25.8875 14.1179Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { type FC } from 'react';
+import './style.scss';
+import graphic from '../../../../assets/graphic.png';
+import { LinkIcon } from '../asset/linkIcon';
+
+export const Idle: FC = () => {
+  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.
+        </p>
+        <a
+          className="ck-idle-link"
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Learn more about Credit Connect"
+        >
+          <span>Learn more</span>
+          <LinkIcon />
+        </a>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,61 @@
+@use '../../../style/mixin.scss' as *;
+
+.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 {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.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-root .ck-idle-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--scale-gray-600);
+  span {
+    @include textToken('body4-l1-regular');
+  }
+  svg {
+    flex-shrink: 0;
+  }
+}