TalkenKit

Enhanced wallet connection library with ABC WaaS integration

TalkenKit is a React library for wallet connection, forked from RainbowKit, with integrated ABC WaaS (Wallet-as-a-Service) support for embedded wallets via email and social login.

Features

• Embedded Wallets: Email and social login-based wallets (Google, Apple, Telegram, X)
• Traditional Wallets: 60+ wallet connectors (MetaMask, Phantom, WalletConnect, etc.)
• Multi-Chain Support: EVM and Solana chains via ABC WaaS
• MPC Security: No seed phrases, MPC-based key management
• Modern Stack: Built on Wagmi v2, Viem v2, React 19

Installation

npm install @talken/talkenkit wagmi viem @tanstack/react-query
# or
pnpm add @talken/talkenkit wagmi viem @tanstack/react-query

Quick Start

1. Wrap Your App

import '@talken/talkenkit/styles.css';
import { getDefaultConfig, TalkenKitProvider } from '@talken/talkenkit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism } from 'wagmi/chains';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const config = getDefaultConfig({
  appName: 'My App',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  chains: [mainnet, polygon, optimism],
});

const queryClient = new QueryClient();

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

2. Add Connect Button

import { ConnectButton } from '@talken/talkenkit';

export default function Header() {
  return <ConnectButton />;
}

ABC WaaS Integration

Environment Variables

TalkenKit can use environment variables for configuration convenience:

# ABC WaaS API endpoint
NEXT_PUBLIC_ABC_WAAS_URL=https://your-waas-url.com

# Talken API server
NEXT_PUBLIC_API_SERVER=https://your-api-server.com

Note: These environment variables are optional. You can pass configuration explicitly in function calls:

import { registerUser } from '@talken/talkenkit';

await registerUser(
  {
    username: email,
    password: encryptedPassword,
    secureChannel: secureChannelId,
    emailCode: otpCode,
    name: displayName,
  },
  {
    waasUrl: 'https://your-waas-url.com',
    environment: 'production',
  }
);

Authentication Services

TalkenKit provides ready-to-use authentication services:

Register New User

import { registerUser } from '@talken/talkenkit';

const result = await registerUser(
  {
    username: '[email protected]',
    password: encryptedPassword,
    secureChannel: secureChannelId,
    emailCode: '123456',
    name: 'User Name',
  },
  {
    waasUrl: 'https://your-waas-url.com',
    environment: 'production',
  }
);

Reset Password (Code 619 Flow)

import { resetPassword } from '@talken/talkenkit';

await resetPassword(
  {
    username: '[email protected]',
    password: encryptedPassword,
    secureChannel: secureChannelId,
    emailCode: '123456',
  },
  {
    waasUrl: 'https://your-waas-url.com',
    environment: 'production',
  }
);

Email Verification

import { emailCheck, sendOtpCode, verifyOtpCode } from '@talken/talkenkit';

// Check if email exists
const checkResult = await emailCheck('[email protected]', config);

// Send OTP
await sendOtpCode('[email protected]', config);

// Verify OTP
const verifyResult = await verifyOtpCode('[email protected]', '123456', config);

Encryption Utilities

TalkenKit provides secure encryption utilities for PIN-based authentication:

import { hashPin, encryptWithPin, decryptWithPin } from '@talken/talkenkit';

// Hash PIN
const pinHash = await hashPin('123456');

// Encrypt data with PIN
const salt = crypto.getRandomValues(new Uint8Array(32));
const encrypted = await encryptWithPin(sensitiveData, pinHash, salt);

// Decrypt data with PIN
const decrypted = await decryptWithPin(encrypted, pinHash, saltHex);

Security: Uses PBKDF2 (100,000 iterations) + AES-256-GCM encryption.

Authentication Provider

For managing authentication state across your app:

import { AbcAuthProvider, useAbcAuth } from '@talken/talkenkit';

function App() {
  return (
    <AbcAuthProvider>
      <YourApp />
    </AbcAuthProvider>
  );
}

function YourComponent() {
  const {
    isAuthenticated,
    user,
    tokens,
    wallets,
    login,
    logout,
    refreshTokens,
  } = useAbcAuth();

  // Use authentication state
}

Authentication Modal

Pre-built authentication modal with complete flow:

import { AbcAuthModal } from '@talken/talkenkit';

function LoginPage() {
  const [showAuth, setShowAuth] = useState(false);

  const handleAuthSuccess = (result) => {
    console.log('Authenticated:', result);
    // result contains: uid, email, pin, accessToken, refreshToken, evmWallet, solanaWallet
  };

  return (
    <>
      <button onClick={() => setShowAuth(true)}>Login</button>
      {showAuth && (
        <AbcAuthModal
          onClose={() => setShowAuth(false)}
          onSuccess={handleAuthSuccess}
          waasUrl={process.env.NEXT_PUBLIC_ABC_WAAS_URL}
          environment="production"
          evmChainId={1}
        />
      )}
    </>
  );
}

Configuration Patterns

Pattern 1: Environment Variables (Recommended for Next.js)

// .env.local
NEXT_PUBLIC_ABC_WAAS_URL=https://your-waas-url.com
NEXT_PUBLIC_API_SERVER=https://your-api-server.com

