@gluwa/connect-kit 0.1.0-next.2 → 0.2.0-next.1

package/dist/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.2",
+  "version": "0.2.0-next.1",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./credit-connect": {
+      "types": "./src/credit-connect.ts",
+      "default": "./src/credit-connect.ts"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -17,10 +22,17 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       },
+      "./credit-connect": {
+        "types": "./dist/credit-connect.d.ts",
+        "default": "./dist/credit-connect.js"
+      },
       "./index.css": "./dist/index.css"
     }
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
   "scripts": {
     "prepack": "pnpm build && cp package.json dist/ && cp README.md dist/",
     "build": "tsup",
@@ -31,10 +43,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "qrcode.react": "^3.2.0"
+    "qrcode.react": "^4.2.0",
+    "wagmi": "^2.15.6",
+    "@wagmi/core": "^2.16.7"
   },
   "devDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
+    "@tanstack/react-query": "^5.62.0",
     "@types/react": "catalog:react18",
     "@wagmi/core": "^2.16.7",
     "esbuild-sass-plugin": "^3.7.0",
@@ -48,14 +63,16 @@
   },
   "peerDependencies": {
     "@gluwa/credit-connect-sdk": "workspace:*",
-    "@wagmi/core": ">=2.0.0",
+    "@tanstack/react-query": ">=5.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "viem": ">=2.0.0",
-    "wagmi": ">=2.0.0"
+    "viem": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "@gluwa/credit-connect-sdk": {
       "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
     }
   },
   "repository": {

package/package.json

@@ -1,24 +1,34 @@
 {
   "name": "@gluwa/connect-kit",
-  "version": "0.1.0-next.2",
+  "version": "0.2.0-next.1",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./credit-connect": {
+      "types": "./dist/credit-connect.d.ts",
+      "default": "./dist/credit-connect.js"
+    },
     "./index.css": "./dist/index.css"
   },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "qrcode.react": "^3.2.0"
+    "qrcode.react": "^4.2.0",
+    "wagmi": "^2.15.6",
+    "@wagmi/core": "^2.16.7"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.62.0",
     "@types/react": "^18.3.18",
     "@wagmi/core": "^2.16.7",
     "esbuild-sass-plugin": "^3.7.0",
@@ -32,15 +42,17 @@
     "@gluwa/credit-connect-sdk": "0.2.0-next.1"
   },
   "peerDependencies": {
-    "@wagmi/core": ">=2.0.0",
+    "@tanstack/react-query": ">=5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "viem": ">=2.0.0",
-    "wagmi": ">=2.0.0",
     "@gluwa/credit-connect-sdk": "0.2.0-next.1"
   },
   "peerDependenciesMeta": {
     "@gluwa/credit-connect-sdk": {
       "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
     }
   },
   "repository": {

package/src/ConnectKitProvider.tsx

@@ -9,29 +9,27 @@ import {
   type FC,
   type ReactNode,
 } from 'react';
-import { useAccount, useDisconnect } from 'wagmi';
+import { WagmiProvider, useAccount, useDisconnect, useSwitchChain } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConnectModal } from './ConnectModal';
-import type { ConnectErrorContext, ConnectResult, ConnectorId, Connectors } from './types';
+import { getConfig, getKitConfig, initConfig } from './core/config';
+import type {
+  ConnectErrorContext,
+  ConnectKitConfig,
+  ConnectResult,
+  ConnectorId,
+  Connectors,
+} from './types';
+
+const internalQueryClient = new QueryClient();
 
 export interface ConnectKitProviderProps {
   children: ReactNode;
+  kitConfig?: ConnectKitConfig;
   connectors: Connectors;
-  wcProjectId?: string;
-  /**
-   * 연결돼 있는 동안 강제할 체인 ID. 다른 체인에 연결돼 있으면
-   * 자동으로 스위치 모달이 떠서 사용자에게 전환 또는 disconnect를 요구.
-   */
   requiredChainId?: number;
-  /**
-   * 연결이 정상적으로 끝나고(체인 검증까지 통과) "사용 가능한 상태"가 됐을 때 한 번 호출.
-   * 재연결(reconnect)에서는 호출되지 않음 — 그쪽은 dApp의 watchAccount 책임.
-   */
   onConnect?: (result: ConnectResult) => void;
   onLog?: (message: string, error?: Error) => void;
-  /**
-   * 연결 실패(거절/미설치/기타) 시 모달 안에 표시할 fallback UI를 dApp이 직접 그리고 싶을 때.
-   * 미제공 시 기본 동작은 selector로 복귀.
-   */
   renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
 }
 
