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

package/src/components/walletItem/index.tsx

@@ -0,0 +1,49 @@
+import { type FC } from 'react';
+import './style.scss';
+import { type ConnectorId } from '../../types';
+
+interface WalletItemProps {
+  id: ConnectorId;
+  label: string;
+  logoUrl?: string;
+  isSelected: boolean;
+  isRecent?: boolean;
+  onSelect: (id: ConnectorId) => void;
+}
+
+export const WalletItem: FC<WalletItemProps> = ({
+  id,
+  label,
+  logoUrl,
+  isSelected,
+  isRecent = false,
+  onSelect,
+}) => {
+  return (
+    <button
+      type="button"
+      className={`ck-wallet-item${isSelected ? ' is-selected' : ''}`}
+      onClick={() => onSelect(id)}
+      aria-pressed={isSelected}
+    >
+      {logoUrl ? (
+        <img
+          className={`ck-wallet-item-icon${id === 'METAMASK' ? ' has-bg' : ''}`}
+          src={logoUrl}
+          alt=""
+          aria-hidden="true"
+        />
+      ) : (
+        <span className="ck-wallet-item-icon" aria-hidden="true" />
+      )}
+      <span className="ck-wallet-item-txt">
+        <span className="ck-wallet-item-label">{label}</span>
+        {isRecent && (
+          <span className="ck-wallet-item-badge" aria-label="Recently used">
+            Recent
+          </span>
+        )}
+      </span>
+    </button>
+  );
+};

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

