@abcwalletio/evm

ABC WAAS SDK의 EVM 통합 패키지입니다. 두 가지 진입점을 제공합니다:

• @abcwalletio/evm — toAbcWaasAccount()로 viem Custom Account 생성 (Wagmi 없이도 사용 가능)
• @abcwalletio/evm/wagmi — Wagmi v2 호환 커넥터, EIP-1193 Provider, 모달 UI

Installation

pnpm add @abcwalletio/evm @abcwalletio/core

Peer Dependencies

• @abcwalletio/core (workspace peer)
• viem@^2.0.0
• (Wagmi 경로 사용 시) wagmi@^2.0.0, @wagmi/core@^2.0.0

viem Custom Account 사용

Wagmi 없이 viem WalletClient를 직접 만들 때는 toAbcWaasAccount를 사용합니다. EIP-155 replay protection을 위해 legacy tx는 {r, s, v: BigInt(27+yParity)}로, EIP-1559/2930은 {r, s, yParity}로 viem의 serializeTransaction에 전달합니다.

import { createWaasSDK, MemoryStorage } from '@abcwalletio/core';
import { createWalletClient, http, parseEther } from 'viem';
import { sepolia } from 'viem/chains';
import { toAbcWaasAccount } from '@abcwalletio/evm';

const sdk = await createWaasSDK({ /* ... */ storage: new MemoryStorage() });

const account = await toAbcWaasAccount({
  sdk,
  requestPassword: async () => prompt('PIN?') ?? '',
});

const client = createWalletClient({ account, chain: sepolia, transport: http() });
const hash = await client.sendTransaction({
  to: '0xabc...',
  value: parseEther('0.01'),
});

Quick Start

Basic Setup (V2 — Secure Channel)

import { createConfig, http } from '@wagmi/core';
import { mainnet, sepolia } from 'viem/chains';
import { abcWaasConnector } from '@abcwalletio/evm/wagmi';
import { MemoryStorage } from '@abcwalletio/core';

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    abcWaasConnector({
      sdkConfig: {
        storage: new MemoryStorage(),
        auth: {
          v2: {
            clientId: 'your-client-id',
            clientSecret: 'your-client-secret',
          },
        },
      },
    }),
  ],
});

Basic Setup (V3 — TokenProvider)

고객사 백엔드가 WaaS 토큰을 발급하는 엔터프라이즈 환경에선 사전 초기화한 SDK를 커넥터에 주입합니다. 브라우저에 clientSecret이 필요 없고, V3가 이미 인증된 상태이므로 로그인 모달은 자동 skip되며 MPC 키 설정 모달만 뜹니다.

import { createWaasSDK, LocalStorageAdapter } from '@abcwalletio/core';
import { abcWaasConnector } from '@abcwalletio/evm/wagmi';

const sdk = await createWaasSDK({
  storage: new LocalStorageAdapter(),
  auth: {
    v3: {
      tokenProvider: async () => {
        const r = await fetch('/api/waas/token', { credentials: 'include' });
        if (!r.ok) throw new Error('unauthorized');
        const { access_token, expires_in } = await r.json();
        return { accessToken: access_token, expiresIn: expires_in };
      },
    },
  },
});

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [abcWaasConnector({ sdk })],
});

With React

import { WagmiProvider, useConnect, useAccount, useSignMessage } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { abcWaasConnector } from '@abcwalletio/evm/wagmi';
import { createWaasSDK, LocalStorageAdapter } from '@abcwalletio/core';

// SDK 사전 초기화 (선택적)
const sdk = await createWaasSDK({
  storage: new LocalStorageAdapter(),
  auth: {
    v2: {
      clientId: 'your-client-id',
      clientSecret: 'your-client-secret',
    },
  },
});

// Wagmi Config
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    abcWaasConnector({ sdk }), // 사전 초기화된 SDK 사용
  ],
});

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <WalletComponent />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

