@gluwa/connect-kit 0.1.0-next.0

package/src/creditConnectConnector.ts

@@ -0,0 +1,451 @@
+import { createConnector } from '@wagmi/core';
+import type { Address, EIP1193Provider, Hex } from 'viem';
+import { getAddress } from 'viem';
+import { DappSessionManager, type DappSession } from '@gluwa/credit-connect-sdk/dapp';
+import type { StorageProvider } from '@gluwa/credit-connect-sdk/storage';
+import type { E2EEProvider } from '@gluwa/credit-connect-sdk/e2ee';
+import type { HubFactoryProvider } from '@gluwa/credit-connect-sdk/hub';
+
+export type CreditConnectConnectorOptions = {
+  projectKey: string;
+  serverUrl: string;
+  storage: StorageProvider;
+  e2ee: E2EEProvider;
+  createHub: HubFactoryProvider['createHubFromDapp'];
+  onDisplayUri?: (uri: string | null) => void;
+};
+
+type CreditConnectProvider = EIP1193Provider;
+type ProviderListener = (...args: unknown[]) => void;
+
+const CONNECTOR_ID = 'credit-connect';
+const CONNECTOR_NAME = 'Credit Wallet';
+const CONNECTOR_TYPE = 'credit-connect';
+
+export const creditConnectConnector = (
+  options: CreditConnectConnectorOptions,
+): ReturnType<typeof createConnector> => {
+  let manager: DappSessionManager | null = null;
+  let selectedChainId: number | null = null;
+  let connectPromise: Promise<boolean> | null = null;
+  let provider: CreditConnectProvider | null = null;
+  let isLocalDisconnect = false;
+
+  let emitWagmiMessage: ((type: string, data: unknown) => void) | null = null;
+  let emitWagmiDisconnect: (() => void) | null = null;
+
+  const providerListeners = new Map<string, Set<ProviderListener>>();
+
+  const emitProviderEvent = (event: string, ...args: unknown[]): void => {
+    const listeners = providerListeners.get(event);
+    if (listeners) for (const fn of listeners) fn(...args);
+  };
+
+  const getCurrentSession = (): DappSession | null => {
+    if (!manager || manager.state.status !== 'CONNECTED' || !manager.state.session) return null;
+    return manager.state.session;
+  };
+
+  const getEvmAddressInfo = (session: DappSession): DappSession['addressInfoList'] =>
+    session.addressInfoList.filter((info) => info.networkType === 'eip155');
+
+  const getChecksummedAccounts = (session: DappSession): Address[] =>
+    getEvmAddressInfo(session).map((info) => getAddress(info.address));
+
+  const resetState = (): void => {
+    connectPromise = null;
+    selectedChainId = null;
+  };
+
+  const createManagerIfNeeded = (): DappSessionManager => {
+    if (manager) return manager;
+
+    manager = new DappSessionManager({
+      projectKey: options.projectKey,
+      serverUrl: options.serverUrl,
+      storage: options.storage,
+      e2ee: options.e2ee,
+      createHub: options.createHub,
+      enableReconnect: true,
+      autoInit: true,
+    });
+
+    manager.on('changeState', (state) => {
+      if (state.status === 'CONNECTING' && state.connectingPayload) {
+        options.onDisplayUri?.(state.connectingPayload);
+        emitWagmiMessage?.('display_uri', state.connectingPayload);
+      }
+
+      if (state.status === 'DISCONNECTED' && !isLocalDisconnect) {
+        resetState();
+        emitProviderEvent('disconnect');
+        emitWagmiDisconnect?.();
+      }
+    });
+
+    return manager;
+  };
+
+  const ensureManagerInitialized = async (): Promise<DappSessionManager> => {
+    const m = createManagerIfNeeded();
+
+    if (m.state.status === 'PENDING') {
+      await m.initSession();
+      return m;
+    }
+
+    if (m.state.status === 'INITIALIZING') {
+      await new Promise<void>((resolve) => {
+        const unsub = m.on('changeState', (state) => {
+          if (state.status !== 'INITIALIZING') {
+            unsub();
+            resolve();
+          }
+        });
+      });
+    }
+
+    return m;
+  };
+
+  return createConnector((config) => {
+    emitWagmiMessage = (type: string, data: unknown): void => {
+      config.emitter.emit('message', { type, data });
+    };
+    emitWagmiDisconnect = (): void => {
+      config.emitter.emit('disconnect');
+    };
+
+    return {
+      id: CONNECTOR_ID,
+      name: CONNECTOR_NAME,
+      type: CONNECTOR_TYPE,
+
+      async setup() {
+        await ensureManagerInitialized();
+      },
+
+      async connect<withCapabilities extends boolean = false>(parameters?: {
+        chainId?: number;
+        isReconnecting?: boolean;
+        withCapabilities?: withCapabilities | boolean;
+      }): Promise<{
+        accounts: withCapabilities extends true
+          ? ReadonlyArray<{ address: Address; capabilities: Record<string, unknown> }>
+          : readonly Address[];
+        chainId: number;
+      }> {
+        try {
+          const m = createManagerIfNeeded();
+
+          if (m.state.status === 'INITIALIZING') {
+            await new Promise<void>((resolve) => {
+              const unsub = m.on('changeState', (state) => {
+                if (state.status !== 'INITIALIZING') {
+                  unsub();
+                  resolve();
+                }
+              });
+            });
+          }
+
+          if (parameters?.isReconnecting) {
+            const session = getCurrentSession();
+            if (!session) throw new Error('No active session to reconnect');
+            const accounts = getChecksummedAccounts(session);
+            if (accounts.length === 0) throw new Error('No EVM address found');
+            const chainId = Number.parseInt(getEvmAddressInfo(session)[0].networkIdentifier, 10);
+            if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
+            selectedChainId = chainId;
+            return { accounts, chainId } as any;
+          }
+
+          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);
+                  }
+                });
+              });
+            }
+          }
+
+          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();
+            }
+
+            const connected = await connectPromise;
+            connectPromise = null;
+
+            if (!connected) throw new Error('Credit Connect session failed');
+          }
+
+          const session = getCurrentSession();
+          if (!session) throw new Error('Credit Connect session failed');
+
+          const accounts = getChecksummedAccounts(session);
+          if (accounts.length === 0) throw new Error('No EVM address found');
+
+          const chainId = Number.parseInt(getEvmAddressInfo(session)[0].networkIdentifier, 10);
+          if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
+
+          selectedChainId = chainId;
+          return { accounts, chainId } as any;
+        } catch (error) {
+          resetState();
+          throw error;
+        }
+      },
+
+      async switchChain({ chainId }) {
+        const session = getCurrentSession();
+        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 });
+
+        const chain = config.chains.find((c) => c.id === chainId);
+        if (!chain) throw new Error(`Chain ${chainId} not in config`);
+        return chain;
+      },
+
+      async isAuthorized() {
+        await ensureManagerInitialized();
+        const session = getCurrentSession();
+        if (!session) return false;
+        return session.addressInfoList.some((info) => info.networkType === 'eip155');
+      },
+
+      async disconnect() {
+        isLocalDisconnect = true;
+        try {
+          if (manager?.state.status === 'CONNECTED') {
+            await manager.disconnectSession();
+          }
+        } finally {
+          isLocalDisconnect = false;
+        }
+        resetState();
+        config.emitter.emit('disconnect');
+      },
+
+      async getAccounts() {
+        await ensureManagerInitialized();
+        const session = getCurrentSession();
+        if (!session) return [];
+        return getChecksummedAccounts(session);
+      },
+
+      async getChainId() {
+        await ensureManagerInitialized();
+        const session = getCurrentSession();
+        if (!session) throw new Error('No active session');
+        if (selectedChainId !== null) return selectedChainId;
+
+        const evmAddressInfo = getEvmAddressInfo(session);
+        if (evmAddressInfo.length === 0) throw new Error('No EVM address found');
+
+        const chainId = Number.parseInt(evmAddressInfo[0].networkIdentifier, 10);
+        if (!Number.isFinite(chainId)) throw new Error(`Invalid chainId: ${chainId}`);
+        selectedChainId = chainId;
+        return chainId;
+      },
+
+      async getProvider() {
+        if (provider) return provider;
+        await ensureManagerInitialized();
+
+        provider = {
+          request: async (args: unknown) => {
+            const { method, params } = args as { method: string; params?: unknown[] };
+            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) => {
+            if (!providerListeners.has(event)) providerListeners.set(event, new Set());
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            providerListeners.get(event)!.add(listener);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return provider!;
+          },
+
+          removeListener: (event: string, listener: ProviderListener) => {
+            providerListeners.get(event)?.delete(listener);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return provider!;
+          },
+        } as unknown as CreditConnectProvider;
+
+        return provider;
+      },
+
+      onAccountsChanged(accounts) {
+        if (!accounts || accounts.length === 0) {
+          config.emitter.emit('disconnect');
+          return;
+        }
+        config.emitter.emit('change', { accounts: accounts.map(getAddress) });
+      },
+
+      onChainChanged(chainId) {
+        const normalized =
+          typeof chainId === 'string' ? Number.parseInt(chainId as Hex, 16) : Number(chainId);
+        if (!Number.isFinite(normalized)) return;
+        selectedChainId = normalized;
+        config.emitter.emit('change', { chainId: normalized });
+      },
+
+      onDisconnect() {
+        resetState();
+        config.emitter.emit('disconnect');
+      },
+    };
+  });
+};