@@ -0,0 +1,102 @@
+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;
+  kitConfig: ConnectKitConfig | null;
+};
+
+const SLOT_KEY = Symbol.for('@gluwa/connect-kit:slot');
+
+type GlobalWithSlot = typeof globalThis & {
+  [SLOT_KEY]?: KitSlot;
+};
+
+const getSlot = (): KitSlot => {
+  const g = globalThis as GlobalWithSlot;
+  if (!g[SLOT_KEY]) {
+    g[SLOT_KEY] = { config: null, kitConfig: null };
+  }
+  return g[SLOT_KEY];
+};
+
+export const initConfig = (kitConfig: ConnectKitConfig): Config => {
+  const slot = getSlot();
+  if (slot.config) {
+    if (slot.kitConfig !== kitConfig) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[connect-kit] initConfig called again with a different kitConfig — new chains/transports ignored. Call resetConfig() first to re-init.',
+      );
+    }
+    return slot.config;
+  }
+
+  const connectors = [];
+
+  if (kitConfig.wcProjectId) {
+    connectors.push(walletConnect({ projectId: kitConfig.wcProjectId, showQrModal: 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);
+  }
+
+  const isBrowser = typeof window !== 'undefined';
+
+  slot.config = createConfig({
+    ssr: true,
+    chains: kitConfig.chains,
+    connectors,
+    transports: kitConfig.transports,
+    storage: isBrowser ? createStorage({ storage: window.localStorage }) : undefined,
+  });
+  slot.kitConfig = kitConfig;
+
+  return slot.config;
+};
+
+export const getConfig = (): Config => {
+  const slot = getSlot();
+  if (!slot.config) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.config;
+};
+
+export const getKitConfig = (): ConnectKitConfig => {
+  const slot = getSlot();
+  if (!slot.kitConfig) {
+    throw new Error('ConnectKit config not initialized. Make sure ConnectKitProvider is mounted.');
+  }
+  return slot.kitConfig;
+};
+
+export const resetConfig = (): void => {
+  const slot = getSlot();
+  slot.config = null;
+  slot.kitConfig = null;
+};

package/src/creditConnectConnector.ts

@@ -41,6 +41,7 @@ export const creditConnectConnector = (
   let selectedChainId: number | null = null;
   let connectPromise: Promise<boolean> | null = null;
   let provider: CreditConnectProvider | null = null;
+  let providerPromise: Promise<CreditConnectProvider> | null = null;
   let isLocalDisconnect = false;
 
   let emitWagmiMessage: ((type: string, data: unknown) => void) | null = null;
@@ -83,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?.();
@@ -128,6 +140,163 @@ export const creditConnectConnector = (
       config.emitter.emit('disconnect');
     };
 
+    const buildProvider = (): CreditConnectProviderWithEvents => {
+      const createdProvider = {
+        request: async (args) => {
+          const { method, params: rawParams } = args as {
+            method: string;
+            params?: unknown[] | object;
+          };
+          const params = Array.isArray(rawParams)
+            ? [...rawParams]
+            : rawParams === undefined
+              ? []
+              : [rawParams];
+          const session = getCurrentSession();
+
+          const getSelectedAddressInfo = (address?: string) => {
+            if (!session) throw new Error('No active session');
+            const evmInfo = getEvmAddressInfo(session);
+            if (evmInfo.length === 0) throw new Error('No EVM address found');
+            if (!address) return evmInfo[0];
+            const found = evmInfo.find(
+              (info) => info.address.toLowerCase() === address.toLowerCase(),
+            );
+            if (!found) throw new Error(`Address not in session: ${address}`);
+            return found;
+          };
+
+          if (method === 'eth_accounts') {
+            if (!session) return [];
+            return getChecksummedAccounts(session);
+          }
+
+          if (method === 'eth_chainId') {
+            if (!session) throw new Error('No active session');
+            if (selectedChainId !== null) return `0x${selectedChainId.toString(16)}`;
+            const evmInfo = getEvmAddressInfo(session);
+            if (evmInfo.length === 0) throw new Error('No EVM address found');
+            const chainId = Number.parseInt(evmInfo[0].networkIdentifier, 10);
+            if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
+            selectedChainId = chainId;
+            return `0x${chainId.toString(16)}`;
+          }
+
+          if (method === 'wallet_switchEthereumChain') {
+            const [{ chainId: rawChainId }] = (params ?? []) as [{ chainId?: string }];
+            if (!rawChainId) throw new Error('wallet_switchEthereumChain missing chainId param');
+            const chainId = Number.parseInt(rawChainId, 16);
+            if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${rawChainId}`);
+            if (!session) throw new Error('No active session');
+
+            const supported = getEvmAddressInfo(session).some(
+              (info) => Number.parseInt(info.networkIdentifier, 10) === chainId,
+            );
+            if (!supported) {
+              const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
+              err.code = 4902;
+              throw err;
+            }
+            selectedChainId = chainId;
+            config.emitter.emit('change', { chainId });
+            return null;
+          }
+
+          if (method === 'personal_sign') {
+            const [messageParam, addressParam] = (params ?? []) as [unknown, unknown];
+            const message =
+              typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signMessage', {
+              message,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_sign') {
+            const [addressParam, messageParam] = (params ?? []) as [unknown, unknown];
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const message =
+              typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signMessage', {
+              message,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_signTypedData' || method === 'eth_signTypedData_v4') {
+            const [addressParam, typedDataParam] = (params ?? []) as [unknown, unknown];
+            const address = typeof addressParam === 'string' ? addressParam : undefined;
+            const typedData =
+              typeof typedDataParam === 'string'
+                ? typedDataParam
+                : JSON.stringify(typedDataParam ?? '');
+            const addressInfo = getSelectedAddressInfo(address);
+            const response = await session?.jsonRpc.request('signTypedData', {
+              typedData,
+              addressInfo,
+            });
+            return response?.signature;
+          }
+
+          if (method === 'eth_sendTransaction') {
+            const [txParams] = (params ?? []) as [Record<string, string | undefined>];
+            const addressInfo = getSelectedAddressInfo(txParams?.from);
+            const response = await session?.jsonRpc.request('sendTransaction', {
+              addressInfo,
+              to: txParams?.to,
+              value: txParams?.value,
+              data: txParams?.data,
+              gas: txParams?.gas,
+              gasPrice: txParams?.gasPrice,
+              maxFeePerGas: txParams?.maxFeePerGas,
+              maxPriorityFeePerGas: txParams?.maxPriorityFeePerGas,
+              nonce: txParams?.nonce,
+              chainId: txParams?.chainId,
+            });
+            return response?.txHash;
+          }
+
+          if (method === 'credit_connect_send_message') {
+            if (!session) throw new Error('No active session');
+            const [messageParam] = (params ?? []) as [unknown];
+            const message =
+              typeof messageParam === 'string' ? messageParam : JSON.stringify(messageParam ?? '');
+            await session.msg.sendMessage(message);
+            return true;
+          }
+
+          if (method === 'credit_connect_jsonrpc_ping') {
+            if (!session) throw new Error('No active session');
+            return await session.jsonRpc.request('pingPong', {});
+          }
+
+          throw new Error(`Unsupported provider method: ${method}`);
+        },
+
+        on: (event: string, listener: ProviderListener) => {
+          let listeners = providerListeners.get(event);
+          if (!listeners) {
+            listeners = new Set();
+            providerListeners.set(event, listeners);
+          }
+          listeners.add(listener);
+          return createdProvider;
+        },
+
+        removeListener: (event: string, listener: ProviderListener) => {
+          providerListeners.get(event)?.delete(listener);
+          return createdProvider;
+        },
+      } as CreditConnectProviderWithEvents;
+
+      return createdProvider;
+    };
+
     return {
       id: CONNECTOR_ID,
       name: CONNECTOR_NAME,
@@ -185,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;
 
@@ -261,11 +411,13 @@ export const creditConnectConnector = (
           throw err;
         }
 
+        const chain = config.chains.find((c) => c.id === chainId);
+        if (!chain) throw new Error(`Chain ${chainId} not in config`);
+
         selectedChainId = chainId;
         config.emitter.emit('change', { chainId });
+        await Promise.resolve();
 
-        const chain = config.chains.find((c) => c.id === chainId);
-        if (!chain) throw new Error(`Chain ${chainId} not in config`);
         return chain;
       },
 
@@ -286,6 +438,7 @@ export const creditConnectConnector = (
           isLocalDisconnect = false;
         }
         provider = null;
+        providerPromise = null;
         resetState();
         config.emitter.emit('disconnect');
       },
@@ -314,165 +467,20 @@ export const creditConnectConnector = (
 
       async getProvider() {
         if (provider) return provider;
-        await ensureManagerInitialized();
-
-        const createdProvider = {
-          request: async (args) => {
-            const { method, params: rawParams } = args as {
-              method: string;
-              params?: unknown[] | object;
-            };
-            const params = Array.isArray(rawParams)
-              ? [...rawParams]
-              : rawParams === undefined
-                ? []
-                : [rawParams];
-            const session = getCurrentSession();
-
-            const getSelectedAddressInfo = (address?: string) => {
-              if (!session) throw new Error('No active session');
-              const evmInfo = getEvmAddressInfo(session);
-              if (evmInfo.length === 0) throw new Error('No EVM address found');
-              if (!address) return evmInfo[0];
-              const found = evmInfo.find(
-                (info) => info.address.toLowerCase() === address.toLowerCase(),
-              );
-              if (!found) throw new Error(`Address not in session: ${address}`);
-              return found;
-            };
-
-            if (method === 'eth_accounts') {
-              if (!session) return [];
-              return getChecksummedAccounts(session);
-            }
-
-            if (method === 'eth_chainId') {
-              if (!session) throw new Error('No active session');
-              if (selectedChainId !== null) return `0x${selectedChainId.toString(16)}`;
-              const evmInfo = getEvmAddressInfo(session);
-              if (evmInfo.length === 0) throw new Error('No EVM address found');
-              const chainId = Number.parseInt(evmInfo[0].networkIdentifier, 10);
-              if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
-              selectedChainId = chainId;
-              return `0x${chainId.toString(16)}`;
-            }
-
-            if (method === 'wallet_switchEthereumChain') {
-              const [{ chainId: rawChainId }] = (params ?? []) as [{ chainId?: string }];
-              if (!rawChainId) throw new Error('wallet_switchEthereumChain missing chainId param');
-              const chainId = Number.parseInt(rawChainId, 16);
-              if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${rawChainId}`);
-              if (!session) throw new Error('No active session');
-
-              const supported = getEvmAddressInfo(session).some(
-                (info) => Number.parseInt(info.networkIdentifier, 10) === chainId,
-              );
-              if (!supported) {
-                const err = new Error(`Unsupported chain: ${chainId}`) as Error & { code?: number };
-                err.code = 4902;
-                throw err;
-              }
-              selectedChainId = chainId;
-              config.emitter.emit('change', { chainId });
-              return null;
-            }
-
-            if (method === 'personal_sign') {
-              const [messageParam, addressParam] = (params ?? []) as [unknown, unknown];
-              const message =
-                typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signMessage', {
-                message,
-                addressInfo,
-              });
-              return response?.signature;
-            }
-
-            if (method === 'eth_sign') {
-              const [addressParam, messageParam] = (params ?? []) as [unknown, unknown];
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const message =
-                typeof messageParam === 'string' ? messageParam : String(messageParam ?? '');
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signMessage', {
-                message,
-                addressInfo,
-              });
-              return response?.signature;
-            }
+        if (providerPromise) return providerPromise;
 