function WalletComponent() {
  const { connect, connectors } = useConnect();
  const { address, isConnected } = useAccount();
  const { signMessage } = useSignMessage();

  const abcConnector = connectors.find(c => c.id === 'abcWaas');

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => signMessage({ message: 'Hello!' })}>
          Sign Message
        </button>
      </div>
    );
  }

  return (
    <button onClick={() => connect({ connector: abcConnector! })}>
      Connect ABC Wallet
    </button>
  );
}

Configuration Options

interface AbcWaasConnectorConfig {
  /** SDK 설정 (SDK 인스턴스가 제공되지 않은 경우 사용) */
  sdkConfig?: WaasSDKConfig;

  /** 기존 SDK 인스턴스 (있으면 sdkConfig 무시) */
  sdk?: WaasSDK;

  /** 커넥터 표시 이름 (기본값: 'ABC Waas') */
  name?: string;

  /** 커넥터 아이콘 URL */
  icon?: string;

  /** Modal 표시 여부 (기본값: true) */
  showLoginModal?: boolean;

  /** headless 모드 콜백 (showLoginModal: false일 때) */
  onLoginRequired?: (resolve: () => void) => void;
  onMpcKeyRequired?: (resolve: () => void) => void;

  /** Modal 설정 (showLoginModal: true일 때) */
  modalConfig?: {
    theme?: 'light' | 'dark';
    language?: 'ko' | 'en';
    loginMethods?: ('email' | 'google' | 'apple' | 'naver' | 'kakao' | 'line')[];
  };
}

Using SDK Instance

사전 초기화된 SDK 인스턴스를 전달하면 연결 시 초기화 시간을 절약할 수 있습니다.

import { createWaasSDK, LocalStorageAdapter } from '@abcwalletio/core';

// SDK 먼저 초기화
const sdk = await createWaasSDK({
  storage: new LocalStorageAdapter(),
  auth: {
    v2: {
      clientId: 'your-client-id',
      clientSecret: 'your-client-secret',
    },
  },
});

// 인증 수행 (V2 — Secure Channel 이메일/비번)
await sdk.auth.v2.loginWithEmail('[email protected]', 'password');

// 또는 V3 — createWaasSDK({ auth: { tokenProvider } })로 초기화한 경우
// 최초 API 호출 시 자동으로 tokenProvider가 불린다.

// MPC 키 생성
await sdk.mpc.generateKeyShare('secp256k1', 'password123');

// 커넥터에 SDK 전달
const connector = abcWaasConnector({ sdk });

Using SDK Config

sdkConfig를 전달하면 connect 시점에 SDK가 자동 초기화됩니다. auth에는 V2/V3 중 원하는 경로를 넣으면 됩니다 (둘 다 넣어 공존도 가능).

// V2 — Secure Channel 이메일/비번
const connector = abcWaasConnector({
  sdkConfig: {
    storage: new MemoryStorage(),
    auth: {
      v2: {
        clientId: 'your-client-id',
        clientSecret: 'your-client-secret',
      },
    },
  },
});

// V3 — 고객사 백엔드가 토큰 발급
const connector = abcWaasConnector({
  sdkConfig: {
    storage: new LocalStorageAdapter(),
    auth: {
      v3: {
        tokenProvider: async () => {
          const r = await fetch('/api/waas/token', { credentials: 'include' });
          const { access_token, expires_in } = await r.json();
          return { accessToken: access_token, expiresIn: expires_in };
        },
      },
    },
  },
  // V3는 이미 인증된 상태로 진입하므로 로그인 모달은 자동 skip됨 (MPC 키 모달만 뜸)
});

Supported RPC Methods

Account Methods

| Method | Description | |--------|-------------| | eth_requestAccounts | 계정 연결 요청 | | eth_accounts | 연결된 계정 목록 |

Chain Methods

| Method | Description | |--------|-------------| | eth_chainId | 현재 체인 ID | | wallet_switchEthereumChain | 체인 전환 |