package/src/hooks/useWagmiConnect.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useConnect, useAccount, useConfig } from 'wagmi';
+import type { ConnectorId, ConnectResult } from '../types';
+
+export const WAGMI_CONNECTOR_ID: Partial<Record<ConnectorId, string>> = {
+  METAMASK: 'metaMaskSDK',
+  WALLET_CONNECT: 'walletConnect',
+  CREDIT_WALLET: 'walletConnect',
+  CREDIT_CONNECT: 'credit-connect',
+};
+
+interface Options {
+  onConnect: (result: ConnectResult) => void;
+  onError: (error: Error, connectorId: ConnectorId) => void;
+  onQrUri: (uri: string | null) => void;
+}
+
+interface UseWagmiConnectResult {
+  triggerConnect: (connectorId: ConnectorId) => void;
+  cancelConnect: () => void;
+  isConnecting: boolean;
+}
+
+export const useWagmiConnect = ({
+  onConnect,
+  onError,
+  onQrUri,
+}: Options): UseWagmiConnectResult => {
+  const config = useConfig();
+  const { address, status } = useAccount();
+  const pendingConnectorId = useRef<ConnectorId | null>(null);
+
+  // 콜백 참조
+  const onConnectRef = useRef(onConnect);
+  const onErrorRef = useRef(onError);
+  const onQrUriRef = useRef(onQrUri);
+  useEffect(() => {
+    onConnectRef.current = onConnect;
+  }, [onConnect]);
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  useEffect(() => {
+    onQrUriRef.current = onQrUri;
+  }, [onQrUri]);
+
+  // 연결 시도
+  const { connect, reset, isPending } = useConnect({
+    mutation: {
+      onError(error) {
+        const id = pendingConnectorId.current;
+        if (id) {
+          onErrorRef.current(error as Error, id);
+          pendingConnectorId.current = null;
+        }
+      },
+    },
+  });
+
+  // QR 코드 표시
+  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);
+      }
+    };
+
+    const unsubscribers = config.connectors.map((connector) => {
+      connector.emitter.on('message', handler);
+      return (): void => {
+        connector.emitter.off('message', handler);
+      };
+    });
+
+    return (): void => {
+      unsubscribers.forEach((fn) => {
+        fn();
+      });
+    };
+  }, [config.connectors]);
+
+  // 연결 완료
+  useEffect(() => {
+    if (status === 'connected' && address && pendingConnectorId.current) {
+      const id = pendingConnectorId.current;
+      pendingConnectorId.current = null;
+      onConnectRef.current({ address, connectorId: id });
+    }
+  }, [status, address]);
+
+  // 연결 트리거
+  const triggerConnect = useCallback(
+    (connectorId: ConnectorId): void => {
+      const wagmiId = WAGMI_CONNECTOR_ID[connectorId];
+      if (!wagmiId) {
+        onErrorRef.current(new Error(`No wagmi connector mapped for ${connectorId}`), connectorId);
+        return;
+      }
+
+      const connector = config.connectors.find((c) => c.id === wagmiId);
+      if (!connector) {
+        onErrorRef.current(
+          new Error(`Wagmi connector '${wagmiId}' not found in config`),
+          connectorId,
+        );
+        return;
+      }
+
+      onQrUriRef.current(null);
+      pendingConnectorId.current = connectorId;
+      connect({ connector });
+    },
+    [config.connectors, connect],
+  );
+
+  // 연결 취소
+  const cancelConnect = useCallback((): void => {
+    pendingConnectorId.current = null;
+    onQrUriRef.current(null);
+    reset();
+  }, [reset]);
+
+  return { triggerConnect, cancelConnect, isConnecting: isPending };
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export { ConnectModal } from './ConnectModal';
+export { creditConnectConnector } from './creditConnectConnector';
+export type { CreditConnectConnectorOptions } from './creditConnectConnector';
+export type { ConnectModalProps, ConnectResult, ConnectorId, WCWallet, WCSubView } from './types';

