TalkenKit

Enhanced wallet connection library with embedded wallet support

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

Features

• 🔐 Embedded Wallets - Email and social login (Google, Apple, Telegram, X)
• 🌈 Traditional Wallets - 60+ wallet connectors (MetaMask, WalletConnect, etc.)
• ⛓️ Multi-Chain - EVM and Solana chains with auto-reconnect support
• 🔑 MPC Security - No seed phrases, MPC-based key management
• 🎨 Customizable - Built on wagmi and viem with full theming support
• 🔄 Auto-Reconnect - External wallets automatically reconnect after page refresh

Quick Start

Create New App

Scaffold a new TalkenKit + wagmi + Next.js app:

npm create @talken/talkenkit@latest
# or
pnpm create @talken/talkenkit@latest
# or
yarn create @talken/talkenkit

Add to Existing App

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

Basic Usage

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

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

const queryClient = new QueryClient();

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

ABC WaaS Integration

Enable embedded wallets with email and social login:

import { abcWallet } from '@talken/talkenkit/wallets';

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

Environment Variables:

# Required — Talken API (proxies all WaaS calls)
NEXT_PUBLIC_TALKEN_API_URL=https://api.talken.io/api/v1

# Required — Environment (production | development)
NEXT_PUBLIC_ENVIRONMENT=production

# Optional — Firebase (for Google social login)
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Optional — Social OAuth (enable via NEXT_PUBLIC_*_OAUTH_ENABLED=true)
NEXT_PUBLIC_GOOGLE_OAUTH_ENABLED=true
NEXT_PUBLIC_APPLE_OAUTH_ENABLED=true
NEXT_PUBLIC_APPLE_OAUTH_CLIENT_ID=your_apple_client_id
NEXT_PUBLIC_KAKAO_OAUTH_ENABLED=true
NEXT_PUBLIC_KAKAO_JS_KEY=your_kakao_js_key
NEXT_PUBLIC_KAKAO_REST_API_KEY=your_kakao_rest_api_key

Note: NEXT_PUBLIC_ABC_WAAS_URL is no longer needed. All WaaS calls are proxied through NEXT_PUBLIC_TALKEN_API_URL (talken-api).

For detailed configuration options, see Configuration Guide.

Documentation

Quick Start:

• Package API Reference
• Configuration Guide

Technical:

• Architecture Documentation
• Development Guide

RainbowKit Compatibility:

• RainbowKit Documentation - API compatible

Examples

Interactive examples in the examples directory:

ABC WaaS:

• with-demo - Full-featured demo with ABC WaaS and multi-chain support
• with-abc-wallet - ABC Wallet integration example

Framework Examples:

• with-next - Next.js Pages Router
• with-next-app - Next.js App Router
• with-vite - Vite + React
• with-create-react-app - Create React App
• with-remix - Remix

Advanced:

• with-next-custom-button - Custom connect button
• with-next-mint-nft - NFT minting example
• with-next-siwe-next-auth - Sign-In with Ethereum (NextAuth)
• with-next-siwe-iron-session - Sign-In with Ethereum (Iron Session)

Running Examples

# Install dependencies
pnpm install

# Run an example
cd examples/with-demo
pnpm run dev

Demo will be available at http://localhost:3000

Development

Setup

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Build TalkenKit only
pnpm --filter @talken/talkenkit build

# Development mode
pnpm run dev

Project Structure

talken-kit/
├── packages/
│   ├── talkenkit/           # Main library
│   ├── talken-button/       # Standalone button
│   └── create-talkenkit/    # CLI scaffolding
│
├── examples/                # Example applications
│   ├── with-demo/          # ABC WaaS demo
│   ├── with-next/          # Next.js example
│   └── ...
│
└── docs/                   # Documentation
    ├── architecture.md
    ├── configuration.md
    └── solana.md

Key Features

Embedded Wallets (ABC WaaS)

• Email/Social login integration
• Multi-chain support (EVM + Solana)
• MPC-based key management
• PIN-based security
• No seed phrases required

Traditional Wallet Support

• 60+ wallet connectors
• WalletConnect v2
• EIP-6963 multi-injected provider support
• Automatic wallet detection

Multi-Chain Support

• EVM: Ethereum, Polygon, Optimism, Arbitrum, and more
• Solana: Mainnet and Devnet support
• Dual wallet generation
• Unified signing interface

Developer Experience

• RainbowKit API compatible
• TypeScript support
• React 19 ready
• Built on Wagmi v2 and Viem v2
• Vanilla Extract for type-safe styling

Migration from RainbowKit

TalkenKit is a drop-in replacement for RainbowKit:

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

Note: Both TalkenKitProvider and RainbowKitProvider work (they're the same component). Use TalkenKitProvider for TalkenKit branding, or keep RainbowKitProvider for RainbowKit compatibility.

See CLAUDE.md for detailed migration guide.

Technology Stack

• React 19
• TypeScript 5.5
• Wagmi 2.14
• Viem 2.21
• TanStack Query 5
• Vanilla Extract - Type-safe CSS-in-JS

Contributing

Please follow our contributing guidelines.

Security

For security best practices and implementation details, see:

• Security in Package README
• Architecture Security

License

Licensed under the MIT License, Copyright © 2022-present Rainbow.

Forked and enhanced by Talken.

See LICENSE for more information.

Links

• Documentation: docs/
• Package: @talken/talkenkit
• Examples: examples/
• RainbowKit: rainbowkit.com