Signing Methods

| Method | Description | |--------|-------------| | personal_sign | EIP-191 개인 메시지 서명 | | eth_sign | 원시 해시 서명 (deprecated) | | eth_signTypedData_v4 | EIP-712 타입화된 데이터 서명 | | eth_signTransaction | 트랜잭션 서명 | | eth_sendTransaction | 트랜잭션 서명 및 전송 |

Transaction Parameter Auto-fill

eth_signTransaction 및 eth_sendTransaction 호출 시, 누락된 트랜잭션 파라미터가 자동으로 채워집니다:

| Parameter | Auto-fill Method | |-----------|-----------------| | nonce | eth_getTransactionCount (pending) | | gas | eth_estimateGas | | gasPrice (Legacy) | eth_gasPrice | | maxFeePerGas (EIP-1559) | baseFeePerGas * 1.2 + maxPriorityFeePerGas | | maxPriorityFeePerGas (EIP-1559) | eth_maxPriorityFeePerGas 또는 1 gwei |

네트워크의 EIP-1559 지원 여부는 최신 블록의 baseFeePerGas 존재 여부로 자동 감지됩니다. 트랜잭션 요청에 이미 값이 포함된 경우 해당 값이 우선 사용됩니다.

Read Methods (Proxy to RPC)

| Method | Description | |--------|-------------| | eth_blockNumber | 최신 블록 번호 | | eth_getBalance | 잔액 조회 | | eth_getTransactionCount | 논스 조회 | | eth_call | 컨트랙트 호출 (읽기) | | eth_estimateGas | 가스 추정 | | eth_gasPrice | 현재 가스 가격 |

Provider Events

const provider = await connector.getProvider();

// 계정 변경
provider.on('accountsChanged', (accounts: string[]) => {
  console.log('Accounts changed:', accounts);
});

// 체인 변경
provider.on('chainChanged', (chainId: string) => {
  console.log('Chain changed:', chainId);
});

// 연결
provider.on('connect', (info: { chainId: string }) => {
  console.log('Connected:', info.chainId);
});

// 연결 해제
provider.on('disconnect', (error: ProviderRpcError) => {
  console.log('Disconnected:', error.message);
});

Direct Provider Usage

커넥터 없이 Provider를 직접 사용할 수도 있습니다.

import { AbcWaasProvider } from '@abcwalletio/evm/wagmi';
import { createWaasSDK, MemoryStorage } from '@abcwalletio/core';
import { mainnet, sepolia } from 'viem/chains';

// SDK 초기화
const sdk = await createWaasSDK({
  storage: new MemoryStorage(),
  auth: {
    v2: {
      clientId: 'your-client-id',
      clientSecret: 'your-client-secret',
    },
  },
});

// 키 생성 (필수)
await sdk.mpc.generateKeyShare('secp256k1', 'password123');

// Provider 생성
const provider = new AbcWaasProvider({
  sdk,
  chainId: mainnet.id,
  chains: [mainnet, sepolia],
});

// 계정 연결
const accounts = await provider.request({ method: 'eth_requestAccounts' });
console.log('Accounts:', accounts);

// 메시지 서명
const signature = await provider.request({
  method: 'personal_sign',
  params: ['Hello, World!', accounts[0]],
});
console.log('Signature:', signature);

Error Handling

import { RpcErrorCodes } from '@abcwalletio/evm/wagmi';

try {
  await provider.request({ method: 'eth_requestAccounts' });
} catch (error) {
  if (error.code === RpcErrorCodes.UNAUTHORIZED) {
    // MPC 키가 없음 - 키 생성 필요
  } else if (error.code === RpcErrorCodes.USER_REJECTED) {
    // 사용자가 요청 거부
  } else if (error.code === RpcErrorCodes.CHAIN_NOT_ADDED) {
    // 체인이 설정에 없음
  }
}

RPC Error Codes