package/src/types.ts

@@ -0,0 +1,34 @@
+export type ConnectorId = 'CREDIT_WALLET' | 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
+
+export type ValidConnectors =
+  | Array<Exclude<ConnectorId, 'WALLET_CONNECT'>>
+  | Array<Exclude<ConnectorId, 'CREDIT_WALLET'>>;
+
+export interface WCWallet {
+  id: string;
+  name: string;
+  imageUrl: string;
+  mobileNative: string;
+  mobileUniversal: string;
+  desktopNative: string;
+  desktopUniversal: string;
+  appIos: string;
+  appAndroid: string;
+  homepage: string;
+}
+
+export type WCSubView = 'qr' | 'list' | 'wallet';
+
+export interface ConnectResult {
+  address: `0x${string}`;
+  connectorId: ConnectorId;
+}
+
+export interface ConnectModalProps {
+  open: boolean;
+  connectors: ValidConnectors;
+  onConnect: (result: ConnectResult) => void;
+  onClose: () => void;
+  onLog?: (message: string, error?: Error) => void;
+  wcProjectId?: string;
+}

package/src/utils/platform.ts

@@ -0,0 +1,16 @@
+// 모바일 기기 감지
+export const isMobileDevice = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return /android|iphone|ipad|ipod/i.test(navigator.userAgent);
+};
+
+// 딥링크 열기 (walletConnect가 지원하는 지갑앱)
+export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
+  const sep = deepLinkBase.endsWith('/') ? '' : '/';
+  window.location.href = `${deepLinkBase}${sep}wc?uri=${encodeURIComponent(uri)}`;
+};
+
+// metaMask extension 감지
+export const detectMetaMaskExtension = (): boolean =>
+  typeof window !== 'undefined' &&
+  Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);

