@gluwa/connect-kit 0.1.0-next.0 → 0.1.0-next.1

package/src/hooks/useWCState.ts

@@ -0,0 +1,150 @@
+import { useState, useRef, useCallback } from 'react';
+import type { WCWallet, WCSubView } from '../types';
+
+const fetchWCWalletList = async (projectId: string): Promise<WCWallet[]> => {
+  const all: WCWallet[] = [];
+  let page = 1;
+  const entries = 100;
+
+  while (page <= 10) {
+    const url = new URL('https://explorer-api.walletconnect.com/v3/wallets');
+    url.searchParams.set('projectId', projectId);
+    url.searchParams.set('entries', String(entries));
+    url.searchParams.set('page', String(page));
+
+    const res = await fetch(url.toString());
+    if (!res.ok) throw new Error(`Failed to fetch wallet list: ${res.status}`);
+
+    const json = (await res.json()) as {
+      listings: Record<
+        string,
+        {
+          id: string;
+          name: string;
+          homepage?: string;
+          image_url?: { sm?: string; md?: string };
+          mobile?: { native?: string; universal?: string };
+          desktop?: { native?: string; universal?: string };
+          app?: { ios?: string; android?: string };
+        }
+      >;
+      total: number;
+    };
+
+    const listings = Object.values(json.listings ?? {});
+    for (const w of listings) {
+      all.push({
+        id: w.id,
+        name: w.name,
+        imageUrl: w.image_url?.md ?? w.image_url?.sm ?? '',
+        mobileNative: w.mobile?.native ?? '',
+        mobileUniversal: w.mobile?.universal ?? '',
+        desktopNative: w.desktop?.native ?? '',
+        desktopUniversal: w.desktop?.universal ?? '',
+        appIos: w.app?.ios ?? '',
+        appAndroid: w.app?.android ?? '',
+        homepage: w.homepage ?? '',
+      });
+    }
+
+    if (listings.length < entries || all.length >= json.total) break;
+    page += 1;
+  }
+
+  return all;
+};
+
+export interface WCState {
+  subView: WCSubView;
+  walletList: WCWallet[];
+  walletListLoading: boolean;
+  walletListSearch: string;
+  filterActive: boolean;
+  selectedWallet: WCWallet | null;
+  loadWalletList: (projectId: string) => Promise<void>;
+  onShowList: () => void;
+  onSelectWallet: (wallet: WCWallet) => void;
+  onSearchChange: (q: string) => void;
+  onFilterToggle: () => void;
+  // Returns true if WC handled the back navigation, false if the parent should handle it
+  handleBack: () => boolean;
+  resetView: () => void;
+  reset: () => void;
+}
+
+export const useWCState = (): WCState => {
+  const [subView, setSubView] = useState<WCSubView>('qr');
+  const [walletList, setWalletList] = useState<WCWallet[]>([]);
+  const [walletListLoading, setWalletListLoading] = useState(false);
+  const [walletListSearch, setWalletListSearch] = useState('');
+  const [filterActive, setFilterActive] = useState(false);
+  const [selectedWallet, setSelectedWallet] = useState<WCWallet | null>(null);
+  const loadedRef = useRef(false);
+
+  const loadWalletList = useCallback(async (projectId: string): Promise<void> => {
+    if (loadedRef.current) return;
+    loadedRef.current = true;
+    setWalletListLoading(true);
+    try {
+      const list = await fetchWCWalletList(projectId);
+      setWalletList(list);
+    } catch {
+      loadedRef.current = false;
+    } finally {
+      setWalletListLoading(false);
+    }
+  }, []);
+
+  const onShowList = useCallback((): void => setSubView('list'), []);
+
+  const onSelectWallet = useCallback((wallet: WCWallet): void => {
+    setSelectedWallet(wallet);
+    setSubView('wallet');
+  }, []);
+
+  const onSearchChange = useCallback((q: string): void => setWalletListSearch(q), []);
+
+  const onFilterToggle = useCallback((): void => setFilterActive((prev) => !prev), []);
+
+  const handleBack = useCallback((): boolean => {
+    if (subView === 'wallet') {
+      setSelectedWallet(null);
+      setSubView('list');
+      return true;
+    }
+    if (subView === 'list') {
+      setSubView('qr');
+      return true;
+    }
+    return false;
+  }, [subView]);
+
+  const resetView = useCallback((): void => {
+    setSubView('qr');
+    setSelectedWallet(null);
+  }, []);
+
+  const reset = useCallback((): void => {
+    setSubView('qr');
+    setWalletListSearch('');
+    setFilterActive(false);
+    setSelectedWallet(null);
+  }, []);
+
+  return {
+    subView,
+    walletList,
+    walletListLoading,
+    walletListSearch,
+    filterActive,
+    selectedWallet,
+    loadWalletList,
+    onShowList,
+    onSelectWallet,
+    onSearchChange,
+    onFilterToggle,
+    handleBack,
+    resetView,
+    reset,
+  };
+};