| Code | Name | Description | |------|------|-------------| | 4001 | USER_REJECTED | 사용자가 요청 거부 | | 4100 | UNAUTHORIZED | 권한 없음 (키 없음) | | 4200 | UNSUPPORTED_METHOD | 지원하지 않는 메서드 | | 4900 | DISCONNECTED | 연결 해제됨 | | 4901 | CHAIN_DISCONNECTED | 체인 연결 해제 | | 4902 | CHAIN_NOT_ADDED | 체인 미등록 | | -32601 | METHOD_NOT_FOUND | 메서드 없음 | | -32602 | INVALID_PARAMS | 잘못된 파라미터 | | -32603 | INTERNAL_ERROR | 내부 에러 |

SDK Event Integration

커넥터는 SDK의 인증 이벤트를 자동으로 처리합니다. authError 또는 logout 이벤트 발생 시 자동으로 연결이 해제됩니다.

자동 연결 해제

// 커넥터가 connect() 시점에 SDK 이벤트를 자동 구독합니다
// - authError 발생 시: 자동으로 disconnect 이벤트 발생
// - logout 발생 시: 자동으로 disconnect 이벤트 발생

// Wagmi에서 disconnect 이벤트를 감지하여 UI 업데이트 가능
const { isConnected } = useAccount();

useEffect(() => {
  if (!isConnected) {
    // 연결이 해제됨 (토큰 만료, 로그아웃 등)
    // 로그인 페이지로 이동하거나 재연결 UI 표시
  }
}, [isConnected]);

SDK 이벤트 직접 구독

커넥터와 별도로 SDK 이벤트를 직접 구독할 수도 있습니다.

import { createWaasSDK, type WaasEventHandler } from '@abcwalletio/core';

const sdk = await createWaasSDK({ ... });

// 토큰 자동 갱신 알림
sdk.on('tokenRefreshed', (payload) => {
  console.log('토큰이 갱신되었습니다');
});

// 인증 에러 처리
sdk.on('authError', (payload) => {
  console.error('인증 에러:', payload.error.message);
  // 사용자에게 알림 표시
  alert('세션이 만료되었습니다. 다시 로그인해주세요.');
});

// 로그아웃 처리
sdk.on('logout', () => {
  console.log('로그아웃되었습니다');
  // 로그인 페이지로 이동
  window.location.href = '/login';
});

React Hook 예제

import { useEffect } from 'react';
import { useAccount, useDisconnect } from 'wagmi';
import { getSDK } from './lib/sdk'; // SDK 싱글톤

function useAuthEvents() {
  const { isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  useEffect(() => {
    const sdk = getSDK();
    if (!sdk) return;

    const handleAuthError = () => {
      // 커넥터가 자동으로 disconnect하지만,
      // 추가적인 UI 처리가 필요한 경우 여기서 수행
      console.log('인증 에러 발생 - 로그인 페이지로 이동');
    };

    const handleLogout = () => {
      console.log('로그아웃 완료');
    };

    sdk.on('authError', handleAuthError);
    sdk.on('logout', handleLogout);

    return () => {
      sdk.off('authError', handleAuthError);
      sdk.off('logout', handleLogout);
    };
  }, []);

  return { isConnected };
}

Login Modal (Prebuilt UI)

WalletConnect의 showQrModal과 유사하게, showLoginModal: true(기본값)로 설정하면 connect() 호출 시 자동으로 로그인 Modal이 표시됩니다.

Prebuilt 모드 (권장)

import { abcWaasConnector } from '@abcwalletio/evm/wagmi';

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: { ... },
  connectors: [
    abcWaasConnector({
      sdkConfig: { ... },
      // Modal 자동 표시 (기본값: true)
      showLoginModal: true,
      modalConfig: {
        theme: 'light',       // 'light' | 'dark'
        language: 'ko',       // 'ko' | 'en'
        loginMethods: ['email', 'google', 'apple', 'naver', 'kakao', 'line'],
      },
    }),
  ],
});