-            if (method === 'eth_signTypedData' || method === 'eth_signTypedData_v4') {
-              const [addressParam, typedDataParam] = (params ?? []) as [unknown, unknown];
-              const address = typeof addressParam === 'string' ? addressParam : undefined;
-              const typedData =
-                typeof typedDataParam === 'string'
-                  ? typedDataParam
-                  : JSON.stringify(typedDataParam ?? '');
-              const addressInfo = getSelectedAddressInfo(address);
-              const response = await session?.jsonRpc.request('signTypedData', {
-                typedData,
-                addressInfo,
-              });
-              return response?.signature;
-            }
-
-            if (method === 'eth_sendTransaction') {
-              const [txParams] = (params ?? []) as [Record<string, string | undefined>];
-              const addressInfo = getSelectedAddressInfo(txParams?.from);
-              const response = await session?.jsonRpc.request('sendTransaction', {
-                addressInfo,
-                to: txParams?.to,
-                value: txParams?.value,
-                data: txParams?.data,
-                gas: txParams?.gas,
-                gasPrice: txParams?.gasPrice,
-                maxFeePerGas: txParams?.maxFeePerGas,
-                maxPriorityFeePerGas: txParams?.maxPriorityFeePerGas,
-                nonce: txParams?.nonce,
-                chainId: txParams?.chainId,
-              });
-              return response?.txHash;
-            }
+        providerPromise = (async (): Promise<CreditConnectProvider> => {
+          await ensureManagerInitialized();
+          const createdProvider = buildProvider();
+          provider = createdProvider;
+          return createdProvider;
+        })();
 