package/src/views/CreditWalletView.tsx

@@ -0,0 +1,69 @@
+import { type FC, useEffect } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
+import { CONNECTOR_META } from '../connector-meta';
+import { type ConnectorId } from '../types';
+
+interface CreditWalletViewProps {
+  connectorId: Extract<ConnectorId, 'CREDIT_CONNECT' | 'CREDIT_WALLET'>;
+  qrUri: string | null;
+}
+
+export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri }) => {
+  const { downloadUrl, logoUrl, deepLinkBase } = CONNECTOR_META[connectorId];
+  const isMobile = isMobileDevice();
+
+  useEffect(() => {
+    if (isMobile && qrUri && deepLinkBase) {
+      tryOpenDeepLink(qrUri, deepLinkBase);
+    }
+  }, [isMobile, qrUri, deepLinkBase]);
+
+  if (isMobile && deepLinkBase) {
+    return (
+      <div className="ck-view ck-view--mobile-redirect">
+        <p>Opening Credit Wallet...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ck-view ck-view--qr">
+      <div className={`ck-qr-frame ${!qrUri ? 'ck-qr-frame--loading' : ''}`}>
+        {qrUri ? (
+          <QRCodeSVG
+            value={qrUri}
+            size={196}
+            level="H"
+            imageSettings={
+              logoUrl ? { src: logoUrl, width: 40, height: 40, excavate: true } : undefined
+            }
+          />
+        ) : (
+          <div className="ck-qr-spinner" aria-label="Loading QR code" />
+        )}
+      </div>
+
+      <p className="ck-view__caption">Open the Credit Wallet app and scan the QR</p>
+
+      {downloadUrl && (
+        <div className="ck-download-card">
+          <div className="ck-download-card__text">
+            <p className="ck-download-card__title">Get Credit Wallet app</p>
+            <p className="ck-download-card__sub">
+              Once connected, you can log in with it next time
+            </p>
+          </div>
+          <a
+            href={downloadUrl}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className="ck-btn-primary"
+          >
+            Download
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};