// 사용: connect() 호출 시 자동으로 Modal 표시
function ConnectButton() {
  const { connect, connectors } = useConnect();
  const abcConnector = connectors.find(c => c.id === 'abcWaas');

  return (
    <button onClick={() => connect({ connector: abcConnector! })}>
      지갑 연결
    </button>
  );
}

Modal Flow

1. 로그인 화면: 이메일/비밀번호 입력 또는 소셜 로그인 버튼
2. 회원가입 화면: 이메일 → 인증코드 → 비밀번호 설정
3. MPC 키 설정: 지갑 비밀번호 입력 (새 키 생성 또는 기존 키 복구)
4. 완료: Modal 닫힘, connect() Promise resolve

OAuth Callback 설정

소셜 로그인을 사용하려면 OAuth callback 페이지가 필요합니다.

<!-- public/oauth-callback.html -->
<!DOCTYPE html>
<html>
<head><title>OAuth Callback</title></head>
<body>
<script>
  (function() {
    const params = new URLSearchParams(window.location.search);
    const provider = localStorage.getItem('abc-waas-oauth-provider');

    if (window.opener) {
      // 팝업 모드
      window.opener.postMessage({
        type: 'oauth-callback',
        provider: provider,
        code: params.get('code'),
        state: params.get('state'),
        id_token: params.get('id_token'),
      }, window.location.origin);
      window.close();
    } else {
      // 리다이렉트 폴백 - 메인 페이지로 이동
      const pending = sessionStorage.getItem('abc-waas-oauth-pending');
      if (pending) {
        const { returnUrl } = JSON.parse(pending);
        sessionStorage.setItem('abc-waas-oauth-result', JSON.stringify({
          type: 'oauth-callback',
          provider: provider,
          code: params.get('code'),
        }));
        sessionStorage.removeItem('abc-waas-oauth-pending');
        window.location.href = returnUrl.split('?')[0];
      }
    }
  })();
</script>
</body>
</html>

Headless 모드

직접 로그인 UI를 구현하려면 showLoginModal: false로 설정하고 콜백을 제공합니다.

const connector = abcWaasConnector({
  sdkConfig: { ... },
  showLoginModal: false,
  onLoginRequired: (resolve) => {
    // 커스텀 로그인 UI 표시
    showMyLoginUI().then(() => {
      resolve(); // 로그인 완료 시 호출
    });
  },
  onMpcKeyRequired: (resolve) => {
    // 커스텀 MPC 키 설정 UI 표시
    showMyMpcSetupUI().then(() => {
      resolve(); // MPC 키 설정 완료 시 호출
    });
  },
});

테마 및 언어 변경

런타임에 테마/언어를 변경할 수 있습니다.

import { setModalTheme, setModalLanguage } from '@abcwalletio/evm/wagmi';

// 다크 모드 전환
setModalTheme('dark');

// 영어로 전환
setModalLanguage('en');

Authentication Flow

ABC Waas 커넥터는 MPC 기반이므로 연결 전에 인증과 키 생성이 필요합니다.

// 1. SDK 초기화
const sdk = await createWaasSDK({ ... });

// 2. 인증 수행
//    - V2: 이메일/비번 (Secure Channel)
await sdk.auth.v2.loginWithEmail('[email protected]', 'password');
//    - V3: createWaasSDK({ auth: { tokenProvider } })로 초기화된 경우
//      최초 API 호출 시 자동으로 tokenProvider가 불린다.

// 3. MPC 키 생성 (최초 1회)
const keyResult = await sdk.mpc.generateKeyShare('secp256k1', 'password');

// 또는 기존 키 복구
// const keyResult = await sdk.mpc.recoverKeyShare('secp256k1', 'password');

// 4. Wagmi에서 연결
const connector = abcWaasConnector({ sdk });
await connector.connect();

TypeScript Types