-            if (method === 'credit_connect_send_message') {
-              if (!session) throw new Error('No active session');
-              const [messageParam] = (params ?? []) as [unknown];
-              const message =
-                typeof messageParam === 'string'
-                  ? messageParam
-                  : JSON.stringify(messageParam ?? '');
-              await session.msg.sendMessage(message);
-              return true;
-            }
-
-            if (method === 'credit_connect_jsonrpc_ping') {
-              if (!session) throw new Error('No active session');
-              return await session.jsonRpc.request('pingPong', {});
-            }
-
-            throw new Error(`Unsupported provider method: ${method}`);
-          },
-
-          on: (event: string, listener: ProviderListener) => {
-            let listeners = providerListeners.get(event);
-            if (!listeners) {
-              listeners = new Set();
-              providerListeners.set(event, listeners);
-            }
-            listeners.add(listener);
-            return createdProvider;
-          },
-
-          removeListener: (event: string, listener: ProviderListener) => {
-            providerListeners.get(event)?.delete(listener);
-            return createdProvider;
-          },
-        } as CreditConnectProviderWithEvents;
-
-        provider = createdProvider;
-        return provider;
+        try {
+          return await providerPromise;
+        } finally {
+          providerPromise = null;
+        }
       },
 
       onAccountsChanged(accounts) {