// Your code
await registerUser(params); // Uses environment variables automatically

Pattern 2: Explicit Configuration (Framework-Agnostic)

const config = {
  waasUrl: 'https://your-waas-url.com',
  environment: 'production',
};

await registerUser(params, config);
await resetPassword(params, config);
await sendOtpCode(email, config);

Pattern 3: Configuration Context (Advanced)

import { AbcAuthProvider } from '@talken/talkenkit';

<AbcAuthProvider
  config={{
    waasUrl: 'https://your-waas-url.com',
    apiServer: 'https://your-api-server.com',
  }}
>
  <YourApp />
</AbcAuthProvider>;

Multi-Chain Support

EVM Chains

import { useAccount, useSignMessage } from 'wagmi';

function EVMComponent() {
  const { address } = useAccount();
  const { signMessage } = useSignMessage();

  // Sign message (no PIN required)
  await signMessage({ message: 'Hello World' });

  // Send transaction (PIN required)
  // Handled automatically by TalkenKit
}

Solana

import { useSolSignMessage, useSolSignTransaction } from '@talken/talkenkit';

function SolanaComponent() {
  const { signMessage } = useSolSignMessage();
  const { signTransaction } = useSolSignTransaction();

  // Sign message
  const signature = await signMessage('Hello Solana');

  // Sign and send transaction (PIN required)
  const txHash = await signTransaction({
    toAddress: 'recipient-address',
    amount: 0.001, // SOL
  });
}

API Reference

Authentication Functions

• registerUser(params, config?) - Register new user with email + password
• registerSnsUser(params, config?) - Register user with OTP only
• resetPassword(params, config?) - Reset password for existing user
• emailCheck(email, config?) - Check if email exists
• sendOtpCode(email, config?) - Send OTP verification code
• verifyOtpCode(email, code, config?) - Verify OTP code
• loginWithPassword(params, apiServer?) - Login with email + password

Encryption Functions

• hashPin(pin) - SHA-256 hash of PIN
• encryptWithPin(data, hashedPin, salt) - Encrypt with PIN
• decryptWithPin(encrypted, hashedPin, salt) - Decrypt with PIN
• verifyPin(pin, hashedPin) - Verify PIN against hash

Components

• <AbcAuthModal /> - Complete authentication flow modal
• <AbcLoginModal /> - Simplified login modal
• <ConnectButton /> - RainbowKit connect button
• <WalletButton /> - Wallet-specific button

Hooks

• useAbcAuth() - Authentication state and methods
• useSolSignMessage() - Sign Solana messages
• useSolSignTransaction() - Sign and send Solana transactions

Documentation

• Quick Start Guide - Get started in 5 minutes
• ABC WaaS Integration - Complete technical documentation

Examples

See the examples directory for complete implementations:

• with-demo: Full-featured demo with ABC WaaS integration
• with-abc-wallet: ABC Wallet integration example
• with-next: Next.js App Router example
• with-vite: Vite + React example

Security

PIN Security

• PINs are hashed with SHA-256 before storage
• Sensitive data encrypted with PBKDF2 (100,000 iterations) + AES-256-GCM
• Plain text PINs cleared from memory immediately after use
• Encrypted with secure channel (ECDH) before API transmission

Token Management

• Access tokens: 10-minute expiry
• Refresh tokens: 60-minute expiry
• Automatic token refresh before expiration
• Encrypted storage with PIN-based encryption

Wallet Security

• MPC-based key management (no seed phrases)
• Wallets encrypted with PIN hash
• Secure channel for all API communications
• Compatible with Android app (same encryption pattern)

Migration from RainbowKit

100% API Compatible

TalkenKit is a drop-in replacement for RainbowKit with zero breaking changes:

- import '@rainbow-me/rainbowkit/styles.css';
- import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+ import '@talken/talkenkit/styles.css';
+ import { getDefaultConfig, TalkenKitProvider } from '@talken/talkenkit';

What's Preserved

✅ All Components: ConnectButton, WalletButton, RainbowKitProvider ✅ All Hooks: useAccountModal, useChainModal, useConnectModal ✅ All Themes: lightTheme, darkTheme, midnightTheme ✅ All 60+ Wallets: MetaMask, Coinbase, WalletConnect, Rainbow, etc. ✅ All Locales: 21 languages (en, ko, ja, zh, es, fr, etc.) ✅ All Types: Wallet, Theme, Chain, Authentication types

What's Added (Optional)

🎯 ABC WaaS Integration: Email/social login embedded wallets 🎯 Multi-Chain: Solana support via useSolSignMessage/Transaction 🎯 Zero-Config PIN: Automatic PIN modal for ABC Wallet transactions

Migration Checklist

1. ✅ Replace package: @rainbow-me/rainbowkit → @talken/talkenkit
2. ✅ Update imports: Change import paths only
3. ✅ (Optional) Rename provider: RainbowKitProvider → TalkenKitProvider
4. ✅ Test existing functionality: Should work without changes
5. ✅ (Optional) Add ABC Wallet for embedded wallet support

All RainbowKit APIs remain 100% compatible.

License

MIT

Links

• Examples
• RainbowKit Docs (API compatible)