import type {
  // Connector
  AbcWaasConnectorConfig,
  ConnectorState,

  // Provider
  AbcWaasProviderConfig,
  EIP1193Provider,
  RequestArguments,
  ProviderRpcError,
  ProviderEvents,
  ProviderEventName,

  // Transaction
  TransactionRequest,
  TypedData,
  TypedDataDomain,
  TypedDataField,

  // Utility
  Address,
  Hex,
} from '@abcwalletio/evm/wagmi';

useAbcWaas Hook

React 컴포넌트에서 ABC WaaS SDK 기능을 쉽게 사용할 수 있는 훅입니다. V2 / V3 인증 경로를 모두 지원합니다 — setAbcWaasConfig로 원하는 경로를 설정하세요.

import { setAbcWaasConfig } from '@abcwalletio/evm/wagmi';

// V2 — Secure Channel
setAbcWaasConfig({
  v2: { clientId: '...', clientSecret: '...' },
});

// V3 — TokenProvider 주입 (고객사 백엔드가 WaaS 토큰 발급)
setAbcWaasConfig({
  v3: {
    tokenProvider: async () => {
      const r = await fetch('/api/waas/token', { credentials: 'include' });
      const { access_token, expires_in } = await r.json();
      return { accessToken: access_token, expiresIn: expires_in };
    },
  },
});

V3 환경에서는 훅의 loginWithEmail/register/resetPassword 등 V2 전용 메서드를 호출할 필요가 없습니다. 고객사 자체 인증이 이미 수행되어 tokenProvider가 토큰을 공급하므로, generateMpcKey/recoverMpcKey/connectWallet/logout만 사용하면 됩니다.

기본 사용법

import { useAbcWaas } from '@abcwalletio/evm/wagmi';

function MyComponent() {
  const {
    sdk,
    isLoading,
    isAuthenticated,
    hasMpcKey,
    error,

    // 인증
    loginWithGoogle,
    loginWithEmail,
    logout,

    // 회원가입
    checkEmail,
    sendCode,
    verifyCode,
    register,

    // 비밀번호 재설정
    sendResetCode,
    resetPassword,

    // MPC 키
    generateMpcKey,
    recoverMpcKey,

    // 지갑 연결
    connectWallet,
    disconnectWallet,
  } = useAbcWaas();

  return (
    <div>
      {isLoading && <p>로딩 중...</p>}
      {isAuthenticated ? (
        <button onClick={logout}>로그아웃</button>
      ) : (
        <button onClick={() => loginWithEmail('[email protected]', 'password')}>
          로그인
        </button>
      )}
    </div>
  );
}

반환값

| 속성 | 타입 | 설명 | |------|------|------| | sdk | WaasSDK \| null | SDK 인스턴스 | | isLoading | boolean | 로딩 상태 | | isAuthenticated | boolean | 인증 여부 | | hasMpcKey | boolean | MPC 키 보유 여부 | | error | string \| null | 에러 메시지 | | authMode | AuthMode | 현재 인증 모드 ('idle' | 'login' | 'register' | 'reset-password') | | verificationStep | VerificationStep | 인증 단계 ('email' | 'code' | 'password' | 'complete') |

메서드

| 메서드 | 설명 | |--------|------| | initializeSDK() | SDK 초기화 | | loginWithGoogle(token, email) | Google 로그인 | | loginWithEmail(email, password) | 이메일 로그인 | | checkEmail(email) | 이메일 가용성 확인 | | sendCode(email) | 인증코드 발송 | | verifyCode(email, code) | 인증코드 검증 | | register(email, password, code) | 회원가입 | | sendResetCode(email) | 비밀번호 재설정 코드 발송 | | resetPassword(email, code, newPassword) | 비밀번호 재설정 | | generateMpcKey(password) | MPC 키 생성 | | recoverMpcKey(password) | MPC 키 복구 | | connectWallet() | 지갑 연결 | | disconnectWallet() | 지갑 연결 해제 | | logout() | 로그아웃 |