package/src/hooks/useWagmiConnect.ts

@@ -1,12 +1,54 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useConnect, useAccount, useConfig } from 'wagmi';
+import { useConnect, 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',
+type WagmiConnectorLike = {
+  id: string;
+  name: string;
+  type?: string;
+  rdns?: string | readonly string[];
+};
+
+const hasMetaMaskKeyword = (value: string): boolean => value.toLowerCase().includes('metamask');
+const hasWalletConnectKeyword = (value: string): boolean =>
+  value.toLowerCase().includes('walletconnect');
+
+const isMetaMaskConnector = (connector: WagmiConnectorLike): boolean => {
+  if (connector.id === 'injected' || connector.id === 'metaMaskSDK') return true;
+  if (hasMetaMaskKeyword(connector.id) || hasMetaMaskKeyword(connector.name)) return true;
+
+  if (connector.rdns) {
+    const rdnsList = Array.isArray(connector.rdns) ? connector.rdns : [connector.rdns];
+    if (rdnsList.some((rdns) => hasMetaMaskKeyword(rdns))) return true;
+  }
+
+  return false;
+};
+
+const isWalletConnectConnector = (connector: WagmiConnectorLike): boolean => {
+  if (connector.id === 'walletConnect') return true;
+  if (hasWalletConnectKeyword(connector.id) || hasWalletConnectKeyword(connector.name)) return true;
+  return false;
+};
+
+export const resolveWagmiConnector = <T extends WagmiConnectorLike>(
+  connectors: readonly T[],
+  connectorId: ConnectorId,
+): T | undefined => {
+  switch (connectorId) {
+    case 'CREDIT_CONNECT':
+      return connectors.find((connector) => connector.id === 'credit-connect');
+
+    case 'METAMASK':
+      return connectors.find(isMetaMaskConnector);
+
+    case 'CREDIT_WALLET':
+    case 'WALLET_CONNECT':
+      return connectors.find(isWalletConnectConnector);
+
+    default:
+      return undefined;
+  }
 };
 
 interface Options {
@@ -27,7 +69,6 @@ export const useWagmiConnect = ({
   onQrUri,
 }: Options): UseWagmiConnectResult => {
   const config = useConfig();
-  const { address, status } = useAccount();
   const pendingConnectorId = useRef<ConnectorId | null>(null);
 
   // 콜백 참조
@@ -36,26 +77,12 @@ export const useWagmiConnect = ({
   const onQrUriRef = useRef(onQrUri);
   useEffect(() => {
     onConnectRef.current = onConnect;
-  }, [onConnect]);
-  useEffect(() => {
     onErrorRef.current = onError;
-  }, [onError]);
-  useEffect(() => {
     onQrUriRef.current = onQrUri;
-  }, [onQrUri]);
+  }, [onConnect, onError, onQrUri]);
 
   // 연결 시도
-  const { connect, reset, isPending } = useConnect({
-    mutation: {
-      onError(error) {
-        const id = pendingConnectorId.current;
-        if (id) {
-          onErrorRef.current(error as Error, id);
-          pendingConnectorId.current = null;
-        }
-      },
-    },
-  });
+  const { connectAsync, reset, isPending } = useConnect();
 
   // QR 코드 표시
   useEffect(() => {
@@ -80,38 +107,34 @@ export const useWagmiConnect = ({
     };
   }, [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);
+      const connector = resolveWagmiConnector(config.connectors, connectorId);
       if (!connector) {
-        onErrorRef.current(
-          new Error(`Wagmi connector '${wagmiId}' not found in config`),
-          connectorId,
-        );
+        onErrorRef.current(new Error(`No wagmi connector found for ${connectorId}`), connectorId);
         return;
       }
 
       onQrUriRef.current(null);
       pendingConnectorId.current = connectorId;
-      connect({ connector });
+      connectAsync({ connector })
+        .then((result) => {
+          if (pendingConnectorId.current !== connectorId) return;
+          const address = result.accounts?.[0];
+          if (!address) {
+            throw new Error('Connected but no account returned');
+          }
+          pendingConnectorId.current = null;
+          onConnectRef.current({ address, connectorId });
+        })
+        .catch((error) => {
+          if (pendingConnectorId.current !== connectorId) return;
+          pendingConnectorId.current = null;
+          onErrorRef.current(error as Error, connectorId);
+        });
     },
-    [config.connectors, connect],
+    [config.connectors, connectAsync],
   );
 
   // 연결 취소

package/src/index.ts

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

package/src/types.ts

@@ -1,8 +1,12 @@
 export type ConnectorId = 'CREDIT_WALLET' | 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
 
-export type ValidConnectors =
-  | Array<Exclude<ConnectorId, 'WALLET_CONNECT'>>
-  | Array<Exclude<ConnectorId, 'CREDIT_WALLET'>>;
+export type CreditWalletStrategy = 'walletConnect' | 'creditConnect';
+
+export interface Connectors {
+  creditWallet?: CreditWalletStrategy | false;
+  metamask?: boolean;
+  walletConnect?: boolean;
+}
 
 export interface WCWallet {
   id: string;
@@ -26,7 +30,7 @@ export interface ConnectResult {
 
 export interface ConnectModalProps {
   open: boolean;
-  connectors: ValidConnectors;
+  connectors: Connectors;
   onConnect: (result: ConnectResult) => void;
   onClose: () => void;
   onLog?: (message: string, error?: Error) => void;

package/src/views/CreditWalletView.tsx

@@ -1,8 +1,8 @@
-import { type FC, useEffect } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
+import { type FC, useEffect, useMemo } from 'react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { CONNECTOR_META } from '../connector-meta';
 import { type ConnectorId } from '../types';
+import { QRFrame } from '../components/QRFrame';
 
 interface CreditWalletViewProps {
   connectorId: Extract<ConnectorId, 'CREDIT_CONNECT' | 'CREDIT_WALLET'>;
@@ -11,7 +11,7 @@ interface CreditWalletViewProps {
 
 export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri }) => {
   const { downloadUrl, logoUrl, deepLinkBase } = CONNECTOR_META[connectorId];
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   useEffect(() => {
     if (isMobile && qrUri && deepLinkBase) {
@@ -29,20 +29,7 @@ export const CreditWalletView: FC<CreditWalletViewProps> = ({ connectorId, qrUri
 
   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>
+      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
 
       <p className="ck-view__caption">Open the Credit Wallet app and scan the QR</p>
 

package/src/views/MetaMaskView.tsx

@@ -1,7 +1,7 @@
-import { type FC, useEffect } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
+import { type FC, useEffect, useMemo } from 'react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { CONNECTOR_META } from '../connector-meta';
+import { QRFrame, CopyLinkButton } from '../components/QRFrame';
 
 const { downloadUrl, deepLinkBase } = CONNECTOR_META.METAMASK;
 
@@ -12,7 +12,7 @@ interface MetaMaskViewProps {
 }
 
 export const MetaMaskView: FC<MetaMaskViewProps> = ({ qrUri, hasExtension, logoUrl }) => {
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   useEffect(() => {
     if (isMobile && qrUri && deepLinkBase) {
@@ -41,33 +41,8 @@ export const MetaMaskView: FC<MetaMaskViewProps> = ({ qrUri, hasExtension, logoU
 
   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>
-
-      {qrUri && (
-        <button
-          type="button"
-          className="ck-copy-link"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            navigator.clipboard.writeText(qrUri);
-          }}
-        >
-          Copy link
-        </button>
-      )}
+      <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
+      <CopyLinkButton qrUri={qrUri} />
 
       {downloadUrl && (
         <div className="ck-download-card">

package/src/views/WalletConnectView.tsx

@@ -1,8 +1,9 @@
 import { type FC, useMemo } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
 import { isMobileDevice, tryOpenDeepLink } from '../utils/platform';
 import { type WCWallet, type WCSubView } from '../types';
 import deeplink from '../../assets/deeplink.png';
+import { QRFrame, CopyLinkButton } from '../components/QRFrame';
+import { CONNECTOR_META } from '../connector-meta';
 
 interface WalletConnectViewProps {
   subView: WCSubView;
@@ -30,42 +31,11 @@ export const WalletConnectView: FC<WalletConnectViewProps> = (props) => {
 
 const WCQRView: FC<WalletConnectViewProps> = ({ qrUri, logoUrl, walletList, onShowList }) => (
   <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>
+    <QRFrame qrUri={qrUri} logoUrl={logoUrl} />
 
     <p className="ck-view__caption">Scan this QR Code with your phone</p>
 
-    {qrUri && (
-      <button
-        type="button"
-        className="ck-copy-link"
-        onClick={() => {
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          navigator.clipboard.writeText(qrUri);
-        }}
-      >
-        Copy link
-      </button>
-    )}
+    <CopyLinkButton qrUri={qrUri} />
 
     <button type="button" className="ck-all-wallets-btn" onClick={onShowList}>
       <span className="ck-all-wallets-btn__icon" aria-hidden="true" />
@@ -77,7 +47,7 @@ const WCQRView: FC<WalletConnectViewProps> = ({ qrUri, logoUrl, walletList, onSh
   </div>
 );
 
-const CREDIT_WALLET_NAME = 'Credit Wallet';
+const CREDIT_WALLET_NAME = CONNECTOR_META.CREDIT_WALLET.label;
 
 const WalletListView: FC<WalletConnectViewProps> = ({
   walletList,
@@ -90,7 +60,7 @@ const WalletListView: FC<WalletConnectViewProps> = ({
   onSearchChange,
   onFilterToggle,
 }) => {
-  const isMobile = isMobileDevice();
+  const isMobile = useMemo(() => isMobileDevice(), []);
 
   const filtered = useMemo(() => {
     const q = walletListSearch.trim().toLowerCase();
@@ -111,11 +81,10 @@ const WalletListView: FC<WalletConnectViewProps> = ({
   }, [walletList, walletListSearch, walletListFilterActive]);
 
   const handleClickWallet = (wallet: WCWallet): void => {
-    const uri = qrUri;
-    if (isMobile && uri) {
+    if (isMobile && qrUri) {
       const target = wallet.mobileNative || wallet.mobileUniversal;
       if (target) {
-        tryOpenDeepLink(uri, target);
+        tryOpenDeepLink(qrUri, target);
         return;
       }
     }
@@ -211,40 +180,11 @@ const WalletQRView: FC<{ wallet: WCWallet; qrUri: string | null }> = ({ wallet,
 
   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"
-            {...(logoSrc && {
-              imageSettings: {
-                src: logoSrc,
-                width: 40,
-                height: 40,
-                excavate: true,
-              },
-            })}
-          />
-        ) : (
-          <div className="ck-qr-spinner" aria-label="Loading QR code" />
-        )}
-      </div>
+      <QRFrame qrUri={qrUri} logoUrl={logoSrc} />
 
       <p className="ck-view__caption">Scan this QR Code with your phone</p>
 
-      {qrUri && (
-        <button
-          type="button"
-          className="ck-copy-link"
-          onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            navigator.clipboard.writeText(qrUri);
-          }}
-        >
-          Copy link
-        </button>
-      )}
+      <CopyLinkButton qrUri={qrUri} />
 
       {downloadUrl && (
         <div className="ck-download-card">

package/tsup.config.ts

@@ -7,7 +7,18 @@ export default defineConfig({
   dts: true,
   clean: true,
   target: 'es2019',
-  external: ['react', 'react-native'],
+  external: [
+    'react',
+    'react-native',
+    'wagmi',
+    '@wagmi/core',
+    'viem',
+    '@gluwa/credit-connect-sdk',
+    '@gluwa/credit-connect-sdk/dapp',
+    '@gluwa/credit-connect-sdk/storage',
+    '@gluwa/credit-connect-sdk/e2ee',
+    '@gluwa/credit-connect-sdk/hub',
+  ],
   banner: {
     js: 'import React from "react";',
   },