@@ -57,10 +55,31 @@ const resolveConnectorId = (wagmiConnectorId: string | undefined): ConnectorId |
   return null;
 };
 
-export const ConnectKitProvider: FC<ConnectKitProviderProps> = ({
+export const ConnectKitProvider: FC<ConnectKitProviderProps> = (props) => {
+  const wagmiConfig = useMemo(
+    () => (props.kitConfig ? initConfig(props.kitConfig) : getConfig()),
+    [props.kitConfig],
+  );
+
+  const resolvedKitConfig = props.kitConfig ?? getKitConfig();
+
+  return (
+    <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
+      <QueryClientProvider client={internalQueryClient}>
+        <ConnectKitProviderInner {...props} kitConfig={resolvedKitConfig} />
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
+
+type ConnectKitProviderInnerProps = Omit<ConnectKitProviderProps, 'kitConfig'> & {
+  kitConfig: ConnectKitConfig;
+};
+
+const ConnectKitProviderInner: FC<ConnectKitProviderInnerProps> = ({
   children,
   connectors,
-  wcProjectId,
+  kitConfig,
   requiredChainId,
   onConnect,
   onLog,
@@ -71,21 +90,62 @@ export const ConnectKitProvider: FC<ConnectKitProviderProps> = ({
 
   const account = useAccount();
   const { disconnectAsync } = useDisconnect();
+  const { switchChainAsync } = useSwitchChain();
 
-  // dApp의 onConnect는 ref로 잡아 effect 재실행 노이즈 차단
   const onConnectRef = useRef(onConnect);
   useEffect(() => {
     onConnectRef.current = onConnect;
   }, [onConnect]);
 
-  // chain mismatch invariant: 연결돼 있지만 요구 체인이 아니면 modal force-open
   const chainMismatch =
     requiredChainId != null &&
     account.status === 'connected' &&
     account.chainId != null &&
     account.chainId !== requiredChainId;
 
-  const effectiveOpen = isOpen || chainMismatch;
+  const [autoSwitchFailedKey, setAutoSwitchFailedKey] = useState<string | null>(null);
+  const autoSwitchInFlightRef = useRef(false);
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const mismatchKey =
+    chainMismatch && account.chainId != null && requiredChainId != null
+      ? `${account.chainId}->${requiredChainId}`
+      : null;
+
+  useEffect(() => {
+    if (!chainMismatch || requiredChainId == null) return;
+    if (autoSwitchInFlightRef.current) return;
+    if (mismatchKey != null && mismatchKey === autoSwitchFailedKey) return;
+
+    autoSwitchInFlightRef.current = true;
+    switchChainAsync({ chainId: requiredChainId })
+      .catch((err: unknown) => {
+        if (!isMountedRef.current) return;
+        const normalized = err instanceof Error ? err : new Error(String(err));
+        onLog?.(`[connect-kit] silent switch chain failed: ${normalized.message}`, normalized);
+        if (mismatchKey != null) {
+          setAutoSwitchFailedKey(mismatchKey);
+        }
+      })
+      .finally(() => {
+        autoSwitchInFlightRef.current = false;
+      });
+  }, [chainMismatch, mismatchKey, requiredChainId, autoSwitchFailedKey, switchChainAsync, onLog]);
+
+  useEffect(() => {
+    if (!chainMismatch && autoSwitchFailedKey != null) {
+      setAutoSwitchFailedKey(null);
+    }
+  }, [chainMismatch, autoSwitchFailedKey]);
+
+  const autoSwitchFailedForCurrent = mismatchKey != null && mismatchKey === autoSwitchFailedKey;
+  const effectiveOpen = isOpen || (chainMismatch && autoSwitchFailedForCurrent);
 
   const open = useCallback((): void => {
     setIsOpen(true);
@@ -99,22 +159,17 @@ export const ConnectKitProvider: FC<ConnectKitProviderProps> = ({
     await disconnectAsync();
   }, [disconnectAsync]);
 
-  // ConnectModal → Provider: 연결 결과를 일단 보류했다가
-  // chain 검증까지 통과한 후에만 dApp으로 forward
   const handleModalConnect = useCallback((result: ConnectResult): void => {
     setPendingResult(result);
   }, []);
 
-  // pendingResult가 있고, 연결 + chain 매칭이 충족되면 dApp으로 발화
   useEffect(() => {
     if (!pendingResult) return;
     if (account.status !== 'connected') {
-      // 연결이 끊겼거나 진행 중 — pending 폐기
       setPendingResult(null);
       return;
     }
     if (requiredChainId != null && account.chainId !== requiredChainId) {
-      // chain 아직 안 맞음 — switch 후 다시 평가
       return;
     }
     onConnectRef.current?.(pendingResult);
@@ -149,7 +204,7 @@ export const ConnectKitProvider: FC<ConnectKitProviderProps> = ({
       <ConnectModal
         open={effectiveOpen}
         connectors={connectors}
-        wcProjectId={wcProjectId}
+        wcProjectId={kitConfig.wcProjectId}
         requiredChainId={requiredChainId}
         renderConnectError={renderConnectError}
         onConnect={handleModalConnect}

package/src/ConnectModal.scss

@@ -520,11 +520,11 @@
   }
 }
 
-// 스크롤 wrapper — 520px 고정, 세로 스크롤만 담당
+// 스크롤 wrapper — 세로 스크롤만 담당
 .ck-wallet-grid-scroll {
   flex: 1;
   min-height: 0;
-  width: 520px;
+  width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }

package/src/ConnectModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef, useMemo, type FC, type ReactNode } from 'react';
+import { useState, useEffect, useCallback, useMemo, type FC, type ReactNode } from 'react';
 import './ConnectModal.scss';
 import { useAccount, useConfig, useDisconnect } from 'wagmi';
 import {
@@ -21,28 +21,60 @@ import { WalletConnectView } from './views/WalletConnectView';
 import { SwitchChainView } from './views/SwitchChainView';
 
 const RECENT_KEY = 'connect-kit:recent';
+const VALID_CONNECTOR_IDS: ReadonlySet<ConnectorId> = new Set<ConnectorId>([
+  'CREDIT_CONNECT',
+  'CREDIT_WALLET',
+  'METAMASK',
+  'WALLET_CONNECT',
+]);
+
 const readRecentConnector = (): ConnectorId | null => {
   try {
-    return localStorage.getItem(RECENT_KEY) as ConnectorId | null;
+    const raw = localStorage.getItem(RECENT_KEY);
+    if (raw == null) return null;
+    return VALID_CONNECTOR_IDS.has(raw as ConnectorId) ? (raw as ConnectorId) : null;
   } catch {
     return null;
   }
 };
 
-const writeRecentConnector = (id: ConnectorId): void => {
+const writeRecentConnector = (
+  id: ConnectorId,
+  onLog?: (message: string, error?: Error) => void,
+): void => {
   try {
     localStorage.setItem(RECENT_KEY, id);
-  } catch {}
+  } catch (err) {
+    const normalized = err instanceof Error ? err : new Error(String(err));
+    onLog?.(`[connect-kit] writeRecentConnector failed: ${normalized.message}`, normalized);
+  }
 };
 
+const REJECTED_ERROR_CODES = new Set<unknown>([
+  4001, // EIP-1193 user rejected
+  'ACTION_REJECTED', // ethers v6
+]);
+
 const classifyError = (error: Error): ConnectErrorReason => {
   const code =
     typeof error === 'object' && error !== null && 'code' in error
       ? (error as unknown as { code: unknown }).code
       : undefined;
-  if (code === 4001) return 'rejected';
+  if (code != null && REJECTED_ERROR_CODES.has(code)) return 'rejected';
   const message = error.message?.toLowerCase() ?? '';
-  if (message.includes('user rejected') || message.includes('user denied')) return 'rejected';
+  if (
+    message.includes('user rejected') ||
+    message.includes('user denied') ||
+    message.includes('user cancel') ||
+    message.includes('rejected by user') ||
+    message.includes('action_rejected') ||
+    message.includes('사용자가 거부') ||
+    message.includes('사용자가 취소') ||
+    message.includes('ユーザーが拒否') ||
+    message.includes('ユーザーがキャンセル')
+  ) {
+    return 'rejected';
+  }
   if (message.includes('unsupported') || message.includes('not installed')) return 'unsupported';
   return 'unknown';
 };
@@ -270,8 +302,6 @@ const resolveConnectorsFromConfig = (connectorsConfig?: Connectors): ConnectorId
 };
 
 export const ConnectModal: FC<ConnectModalProps> = (props) => {
-  // open=false면 내부 컴포넌트를 마운트하지 않음
-  // → useConfig 등 wagmi hooks가 실행되지 않아 WagmiProvider 없이도 렌더링 가능
   if (!props.open) return null;
 
   const resolvedConnectors = resolveConnectorsFromConfig(props.connectors);
@@ -303,8 +333,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
   renderConnectError,
 }) => {
   const [selectedConnector, setSelectedConnector] = useState<ConnectorId | null>(null);
-  const [qrUriMap, setQrUriMap] = useState<Partial<Record<ConnectorId, string>>>({});
-  const pendingQrConnectorRef = useRef<ConnectorId | null>(null);
+  const [qrUri, setQrUri] = useState<string | null>(null);
   const [recentConnector, setRecentConnector] = useState<ConnectorId | null>(null);
   const [hasMetaMaskExtension, setHasMetaMaskExtension] = useState<boolean>(false);
   const [errorState, setErrorState] = useState<{ connectorId: ConnectorId; error: Error } | null>(
@@ -313,7 +342,6 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
 
   const wc = useWCState();
 
-  // wagmi 상태 — chain mismatch invariant 판정용
   const account = useAccount();
   const { disconnectAsync } = useDisconnect();
   const wagmiConfig = useConfig();
@@ -329,27 +357,19 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     return wagmiConfig.chains.find((chain) => chain.id === requiredChainId)?.name;
   }, [wagmiConfig.chains, requiredChainId]);
 
-  // QR URI 수신 — 커넥터별 캐시에 저장 (null은 무시하여 캐시 유지)
   const handleQrUri = useCallback((uri: string | null) => {
-    if (uri) {
-      const id = pendingQrConnectorRef.current;
-      if (id) setQrUriMap((prev) => ({ ...prev, [id]: uri }));
-    }
+    setQrUri(uri);
   }, []);
 
-  // 연결 완료
   const handleConnect = useCallback(
     (result: Parameters<typeof onConnect>[0]) => {
       setErrorState(null);
       onConnect(result);
-      // chain mismatch가 있으면 모달은 SwitchChainView로 자동 전환됨 (닫지 않음)
-      // Provider 측에서 requiredChainId가 매칭될 때까지 force-open 유지
       onClose();
     },
     [onConnect, onClose],
   );
 
-  // 연결 실패 — 실패한 커넥터의 QR 캐시만 삭제
   const handleError = useCallback(
     (error: unknown, connectorId: ConnectorId): void => {
       const normalizedError = error instanceof Error ? error : new Error(String(error));
@@ -357,11 +377,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
         `[connect-kit] connection failed (${connectorId}): ${normalizedError.message}`,
         normalizedError,
       );
-      setQrUriMap((prev) => {
-        const next = { ...prev };
-        delete next[connectorId];
-        return next;
-      });
+      setQrUri(null);
       wc.resetView();
       if (renderConnectError) {
         setErrorState({ connectorId, error: normalizedError });
@@ -372,14 +388,12 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     [onLog, wc.resetView, renderConnectError],
   );
 
-  // 연결 시도
   const { triggerConnect, cancelConnect } = useWagmiConnect({
     onConnect: handleConnect,
     onError: handleError,
     onQrUri: handleQrUri,
   });
 
-  // wagmi connector icon 매핑
   const connectorLogoMap = useMemo(() => {
     const map: Partial<Record<ConnectorId, string>> = {};
     const connectorIds: ConnectorId[] = [
@@ -395,33 +409,29 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     return map;
   }, [wagmiConfig.connectors]);
 
-  // 최근 연결 기록 로드
   useEffect(() => {
     setRecentConnector(readRecentConnector());
     setHasMetaMaskExtension(detectMetaMaskExtension());
   }, []);
 
-  // 모달 닫힐 때 상태 + QR 캐시 전체 초기화
   useEffect(() => {
     if (!open) {
       setSelectedConnector(null);
-      setQrUriMap({});
-      pendingQrConnectorRef.current = null;
+      setQrUri(null);
       setErrorState(null);
       wc.reset();
       cancelConnect();
     }
   }, [open, cancelConnect, wc.reset]);
 
-  // 커넥터 선택
   const handleSelectConnector = useCallback(
     (id: ConnectorId): void => {
       if (id === selectedConnector && !errorState) return;
-      pendingQrConnectorRef.current = id;
       setSelectedConnector(id);
+      setQrUri(null);
       setErrorState(null);
       wc.resetView();
-      writeRecentConnector(id);
+      writeRecentConnector(id, onLog);
       setRecentConnector(id);
 
       if (id === 'WALLET_CONNECT' && wcProjectId) {
@@ -439,10 +449,10 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
       wcProjectId,
       wc.resetView,
       wc.loadWalletList,
+      onLog,
     ],
   );
 
-  // 뒤로가기 — QR 캐시는 유지, wagmi만 reset
   const handleBack = useCallback((): void => {
     if (errorState) {
       setErrorState(null);
@@ -450,12 +460,11 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
       return;
     }
     if (selectedConnector === 'WALLET_CONNECT' && wc.handleBack()) return;
-    pendingQrConnectorRef.current = null;
     setSelectedConnector(null);
+    setQrUri(null);
     cancelConnect();
   }, [selectedConnector, errorState, wc.handleBack, cancelConnect]);
 
-  // chain mismatch 상태에서의 disconnect (Switch chain pane의 cancel)
   const handleSwitchChainDisconnect = useCallback((): void => {
     disconnectAsync().catch((err: unknown) => {
       const normalized = err instanceof Error ? err : new Error(String(err));
@@ -463,13 +472,11 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     });
   }, [disconnectAsync, onLog]);
 
-  // overlay 클릭 — chain mismatch 상태에선 무시 (실수 클릭 방어)
   const handleOverlayClick = useCallback((): void => {
     if (chainMismatch) return;
     onClose();
   }, [chainMismatch, onClose]);
 
-  // close 버튼 — chain mismatch 상태에선 disconnect
   const handleCloseClick = useCallback((): void => {
     if (chainMismatch) {
       handleSwitchChainDisconnect();
@@ -487,7 +494,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
       retry: () => {
         const id = errorState.connectorId;
         setErrorState(null);
-        pendingQrConnectorRef.current = id;
+        setQrUri(null);
         cancelConnect();
         triggerConnect(id);
       },
@@ -499,8 +506,6 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
     return renderConnectError(ctx);
   }, [errorState, renderConnectError, triggerConnect, cancelConnect]);
 
-  // chain mismatch면 단일 pane (selector/detail 숨김)
-  // requiredChainId != null 재확인은 TS narrowing용 — chainMismatch true면 이미 보장됨
   if (chainMismatch && requiredChainId != null) {
     return (
       <div className="ck-root">
@@ -554,7 +559,7 @@ const ConnectModalInner: FC<ConnectModalInnerProps> = ({
         />
         <DetailPane
           selectedConnector={selectedConnector}
-          qrUri={selectedConnector ? (qrUriMap[selectedConnector] ?? null) : null}
+          qrUri={qrUri}
           hasMetaMaskExtension={hasMetaMaskExtension}
           connectorLogoMap={connectorLogoMap}
           wc={wc}

package/src/api/account.ts

@@ -0,0 +1,21 @@
+import {
+  getAccount as wagmiGetAccount,
+  signMessage as wagmiSignMessage,
+  signTypedData as wagmiSignTypedData,
+  type GetAccountReturnType,
+  type SignMessageParameters,
+  type SignTypedDataParameters,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const getAccount = (): GetAccountReturnType => {
+  return wagmiGetAccount(getConfig());
+};
+
+export const signMessage = (params: SignMessageParameters): Promise<`0x${string}`> => {
+  return wagmiSignMessage(getConfig(), params);
+};
+
+export const signTypedData = (params: SignTypedDataParameters): Promise<`0x${string}`> => {
+  return wagmiSignTypedData(getConfig(), params);
+};

package/src/api/balance.ts

@@ -0,0 +1,10 @@
+import {
+  getBalance as wagmiGetBalance,
+  type GetBalanceParameters,
+  type GetBalanceReturnType,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const getBalance = (params: GetBalanceParameters): Promise<GetBalanceReturnType> => {
+  return wagmiGetBalance(getConfig(), params);
+};

package/src/api/chain.ts

@@ -0,0 +1,17 @@
+import {
+  switchChain as wagmiSwitchChain,
+  getPublicClient as wagmiGetPublicClient,
+  type SwitchChainParameters,
+  type GetPublicClientParameters,
+  type GetPublicClientReturnType,
+} from '@wagmi/core';
+import type { Chain } from 'viem';
+import { getConfig } from '../core/config';
+
+export const switchChain = (params: SwitchChainParameters): Promise<Chain> => {
+  return wagmiSwitchChain(getConfig(), params);
+};
+
+export const getPublicClient = (params?: GetPublicClientParameters): GetPublicClientReturnType => {
+  return wagmiGetPublicClient(getConfig(), params);
+};

package/src/api/contract.ts

@@ -0,0 +1,33 @@
+import {
+  readContract as wagmiReadContract,
+  writeContract as wagmiWriteContract,
+  type ReadContractParameters,
+  type ReadContractReturnType,
+  type WriteContractParameters,
+  type WriteContractReturnType,
+  type Config,
+} from '@wagmi/core';
+import type { Abi, ContractFunctionArgs, ContractFunctionName } from 'viem';
+import { getConfig } from '../core/config';
+
+export function readContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'pure' | 'view'>,
+  args extends ContractFunctionArgs<abi, 'pure' | 'view', functionName>,
+>(
+  parameters: ReadContractParameters<abi, functionName, args, Config>,
+): Promise<ReadContractReturnType<abi, functionName, args>> {
+  return wagmiReadContract(getConfig(), parameters as any) as Promise<
+    ReadContractReturnType<abi, functionName, args>
+  >;
+}
+
+export function writeContract<
+  const abi extends Abi | readonly unknown[],
+  functionName extends ContractFunctionName<abi, 'nonpayable' | 'payable'>,
+  args extends ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
+>(
+  parameters: WriteContractParameters<abi, functionName, args, Config>,
+): Promise<WriteContractReturnType> {
+  return wagmiWriteContract(getConfig(), parameters as any);
+}

package/src/api/transaction.ts

@@ -0,0 +1,12 @@
+import {
+  waitForTransactionReceipt as wagmiWaitForTransactionReceipt,
+  type WaitForTransactionReceiptParameters,
+  type WaitForTransactionReceiptReturnType,
+} from '@wagmi/core';
+import { getConfig } from '../core/config';
+
+export const waitForTransactionReceipt = (
+  params: WaitForTransactionReceiptParameters,
+): Promise<WaitForTransactionReceiptReturnType> => {
+  return wagmiWaitForTransactionReceipt(getConfig(), params);
+};