Store API

커넥터의 상태를 직접 관리하거나 구독할 수 있습니다.

import {
  getState,
  subscribe,
  updateState,
  initializeState,
  resetState,
  bindSdkEvents,
  // Modal 관련
  showModal,
  hideModal,
  setModalView,
  setModalLanguage,
  setModalTheme,
} from '@abcwalletio/evm/wagmi';

// 현재 상태 가져오기
const state = getState();
console.log(state.isAuthenticated, state.hasMpcKey);

// 상태 변경 구독
const unsubscribe = subscribe(() => {
  const newState = getState();
  console.log('State changed:', newState);
});

// 구독 해제
unsubscribe();

// Modal 테마/언어 변경
setModalTheme('dark');
setModalLanguage('en');

// Modal 표시/숨김
showModal('login');
hideModal();

AbcWaasState

interface AbcWaasState {
  sdk: WaasSDK | null;
  isAuthenticated: boolean;
  hasMpcKey: boolean;
  isLoading: boolean;
  error: string | null;
  modalView: ModalView;
  modalConfig: ModalConfig | null;
  modalResolve: (() => void) | null;
  pendingEmail: string | null;
  pendingVerificationCode: string | null;
}

Modal Components

로그인 Modal을 직접 마운트하거나 커스텀 UI에 활용할 수 있습니다.

Modal 마운트/언마운트

import { mountModal, unmountModal, isModalMounted } from '@abcwalletio/evm/wagmi';

// Modal을 DOM에 마운트 (앱 초기화 시)
mountModal();

// Modal 마운트 상태 확인
if (isModalMounted()) {
  console.log('Modal is ready');
}

// Modal 언마운트 (앱 종료 시)
unmountModal();

UI 컴포넌트

import {
  AbcWaasModal,    // 전체 Modal 컴포넌트
  ModalHeader,      // Modal 헤더
  LanguageToggle,   // 언어 전환 토글
  LoadingView,      // 로딩 화면
  ErrorView,        // 에러 표시 화면
} from '@abcwalletio/evm/wagmi';

스타일 유틸리티

import {
  getModalStyles,
  getButtonStyles,
  getInputStyles,
  getLabelStyles,
  getErrorStyles,
  getLinkStyles,
} from '@abcwalletio/evm/wagmi';

// 테마별 스타일 가져오기
const modalStyles = getModalStyles('dark');
const buttonStyles = getButtonStyles('primary', 'dark');

i18n (다국어 지원)

Modal 텍스트를 커스터마이징하거나 다국어 지원에 활용할 수 있습니다.

import { i18n } from '@abcwalletio/evm/wagmi';

// 번역 텍스트 가져오기
const loginTexts = i18n.login;    // 로그인 관련 텍스트
const registerTexts = i18n.register;  // 회원가입 관련 텍스트
const mpcTexts = i18n.mpc;        // MPC 키 설정 관련 텍스트
const errorTexts = i18n.error;    // 에러 메시지
const commonTexts = i18n.common;  // 공통 텍스트

// 번역 헬퍼 함수
const text = i18n.t(i18n.login, 'ko');  // 한국어 로그인 텍스트
const textEn = i18n.t(i18n.login, 'en'); // 영어 로그인 텍스트

지원 언어

• ko: 한국어 (기본값)
• en: 영어

Constants

import { CONNECTOR_ID, CONNECTOR_NAME, getAbcWaasSDK } from '@abcwalletio/evm/wagmi';

// Connector ID (Wagmi에서 커넥터 찾을 때 사용)
console.log(CONNECTOR_ID);  // 'abcWaas'

// Connector 표시 이름
console.log(CONNECTOR_NAME);  // 'ABC Waas'

// 현재 연결된 SDK 인스턴스 가져오기
const sdk = getAbcWaasSDK();

License

MIT — Copyright (c) 2026 Ahnlab Blockchain Company